CSS的常用属性（一）

文本属性

font-size: 16px 文字大小

font-weight: 700 文字粗细 值从100-900 (值为700看上去加粗了） 不推荐使用font-weight: bold

font-family: microsoft yahei 字体(可以用中文如：宋体，或者英文：如simsun，或用unicode编码：如\5B8B\4F53)

font-style: normal 文字风格(如：normal是默认， italic：斜体)

line-height: 20px 行高

文本属性连写：font: font-style font-weight font-size/line-height font-family (最好按照顺序)

注意：文本属性连写时文字大小和字体为必写项，其他可以不写

line-height

行高： 是基线和基线之间的距离(自行百度什么是基线)

注意： 一行文字的行高和其设置的height属性高度一致时，文字垂直居中

行高的单位有以下几个(推荐使用px为单位)：

行高单位	文字大小	行高值
px(如 20px)	20px	20px
em(如 2em)	20px	40px
%(如 150%)	20px	30px
数字(如 2)	20px	40px

 

 

 

 

 

 

 

总结： 单位除了px之外，其余的都是与文字大小的乘积

 

行高单位	父元素文字大小	子元素文字大小	行高值
px(如 10px)	20px	30px	10px
em(如 2em)	20px	30px	40px
%(如 150%)	20px	40px	30px
数字(如 2)	20px	30px	60px

 

 

 

 

 

 

 

 

总结： 不带单位时，行高是与子元素大小相乘；em和%是行高是与父元素大小相乘；以px为单位，就是直接定义行高值(所以推荐使用px为单位)

 

文本修饰

text-decoration: none(默认，a标签使用这个能除去下划线) /  underline(下划线) /  line-through(删除线)

 

背景属性

background-color: #000 背景颜色

background-image: url(路径) 背景图片

background-repeat: repeat 背景平铺   repeat(背景图像将在垂直方向和水平方向重复) /  no-repeat(不平铺) /  repeat-x(沿x轴) /  repeat-y(沿y轴)

background-position: left top 背景定位

注意： 方位值只写一个时，另一个值默认居中；用数字(或百分号%)表示方位时，第一个值代表水平方向，第二个值代表垂直方向

background-attachment:  scroll 背景是否滚动  scroll(默认 滚动) /  fixed(固定)

背景属性连写： background: #fff url(路径) no-repeat 30px 40px fixed

注意： 连写没有顺序要求，但url为必写项

 

链接伪类

a:link { 属性：值;}  链接的默认状态

a:hover { 属性：值; }  鼠标放在链接上显示的状态

a:visited { 属性：值; }  链接访问之后的状态

a:active { 属性：值; }  链接激活的状态(鼠标点击不松)

补充： :focus选择器(用于选取获得焦点的元素)  如 标签:focus { 属性：值; }

 

补充：CSS三大特性

层叠性： 当多个样式作用于同一个标签，样式发生冲突时，总是执行后面的代码(和标签调用选择器的顺序没有关系)

继承性： 文字的所有属性都可以被继承

特殊情况： h系列不能继承文字大小； a标签不能继承文字颜色

优先级： 默认样式<标签样式<类选择器<ID选择器<行内样式< !important

注意： 继承的权重为0，与默认样式一样；权重可以叠加

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有