当前位置：首页 > news >正文

CSS—引入方式、选择器、复合选择器、文字控制属性、CSS特性

news 来源：原创 2025/5/19 2:54:50

CSS

1.引入方式

2.选择器

3.复合选择器

4.文字控制属性

5.CSS特性

CSS

层叠样式表，是一种样式表语言，用来描述HTML文档的呈现

书写时一般按照顺序：盒子模型属性—>文字样式—>圆角、阴影等修饰属性

1.引入方式

引入方式	方法	特点
行内引入	直接写在标签的style属性内	一般配合JavaScript使用，难以维护
内部引入	在html代码中style标签下定义选择器	只对当前的网页有效，难以维护
链接方式	在html代码中head标签内使用link标签引入	CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。先加载css，再显示HTML
导入方式	在html代码中style标签内使用@import引入	先显示HTML，再加载css。CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入。

优先级：

【行内引入>链接方式和style标签谁在下面，谁的优先级高>内部引入>导入方式】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>notes</title>
    <style>
        /* css的内部引用，在style标签内引用 */
        /* 定义类选择器 */
        .red {
            color: red;
            line-height: 20px;
            height: 20px;
        }
        .size {
            size: 20px;
        }
        /* 定义id选择器 */
        #blue {
            color: blue;
            font-size: 20px;
            line-height: 40px;
        }
        /* 通配符选择器 */
        * {
            color: pink;
        }
        /* 盒子模型 */
        .box {
            background-color: peru;
            /* 添加内减属性，避免撑大盒子 */
            box-sizing: border-box;
            width: 100px;
            height: 60px;
            padding: 10px 20px;
            border-top: 5px solid #000;
            border-right: 2px solid #000;
            /* 版心居中，必须设置好盒子宽度 */
            margin: 0 auto;
            border-radius: 50%;
        }
        .box1 {
            background-color: yellow;
            line-height: 100px;
            /* 透明度设置 */
            opacity: 0.5;
        }
        .box1:hover {
            background-color: aqua;
        }
    </style>
</head>
<body>
    <h1>h1</h1>
    <!-- 类选择器的使用 -->
    <strong><h2 class="red size">h2</h2></strong>
    <p class="red">p 类选择器根据类名来选择前面以”.”来标志
        <span>子级1</span>
        <span>子级2</span>
    </p>
    <br>
    <hr>
     <div id="blue">div要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器.HTML页面中的元素就是通过CSS选择器进行控制的。
        类选择器根据类名来选择</div>
    <br>

    <div class="box"></div>
    <span class="box1">行内元素</span>
    <br>
     <span>span</span>
     <br>
     <div>la &nbsp;&nbsp;la  </div>

     <!-- css的外部引用，用link标签引入 -->
      <link rel="stylesheet" href="">
      <!-- css的行内引用, 直接写在标签的style属性内,配合JavaScript使用 -->
       <div style="color: blue; font-size: 20px;">div标签css行内引用</div>
    
</body>
</html>

2.选择器

选择器	特点
标签选择器	使用标签名作为选择器，选中同名标签设置相同的样式
类选择器	查找标签，差异化设置标签的显示效果，一个类选择器可以定义多个标签，一个标签允许加多个class属性。多个类属性可用`-`隔开，如：`news-td`。
id选择器	查找标签，差异化设置标签的显示效果，一般与JS配合使用，很少使用CSS样式。同一个id选择器在一个页面只能使用一次。
通配符选择器	查找页面所有标签，设置相同样式，注意不需要调用，浏览器自动查找页面所有标签，设置相同的格式。在制作网页的初期，清除标签默认样式，便于后续个性化设置。
结构伪类选择器	根据元素的结构关系，差异化设置标签属性。`:nth-child(公式)`可以根据公式选择对应标签的属性
伪元素选择器	创建虚拟元素，用来摆放装饰性内容

:nth-child(公式)可以根据公式选择对应标签的属性

3.复合选择器

css选择器总结大全：CSS 选择器参考手册

包括孙子，重孙子等级别

建议逗号隔开后换行，书写格式更规范

任何标签都可以设置鼠标悬停状态

4.文字控制属性

描述	属性
字体大小	font-size
字体粗细	font-weight
字体倾斜	font-style
行高	line-height
字体族	font-family
字体复合属性	font
文本缩进	text-indent
文本对齐	text-align
修饰线	text-decoration
颜色	color