CSS的属性

CSS字体属性


cursor:pointer;  设置你的鼠标移动到此处时是一个小手的标志

u Font-size,设置字体尺寸;如:font-size:30px;

u Font-family,设置字体,如:font-family:”微软雅黑”;(注:多个字体用逗号隔开,如果字体有空格需要加引号)

u Font-weight,设置粗细;如:font-weight:bold;(常用bold -粗体,bolder-更粗,lighter-更细)

u Font-style,设置字体显示样式,如:font-style:italic; 设置为斜体

 

/*

   

    选择器{属性名:属性值

    font : font-style || font-weight || font-size || font-family

 

*/

p {

    /*

    color: red;       设置字体的颜色

    font-size: 40px;  设置字体的尺寸

    font-family:微软雅黑, 宋体, sans-serif;

    设置字体的尺寸   font-family:arial,'微软雅黑', 'Microsoft Yahei', 'Hiragino Sans GB',  

    font-weight: lighter; 设置字体粗细,属性值: bold 粗体 (常用的),bolder 更粗, lighter更细

    font-style:italic;  设置字体样式*/

   

    font: italic bold 30px "微软雅黑";

}

 

u Color,设置字体颜色;如:color:red;

 

2.  文本属性

u Text-align,文本居中,如:text-align:center;

u Text-indent, 文本首行缩进,如:text-indent: 30px;

 

3.  背景属性

u background,如:background: red  url(./img/background.jpg)  repeat-x ;

n  背景简写

n  background: 颜色 图片地址 平铺方式 定位

u Background-color,设置背景颜色,如:background-color: red;

u Background-image,设置背景图片,如:background-image:url(图片地址);

u Background-repeat,设置背景平铺方式,如:background-repeat:repeat-y;

n  默认: repeat

n  Repeat-y  图片沿着Y轴平铺

n  Repeat-x  图片沿着x轴平铺

n  No-repeat  不平铺

u Background-position,设置图片中间点的距离(默认是左上角),如:background-position:0px 0px;(默认)

n  background-position:0px 0px; 第一个0px指定是x轴坐标,0px指定是y轴的坐标

n  图片从中心点向上移动10px,写:-10px, 从中心点向左移动10px,写:-10px

n  简写

 

 

<title>无标题文档</title>
<style>
    div { 
        /*
            background-color: red;
            background-image:url(./img/background.jpg);
            background-repeat:repeat-y; 默认平铺repeat  不平不no-repeat , repeat-y  y轴平铺,  repeat-x x轴平铺 
            
            
            background: 颜色 图片地址 平铺方式 定位
            background: red  url(./img/background.jpg)  repeat-x ;
            
            background:url(./img/background.jpg) no-repeat;
        */
        width: 155px;
        height: 221px;
        /*background-color: red;    */    
        background-image:url(./img/pic.jpg);
        background-repeat:no-repeat;
        background-position: 33px 0px;
        
    }
</style>
</head>

<body>
    <div>background</div>

 

尺寸属性

u width,设置宽度;

u Height,设置高度;

 

 CSS优点

1使网页代码更少,网页下载更快

2.实现了内容与表现的分离,使网站维护更快捷

3. 使网页与浏览器的兼容性更好

 

posted @ 2018-05-22 21:56  可爱的红领巾  阅读(219)  评论(0编辑  收藏  举报