200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > CSS快速学习2:选择符权重和字体类属性

CSS快速学习2:选择符权重和字体类属性

时间:2022-08-13 14:24:37

相关推荐

CSS快速学习2:选择符权重和字体类属性

选择符的权重:

CSS中用四位数字表示权重。

类型选择符的权重为0001

class选择符的权重为0010

id选择符的权重为0100

子选择符的权重为0000

属性选择符的权重为0010

伪类选择符的权重为0010

伪元素选择符的权重为0010

包含选择符的权重:包含的选择符权重值之和

第一等:代表内联样式,如: style=””,权值为1000。

第二等:代表ID选择器,如:#content,权值为0100。

第三等:代表类,伪类和属性选择器,如.content,权值为0010。

第四等:代表类型选择器,如div p,权值为0001。

当不同选择符的样式设置有冲突的时候,高权重选择符的样式会覆盖低权重选择符的样式。

相同权重的选择符,样式遵循就近原则:哪个选择符最后定义,就采用哪个选择符样式。(注意:是样式中定义该选择符的先后,而不是html中使用先后)

字体类属性:

1.font-family: 字体类型;

{font-family:字体1,字体2,字体3;}

例:font-family:”微软雅黑”,”宋体”;

说明:

浏览器首先会寻找字体1、如存在就使用改字体来显示内容,如在字体1不存在的情况下,则会寻找字体2,如字体2也不存在,按字体3显示内容,如果字体3 也不存在;则按系统默认字体显示。

现在网页默认字体大小是16px,常用的是14px和12px。

当字体是中文字体时,需加双引号;

当英文字体中有空格时,需加双引号如(“Times New Roman”);

当英文字体只有一个单词组成是不加双引号;如:(Arial)。

2.文本大小:{font-size:数值;}

例:div{font-size:12px;}

说明:

1)属性值为数值型时,必须给属性值加单位,属性值为0时除外。

2)单位还可以是pt(磅),在印刷领域广泛使用9pt=12px;

3)为了减小系统间的字体显示差异,IE Netscape Mozilla的浏览器制作商于1999年召开会议,共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下,1em=16px,0.75em=12px;

使用绝对大小关键字

xx-small =9px

x-small =11px

small =13px

medium =16px

large =19px

x-large =23px

xx-large =27px

3.文本颜色:{color:颜色值;}

例:div{color:red ;}

说明:

(1)用十六进制表示颜色值:

0 1 2 3 4 5 6 7 8 9 A B C D E F

颜色模式:光色模式 FF 00 00

例如:color:#F00

(2)RGB : color:rgb(0,204,204);

(3)rgba(00,255,255,0.6 ) css3新增属性,rgb三原色,a表示透明度 color:rgba(0,204,204,0.6);

(4)用颜色名表示:(16种)

black 纯黑 silver 浅灰 navy 深蓝

blue 浅蓝 green 深绿 lime 浅绿

teal 靛青 aqua 天蓝 maroon 深红

red 红色 purple 深紫 fuchsia 品红

olive 褐黄 yellow 明黄 gray 深灰

white 亮白

4.加粗:

{ font-weight:bolder/bold/normal/100—900;}bolder(更粗的)/bold(加粗)/normal(常规)

5.字体倾斜:font-style:italic(倾斜度小)/oblique(倾斜度大)/normal(取消倾斜,常规显示);

6.文本是否大小写 {font-variant:normal(正常的字体)/small-caps(小型的大写字母字体)}

复合式写法:

font:style variant weight size family;

总体设置字体,按以上顺序;size和family不可和其他属性位置互换;

如: font:normal normal bold 24px “黑体”;

文字属性简写:font:12px/1.5em “宋体”;

Font:font-size/line-height font-family;

简写时 , font-size和line-height只能通过斜杠/组成一个值,不能分开写。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。