CSS常用属性

文本属性　　

一、设置文字大小

　　属性：font-size

　　文字的单位：px ：像素

　　　　　　　　pt：磅，一般用在印刷领域

　　　　　　　　em：相对大小，相对于父元素的字体大小。

　　　　　　　　　　em的应用：由于em的字体大小是相对于父元素而言的，所以em可以用来设置首行缩进等，在父元素大小进行改变时，段落仍然缩进2个字符。

　　　

　　说明：1、浏览器默认的文字大小是 16px；

　　　　　2、文字的大小一般设置为偶数，且尽量不要小于 12px；

　　　　    3、当我们在设计图上获取文字大小时，直接量取文字的行高；

　　　　　

二、设置文字颜色

　　属性：color：；

　　属性值：1、颜色的英文单词：red、pink、yellow....

　　　　　　 2、十六进制颜色值：

　　　　　　　　#三位或者六位十六进制数值

　　　　　　 3、rgb(数字，数字，数字)      

　　　　　　　　数字大小在 0~255 之间

　　　　　　4、rgba（数字，数字，数字，数字）

　　　　　　　　最后一位数字代表透明度，值在 0~1 之间

 

三、设置文字粗细

　　属性：font-weight:;

　　属性值：bold      加粗

　　　　　　bolder    更加粗（系统显示的不明显）

　　　　　　normal    恢复常规文本

　　　　　　或者用数字表示，分成9个等级：

　　　　　　　　100、200、300、。。、900

　　　　　　　　100-500：常规状态

　　　　　　　　 600-900：加粗状态

 

四、设置文字字体

　　属性：font-family:;

　　属性值：填写字体名称

　　注意：1、为了统一文字间的差异，系统默认字体为 微软雅黑；英文默认字体：Arial. 

　　　　　2、多个属性值的时候用逗号隔开

　　　　　3、系统能支持的字体：web安全字体。

　　　　　4、font-family属性值是中文时需要放在引号里，英文字体是多个单词时也需要放在引号里。一个英文字体单词就不需要放在引号里。

　　　　　5、如果存在中英文字体：先写英文再写中文字体。

 

五、设置文本倾斜

　　属性：font-style：；

　　属性值：normal  恢复常规文本

　　　　　　italic      文本倾斜

　　　　　　oblique 文本倾斜

　　说明：文本倾斜，二者都行。

 

六、设置文本行高

　　属性：line-height ：；

　　说明：1、在设计图上获取行高（第一行的顶端到第二行的顶端）；

　　　　　2、当单行文本的line-height值 和 容器 的高保持一致，可使文本在容器里上下居中；

　　　　　3、单行文本时可以将行高设置成字体的大小。

 

七、设置文本对齐方式

　　属性：text-align：；

　　属性值：left

　　　　　　center

　　　　　　right

　　　　　　justify   两端对齐

八、文本修饰属性

　　属性：text-decoration：；

　　属性值：none    去掉下划线

　　　　　　underline   下划线

　　　　　　overline     上划线

　　　　　　line-through  删除线

 

九、首行缩进

　　属性：text-indent:；

　　说明：text-indent能接受负值（悬挂缩进）

 

十、英文字母大小写

　　属性：text-transform：；

　　属性值：capitalize  每个单词的首字母大写

　　　　　　Uppercase   全部大写

　　　　　　Lowercase   全部小写

 

列表属性

一、控制列表符号：

　　属性：list-style-type：；

       属性值： circle、square。。。。

                    

　　list-style-type：none;     清除列表符号。

 

二、将图像设置为列表标志：

　　属性：list-style-image:;

　　属性值：url()

　　

三、控制列表符号的位置：

　　属性：list-style-position:；

　　属性值：

               　　 inside

               　　 outside

四、清除列表符号：

　　list-style:none;

 

背景属性

一、背景颜色

　　属性：background-color

　　属性值：颜色的表示同字体颜色的几种表示

 

二、背景图

　　属性：background-image

　　属性值：url（'图片的路径'）

　　说明：1、背景图是不占据空间的，跟随容器大小发生变化。

　　　　　2、当容器大小大于背景图大小，默认平铺状态。

　　　　　3、当容器大小等于背景图大小，只能显示一张。

　　　　　4、当容器大小小于背景图大小，只能显示容器的区域

 

三、背景图的显示状态

　　属性：background-repeat：

　　属性值：no-repeat    不平铺

　　　　　　repeat　　   平铺

                     repeat-x        横向平铺

                     repeat-y　　 纵向平铺

 

四、背景图片的位置

　　属性：background-position:

　　属性值：第一个值 左右距离       第二个值 上下距离

　　说明：1、正值往下往右，负值往上往左

　　　　　2、可以直接说明方位值：left、right、center、top、bottom

 

五、简写形式：

　　background：背景颜色 url(背景图路径) no-repeat center;

　　说明：顺序无要求。

 

边框属性

 

一、 边框宽度：

　　属性：border-width:

二、边框颜色：

　　属性：border-color:

三、边框样式：

　　属性：border-style:

　　属性值：solid　　　　实线

　　　　　　dashed　　  虚线

　　　　　　dotted　　   点状线

　　　　　　double　　   双线

四、简写形式

　　border:边框宽度 边框风格 边框颜色;

 

注意：可单独设置一方向边框：

　　　　　border-bottom:;底边框

　　　　　border-left:;左边框

　　　　　border-right:;右边框

　　　　　border-top:;上边框