美文网首页
元素的优先级

元素的优先级

作者: 岁月悄然飞逝徒留回忆_54a5 | 来源:发表于2018-10-17 18:48 被阅读0次

    权重的计算:

    內联>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

    相关文章

      网友评论

          本文标题:元素的优先级

          本文链接:https://www.haomeiwen.com/subject/htnrzftx.html