元素的优先级

2018-10-17  本文已影响0人  岁月悄然飞逝徒留回忆_54a5

权重的计算:

內联>id>类,伪类>元素>通配符>继承的样式
不同的选择器有不同的权重值:
内联样式:权重是 1000
id选择器:权重是 100
类、属性、伪类选择器:权重是 10
元素选择器:权重是 1
通配符:权重是 0
继承的样式,没有优先级
当选择器中包含多种选择器时,需要将多种选择器的优先级相加,然后再比较
但是注意,选择器优先级计算不会超过他的最大的数量级
如果选择器的优先级一样,则使用靠后的样式
并集选择器的优先级是单独计算的
计算权重需要将一个样式的全部选择器相加,比如上边的body h1的权重是20,h1的权重是10,所以第一个选择器设置的样 式会优先显示。
<em>和<strong>
em即“emphasize”。<em>表示强调,<strong>表示更强烈的强调。

<em>默认样式是斜体,<strong>默认样式是粗体。

i></i>会使文本变成斜体 <b></b>会使文本变成粗体

<cite></cite> 通常用来描述带《》的文本
<code></code>与<pre></pre>通常用来描述一段代码
<small></small>表示细则一类的旁注 例如:版权问题等
有序列表:ul li

显示效果:小点

<ul type= 'xx'> 可以更改显示效果

无序列表 ol li

显示效果:1234...n

支持 1 a A i I

定义列表 :dl dt(被定义的内容) dd(对定义内容的描述)

对词汇定义的东西

通常用在下拉菜单

三种列表都可以相互嵌套

文本格式化

em根据屏幕字号走

rgb<颜色>

十六进制颜色 00-ff

ff0000

字体样式

默认字号16

font-family : 字体(可以指定多个字体,用逗号隔开,优先使用前面的字体,中间有空格的字体用引号引上)

px;font-family 写在px; 后

font-style:样式italic 斜体

font- weight : bold 加粗 nomal默认

font-variant:small-caps; 小型大写字母

font:所有样式 字号和字体必须写 字体最后 字号在倒数第二

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
    今天天气<em>真凉快!</em>
</p>
<p>
    <strong>
        注意:上课认真听讲
    </strong>
</p>
<p>
    <i>
        我是i标签
    </i>
</p>
<p>
    <b>
        我是b标签 
    </b>
</p>
<p>
    <small>
        我是small
    </small>
</p>
<p>
    <big>
        我是big
    </big>
</p>
<p>
    <cite>
        《我不是药神》很火
    </cite>
</p>
<p>
    子曰:<q>学而时习之,不亦说乎!</q>
</p>
<div>
    <blockquote>有朋子远方来</blockquote>
</div>
<p>2<sup>2</sup></p>
<p>杨幂<sup><a href="">[3]</a></sup></p>
<p>
    H<sub>2</sub>O
</p>
<p>
    <del>4000</del><br>
    999<br>
</p>
    你真<ins>漂亮啊</ins>
    
</p>
<pre>
    while True:
        print("hahha")
</pre>>
<code>
    while True:
        print("hahha")
</code>>
    

</body>

</html>
image.png
上一篇下一篇

猜你喜欢

热点阅读