CSS基础学习1
文章目录
- 一、什么是CSS
- 二、基本语法规范
- 三、CSS引入方式
- 3.1 内部样式表
- 3.2 行内样式表
- 3.3 外部样式
- 四、CSS选择器
- 4.1 基础选择器
- 4.1.1 标签选择器
- 4.1.2 类选择器
- 4.1.3 id选择器
- 4.1.4 通配符选择器
- 4.2 复合选择器
- 4.2.1 后代选择器
- 4.2.2 链接伪类选择器
- 五、字体属性
- 5.1 字体设置
- 5.2 字体大小设置
- 5.3 字体颜色设置
- 5.4 字体粗细设置
- 5.5 文字样式
- 六、文本属性
- 6.1 文本对齐
- 6.2 文本装饰
- 6.3 文本缩进
- 6.4 行间距
一、什么是CSS
CSS（层叠样式表，Cascading Style Sheets）是一种用于控制网页视觉表现的样式表语言，主要功能包括：
- 样式控制：定义文本颜色、字体、间距、背景等外观属性。
- 精准布局：通过盒模型、浮动、Flexbox 等技术实现像素级精确排版。
- 动态交互：配合脚本语言实现动画、响应式设计（如适配不同设备屏幕）。
- 样式复用：通过外部样式表统一管理多个页面的样式，提升可维护性。
简单的来说HTML是骨架，CSS是皮肤，而JS是灵魂。
提示：在学习本内容前，需要有一定的html基础，可以通过小编的html基础学习进行观看
二、基本语法规范
选择器 + { 一条/N条声明 }
- 选择器定位修改的地方
- 声明决定需要修改什么
- 声明的属性是键值对，使用分号区分键值对，使用：区分键和值
<style>p{/* 设置字体颜色 */color:red;/* 设置字体大小 */font-size: 40px;}
</style>
- Css要写到style标签中
- style标签可以放在页面的任意位置，一般放在head标签内
- Css使用/**/作为注释。快捷键为ctrl+/
实例演示
未加css样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>hello world</p>
</body>
</html>
加了css样式：字体变成红色，大小变成40px1。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{/* 设置字体颜色 */color:red;/* 设置字体大小 */font-size: 40px;}
</style>
</head>
<body><p>hello world</p>
</body>
</html>
在这里p表示p标签的样式。在上面代码中，style标签内就是Css的样式，其中p表示选择器，括号内的声明需要修改的样式，声明的属性都是键值对的形式，前面是键后面是值用：分开，然乎每个属性用分号进行分开。
在上面css样式选中的是只要是p标签的都会修改样式，而其他的标签的样式则不会进行修改，如下面的标题标签中的内容你好。
三、CSS引入方式
3.1 内部样式表
将Css嵌套的HTML页面当中，通过style标签进行嵌套。向上面就是内部样式表，这是一个html界面代码，但是Css利用style标签嵌套在HTML中。
优点是可以样式和结构进行分离，也就是只在style标签中设置样式，然后再head中设置整个页面的布局结构。
缺点：
-
缺乏复用性，导致代码重复和维护困难： 内部样式表仅对当前页面有效。如果一个网站有多个页面需要使用相同的样式规则，则必须在每个页面的 < style> 标签中重复编写这些规则，造成大量的代码冗余，增加了文件总体积。当需要更改样式时，必须在每个包含该样式的 HTML 文件中逐一修改，维护成本高且易出错 。
-
导致 HTML 文件臃肿，结构与样式未完全分离： < style> 标签内的 CSS 代码会显著增加 HTML 文件本身的体积和复杂度。这违背了前端开发提倡的“结构与样式分离”的最佳实践，使得 HTML 文件不仅包含内容结构，还包含大量样式代码，降低了代码的可读性和清晰度，难以管理和调试
3.2 行内样式表
通过style属性来指定哪个标签的样式。他只针对某个标签有效。
比如在这里我想单独设置你好这两个字的颜色，此时就可以单独对这一个标签进行设置：
在这里单独设置一个标签的颜色会覆盖整体style标签中的样式，在上面hello world都是p标签且同时都被样式标签进行设置为红色，此时使用行内样式表可以单独设置一行的hello world为黄色。
所以行内样式表的优先级比内部样式表的优先级要高。此时如果同时存在行内样式表和内部样式表的时候，优先使用行内样式表的样式。
3.3 外部样式
外部样式也是实际开发过程中最常用的方式。它会将样式单独写到一个css文件里，然后再html里将css文件引入进来。
- 创建一个 css 文件.
- 使用 link 标签引入 css
< link rel=“stylesheet” href=“[CSS文件路径]”>
创建demo2.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><title>外部样式</title><link rel="stylesheet" href="./demo02.css">
</head>
<body><div>"Genius is one percent inspiration and ninety-nine percent perspiration, but the 1% inspiration is the most important, even more than the 99% perspiration." </div>
</body>
</html>
创建demo2.css
div {color: red;font-size: 15px;
}
最终显示结果：
四、CSS选择器
学过测试的同学可能会了解，在web自动化测试的操作核心是能够找到页面对应的元素 ，然后才能对元素进行具体的操作，那找到元素的方式就可以通过css选择器进行查找。那什么是选择器呢？简单的来说就相当于坐标，跟发射导弹一样的精准定位，根据选择器的位置精准定位到元素对元素进行修改查看。
4.1 基础选择器
4.1.1 标签选择器
标签选择器。也就是我们之前用到的html中的像什么p，h1~h6，br等标签进行定位，如下图：针对html中所有段落标签进行修改
特点:
- 能快速为同一类型的标签都选择出来。也就是说他只能把同一个标签进行修改相同的样式。
- 但是不能差异化选择。也就是说它既不能使相同的标签呈现不同的样式，也不能使不同的标签呈现相同的样式。
4.1.2 类选择器
使相同标签呈现不同的样式，也可以使不同的标签呈现相同的样式
语法形式:
在css当中
.类名 {1或者N条声明
}
在html中
<标签 class="类名">内容</标签名>
例子
html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./3类选择器.css">
</head>
<body><p class="eat">吃饭</p><p class="sleep">睡觉</p><p class="drump">打豆豆</p>
</body>
</html>
css通过点类名的方式对不同类名的相同标签设置不同的样式。所以html中相同的标签中需要存在class属性进行区分。
.eat {color: red;font-size: 15px;
}
.sleep {color: blue;font-size: 10px;
}
.drump {color: yellow;font-size: 20px;
}
显示效果
在class属性当中还可以添加多个类名，从而可以达到叠加的效果
在上面一个字体大小和颜色设置样式就同时叠加效果到了打豆豆三个字上。
4.1.3 id选择器
和类选择器类似，不同的是，在CSS中使用#开头表示id选择器，id选择器的值和html中的某个元素的id值相同。
注意：
id是唯一的，不能同时被多个标签使用，这是和类选择器最大的区别
4.1.4 通配符选择器
使用*的定义，选取所有的标签，这里是设置整个页面所有的样式的。一般是整个页面样式的相同点。
*{color: blue;
}
页面的所有内容都会被修改成绿色
例子2
将背景颜色改为浅黄色
通配符选择器在实际应用开发中用来针对页面中所有的元素默认样式进行消除，主要用来消除边距。
4.2 复合选择器
将之前的学习的基础选择器进行组合
4.2.1 后代选择器
后代选择器就是选择某个父元素中的某一个子元素。
语法形式
元素1 元素2{样式声明}
元素1和元素2需要使用空格分割
元素1是父元素，元素2是子元素
例子
正常情况下：分别创建一个有序列表，一个无序列表。效果如下：
如果此时只通过li进行修改，那么就会把所有的列表都变成红色
当然也可以选择类选择器进行修改样式，但是如果有序列表存在无数行，那每行都要加那不要累死了么，所以在这里通过后代选择器将ol中的li改成红色
也可以通过选择器组合的方式进行修改：类选择器+标签选择器
4.2.2 链接伪类选择器
伪类选择器是用来定义元素状态的。什么是状态呢？
打开百度页面，正常左上角的新闻是黑色的。
此时把鼠标放上去就变成蓝色了。
像上述功能可以通过伪类选择器进行实现。
1、链接伪类选择器
a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)
正常链接什么都不设置的情况，字体默认是蓝色，并且存在下划线
-
a:link 选择未被访问过的链接，这里表示选中的链接为未访问过的。此时设置链接下面的下划线删除掉，并且未访问时候的链接为红色。
-
a:visited：表示选择访问后的标签，在这里将访问后标签颜色由红色变成绿色
-
a:hover 选择鼠标指针悬停上的链接，当鼠标悬停在链接上的时候，设置的样式
<a href="#" target="_blank">百度</a>
a:link {color: red;/* 去掉 a 标签的下划线 */text-decoration: none;
}a:visited {color: green;
}a:hover {color: blue;font-size: 50px;
}
在这里通过设置，当鼠标悬停到百度链接这里就会字体变大成50px，然后字体的颜色也会变成蓝色。
- a:active 选择活动链接(鼠标按下了但是未弹起)，谈起就表示你访问该链接，按下就表示你将要访问。
<a href="#" target="_blank">百度</a>
a:link {color: red;/* 去掉 a 标签的下划线 */text-decoration: none;
}a:visited {color: green;
}a:hover {color: blue;font-size: 50px;
}a:active {color: blueviolet;
}
在上面伪类选择器还可以使用在很多方面：比如单选框，按钮等
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#button {/* 让登录按钮默认显示蓝色 */color: blue;}#button:hover {/* 鼠标悬停的时候为红色 */color: red;}#button:active {/* 按下按钮不松开显示绿色 */color:green;}</style>
</head>
<body><input type="button" value="登录按钮" id="button">
</body>
</html>
五、字体属性
注意：
CSS 属性有很多, 可以参考文档：https://www.w3school.com.cn/cssref/index.asp
5.1 字体设置
<p>这是一个文本内容</p>
正常没加字体样式，显示效果如下：
此时加了字体样式设置
<style>p {font-family: '楷体';}
</style>
5.2 字体大小设置
语法：
选择器 {font-size:20px;
}
正常不加上字体大小设置
在这里给字体大小进行设置为50px，此时效果如下：
- 不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)
- 可以给 body 标签使用 font-size
- 要注意单位 px 不要忘记，不然设置的字体大小样式就不会生效
- 标题标签需要单独指定大小
5.3 字体颜色设置
字体颜色设置在之前的操作中就演示过，但是不尽然，字体颜色设置存在三种方式：
color：颜色;
color:#ff0000;
color:rgb(255,0,0);
在上面
- #ff0000：通过16进制，把三原色参与像素点进行表示，ff代表红色像素点，这个数字越大，红色越深，后面两位00叫做绿色是，最后两个零代表蓝。
- rgb(255,0,0);其实和上面的一样的，只不过将16进制转换成十进制的形式，十六进制的ff转换成十进制为255。后面两个分别表示绿色和蓝色，只不过值为0.
5.4 字体粗细设置
语法：
<style>选择器 {font-weight: 值;}
</style>
值有以下几种：
效果展示：设置字体粗细为：100
5.5 文字样式
语法：
<style>p {font-style: 属性值;}
</style>
例子：
六、文本属性
6.1 文本对齐
语法：
text-align: 属性值;
不光控制文字水平方向的对齐，也能控制图片等元素居中或者靠右
6.2 文本装饰
语法：
选择器 {text-decoration:属性值;
}
此时这个线条的样式还可以通过下面语法进行修改样式：
<style>选择器 {text-decoration: underline;text-decoration-style: 属性值;}
</style>
例子
在这里有一段文本内容和一个超链接标签，不加任何样式的显示效果。
此时在这里，想要去掉链接下面的下划线，然后对于上面的内容文本我们加上下划线该如何操作呢？此时就需要使用text-decoration设置样式了。
<style>a {text-decoration: none;}p {text-decoration: underline;}
</style>
6.3 文本缩进
控制段落的 首行 缩进 (其他行不影响)
语法形式
text-indent: [值];
- 单位可以使用 px 或者 em.
- 使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
- 缩进可以是负的, 表示往左缩进. (会导致文字冒出去)
例子：创建一个文本缩进两个文字大小
6.4 行间距
语法：
设置行高
选择器 {line-height:属性值;
}
注意航高=上边距+下边距+字体大小
上下边距是相等的, 此处字体大小是 16px, 行高 40px, 上下边距就分别是 12px
使用lOrem生成一段文字，然后设置航高为40也就是行间距为12px
px单位的基本定义：px是像素（pixel）的缩写，是数字图像和屏幕显示中的最小单位，用于计量图形元素的定位与尺寸36。它是分辨率的核心单位，表示纵横向上的像素点数，决定了屏幕显示的精细程度13。 ↩︎