前端-CSS (样式引入、选择器）

.又是新的一天.2025-07-19 18:12

文章目录

大纲

前端三大件：无竞品，极简。

html：框架结构。

css：负责样式修饰。

js：行为交互，动画效果。
CSS：层叠样式表 Cascade Style Sheet

1.css的3种引入方式。

1.1 行内样式。写在标记之中。使用style属性。 color: red; 样式名:样式值; 样式之间无顺序。 缺点：仅能修饰当前所在标记。

1.2 页内样式。 选择器。用来选择修饰的目标元素。 缺点：仅能修饰当前页。

1.3 引入外部样式表文件 引入外部样式表文件。
基础选择器：

1.标记选择器。

2.id选择器。

3.类选择器。频率最高。

4.星号选择器。频率较底。
复合选择器：高级选择器。将基础选择器组合使用。

1.子代选择器：a>b

2.后代选择器：a b

3.兄弟选择器：a+b 紧邻弟 a~b 所有弟

4.交集选择器：ab，注意不要产生歧义

5.并集选择器：a,b
伪类选择器：

1.超链接伪类：爱恨准则。love hate :hover 对一切标记生效。

2.子元素伪类： :first-child，:last-child，:nth-child

3.伪元素选择器 ::before ::after
常用样式：

1.color：前景色

2.font-weight：字重

3.font-size：字号

4.background-color：背景色

5.width和height

6.font-family

7.text-decoration:

8.text-align: center

9.border-radius：边框圆角

10.list-style

11.border
px：像素

物理像素：25601440
逻辑像素：800600
颜色

1.英文单词。

2.rgb表示法。Red Green Blue三原色。255^3。

3.rgb表示法的16进制写法。#ab00c3

4.简写的16进制表示法。如果每两位相同，则可简写成一位。

前端三大件

无竞品，极简

html:框架结构

css:负责样式修饰

js:行为交互，动画效果

常用样式

中横线命名法

1.color：前景色

font-weight:字重

3.font-size:字号，比如10px(最小是10px,px指的是逻辑像素，是相对单位，不同电脑的1px像素不一定一样大)

background-color:背景色

width 宽度

height 高度

font-family 指定文本的字体

text-decoration 控制文本的装饰效果，如下划线、删除线、上划线等

text-align:center 用来控制文本的水平对齐

border-radius 用来设置元素的圆角效果

list-style：控制列表项的符号类型和位置等样式

border：控制元素的边框样式、宽度和颜色

颜色

1、英文单词

html 复制代码 
background-color: red;

2、RGB表示法：分别是红绿蓝三原色（显示屏），255^3

html 复制代码 
background-color: rgb(255, 255, 255);

3、rgb表示法的16进制写法。#ab00c3

#ab00c3 是一种 十六进制颜色值，它表示一种特定的颜色。

java 复制代码 
#ab00c3 中的每一对字符代表颜色的 红色、绿色 和 蓝色 分量（RGB）。
ab：红色（Red）通道的值，十六进制 ab 转换为十进制是 171。
00：绿色（Green）通道的值，十六进制 00 转换为十进制是 0。
c3：蓝色（Blue）通道的值，十六进制 c3 转换为十进制是 195。
结果：
红色通道：171（较高的红色强度）
绿色通道：0（没有绿色）
蓝色通道：195（较高的蓝色强度）
这意味着 #ab00c3 是一种 紫色偏蓝 的颜色，带有较强的蓝色和红色成分。

可视化：
这种颜色大致是 紫色，带有较深的蓝紫色调。
html 复制代码 
background-color: #ab00c3;

4.简写的16进制表示法。如果每两位相同，则可简写成一位。

比如红色：

html 复制代码 
background-color: #f00;

px:像素

物理像素：真实的发光点一共多少个。

逻辑像素：类似缩放，把几个物理像素合在一起。

1.CSS三种引入方式

1.1 行内样式

行内样式，写在标记之中。使用style属性。

color:red 样式名：样式值 样式之间无顺序。

行内样式缺点：仅能修饰当前所在标记。

示例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内样式</title>
</head>
<body>
    <h1 style="color:red;font-size:26px;font-weight: normal">大家早上好</h1>
</body>
</html>

1.2 页内样式

页内样式缺点：仅能修饰当前页

写在当前页面的<head></head>标签最下面：<style> </style>标记里面

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页内样式</title>
    <style>
        h1{
        
            font-style: italic;
        }

        #h1 {
            background-color: blue;
        }

        #a2{
            background-color:pink;
        }

        .f32{
            font-size: 32px;
        }

        *{
            background-color: pink;
        }
    </style>
</head>
<body>
    <h1>大家早上好</h1>
    <h1 class="f32">你</h1>
    <h1 id="h1">好</h1>
    <h2>他</h2>

    <a id="a2" href="#">我是超链接</a>

    <p class="f32">这是一个段落</p>
</body>
</html>

1.3 引入外部样式表文件（常见）

使用link属性引入外部样式表文件。

html 复制代码 
<link rel="stylesheet" href="路径">

在外部的css文件里面单独修饰

样式表.css:

css 复制代码 
@charset "utf-8";

#mydiv {
    width: 100px;
    background-color: pink;
    text-align: center;
}

.outer {
    height: 100px;
    text-decoration: line-through;
    font-family: "宋体";
}

#mydiv>.inner{
    background-color: gold;
    width: 100px;
    height: 100px;
    border-radius: 10px;
}

.inner li{
    text-decoration: none;
    font-family: "微软雅黑";
    list-style: circle;
}

引入外部样式表.html:

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入外部样式表</title>
    <!-- 引入外部样式表   企业开发最常用 -->
    <link rel="stylesheet" href="css/样式表.css">
</head>
<body>
    <div id="mydiv" class="outer">
        你好今天天气好
    <div class="inner">
        <ul>
            <li>111111</li>
            <li class="ctr">222222222222</li>
            <li>33333333</li>
        </ul>
    </div>
    </div>
</body>
</html>

基础选择器

选择器。用来选择修饰的目标元素

1. 标记选择器

html 复制代码 
h1{
}

选择页面中所有h1标记

2. id选择器

<h1 id="ni">你</h1> 赋予一个id，在style里：

即设置id值，使用的时候：#id值

html 复制代码 
  #ni{
            background-color: blue;
        }

得到id为ni的标记被设置背景色为蓝色

3. 类选择器 最常用

设置class值，使用的时候：.class值

html 复制代码 
  <h1 class="f32">你</h1>
html 复制代码 
  <p class="f32">这是段落</p>
复制代码 
class表示同一类,所有的标签都有class属性

在style里写：
html 复制代码 
 .f32{
        font-size: 32px;
    }

4 * 选择器 使用频率较低

*：全选，当前页面的全部标签全被选中，包括<boday></boday>

在style里面：

html 复制代码 
 *{
        background-color: pink;
  }

上述全部的整体应用代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页内样式</title>
    <style>
        h1{
       		 /* 斜体 */
            font-style: italic;
        }

        #h1 {
            background-color: blue;
        }

        #a2{
            background-color:pink;
        }

        .f32{
            font-size: 32px;
        }

        *{
            background-color: pink;
        }
    </style>
</head>
<body>
    <h1>大家早上好</h1>
    <h1 class="f32">你</h1>
    <h1 id="h1">好</h1>
    <h2>他</h2>

    <a id="a2" href="#">我是超链接</a>

    <p class="f32">这是一个段落</p>
</body>
</html>

复合选择器

复合选择器：高级选择器。将基础选择器组合使用

1.子代选择器：a>b选中a下面的b元素，两个选择器的组合,其中a是一个选择器,b是一个选择器

上述中是父子关系，选用子代选择器，id选择器的使用是#id值，class选择器的使用是.class值

html 复制代码 
#mydiv>.inner{
    background-color: gold;
    width: 100px;
    height: 100px;
    border-radius: 10px;
}

2.后代选择器a b 即a空格b

想选中的这个部分是inner的后代，不是子代（中间还有ul)

html 复制代码 
.inner li{
    text-decoration: none;
    font-family: "微软雅黑";
    list-style: circle;
}

3.兄弟选择器a+b紧邻弟（只能选紧邻的弟），选中的是弟 a~b选中的是所有弟

平级的才有兄弟

html 复制代码 
/* 兄弟选择器 */
.td4+td{
    font-size: 40px;
}

4.交集选择器ab 注意不要让浏览器产生歧义

比如想选中class是ctr的td

html 复制代码 
/* 交集选择器，不能让浏览器产生歧义 */
td.ctr{
    color: blue;
    background-color: rgb(255, 255, 255);
}

5.并集（或）选择器a,b

html 复制代码 
/* 并集选择器 */
.ctr,div{
    background-color: greenyellow;
    
}

意思是选中所有的.ctr和div都设置成指定颜色。同时选中多个

伪类选择器

（知道点就行）

1.超链接伪类：

爱恨准则。love hate

:hover

对一切标记生效。

记住:hover即可，只有：hover对一切标记生效，其他的只对超链接标记生效。

代码例子：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /* 下面四个伪类从（交集选择器）上往下优先级越来越高 */
        /* 默认状态 */
        #a1:link{
            color:red;
        }
        /* 访问过后 */
        #a1:visited{
            background-color: aqua;
        }

        /* 鼠标滑过,用的多 */
        #a1:hover{
            color: blue;
            /* text-decoration: line-through;
            border: 1px dotted black;
            font-size: 30px; */

        }

        /* 激活态(不同浏览器认为的激活不一样，比如按下就是激活) */
        #a1:active{
            background-color: pink;
        }

    </style>
</head>
<body>
    <a id="a1"  href="#">去百度</a>
</body>
</html>

2.子元素伪类：使用:

:first-child

:last-child

:nth-child

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子元素伪类</title>
    <style>
        /* 选择ul下的li且为第一个,字体设置成红色： */
        ul>li:first-child{
            color: red;
        }

        /* 选择ul下的li且为最后一个,字体设置成蓝色 */
        ul>li:last-child{
            color:blue;
        }

        /* 选中指定的某一个：从1开始的,比如选中第三个的3 ，设置成绿色字体*/
        ul>li:nth-child(3){
            color: green;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

效果图：

3.伪元素选择器 使用：：

::before

::after

示例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素选择器</title>
    <style>
        /* 在第一个儿子前面加一个元素，比如加A ,在页面中可以呈现，但是鼠标放上去无法选中*/
        ul::before{
            content: "A";
        }

        /* 在最后一个儿子的后面加一个元素，比如加B ,在页面中可以呈现，但是鼠标放上去无法选中*/
        ul::after{
            content: "B";
        }

        /* 如果想在每一个li前加一个元素，比如在每个li前面加个*： */
        ul>li::before{
            content: "*";
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

演示结果：

相关推荐
枷锁—sha1 小时前
从零掌握XML与DTD实体：原理、XXE漏洞攻防
xml·前端·网络·chrome·web安全·网络安全
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第二章，初始化页面结构
前端·javascript·vue·cornerstone3d·cornerstonejs
代码的余温1 小时前
如何区别HTML和HTML5？
前端·html·html5
咸虾米_1 小时前
css的attr函数与伪元素::after妙用实现自定义价格尾数
css·微信小程序·vue·css3·attr函数
天下无贼！1 小时前
【样式效果】纯CSS从零到一实现动态彩色背景效果
前端·css
DoraBigHead1 小时前
手写 `new`、`call`、`apply`、`bind` + V8 函数调用机制解密
前端·javascript·面试
还是大剑师兰特1 小时前
CSS面试题及详细答案140道之（61-80）
css·大剑师·css面试题
_pengliang1 小时前
css 音频波浪动画-小程序\PC可用
前端·css·小程序
ai小鬼头1 小时前
AIStarter教你快速打包GPT-SoVITS-v2，解锁AI应用市场新玩法
前端·后端·github
JQLvopkk1 小时前
C#通过HslCommunication连接西门子PLC1200,并防止数据跳动的通用方法
前端·javascript·算法
热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02Cursor Claude 模型无法使用的解决方法03KGG转MP3工具|非KGM文件|解密音频04【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致05【无标题】06集群聊天服务器---MySQL数据库的建立07Claude Code 最新版已经支持 Windows 安装使用！08绿色建筑新态势：楼宇自控助力能效提升，推动成本优化新路径09使用Ruby接入实时行情API教程10突破限制：使用 Claude Code Proxy 让 Claude Code 自由连接任意模型