CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。同时也能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
以上都是官方语句，通俗来讲css是html的拓展，是网页的进一步美化。
本篇文章侧重于对css相关知识点的串讲以及和html的对比，我们上次已经讨论过html的用法，对这方面不了解的话，指路文章html详解。
目录
1.初识css
（1）内部样式：在html当中，我们最常编辑的区域是<body></body>,而在css中我们将涉及到<style>css代码</style>（在title标签下面）,如下所示为使用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>
<style>
/* 选择器{属性：属性值} */
</style>
</head>
<body>
</body>
</html>（2）外部样式：在css文件当中存放css代码，在html中用link引入，如下：
<!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="#">
<!-- herf中为css文件地址 -->
</head>
<body>
</body>
</html>之后的讲解更侧重与内部样式，外部样式了解即可。
2.基础选择器
上面的代码中有提到选择器书写的位置，接下来介绍有哪些选择器
- 标签选择器——选中同标签设置相同样式
- 类选择器——类名；标签中加class=“类名”
- id选择器——#id；标签中加id=“id”
- 通配符选择器——默认样式
其中类和id选择器可以差异化设置标签样式
<!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: azure;
}
.one{
color: blue;
}
#id{
color: brown;
}
/* *{
color: red;
} */
</style>
</head>
<body>
<p>标签选择器</p>
<div class="one">类选择器</div>
<div id="two">id选择器</div>
</body>
</html>有以下情况出现
如果只添加通配符选择器，也就是上述代码注释取消，将剩余css代码注释掉会有这样的情况
3.画盒子——背景图
div{
height: 10px;
/* 盒子高度 */
width: 50px;
/* 盒子宽度 */
background-color:red;
/* 背景色 */
}4.字体修饰
div{
height: 10px;
width: 50px;
background-color:red;
/* 字体大小 */
font-size: 50px;
/* 字体粗细(粗：700；细：400):400-700 */
font-weight: 600;
/* 是否倾斜（normal:正常；italic：倾斜） */
font-style: italic;
/* 文本对齐（center：居中；right：右对齐），默认左对齐 */
text-align: center;
/* 颜色色值（rgb法，rgba法，十六进制法，r：red，g：green；b：blue；a:透明度） */
color: #DDAABB;
/* color: rgb(40,21,46); */
/* color: rgba(45, 21, 41, 12); */
/* 行高（数+px；数——size的倍数）,垂直居中行高等于height值 */
line-height: 2;
/* 文字族——设置字体，浏览器依照顺序和自身能够使用字体进行字体选择 */
font-family: 'Courier New', Courier, monospace;
/* font属性——设置公共样式：倾斜，加粗，大小:30px，行高2倍，字体样式 */
/* font: italic 400 30px/2; */
/* 文本缩进（数+px；数+em） */
text-indent: 20px;
/* 图片居中（图片在div标签下）同文字居中 */
/* 文本修饰线 none：无；line-through：删除线；underline：下划线；overline：上划线*/
text-decoration: line-through;
}5.复合选择器
定义：有两个或多个基础选择器，通过不同方式组合（准确高效的选择）
1.后代选择器——选中所有后代元素
父选择器 子选择器{css属性}
2.子代选择器——选中子代元素
父选择器>子选择器{css属性}
3.并集选择器——选中多组相同设置样式的标签
选择器1,选择器2···选择器n{css属性}
4.交集选择器——同时满足多个条件的元素
选择器1选择器2{css属性}
ps：交集选择器中有标签选择器，标签选择器必须写在最前面
5.伪类选择器——选中元素的某个状态设置样式
鼠标悬停状态：选择器：hover{css属性}
ps：存在多个选择器时，选择其一即可。
拓展：
| 选择器 | 作用 |
| ：link | 访问前 |
| ：visited | 访问后 |
| ：active | 点击时（激活） |
6.css特性
1.继承性：子级继承父级文字控制属性
ps：子级拥有自己的样式则不会继承父级。
2.层叠性：相同的属性后面覆盖前面，不同的属性叠加
3.优先级：选择器优先级高的样式生效
公式：通配符<标签<类<id<行内样式<!important(选中范围越大，优先级越低)
叠加计算规则：存在复合选择器时，从左向右依次比较个数，同一级个数多的优先级高，如果个数相同，则向后比较；！important权重最高；继承权重最低。
7.Emmet写法
- html
- css：大多数简写方式为属性的首字母
8.背景属性
1.拆分写法
- 背景图——background-image（bgi）：url（路径）
- 背景图平铺方式——background-repeat（bgr）：属性值
| 属性值 | 效果 |
| no-repeat | 不平铺 |
| repeat | 平铺（默认） |
| repeatx | 水平平铺 |
| repeaty | 竖直平铺 |
3.背景图位置——background-position（bgp）：属性值
- 关键字
| 关键字 | 位置 |
| left | 左侧 |
| right | 右侧 |
| center | 居中 |
| top | 顶部 |
| bottom | 底部 |
- 坐标（数字+px，正负都可）
水平：正数向右，负数向左
垂直：正数向下，负数向上
关键字或数字可以只写一个，另一个方向居中
4.背景图缩放——background-size（bgz）
- 关键字
cover：覆盖背景区，可能背景图片部分看不见
contain：装入背景区，可能背景图片部分空白
- 百分比
- 数字+单位（eg：px）
5.背景图固定——background-attachment（bga）:fixed
2.复合写法
背景图复合属性——background（bg）:属性值（包括以上属性值）
9.显示模式
1.类型
- 块级元素
- 独占一行
- 宽度默认是父级的100%
- 添加宽高属性生效
- 行内元素
- 尺寸由内容决定
- 添加宽高属性不生效
- 行内块元素
- 尺寸由内容决定
- 添加宽高属性生效
2.转换显示模式
属性名：display
属性值：
| 属性值 | 效果 |
| block | 块级 |
| inline-block | 行内级 |
10.结构伪类选择器——根据元素结构关系查找元素
| 选择器 | 说明 |
| E:first-child | 查找第一个E元素 |
| E:last-child | 查找最后一个E元素 |
| E:nth-child(N) | 查找第N个E元素 |
ps：N可以是数学公式
| 功能 | 公式 |
| 偶数 | 2n |
| 奇数 | 2n+ |
| 5的倍数 | 5n |
| 第5个以后 | n+5 |
| 第5个以前 | -n+5 |
11.伪元素选择器——创造虚拟元素
| 选择器 | 说明 |
| E::before | 在E元素里面最前面添加一个元素 |
| E::after | 在E元素里面最后面添加一个元素 |
ps:
- 必须设置content:" "属性来设置内容
- 伪元素默认是行内显示模式
- 权重和标签选择器相同
12.盒子模型
1.内边距
属性：padding（四个方向内边距相等）/padding-方位名词（距离某一方向内边距）
多值写法：
2.边框线
属性：border
属性值：solid（实线），dashed（虚线），dotted（点线）
ps：border+方位名词（设置单方向边框线）
3.外边距
属性：margin（同padding）
合并现象：垂直排列的兄弟元素，上下margin合并（取最大值）
塌陷问题：父子级的标签，子级的添加使上外边距产生塌陷（导致父级一起向下运动）解决方法如下：
- 取消子级margin，父级设置padding；
- 父级设置overflow：hidden；
- 父级设置border-top
4.尺寸计算
盒子尺寸=内容尺寸+border尺寸+内边距尺寸
防止盒子撑大方法
- 手动减法border/padding的尺寸
- 内减模式：box-sizing：border-box
5.清除默认样式
*{
margin:0;
padding:0;
}去掉项目列表符号：list-style:none
6.元素溢出——控制溢出元素内容
属性名：overflow
属性值：
| 属性值 | 效果 |
| hidden | 溢出隐藏 |
| scroll | 溢出滚动（无论是否溢出，均显示滚动条位置） |
| auto | 溢出滚动（溢出才显示滚动条位置） |
7.行内元素——添加内外边距无法改变垂直位置
行内元素添加line-height
8.圆角——设置外边框为圆角
属性名:border-radius
属性值:数字+px/百分比
ps:属性值是圆角半径
| 取值个数 | 示例 | 含义 |
| 1 | border-radius:10px; | 四个圆角半径均为10px |
| 2 | border-radius:10px 80px; | 上左+下右:10px;上右+下左:80px; |
| 3 | border-radius:10px 40px 80px; | 上左:10px;上右+下左:40px;下右:80pX |
| 4 | border-radius:10px 20px 40px 0x; | 上左:10px;上右:20px;下右:40px;下左:80pX |
- 常见应用-正圆形状。
- 给正方形盒子设置圆角属性值为 宽高的一半/50%
- 常见应用 -胶囊形状
- 给长方形盒子设置圆角属性值为 盒子高度的一半
9.阴影——给元素设置阴影效果
属性名:box-shadow
属性值:x轴偏移量 γ轴偏移量 糊半径 扩散半径 颜色 内外阴影
ps:
- X轴偏移量 和Y轴偏移量 必须书写.
- 默认是外阴影，内阴影需要添加 inset
13.标准流：默认排列规则
14.浮动（了解）——块级水平排列
float：属性值
| 属性值 | 效果 |
| left | 左对齐 |
| right | 右对齐 |
<!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>
.one{
width: 50px;
height: 50px;
background-color: #444ffe;
float: left;
}
.two{
width: 80px;
height: 40px;
background-color: aqua;
float: left;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>
</html>浮动影响：浮动的盒子会脱标，当父级无高度时，子级无法撑开。
如何清除浮动影响？
1.额外清除法
.clearfix{
clear:both;
}2.单伪元素法（在父级添加块级元素）
.clearfix::after{
content:"";
display:block;
clear:both;
}3.双伪元素法
.clearfix::after,
.clearfix::after{
content:"";
display:table;
}
.clearfix::after{
clear:both;
}4.overflow（父级+css属性）
overflow：hidden
15.Flex——弹性布局
设置方式：父级元素设置display：flex，子元素自动挤压或拉伸
默认主轴为水平方向，侧轴为垂直方向
主轴对齐方式
属性名：justify-content
| 属性值 | 效果 |
| flex-start | 默认值，弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
| center | 弹性盒子沿主轴居中排列 |
| space-between | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间 |
| space-around | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧 |
| space-evenly | 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 |
侧轴对齐方式
属性名
- align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式(给弹性容器设置)
- align-self:单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置)
| 属性值 | 效果 |
| stretch | 弹性盒子沿着侧轴线被拉伸至铺满容器(弹性盒子没有设置侧轴方向尺寸则默认拉伸) |
| center | 弹性盒子沿侧轴居中排列 |
| flex-start | 弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
修改主轴方向
属性名:flex-direction
| 属性值 | 效果 |
| row | 水平方向，从左向右(默认) |
| column | 垂直方向，从上向下 |
| row-reverse | 水平方向，从右向左 |
| column-reverse | 垂直方向，从下向上 |
弹性伸缩比——控制弹性盒子的主轴方向的尺寸。
属性名:flex
属性值:整数数字，表示占用父级剩余尺寸的份数
弹性盒子换行
原因：弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。
属性名:flex-wrap
属性值
·wrap:换行
·nowrap:不换行(默认)
16.定位——灵活改变盒子在网页的位置
（1）属性名：position
| 定位模式 | 属性值 | 是否脱标 | 显示模式 | 参照物 |
| 相对定位 | relative | 否 | 保持标签原有显示模式 | 自己原来位置 |
| 绝对定位（子绝父相） | absolute | 是 | 行内块特点 | 1.已经定位的祖先元素 2.浏览器可视区 |
| 固定定位 | fixed | 是 | 行内块特点 | 浏览器窗口 |
（2）边偏移:设置盒子的位置
- left
- right
- top
- bottom
（3）定位剧中
步骤：
- 绝对定位
- 水平、垂直边偏移为 50%
- 子级向左、上移动自身尺寸的一半
img{
position: absolute;
left: 50%;
margin-left: -14px;
margin-top: 50px;
}- 左、上的外边距为 -尺寸的一半
- transform:translate(-50%,-50%)
img{
position: absolute;
left: 50%;
/* margin-left: -14px;
margin-top: 50px; */
transform:translate(-50%,-50%)
}（4）堆叠层级 z-ingex——设置定位元素的层级顺序，改变定位元素的显示顺序
/* div为父级，box1和box2为子级 */
div{
height: 50px;
width: 50px;
}
.box1{
background-color: royalblue;
}
.box2{
background-color: pink;
}
加入定位默认效果:按照标签书写顺序，后来者居上
/* div为父级，box1和box2为子级 */
div{
position: absolute;
height: 50px;
width: 50px;
}
.box1{
background-color: royalblue;
}
.box2{
background-color: pink;
}
设置边偏移改变位置
设置堆叠层级 z-ingex改变堆叠关系（值大的在上方）
<style>
/* div为父级，box1和box2为子级 */
div{
position: absolute;
height: 50px;
width: 50px;
}
.box1{
background-color: royalblue;
z-index: 2;
}
.box2{
background-color: pink;
top: 20px;
left: 10px;
z-index: 1;
}
</style>
17.css精灵（拓展）
CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position 精确的定位出背景图片的位置。
优点:减少服务器被请求次数减轻服务器的压力，提高页面加载速度
步骤:
1.创建盒子，盒子尺寸与小图尺寸相同
2.设置盒子背景图为精灵图
3.添加 background-position 属性，改变背景图位置
3.1 测量小图片左上角坐标
3.2 职负数坣标为 background-position 属性值(向左上移动图片位置)
<style>
div{
/* 创建盒子，盒子尺寸与小图尺寸相同 */
width: 112px;
height: 110px;
background-color :pink;
/* 设置盒子背景图为精灵图 */
background-image:url();
/* 添加 background-position 属性，改变背景图位置 */
background-position: -256px-276px;
}
</style>此篇文章到此结束,大家自己也试着找个网页练练手吧！代码无情，人间有情，欢迎大家点赞评论加收藏。内容如有问题还请大家在评论区指点一二。
扫一扫
1090
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
