网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
1. 概述
层叠样式表（Cascading Style Sheets）
css能对网页中元素位置的排版进行像素精确控制，实现美化页面的效果，能够做到页面样式和结构分离。就是对前面的html骨架进行美化。
2. 基本语法规范
选择器 + {一条/n条声明}
· 选择器决定针对谁修改
· 声明决定修改的内容
· 声明的属性是键值对，使用 “ ；”区分键值对， 键值对的格式：键：值
· 冒号后面加空格，选择器和 { 之间也加空格
例如：
<style>
p {
/* 字体颜色 */
color: red;
/* 字体大小 */
font-size: 30px;
}
</style>
说明：
· CSS要写到style标签中
· style标签可以放到页面的任意位置，但是一般放到head标签内
· CSS使用/* */作为注释
3. 引入的方式
3.1 内部样式
写在style标签中，嵌入html内部，如上述例子所示
**优点：**这样能让样式和页面结构分离
**缺点：**当css内容很多的时候，分离的不够彻底
3.2 行内样式
通过style属性，来指定某个标签的样式，只针对某个标签生效
缺点：只适合简单的样式，不能写太复杂的样式
这种写法优先级高，会覆盖其他的样式
例如：
<style>
p {
color: red;
}
</style>
<P style="color: green;">一去二三里</P>
结果：字体颜色显示绿色，而不显示红色
3.3 外部样式
外部样式是实际开发中最常用的方式
1. 创建一个css文件
2. 使用link标签引入css
<link rel="stylesheet" href="blog.css">
例如：
创建html文件，并引入css文件
<!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>Document</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<div>好好学习，天天向上</div>
</body>
</html>
创建css文件
div {
/* 字体颜色 */
color: blue;
/* 字体大小 */
font-size: 30px;
}
结果：
优点：样式和页面结构彻底分离
缺点：受浏览器缓存影响，修改之后不一定立刻生效，可以使用 ctrl+F5 强制刷新页面
4. 选择器
选择器的功能：选中页面中指定的标签元素，要先选中元素，才能设置元素的属性
选择器的种类：
**1. 基础选择器：**单个选择器构成
· 标签选择器
· 类选择器
· id选择器
· 通配符选择器
**2. 复合选择器：**把多种基础选择器综合运用起来
· 后代选择器
· 子选择器
· 并集选择器
· 伪类选择器
4.1 基础选择器
4.1.1 标签选择器
特点：能快速为同一类型的标签都选择出来，但是不能差异化选择
<style>
p {
color: red;
}
div {
color: blue;
}
</style>
<p>哈哈</p>
<p>嘻嘻</p>
<p>嘿嘿</p>
<div>王昭君</div>
<div>妲己</div>
4.1.2 类选择器
特点：差异化表示不同的标签，可以让不同的标签使用同一种样式
<style>
.c1 {
color: brown;
}
</style>
<div class="c1">苹果</div>
<span class="c1">香蕉</span>
注意：
· 类名用**.**开头
· 下方的标签使用class属性来调用
· 一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割)
· 不要使用纯数字，或者中文，以及标签名来命名类名
示例：使用多个类名
<style>
.c1 {
color: brown;
}
.f1 {
font-size: 30px;
}
</style>
<div class="c1 f1">苹果</div>
<span class="c1 f1">香蕉</span>
4.1.3 id选择器
· 使用**#**开头表示id选择器
· id是唯一的，不能被多个标签使用
<style>
#i1 {
color: red;
font-size: 50px;
}
</style>
<div id="i1">我爱学Java</div>
4.1.4 通配符选择器
使用 * 的定义，选取所有标签
* {
color: pink;
}
页面中所有的内容都会被修改为粉色
4.2 复合选择器
4.2.1 后代选择器
选择某个父元素中的某个子元素
元素1 元素2 { 样式声明 }
说明：
· 元素1和元素2要使用空格分割
· 元素1是父级，元素2是子级，只选元素2，不影响元素1
示例1：修改ul中的li颜色，不影响ul
<style>
ul li {
color: green;
}
</style>
<ul>
<li>Java</li>
<li>c++</li>
<li>python</li>
</ul>
示例2：元素2不一定是儿子，也可以是孙子
<style>
ul li a {
color: green;
}
/* 这两种都行 */
ul a {
color: green;
}
</style>
<ul>
<li>Java</li>
<li>c++</li>
<li><a href="#">空连接</a></li>
</ul>
4.2.2 子选择器
和后代选择器类似，但是只能选择子标签，也就是亲儿子，不能是孙子
元素1>元素2 { 样式声明 }
· 使用大于号分割
· 只能是亲儿子，不能是孙子
<style>
div>a {
color: red;
}
</style>
<div>
<a href="#">链接1</a>
<p><a href="#">链接2</a></p>
</div>
注意：只有链接1变色，链接2不变色，因为1是亲儿子，2是孙子
4.2.3 并集选择器
用于选择多组标签（集体声明）
元素1，元素2 {样式声明}
· 使用逗号分割多个元素，表示同时选中
· 最后一个选择器不能加逗号
示例：将香蕉和苹果同时染成红色
<style>
div,span {
color: red;
}
</style>
<div>苹果</div>
<span>香蕉</span>
4.2.4 伪类选择器
1. 链接伪类选择器
a:link ,未被访问过的链接
a:visited ,已经访问过的链接
a:hover ,鼠标悬停的链接
a:active ,鼠标按下未弹起的链接
示例： 给链接添加样式
<a href="#">陕西科技大学</a>
a:link {
color: blue;
}
a:visited {
color: grey;
}
a:hover {
color: brown;
}
a:active {
color: green;
}
说明：未访问蓝色，访问过灰色，悬停棕色，按下不弹起绿色
2. force伪类选择器
选取获取焦点的input表单元素
示例：
<style>
#i1:focus {
color: red;
}
#i2:focus{
color: green;
}
#i3:focus {
color: blue;
}
</style>
<input id="i1" type="text">
<input id="i2" type="text">
<input id="i3" type="text">
结果：鼠标悬停在哪个输入框，哪个输入框的文本就会变成设置的颜色
5. 常用元素属性
5.1 字体属性
5.1.1 设置字体
div {
font-family: '微软雅黑';
}
span {
font-family: '宋体';
}
说明：
· 字体名称可以用中文，但是不建议
· 多个字体之间使用逗号分隔（从左到右查找字体，如果都找不到，会使用默认字体）
· 如果字体名有空格，使用引号包裹
· 建议使用常见字体，否则兼容性不好
5.1.2 设置字体大小
div {
font-size: 50px;
}
说明：
· 不同浏览器默认字号不一样，chrome默认是16px
· 可以给body标签使用font-size
· 注意单位px，表示像素
· 标题标签需要单独指定大小
5.1.3 设置字体粗细
div {
font-weight: 500px;
}
span {
font-weight: bold;
}
· 可以使用数值表示粗细
· 700==bold，400是不变粗细为normal，数字取值范围：100~900
5.1.4 设置文字样式
/* 倾斜 */
div {
font-style: italic;
}
/* 取消倾斜 */
span {
font-style: normal;
}
5.2 文本属性
5.2.1 文本颜色
认识RGB
我们的显示器是由很多很多像素构成的，每个像素视为一个点，这个点能反映出一个具体的颜色，R（red）G（green）B（blue）的方式表示颜色，三种颜色按照不同的比例搭配，就能混合出各种颜色。
计算机中针对R,G,B三个分量，分别用一个字节表示（8个比特位，表示的范围是0-255，十六进制表示为00-FF），数值越大，表示该分量颜色就越浓，255，255，255就表示白色；0，0，0就表示黑色
设置文本颜色
color：red；
color：#ff0000；
color：rgb(255，0，0)；
color属性值的写法：
· 预定义的颜色值（单词）
· 十六进制形式（常用）
· RGB方式
<style>
.c1 {
color: green;
}
</style>
<div class="c1">好好学习进大厂</div>
5.2.2 文本对齐
控制文字水平方向的对齐，除了文本，也能控制图片等元素对齐的方式
text-align：[值]；
**center：**居中对齐
**left：**左对齐
**right：**右对齐
<style>
.c1 {
text-align: left;
}
.c2 {
text-align: center;
}
.c3 {
text-align: right;
}
</style>
<div class="c1">左对齐</div>
<div class="c2">居中对齐</div>
<div class="c3">右对齐</div>
结果：
5.2.3 文本装饰（上划线，下划线，删除线）
text-decoration：[值]
常用值：
**underline：**下划线
**none：**啥都无，可以取掉下划线，删除线等
**overline：**上划线
**line-through：**删除线
<style>
.c1 {
text-decoration: overline;
}
.c2 {
text-decoration: none;
}
.c3 {
text-decoration: underline;
}
.c4 {
text-decoration: line-through;
}
</style>
<div class="c1">上划线</div>
<div class="c2">啥都无</div>
<div class="c3">下划线</div>
<div class="c4">删除线</div>
结果：
5.2.4 文本的缩进与行高
缩进：控制段落的首行缩进（其他行不受影响）
text-indent：[值]；
单位可以用px或者em
em作为单位，1个em为一个文字大小
缩进可以为负数，表示往左缩进（文字就会冒出去）
<style>
.c1 {
text-indent: 2em;
}
.c2 {
text-indent: -2em;
}
</style>
<div class="c1">正常缩进</div>
<div class="c2">反向缩进</div>
行高：行高是上下文本行之间基线距离
line-height：[值]
注意：行高 = 上边距 + 下边距 + 字体大小
HTML中涉及到这几个基准线：
· 顶线 · 中线 · 基线（相当于四线三格倒数第二条线）· 底线
内容区：底线和顶线包裹的区域，即下图深灰色背景区域
基线之间的距离 = 顶线的距离 = 底线之间的距离 = 中线间距
注意：行高与元素高度相等，就可以实现文字居中对齐
例：
<style>
div {
height: 100px;
line-height: 100px;
font-size: 30px;
}
</style>
<div>文字居中对齐</div>
5.3 背景属性
5.3.1 背景颜色
background-color：[指定颜色]
默认是transparent透明的，可以通过设置颜色的方式修改
<style>
div {
background-color: blue;
}
</style>
<div>设置蓝色背景</div>
5.3.2 背景图片
background-image：url()；
**注意：**url可以是相对路径也可以是绝对路径，url可以加引号也可以不加
url的路径必须正确，否则找不到照片
<style>
div {
height: 1000px;
width: 1000px;
background-image: url(../10.jpg);
}
</style>
<div>设置背景图片</div>
结果：
5.3.3 背景平铺
background-repeat：[平铺方式]
重要值：
**repeat：**平铺
**no-repeat：**不平铺
**repeat-x：**水平平铺
**repeat-y：**垂直平铺
默认是repeat，背景颜色可以和背景图片同时存在，背景图片在背景颜色的上方
<style>
div {
height: 1000px;
width: 1000px;
background-image: url(../作业/5.jpg);
background-repeat: no-repeat;
/* no-repeat repeat repeat-x repeat-y */
}
</style>
repeat：
no-repeat：
repeat-x：
repeat-y：
5.3.4 背景位置
background-position：x y；
注意：是修改图片内容的位置
参数：
方位名词：（top，left，right，bottom）
精确单位：坐标或者百分比（以左上角为原点）
混合单位：同时包含方位名词和精确单位
<style>
div {
height: 1000px;
width: 1000px;
background-image: url("../10.jpg");
background-position: center;
}
</style>
<div>背景位置</div>
说明：没有把图片的位置放到屏幕中间，而是把图片内容的中间部分按要求大小展示在屏幕上
注意：
如果参数的两个值都是方位名词，则前后顺序无关（top left与left top效果一样）
如果只指定了一个方位名词，则第二个默认居中（left就是水平居中，top就是垂直居中）
如果参数为精确值，则第一个为x，第二个为y
如果参数为精确值且只给了一个数值，则该数值为x坐标，另一个默认垂直居中
5.3.5 背景尺寸
background-size：length|percentage|cover|contain；
· 可以填具体数值，40px 60px表示宽为40px，高为60px
· 也可以填百分比，按照父元素的尺寸设置
· cover，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，这样背景图片的某些位置就无法显示
· contain，把图像扩展至最大尺寸，以使宽度，高度完全适应内容区域
contain：
cover：
5.4 圆角矩形
使用border-radius使边框带圆角效果
border-radius：length；
length：内切圆半径，数值越大，弧线越强烈
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
数为精确值且只给了一个数值，则该数值为x坐标，另一个默认垂直居中
5.3.5 背景尺寸
background-size：length|percentage|cover|contain；
· 可以填具体数值，40px 60px表示宽为40px，高为60px
· 也可以填百分比，按照父元素的尺寸设置
· cover，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，这样背景图片的某些位置就无法显示
· contain，把图像扩展至最大尺寸，以使宽度，高度完全适应内容区域
contain：
cover：
5.4 圆角矩形
使用border-radius使边框带圆角效果
border-radius：length；
length：内切圆半径，数值越大，弧线越强烈
[外链图片转存中…(img-UY1TuBhZ-1715738459218)]
[外链图片转存中…(img-lRN2qdKH-1715738459219)]
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
扫一扫
1551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
