2021-06-05 CSS语法规范

最新推荐文章于 2024-10-08 17:48:41 发布

青木kkq

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量101

点赞数

分类专栏：学习记录文章标签：前端 css

本文链接：https://blog.csdn.net/qq_36141958/article/details/117607502

版权

学习记录专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的各种选择器，包括标签选择器、类选择器、ID选择器和通配符选择器，并通过实例展示了它们在网页样式的应用。同时，文章探讨了CSS字体样式，包括字体家族、字体大小、字体粗细和字体风格，以及复合属性的使用，帮助读者深入理解CSS对网页文本的控制。

摘要由CSDN通过智能技术生成

css选择器

<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
    <style>
        /* 选择器 {样式} */
        /* 给谁改样式，{改成什么样式} */
        /* 标签选择器，可以快速修改同一类的样式，但不能单独修改样式 */
        p {
            color: red;
            font-size: 18px;
        }
        /* 类选择器，样式点定义，结构类(class)调用，一个或多个，开发最常用 */
        .red {
            background-color: red;
        }
        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
        /* 多类名复用 减少重复代码提升效率 */
        .box {
            width: 100px;
            height: 100px;
            font-size: 35px;
        }
        /* id选择器，样式#定义，结构id调用，只能调用一次，别人切勿使用 */
        #pink {
            color: pink;
        }
        /* 通配符选择器，* 定义，选择页面所有元素（标签） */
        * {
            padding: 20px;
        }
    </style>
</head>
<body>
    <p>有点意思</p>
    <div class="box red">这是红色</div>
    <div class="box green">这是绿色</div>
    <div class="box red">这是红色</div>
    <div id="pink">粉色</div>
</body>
</html>

css字体

<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
    <style>
        h2 {
            /* font-family 可以有多个字体，字体名称中有空格需要用引号把字体包起来，
            字体之间用英文逗号隔开，在浏览器中依次调用最先找到的字体 */
            font-family: "微软雅黑";
            font-size: 26px;
            font-weight: 400;
        }
        body {
            /* body 标签可以设置整个页面的属性，标题标签比较特殊，需要单独指定 */
            font-size: 20px;
        }
        .bold {
            /* font-weight 400默认粗细，700加粗 */
            font-weight: 700;
        }
        em {
            /* font-style 设置字体文本风格，normal默认值显示标准字体，italic显示斜体字 */
            font-style: normal;
        }
        div {
            /* 复合属性 即简写方式，可以节约代码，格式严格对照*/
            /* 格式 font: font-style font-weight font-size/line-height font-family ; */
            /* 不需要的属性可以省略，但是必须保留font-size和font-family属性，否则font属性无效 */
            font: italic 700 16px "Microsoft yahei";
        }
    </style>
</head>
<body>
    <h2>《增广贤文》</h2>
    <p class="bold">昔时贤文，</p>
    <p>诲汝谆谆，</p>
    <p>集韵增文，</p>
    <p>多见多闻。</p>
    <em>斜体文字</em>
    <div>三生三世十里桃花</div>
</body>
</html>