【前端CSS】_通配符选择器改什么-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_65727637/article/details/137461559

本文详细介绍了CSS的选择器（包括标签、类、id和通配符），以及字体属性（如font-family、font-size、font-weight等）和文本属性（如颜色、对齐、装饰、缩进和行间距）。此外，还讲解了CSS的三种引入方式：行内样式、内部样式和外部样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS选择器

选择器分为：标签选择器、类选择器、id选择器、通配符选择器。
选择器在head中的<style></style>中书写。

1.标签选择器

选择器名为标签名，修改所有该标签内的样式
格式：标签名{属性1：属性值；属性2：属性值}

<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>

<body>
    <p>标签选择器修改样式</p>
    <div>其他标签不受影响</div>
</body>

2.类选择器

选择器名自定义。
格式：.选择器名{属性1：属性值；属性2：属性值}，引用时class="选择器名"。

<head>
    <style>
        .pink {
            color: pink;
        }
    </style>
</head>


<body>
   <div class="pink">类选择器修改样式</div>
</body>

若引用多个类名，之间用空格隔开。

<head>
    <style>
        .green {
            color: green;
        }

        .font35 {
            font-size: 35px;
        }
    </style>
</head>

<body>
    <div class="green font35">多类名修改样式</div>
</body>

3.id选择器

id选择器是一次性的，只能被引用一次。
用于页面唯一性的元素，多搭配JavaScript使用。
格式：#选择器名{属性1：属性值；属性2：属性值}，引用时id="选择器名"。

<head>
    <style>
        #blue {
            color: blue;
        }
    </style>
</head>

<body>
    <div id="blue">id选择器修改样式</div>
</body>

4.通配符选择器

选择页面内所有标签。

<head>
    <style>
        * {
            color: rgb(163, 8, 148);
            font-size: 16px;
        }
    </style>
</head>

<body>
    <h2>通配符选择器修改样式</h4>
    <div>通配符选择器修改样式</div>
    <p>通配符选择器修改样式</p>
</body>

CSS字体属性

font-family(字体类型)：'字体1','字体2','字体3'；
按顺组选择字体类型，若都没有，则使用默认字体。

<head>
    <style>
        .fontYahei {
            font-family: 'Microsoft Yahei';
        }
        .fontRoman {
            font-family: 'Times New Roman', Times, serif;
        }
    </style>
</head>

<body>
    <div class="fontYahei">字体类型1</div>
    <div class="fontRoman">字体类型2</div>
</body>

font-size(字体大小)，默认值16px。
若设置body标签的字体大小，不影响标题标签字体大小。

<head>
    <style>
        body {
            font-size: 10px;
        }
    </style>
</head>

<body>
    <h2>《江雪》</h2>
    <div>千山鸟飞绝，万径人踪灭。</div>
    <div>孤舟蓑笠翁，独钓寒江雪。</div>
</body>

font-weight(字体粗细)：normal,bold,bolder,lighter,number。
最常使用number：不带单位，400为正常粗细，700相当于bold。
实际开发中经常用于将标题变为正常粗细。

<head>
    <style>
        h3 {
            font-weight: 400;
        }
        .bold {
            font-weight: 700;
        }
    </style>
</head>

<body>
    <h3>标题</h3>
    <div>这是正文内容</div>
    <div class="bold">这是正文内容</div>
</body>

font-style(字体样式)：normal，italic(倾斜)。
实际开发中经常将<em></em>标签的倾斜字体变为正常。

<head>
    <style>
        .italic {
            font-style: italic;
        }
        em {
            font-style: normal;
        }
    </style>
</head>

<body>
    <div class="italic">字体样式修改</div>
    <em>将倾斜字体变得不倾斜</em>
</body>

font(字体复合属性)：font-style font-weight font-size/line-height font-family
按顺序书写，空格隔开，font-size和font-family必须有。

<head>
    <style>
        .font1 {
            font: italic 700 18px '宋体';
        }
    </style>
</head>
<body>
    <div>普通文本</div>
    <div class="font1">字体复合属性修改样式</div>
</body>

CSS文本属性

文本属性可定义文本外观，如文本颜色、对齐文本、装饰文本、文本缩进、行间距等。

1.文本颜色

color：颜色名(red)/十六进制(#FF0000)/rgb代码(rgb(255,0,0))
十六进制最常用。

<head>
    <style>
        .red{
            color: red;
            /* color: #ff0000; */
            /* color: rgb(255, 0, 0); */
        }
    </style>
</head>

2.文本对齐

text-align(对齐方式)：left (默认),center ,right
align：v.使一致，排整齐

<head>
    <style>
        .textRight {
            text-align: right;
        }

        .textCenter {
            text-align: center;
        }
    </style>
</head>

<body>
    <div>默认文本左对齐</div>
    <div class="textRight">设置文本右对齐</div>
    <div class="textCenter">设置文本居中对齐</div>
</body>

3.装饰文本

text-decoration：给文本添加下划线、删除线、上划线等。
默认：none，下划线：underline，删除线：line-through，上划线：overline
实际开发中常用于删除链接默认的下划线。

<head>
    <style>
        a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <a href="#">删除链接的下划线</a>
</body>

4.文本缩进

text-indent：文本第一行的首行缩进的距离。
单位：px(像素)、em(一个字符的大小)。

<head>
    <style>
        /* 首行缩进20像素 */
        p {
            text-indent: 20px;
        }

        /* 缩进两个字符 */
        div {
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <p>雨天的屋瓦，浮漾湿湿的流光，灰而温柔，迎光则微明，背光则幽黯，对于视觉，是一种 
    低沉的安慰。</p>
    <p>至于雨敲在鳞鳞千瓣的瓦上，由远而近，轻轻重重轻轻，夹着一股股的细流沿瓦槽与屋檐 
    潺潺泻下，各种敲击音与滑音密织成网，谁的千指百指在按摩耳轮。
    “下雨了，”温柔的灰美人来了，她冰冰的纤手在屋顶拂弄着无数的黑键啊灰键，把晌午 
    一下子奏成了黄昏。</p>
    <div>雨天的屋瓦，浮漾湿湿的流光，灰而温柔，迎光则微明，背光则幽黯，对于视觉，是一 
    种低沉的安慰。</div>
    <div>至于雨敲在鳞鳞千瓣的瓦上，由远而近，轻轻重重轻轻，夹着一股股的细流沿瓦槽与屋 
    檐潺潺泻下，各种敲击音与滑音密织成网，谁的千指百指在按摩耳轮。
    “下雨了，”温柔的灰美人来了，她冰冰的纤手在屋顶拂弄着无数的黑键啊灰键，把晌午一下 
    子奏成了黄昏。</div>
</body>

5.行间距

line-height(行间距/行高)：行高=文本高度+上间距+下间距

<head>
    <style>
        div {
            background-color: rgb(169, 169, 231);
            /* 行高36px,文字大小16px，上下间距万维10px */
            line-height: 36px;
        }
    </style>
</head>

<body>
    <div>行高设置</div>
</body>

CSS的引入方式

1.行内样式表（行内式）

标签内部写style属性，用于简单的修改。
控制当前标签。

<body>
    <!-- 行内式 -->
    <p style="color: red;font-size: 20px;">行内样式表</p>
    <p>行内样式表</p>
</body>

2.内部样式表（嵌入式）

css写在html内部。
样式写在<style></style>标签内，<style>标签一般写在<head>标签内。
控制整个页面。

3.外部样式表（链接式）

样式写在单独的css文件中，在html中用一行代码引入css文件，就可以直接使用css里面的样式了。
可以控制多个页面，使用最多。

<head>
    <!-- 链接式 -->
    <link rel="stylesheet" href="外部样式表.css">
</head>

<body>
    <div>外部样式表（链接式）</div>
    <div class="bold">外部样式表（链接式）</div>
</body>