从零开始的Web前端高级开发学习4 / CSS入门2 / CSS文本样式 & CSS选择器 & 选择器优先级

本文链接：https://blog.csdn.net/Satellite_Q/article/details/124684218

CSS入门2

前言
- 文本样式
- 选择器 & 选择器优先级

前言

本篇为CSS入门第二篇，承接上文，我们将在这节了解到 CSS 常见样式中的文本样式，选择器，以及选择器的优先级。
CSS基础思维导图

文本样式

常见的文本样式有字体颜色，字体大小，字体样式，字体粗细，对齐方式，行高，首行缩进，字体间距，文本装饰线，文本大小写字母，文本排版方式以及空白符处理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本</title>
    <style>
        /* html {
            font-size: 10px;
        }
        body {
            font-size: 2em;
        }
        div {
            font-size: .5em;
        } */
        p {
            color: skyblue;
            background-color: pink;
            height: 60px;
            font-size: 30px;
            /* 一般浏览器默认字体大小16px，最小字体大小14px */
            /* line-height: 60px; */
            /* 标签的节点的高度不是由文本撑开的，而是由行高来决定的 */
            /* font-size: 4em; */
            font-family: "Microsoft Yahei","微软雅黑";
            text-align: left;
            /* 文本对齐方式 */
            text-indent: 2em;
            /* 首行缩进 */
            letter-spacing: 10px;
            /* 字体间距 */
            word-spacing: 100px;
            /* 单词间距 */
            text-transform: capitalize;
            /* uppercase(全部大写)lowercase(全部小写)capitalize(首字母大写) */
        }
        a {
            font-size: 30px;
            text-decoration: none;
            /* 文本装饰线 */
            /* none(无),underline(下划线),overline(上划线),line-through(删除线) */
        }
    </style>
</head>
<body>
    <p>大郎，该吃药了</p>
    <p>welcome to CSDN</p>
    <a href="http://ac.csdn.net" target="_blank">CSDN</a>

    <!-- <div>
        <p>C1</p>
    </div> -->
</body>
</html>

<!-- em是相对单位 -->
<!-- 1em = 父级标签的字体大小 -->

<!-- 当 line-height的值等于height的值，文本垂直居中 -->

选择器 & 选择器优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用的选择器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            /* 列表样式 */
        }
        h1, p, span{
            /* 群组选择器 */
            color: blueviolet;
        }
        p {
            color: red;
        }
        .q {
            /* class选择器 */
            color: green;
        }
        .big {
            font-size: 80px;
            color: blue;
        }
        #small {
            font-size: 40px;
        }
        div p {
            /* 后代选择器 */
            color: aqua;
        }
        /* div li p {
            color: brown;
        } */
        div>p {
            /* 子代：直接子集 */
            color: pink;
        }
        [class] {
             /* 属性选择器 */
            /* 哪一个标签有class */
            color: skyblue;
        }
        [class="yes"] {
            color: yellow;
        }
    </style>
</head>
<body>
    <!-- <p>123</p>
    <p class="q big">csdn</p>
    <ul>
        <li>看山是山，看水是水</li>
        <li class="q" id="small">看山不是山，看水不是水</li>
        <li>看山还是山，看水还是水</li>
    </ul> -->

    <p>CSDN</p>
    
    <h1>welcome to CSDN</h1>
    <span>选项1</span>
    <span class="ok">选项2</span>
    <span class="yes">选项3</span>
    <span>选项4</span>

    <div>
        <p>C1认证</p>
        <ul>
            <li>
                <p>网络</p>
            </li>
            <li>
                <p>进制</p>
            </li>
            <li>
                <p>web</p>
            </li>
        </ul>
    </div>
    <div>
        <p>C4认证</p>
        <img src="" alt="">
    </div>
    <div>
        <p>C5认证</p>
        <img src="" alt="">
    </div>
</body>
</html>

<!-- 同一个类名可以给多个标签 -->
<!-- 一个标签可以使用多个类名，需要用空格隔开-->

<!-- 一个id名，在同一个html文件中只能出现一次 -->

<!-- 优先级 id(100) > class(10) > tag(1) ()是权重 -->
<!-- 内联样式(1000) -->