CSS的常用属性(一)

发布日期:2018-02-05    浏览次数:597

文本属性

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,与默认样式一样;权重可以叠加

 

本文网址:https://www.wyxxw.cn/blog-detail-1-3-19.html

返回列表

非特殊说明,本文版权归原作者所有,转载请注明出处

提示:本站所有资源仅供学习与参考,请勿用于商业用途。图片来自互联网~如侵犯您的权益,请联系QQ:1067507709.

提示:转载请注明来自:http://www.cnblogs.com/yushangzuiyue/p/8341939.html 。 转载人:momo