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

CSS 基础选择器、文字控制属性

news 来源：原创 2025/6/29 13:58:51

HTML 摆放内容，CSS 美化内容

１ CSS

定义：层叠样式表（Cascading Style Sheets，缩写为CSS），是一种样式表语言，用来描述HTML文档的呈现（美化内容）。
书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。

1.1 CSS 引入方式

1.1.1 内部样式表：

CSS 代码写在 style 标签里面

例子：

<!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>CSS</title><style>p {color: red;/* 数字 加 像素 */font-size: 30px;}</style>
</head>
<body><p>初识 CSS</p>
</body>
</html>

运行效果：

1.1.2 外部样式表开发最常用

CSS 代码写在单独的 CSS 文件中（.css)
在 HTML 使用 link 标签引入

HTML 文件

<!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>CSS 引入方式</title><!-- link 引入外部样式表； rel：关系，样式表 关系 --><link rel="stylesheet" href="./demo2.css">
</head>
<body><p>这是 p 标签</p>
</body>
</html>

CSS 文件

/* 写法：选择器 {} */
p {color: red;
}

运行效果：

1.1.3 行内样式表配合 JS 使用

配合 JavaScript 使用

CSS 写在标签的 style 属性值里

<!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>CSS 引入方式</title><!-- link 引入外部样式表； rel：关系，样式表 关系 --><link rel="stylesheet" href="./demo2.css">
</head>
<body><p>这是 p 标签</p><!-- 行内样式表 style=" CSS 属性" --><div style="color:green; font-size: 20px;">这是 div 标签</div>
</body>
</html>

运行效果：

2 选择器

作用：查找标签，设置样式
基础选择器：标签选择器、类选择器、id 选择器、通配符选择器

2.1 标签选择器

使用标签名作为选择器 → 选中同名标签设置相同的样式。

2.2 类选择器

作用：查找标签，差异化设置标签的显示效果

步骤：

定义类选择器 -> .类名
使用类选择器 -> 标签添加 class="类名"

开发习惯：类名见名知意多个单词可以用－连接，例如：news-hd （新闻头部）

一个类选择器可以供多个标签使用
一个标签可以使用多个类名，类名之间用空格隔开

<!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>.red {color: red;}.size {font-size: 20px;}</style>
</head>
<body><!-- 一个标签可以使用多个类选择器  class 属性写多个类名即可，类名用空格隔开 --><p class="red size" >这是 p 标签</p><!-- 一个类选择器也可以被多个标签使用 --><div class="red">div 标签</div>
</body>
</html>

运行效果：

2.3 id 选择器

作用：查找标签，差异化设置标签的显示效果。
场景：id 选择器一般 配合JavaScript使用，很少用来设置 CSS 样式
规则：同一个 id 选择器在一个页面只能使用一次

步骤：

定义 id 选择器 → #id名
使用 id 选择器 → 标签添加 id="id名"

<!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>id 选择器</title><style>#red {color: aqua;}</style>
</head>
<body><!-- id 选择器一般配合 js 使用 --><div id="red">div 标签</div>
</body>
</html>

2.4 通配符选择器

作用：查找页面所有标签，设置相同样式
通配符选择器：＊，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

<!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>* {color: red;}</style>
</head>
<body><div>div 标签</div><p>p 标签</p><h1>h1 标签</h1>
</body>
</html>

运行效果：

3 画盒子

目标：使用合适的选择器画盒子
差异化画盒子：使用类选择器

<!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>/* 用类选择器 */.red {width: 100px;height: 100px;background-color: brown;}.orange {width: 200px;height: 200px;background-color: orange;}</style>
</head>
<body><!-- div 标签独占一行  --><div class="red">div1</div><div class="orange">div2</div>
</body>
</html>

运行效果：

4 文字控制属性

4.1 行高的特殊作用：垂直居中

垂直居中技巧：行高属性值等于盒子高度属性值

<!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>div {height: 50px;background-color: skyblue;/* 行高和 height 一样，即可垂直居中 */line-height: 50px;}</style>
</head>
<body><div>文字</div>
</body>
</html>

运行效果：

4.2 font 复合属性

使用场景：设置网页文字公共样式
font: 是否倾斜是否加粗字号/行高字体 （必须按顺序书写）
注意：字号和字体值必须书写，否则 font 属性不生效

4.3 颜色值写法

5 调试工具谷歌浏览器

鼠标右键、检查
或者 F12

5.1 找错误

5.2 调试看效果

参考链接：

29-体验CSS_哔哩哔哩_bilibili
30-CSS引入方式_哔哩哔哩_bilibili
31-选择器-标签和类_哔哩哔哩_bilibili
32-选择器-id和通配符_哔哩哔哩_bilibili
33-画盒子_哔哩哔哩_bilibili
34-字体修饰属性-大小和粗细和倾斜_哔哩哔哩_bilibili
35-行高_哔哩哔哩_bilibili
35-行高_哔哩哔哩_bilibili
36-字体族_哔哩哔哩_bilibili
37-font属性_哔哩哔哩_bilibili
39-文字颜色_哔哩哔哩_bilibili
40-调试工具_哔哩哔哩_bilibili