课后小结。

最新推荐文章于 2024-07-24 10:19:09 发布

chenguan66

最新推荐文章于 2024-07-24 10:19:09 发布

阅读量38

点赞数

文章标签：数学建模

本文链接：https://blog.csdn.net/chenguan66/article/details/131214029

版权

3.2设置字体粗细 font-weight

3.3设置文字是否倾斜 font-style

3.4设置文字种类 font-family

一、属性选择器

1.1元素1[属性1]

选择带有属性1的元素1

1.2元素1[属性1=属性值1]

选择带有属性1并属性值为属性值1的元素1

1.3元素1[属性1*=字符]

选择带有属性1并属性值包含字符的元素1

1.4元素1[属性1$=字符]

选择带有属性1并属性值以该字符结尾的元素1

1.5元素1[属性1^=字符]

选择带有属性1并属性值以该字符开头的元素1

 <style>
        a[class] {
            color: red;
        }

        a[class=two] {
            color: yellow;
        }

        /* class中包含e的 */
        a[class*=e] {
            color: blue;
        }

        /* 以e为结尾的 */
        a[class$=e] {
            text-decoration: none;
        }

        /* 以t开头的 */
        a[class^=t] {
            font-size: 40px;
        }

        .five::first-letter {
            font-size: 20px;
            font-weight: 700;
            text-shadow: 2px 2px 2px red;
        }
        span.five{
            color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li><a href="#" class="one">Lorem1 </a></li>
        <li><a href="#" class="two">Lorem2</a> </li>
        <li><a href="#" class="three">Lorem3 </a></li>
        <li><a href="#" class="four">Lorem4</a> </li>
    </ul>
    <a href="#" class="five">人未厄</a>
    <p class="five">人未厄</p>
    <span class="five">人未厄</span>
    <h2 class="five">人未厄</h2>
</body>

二、复合选择器

先找级别最高的选择器个数，如果数量相同，找下一个级别由低到高

继承没有优先级

*、兄弟、相邻等 0,0,0,0

标签选择器 0,0,0,1

类别、属性选择器 0,0,1,0

ID选择器 0,1,0,0

内联样式 1,0,0,0

!important 1,0,0,0,0

组合选择器各类相加，但不进位

选择器优先级：!important>内联选择器>ID选择器>类别选择器>属性选择器>伪类>元素选择器>通配符选择器>继承选择器

<style>
        * {
            list-style: none;
            text-decoration: none;
        }

        ul>li>a {
            color: aqua;
        }

        .one a {
            color: red;
        }

        .one>li>a {
            color: yellow;
        }

        #one a {
            color: pink;
        }

        ul,
        ol {
            font-size: larger;
        }
    </style>
</head>

<body>

    <ul class="one" id="one">
        <li class="two"><a href="#">loerm1</a></li>
        <li class="two"><a href="#">loerm2</a></li>
        <li class="two"><a href="#">loerm3</a></li>
        <li class="two"><a href="#">loerm4</a></li>
        <li class="two"><a href="#">loerm5</a></li>
    </ul>


    <ol>
        <li><a href="#">loerm1</a></li>
        <li><a href="#">loerm2</a></li>
        <li><a href="#">loerm3</a></li>
        <li><a href="#">loerm4</a></li>
        <li><a href="#">loerm5</a></li>
    </ol>
</body>

三、字体样式

3.1字体大小 font-size

单位：pc端常用px

移动端常用rem 代表html标签的字体大小 (r:root)

em：等于元素字体大小

3.2设置字体粗细 font-weight

可选值：100~900整百数

100~300（细,lighter）

400~500（正常,noraml）

600~900（加粗,bold）

3.3设置文字是否倾斜 font-style

可选值： normal 正常

italic 斜体

oblique 倾斜

3.4设置文字种类 font-family

多个字体种类要用,隔开，最后要有五大字体中任何一个

如'Courier New', Courier, monospace

   <style>
        p {
            font-size: 20px;
            font-weight: 800;
            font-style: italic;
            font-family: cursive;
        }

        span {
            font-size: 20px;
            font-weight: 700;
        }

        i,
        em {
            font-style: normal;
        }
    </style>
</head>

<body>
    <p>都生也叩反，五。</p>
    <span>真友苟竟。</span>
    <i>火事交人。</i>
    <em>的非向为。</em>
</body>

chenguan66

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
课后小结。

important>内联选择器>ID选择器>类别选择器>属性选择器>伪类>元素选择器>通配符选择器>继承选择器。400~500（正常,noraml）如'Courier New', Courier, monospace。选择带有属性1并属性值以该字符结尾的元素1。选择带有属性1并属性值以该字符开头的元素1。oblique 倾斜。选择带有属性1并属性值为属性值1的元素1。选择带有属性1并属性值包含字符的元素1。选择带有属性1的元素1。*、兄弟、相邻等 0,0,0,0。
复制链接

扫一扫