CSS 基础知识
一. CSS引入方式
(一) 内部样式表
🔰内部样式表(内嵌样式表)是写到HTML内部，是将所有的CSS代码抽取出来，单独放到一个
<style>标签中；
🔰语法：
<style>
div {
color: red;
font-size: 12px;
}
</style>
🔰<style>标签理论上可以放在HTML文档的任何地方，但是一般会放在文档的<head>标签中；
🔰通过此种方式可以方便控制当前整个页面中的元素样式设置；
(二) 行内样式表
🔰行内样式表(内联样式表)是在元素标签内部的
style属性中设定CSS样式，适合修改简单样式；
🔰语法：
<div style="color: red; font-size: 12px;">你好</div>
(三) 外部样式表
🔰实际开发都是外部样式表。适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中；
🔰引入外部样式表分两步：
1）新建一个后缀名为.css的样式文件，把所有的CSS代码都放入此文件中；
2）在HTML页面中，使用<link>标签引入这个文件；
<link rel="stylesheet" href="css文件路径"
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档于被链接文档之间的关系，在这里需要指定为"stylesheet"，表示链接的文档是一个样式表文件； |
| href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径 |
🔰使用外部样式表设定CSS，通常也被称为外部链接或链接式引入，这种方式是开发中常用的方式；
二. CSS简介
(一) CSS-美容师
🔰CSS也是一种标记语言；
🔰CSS主要用于设置HTML的文本内容(字体，大小，对齐方式等)，图片外部(宽高，边框样式，边距)以及版面的布局和外观显示样式；
🔰CSS可以美化HTML，让HTML更漂亮，让页面布局更简单；
🔰由HTML专注做结构呈现，样式交给CSS，即结构(HTML)与样式(CSS)相分离；
(二) 语法规范
🔰CSS规则由两个主要的部分构成：选择器以及一条或多条声明；
h1 {color: red; font-size: 25px;}
↑ ↑ ↑
选择器 属性 值
🔰选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式；
🔰属性是对指定的对象设置的样式属性，例如：字体大小，文本颜色等；
(三) CSS代码风格
1.样式格式书写
🔰紧凑格式：
h3 {color: red; font-size: 20px;}
🔰展开风格：
h3 {color: red;
fond-size: 20px;
}
🔰推荐第二种格式，因为更直观；
2.空格规范
🔰属性值前，冒号后面，保留一个空格；
🔰选择器和大括号之间保留空格；
三. CSS选择器
(一) 基础选择器
1. 标签选择器
(可以把某一类标签全部选择出来)
🔰标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS格式；
🔰语法：
标签名 {
属性1: 属性值1;
属性2: 属性值2;
……
}
<style>
p {
color: red;
}
</style>
<p>猫咪</p>
2. 类选择器
(可以选出一个或多个标签)
🔰如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以选择类选择器；
🔰语法：
.som(类名) {
属性1: 属性值1;
属性2: 属性值2;
……
}
单类名使用方式
🔰结构需要class属性来调用；
<div class="som">青春不常在</div>
多类名使用方式
<div class="som lef">抓紧谈恋爱</div>
🔰在标签class属性中可以写多个类名：
🔰多个类名中间必须用空格分开；
🔰这个标签就可以分别具有这些类名的样式；
🔰使用场景：
1）可以把一些标签元素相同的样式(共同的部分)放到一个类里面；
2）这些标签都可以调用这个公共的类，然后再调用自己独有的类；
<body>
<style>
.blue {
color: blue;
}
</style>
<div class="blue">猫咪</div>
</body>
3. id选择器
(一次只能选出一个标签)
🔰id选择器可以为标有特定的HTML元素指定特定的样式；
🔰语法：
#id名 {
属性1: 属性值1;
属性2: 属性值2;
……
}
🔰id属性只能在每个HTML文档中出现一次；
<body>
<style>
#red {
color: red;
}
</style>
<div id="blue">猫咪</div>
</body>
4. 通配符选择器
(选择所有的标签)
🔰语法：
* {
属性1: 属性值1;
属性2: 属性值2;
……
}
🔰通配符选择器不需要调用，自动就会给所有的元素使用样式；
🔰特殊情况才使用；
* {
padding: 0;
margin: 0;
}
5. 优先级
内联样式表（权重值 = 1000） > id选择器（100） > class 选择器（10） > 类型（元素）选择器（1） > 通配符选择器（0）
(二) 复合选择器
什么是复合选择器
🔰复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的；
🔰复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的；
🔰常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等等；
1. 后代选择器
🔰后代选择器：又称为包含选择器，可以选择父元素里面的子元素。
🔰写法：把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就会成为外层标签的后代。
🔰语法：
元素1元素2{样式声明}
上述语法表示选择元素1里面的所有元素2.
🔰元素2可以是儿子，也可以是孙子，只要是元素1的后代即可；
🔰元素1和元素2可以是任意基础选择器；
<body>
<style>
ul li {
color: red;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
2. 子选择器
🔰子元素选择器：只能选择作为某元素的最近一级子元素。
🔰语法：
元素1>元素2 { 样式声明}
上述语法表示选择元素1里面的所有直接后代元素2。
🔰元素2必须是亲儿子，其孙子，重孙子之类都不归他管；
<body>
<style>
div>ul {
color: red;
}
</style>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
3. 并集选择器
🔰并集选择器：可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
🔰任何形式的选择器都可以作为并集选择器的一部分；
🔰语法：
元素1, 元素2 { 样式声明}
上述语法表示选择元素1和元素2。
<body>
<style>
ul, div {
color: red;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div>你好</div>
</body>
4. 伪类选择器
🔰伪类选择器：用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素；
🔰伪类选择器最大的特点是用冒号(:)表示，比如：:hover, :first-child。
1) 链接伪类选择器
🔰
a:link：选择所有未被访问的链接；
🔰a:visited：选择所有已被访问的链接；
🔰a:hover：选择鼠标指针悬停和划过的链接
🔰a:active：选择鼠标按下未弹起的链接
🔰input:active：选择元素获得光标焦点的input元素
🔰语法：
a:link { 样式声明 }
🔰为了确保生效，按照LVHA的顺序声明 :link - :visited - :hover - :active。
2) :focus 伪类选择器
🔰:focus 伪类选择器：用于选取获得焦点的表单元素；
🔰焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说；
🔰语法：
input: focus {
background-color: yellow;
}
(三) 新增选择器
1. 属性选择器
🔰属性选择器可以根据元素特定属性来选择元素。这样就可以不用借助于类或者id选择器；
| 选择符 | 简介 |
|---|---|
| E[att] | 选择具有 att 属性的 E 元素 |
| E[att=“val”] | 选择具有 att 属性且属性值等于 val 的 E 元素 |
| E[att^=“val”] | 选择具有 att 属性且值以 val 开头的 E 元素 |
| E[att$=“val”] | 选择具有 att 属性且值以 val 结尾的 E 元素 |
| E[att^=“val”] | 选择具有 att 属性且值以中含有 val 的 E 元素 |
<style>
input[value] {
background: pink;
}
input[type='text'] {
border: 5px solid yellow;
}
</style>
<body>
<input type="text" value="你好"> <br>
<input type="button" value="你好"><br>
<input type="text" ><br>
<input type="password" value="你好">
</body>
2. 结构伪类选择器
🔰结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择里面的子元素；
| 选择符 | 简介 |
|---|---|
| E：first-child | 匹配父元素中的第一个子元素 E |
| E：last-child | 匹配父元素中的最后一个 E 元素 |
| E：nth-child(n) | 匹配父元素中的第 n 个子元素 E |
| E：first-of-type | 指定类型 E 的第一个 |
| E：last-of-type | 指定类型 E 的最后一个 |
| E：nth-of-type(n) | 指定类型 E 的第 n 个 |
🔰nth-child(n) 选择某个父元素的一个或多个特定的子元素
⚪ n 可以是数字，关键字，公式
◓ n 如果是数字，就是选择第 n 个子元素，里面数字从1开始……
◓ n 可以是关键字，even 偶数，odd 奇数
◓ n 可以是公式：常见公式如下：
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15 …… |
| n+5 | 从第 5 个开始(包含第五个)到最后 |
| -n+5 | 前 5 个(包含第五个) |
🔰nth-of-type(n)同上；
🔰区别：
◓ nth-child 对父元素里面所有孩子进行排序(序号是固定的)；执行的时候，先找到第 n 个孩子，然后看看是否和 E 匹配；
◓ nth-of-type 对父元素里面指定子元素进行排序；执行的时候，先匹配 E，然后再根据 E 找第 n 个孩子；
<style>
span:first-child {
background: pink;
}
span:last-child {
background: #c49494;
}
span:nth-child(2) {
background: #f65555;
}
span:nth-of-type(5) {
color: #fff;
}
</style>
<body>
<div>
<span class="s">你好</span>
<span>我好</span>
<span class="ss">大家好</span>
<span>好不好</span>
<span class="sa">和还好</span>
</div>
</body>
3. 伪元素选择器
🔰伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构；
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
🔰注意：
◓before和after创建一个元素，但是属于行内元素
◓ 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
◓语法：element::before {}
◓before和after必须有content属性
◓before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
◓伪元素选择器和标签选择器一样，权重为1
<style>
div::before {
content: '🔍';
width: 20px;
height: 10px;
}
div::after {
content: '❀';
width: 20px;
height: 10px;
}
</style>
<body>
<div>
你好
</div>
</body>
四. CSS样式属性
(一) 字体属性
| 属性 | 描述 |
|---|---|
| font | 设置字体的所有属性 |
| font-family | 设置字体系列，微软雅黑等 |
| font-size | 设置字体大小 |
| font-style | 设置字体样式 |
| font-weight | 设置字体粗细 |
1. 字体系列（font-family）
🔰CSS使
font-family属性定义文本的字体系列；
🔰语法：
div {
font-family: Arial, "Microsoft Yahei", "微软雅黑"
}
🔰各种字体间必须使用英文状态下的逗号分开；
🔰一般情况下，如果由空格隔开的多个单词组成的字体，加引号；
🔰最常见的几种字体：
body {
font-family: "Microsoft Yahei", tahoma, arial, "Hiragino Sans GB"
}
2. 字体大小（font-size）
🔰CSS使用
font-size属性定义字体大小；
🔰语法：
p {
font-size: 20px;
}
🔰px(像素)大小是我们网页的最常用的单位；
🔰可以给body指定整个页面的文字的大小；标题标签比较特殊，需要单独指定文字大小；
3. 字体粗细（font-weight）
🔰CSS使用
font-weight属性设置文本字体的粗细；
🔰语法：
p {
font-weight: bold
}
| 属性值 | 描述 |
|---|---|
| normal | 默认值(不加粗的) |
| bold | 定义粗体(加粗的) |
| 100~900 | 400等于normal，而700等于bold；注意这个数字后面不跟单位 |
4. 字体样式（font-style）
🔰CSS使用
font-style属性设置文本的风格；
🔰语法：
p {
font-style: normal;
}
| 属性值 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 |
| italic | 浏览器会显示斜体的字体样式 |
5. 字体复合属性
🔰字体复合属性可以把以上文字样式综合来写，这样可以更节约代码；
🔰语法：
body {
font: font-style font-weight font-size/line-height font-family;
}
🔰使用font属性时，必须按上面的语法格式中的顺序书写，不能更换顺序，并且各个属性之间以空格隔开；
🔰不需要设置的属性可以忽略(取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用；
(二) 文本属性
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向 |
| line-height | 设置行高 |
| text-indent | 文本首行缩进 |
| text-decoration | 设定文本下划线 |
| text-align | 文本对齐 |
| vertical-align | 文本的垂直对齐方式 |
1. 文本颜色
🔰
color属性用于定义文本颜色；
🔰语法：
div {
color: reed;
}
| 表示方式 | 属性值 |
|---|---|
| 预定义的颜色值 | red, green, blue,…… |
| 十六进制 | #FF0000, #FF6600, …… |
| RGB代码 | rgb(255, 0, 0)或rgb(100%, 0%, 0%) |
🔰开发者常用的是十六进制；
2. 对齐文本
🔰
text-align属性用于设置元素内文本内容的水平对齐方式；
🔰语法：
div {
text-align: center;
}
| 属性值 | 解释 |
|---|---|
| left | 左对齐(默认值) |
| right | 右对齐 |
| center | 居中对齐 |
3. 装饰文本
🔰
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线，删除线，上划线等；
🔰语法：
div {
text-decoration: underline;
}
| 属性值 | 描述 |
|---|---|
| none | 默认。没有装饰线(最常用) |
| underline | 下划线。链接a自带下划线(常用) |
| overline | 上划线。(几乎不用) |
| line-through | 删除线。(不常用) |
4. 文本缩进
🔰
text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进；
🔰语法：
p {
text-indent: 2em
}
🔰em是一个相对单位，就是当前元素(font-size)1个文字的大小；
5. 行间距
🔰
line-height属性用于设置行间的距离(行高)。可以控制文字行与行间的距离；
🔰语法：
p {
line-height: 26px;
}
(三) 背景属性
🔰背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等；
| 属性 | 描述 |
|---|---|
| background-color | 设置背景颜色 |
| background-image | 设置背景图片 |
| background-attachment | 图片是否跟随内容滚动 |
| background-position | 背景图片的初始位置 |
| background | 设置背景的所有相关属性 |
| background-repeat | 背景平铺方式 |
| background-position | 设置背景位置 |
| background-size | 设置背景尺寸 |
| background-position | 设置背景位置 |
1. 背景颜色
🔰
background-color属性定义了元素的背景颜色；
🔰语法：
background-color: 颜色值;
🔰一般情况下元素背景颜色默认值是transparent(透明)，我们也可以手动指定背景颜色为透明色；
2. 背景图片
🔰
background-image属性描述了元素的背景图像。实际开发常见于logo或者一些特殊装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置；
🔰语法：
background-image: none/url(url);
| 参数值 | 作用 |
|---|---|
| none | 无背景图(默认的) |
| url | 使用绝对或者相对地址指定背景图像 |
1. 背景图片半透明
opacity: 0.5;
2. 图片，背景色结合渐变
background-image: linear-gradient(to top, rgb(255, 250, 250) 5%, rgba(0, 0, 0, 0)), url(./img/动图合集/1.gif);
3. 背景平铺
🔰如果需要在HTML页面上对背景图像进行平铺，可以使用
background-repeat属性；
🔰语法：
background-repeat: repeat/ no-repeat/ repeat-x/ repeat-y;
| 参数值 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺(默认的) |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
4. 背景图片位置
🔰利用
background-position属性可以改变图片在背景中的位置；
🔰语法：
background-position: x y;
参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精准单位；
| 参数值 | 说明 |
|---|---|
| length | 百分数/由浮点数和单位标识符组成的长度值 |
| position | top(顶部)/ center(中间)/ bottom(底部)/ left(左边)/ center(中心)/ right(右边) 方位名词 |
1）参数是方位名词：
🔰如果指定的两个值都是方位词，则两个值前后顺序无关，比如
left top和top left效果一致；
🔰如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐；
2）参数是精准单位
🔰如果参数值是精准坐标，那么第一个肯定是X坐标，第二个一定是Y坐标；
🔰如果只指定一个数值，那该数值一定是X坐标，另一个默认垂直居中；
3）参数是混合单位
🔰如果指定的两个值是精准单位和方位名词混合使用，则第一个值是X坐标，第二个值是Y坐标；
5. 背景图固定(背景附着)
🔰
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
🔰语法：
background-attachment: scroll / fixed;
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
6. 背景复合写法
🔰当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：
background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;
(四) 圆角边框
🔰
border-radius属性用于设置元素的外边框圆角；
🔰语法：
border-radius: length;
参数可以为数值或百分比的形式；
该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角；
分开写：
border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius
(五) 盒子模型
🔰所谓盒子模型：就是 把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
🔰CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框，外边距，内边距和实际内容。
1.边框
🔰border可以设置元素的边框。边框有三部分组成，边框宽度，边框样式，边框颜色；
🔰语法：
boder: boder-width / boder-style / boder-color
| 属性 | 作用 | 属性值 |
|---|---|---|
| boder-width | 定义边框粗细 | 单位是px |
| boder-style | 边框的样式 | dotted(点线) / dashed(虚线) / solid(实线) / double(双边框) / none(无边) / hidden(透明)/ groove / ridge / inset / outset |
| boder-color | 边框颜色 | red, …… |
🔰边框简写：
border: 1px(宽度) solid(样式) red(颜色);
边框分开写法：
border-top: 1px solid red; /*只设定上边框，其余同理*/
表格的细线边框
🔰
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
🔰语法：
border-collapse: collapse; /*表示相邻边框合并在一起*/
collapse单词是合并的意思。
边框会影响盒子实际大小
🔰边框会额外增加盒子的实际大小，因此我们有两个方案解决：
- 测量和自动时候，不量边框；
- 如果测量的时候包含了边框，则需要width/height减去边框宽度；
2.内边距
🔰
padding属性用于设置内边距，即边框与内容之间的距离；
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
🔰
padding属性可以有一到四个值；
| 值的个数 | 表达的意思 |
|---|---|
| padding: 5px; | 1个值，代表上下左右都是5像素内边距 |
| padding: 5px 10px; | 2个值，上下，左右 |
| padding: 5px 10px 20px; | 3个值，上，左右，下 |
| padding: 5px 10px 20px 40px; | 4个值，上 ，右，下， 左 |
🔰
padding影响盒子实际大小，解决方案是：让width/height减去多出来的内边距大小即可；
3.外边距
🔰
margin属性用于设置外边距，即控制盒子和盒子之间的距离；
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
🔰
margin简写方式代表的意义跟padding完全一致；
外边距典型应用
🔰外边距可以让块级盒子水平居中，但是必须满足两个条件：
1）盒子必须指定了宽度(width);
2）盒子左右的外边距都设置为auto；
.header {width: 960px; margin: 0 auto;}
外边距合并
🔰对于两个嵌套关系(父子关系)的块级元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
🔰解决方案:
1) 可以为父元素定义上边框；
2) 可以为父元素定义上内边距；
3) 可以为父元素添加:overflow: hidden;
4. 清除内外边距
🔰网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
🔰语法：
* {
padding: 0; /*清楚内边距*/
margin: 0；/*清除外边距*/
}
🔰注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级元素和行内块元素就可以了。
五. CSS的元素显示模式
🔰元素显示模式：就是元素(标签)以什么方式进行显示，比如
<div>自己独占一行，比如一行可以放多个<span>;
🔰HTML元素一般分为块模式和行模式两种类型；
(一) 块级元素
🔰常见的块级元素：
<p>用于表示段落<h1>-<h6>用于表示标题<ul>,<ol>,<li>用于创建无序列表和有序列表div用于分组和布局页面元素<table>,,<tr>,<td>用于创建表格<hr>用于创建水平线<pre>用于展示预格式化的文本，其中的空格，回车等会保留在输出结果中🔰块级元素的特点：
1）自己独占一行；
2）高度，宽度，外边距以及内边距都可以控制；
3）宽度默认是容器(父级宽度)的100%；
4）是一个容器及盒子，里面可以放行内或者块级元素；
🔰文字类的元素内不能使用块级元素；
🔰<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>;
(二) 行内元素
🔰常见的行内元素
<a>用于创建超链接<span>用于包含文本和其他行内元素<b>,<i>,<em>……用于对文本进行装饰和强调<br>用于强制换行<code>,<var>,<kbd>用于表示计算机代码和用户输入<q>,<cite>,<blockquote>用于表示引用和短文本块🔰行内元素的特点：
1）相邻行内元素在一行上，一行可以显示多个；
2）高，宽直接设置是无效的；
3）默认宽度就是它本身内容的宽度；
4）行内元素只能容纳文本或其他行内元素；
(三) 行内块元素
🔰常见的行内块级元素：
<img>用于插入图片<button>用于创建按钮<input>用于创建输入框和表单元素<select>用于创建下拉菜单<textarea>用于创建多行文本输入框<label>用于创建表单标签🔰他们同时具有块元素和行内元素的特点；
🔰行内块元素的特点：
1）一行可以显示多个(行内元素特点)；
2）默认宽度就是它本身内容的宽度(行内元素特点)；
3）高度，行高，外边距以及内边距都可以控制(块级元素特点)；
(四) 元素显示模式转换
🔰转换为块元素：
display:block;；
🔰转换为行内元素：display:inline:；
🔰转换为行内块：display:inline-block;；
六. CSS阴影
(一) 盒子阴影
🔰
box-shadow属性为盒子添加了盒子阴影属性；
🔰语法：
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必须。水平阴影的位置。允许负值 |
| v-shadow | 必须。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的尺寸 |
| color | 可选。阴影的颜色 |
| inset | 可选。将外部阴影改为内部阴影 |
box-shadow: 5px 5px 6px #1f4746, -5px -5px 6px #7dffff;
(二) 文字阴影
🔰
text-shadow属性将阴影应用于文本；
🔰语法：
text-shadow: h-shadow v-shadow blur color;
属性值的语义跟上面一样；
七. CSS浮动
🔰网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动；
🔰float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘；
🔰语法：
选择器 { float：属性值；}
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动(默认值) |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
(一) 浮动特性
🔰加了浮动之后的元素，会具有很多特性，需要我们掌握。
1.浮动元素会脱离标准流(脱标)
📌脱离了标准流的控制，移动到指定的位置；
📌浮动的盒子不在保留原先的位置；
2.浮动的元素会一行显示并且元素顶部对齐
📌如果多个盒子都设置了浮动，则它们会按照属性值一行显示并且顶端对其排列。
📌浮动的元素是相互贴靠在一起的(不会有缝隙)，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐；
3.浮动的元素会具有行内块元素的特性
📌如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定；
📌如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和🔰🔰🔰🔰🔰宽度；
(二) 浮动元素经常和标准流父级搭配使用
🔰为了约束浮动元素位置，我们网页布局一般采取的策略是：
🔰先用标准流的父级元素排列上下位置，之后内部元素采取浮动排列左右位置。复合网页布局第一准则。
🔰一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动。
(三) 清除浮动
🔰 为什么需要清除浮动
- 父级没高度；
- 子盒子浮动了；
- 影响下面的布局了，我们就应该清除浮动了。
🔰 清除浮动的本质：清除浮动元素脱离标准流造成的影响；
🔰清除浮动的策略：闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子；
清除浮动的方法
- 额外标签法
🔰隔墙法，就是在
最后一个浮动的子元素后面添加一个额外标签，在其类里面添加清除浮动样式；
- 父级添加overflow
🔰可以给父级添加
overflow属性，将其属性值设置为hidden, auto或scroll；
🔰优点：代码简洁；
🔰缺点：无法显示溢出的部分；
- :after 伪元素法
🔰:after方式是额外标签法的升级版。也是给父元素添加如下代码：
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6, 7专有 */ *zoom: 1; }🔰优点：没有增加标签，结构更简单；
🔰缺点：照顾低版本浏览器；
- 双伪元素清除浮动
🔰也是给父元素添加如下代码：
.clearfix: before, .clearfix: after { content:""; display: table; } .clearfix: after { clear: both; } .clearfix { /* IE6, 7专有 */ *zoom: 1; }🔰优点：代码更简洁；
🔰缺点：照顾低版本浏览器；
八. CSS定位
(一) 为什么需要定位
🔰定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
(二) 定位组成
🔰定位：将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子；
🔰定位 = 定位模式 + 边偏移
1. 位模式
🔰定位模式决定了元素的定位方式，它通过CSS的
position属性来设置，其值可以分为四个：
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
| sticky | 粘性定位 |
1) 静态定位 static
🔰静态定位是元素的默认定位方式，无定位的意思。
🔰语法：
选择器 { position: static;}
● 静态定位按照标准流特性摆放位置，它没有边偏移；
2) 相对定位 relative
🔰相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。
🔰语法：
选择器 { position: relative;}
🔰相对定位的特点：
1. 移动位置的时候参照点是自己原来的位置；
2. 不脱标，继续保持原来的位置；
3) 绝对定位 absolute
🔰绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。
🔰语法：
选择器 { position: absolute;}
🔰绝对定位的特点：
1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位；
2. 如果祖先元素有定位(相对，绝对，固定定位)，则以最近一级的有定位祖先元素为参考点移动位置；
3. 脱标，不再占有原先的位置；
4. 因为父级需要占有位置，因此是相对定位；子盒子不需要占有位置，则是绝对定位(子绝父相)；
4) 固定定位 fixed
🔰固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
🔰语法：
选择器 { position: fixed;}
🔰固定定位的特点：
1. 以浏览器的可视窗口为参照点移动元素；
● 跟父元素没有任何关系；
● 不随滚动条滚动；
2. 脱标，不在占有原先的位置；
5) 粘性定位 sticky
🔰粘性定位可以被认为是相对定位和固定定位的混合。
🔰语法：
选择器 { position: sticky;}
🔰粘性定位的特点：
1. 以浏览器可视窗口为参照点移动元素；
2. 不脱标，继续占有原先的位置；
3. 必须添加top, left, right, bottom其中一个才有效；
2. 边偏移
🔰边偏移就是定位的盒子移动到最终位置。有
top, bottom, left和right4个属性。
| 边偏移属性 | 实例 | 描述 |
|---|---|---|
| top | top: 80px; | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | bottom: 80px; | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | left: 80px; | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | right: 80px; | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
(三) 定位叠放次序 z-index
🔰在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用
z-index来控制盒子的前后次序；
🔰语法：
选择器 { z-index: 1;}
● 数值可以是正整数，负数或0，默认是auto，数值越大，盒子越靠上；
● 如果属性值相同，则按照书写顺序，后来居上；
● 数字后面不能加单位；
●只有定位盒子才有z-index属性；
(四) 定位拓展
1. 定位特殊属性
- 行内元素添加绝对或固定定位，可以直接设置高度和宽度；
- 块级元素添加绝对或固定定位，如果不给宽度或高度，默认大小是内容的大小；
2. 脱标的盒子不会触发外边距塌陷
🔰浮动元素，绝对定位(固定定位)元素都不会触发外边距合并的问题；
3. 绝对定位(固定定位)会完全压住盒子
🔰浮动元素只会压住下面标准流的盒子，绝对定位(固定定位)会压住下面标准流所有的内容；
九. 元素的显示与隐藏
🔰本质：让一个元素在页面中隐藏或者显示出来；
(一) display 属性
🔰
display属性用于设置一个元素应如何显示。
●display: none;隐藏对象
●display: block;除了转换为块级元素之外，同时还有显示元素的意思；
🔰display隐藏元素后，不在占有原来的位置；
(二) visibility 可见性
🔰
visibility属性用于指定一个元素应可见还是隐藏；
●visibility: visible;元素可视
●visibility: hidden;元素隐藏
🔰visibility元素隐藏后，继续占有原来的位置；
(三) overflow 溢出
🔰
overflow属性指定了如果内容溢出一个元素的框(超过指定高度及宽度)时，会发生什么。
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
十. CSS3 的新特性
(一) CSS盒子模型
box-sizing: content-box盒子大小为width + padding + border(以前默认的)box-sizing: border-box盒子大小为width🔰如果盒子模型我们改为了
box-sizing: border-box，那padding和border就不会撑大盒子了(前提 padding 和 border 不会超过 width 宽度)
(二) CSS其他特性
1. CSS3 滤镜filter
🔰
filterCSS属性将模糊或颜色偏移等图形效果应用于元素；
🔰语法：
filter: 函数();例如：filter: blur(5px);blur模糊处理 数值越大越模糊
2. calc 函数
🔰
calc()此CSS函数让你在声明CSS属性值时执行一些运算；
🔰语法：
width: calc(100% - 80px);
🔰括号里面可以使用+ - * /来进行运算；
3. 鼠标样式更改
| 样式 | 解析 |
|---|---|
| cursor: default; | 默认 |
| cursor: pointer; | 小手 |
| cursor: move; | 移动 |
| cursor: text; | 文本 |
| cursor: not-allowed; | 禁止 |
(三) CSS新增属性
1. 过渡
🔰过度是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JS的情况下，从一种样式换为另一种样式时为元素添加效果。
🔰过渡动画：是从一种状态渐渐的过渡到另外一种状态。
🔰经常和:hover一起搭配使用；
transition: 要过度的属性 花费时间 运动曲线 何时开始；
- 属性：想要变化的css属性，宽高 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
- 花费时间：单位是 秒，比如0.5s；
- 运动曲线：默认是ease(可以忽略)；
- 何时开始：单位是 秒，可以设置延迟触发时间，默认是 0s(可以忽略)；
🔰口诀：谁做过渡给谁加
.box { width: 300px; height: 200px; background-color: pink; margin: 0 auto; transition: width 1s ease-out 1s; } .box:hover { width: 400px; }
*进度条练习
🔰鼠标经过进度条时，进度条从50% ->100%<div class="box"> <div class="ds"></div> </div> <style> .box { width: 300px; height: 30px; border: 1px solid red; border-radius: 15px; padding: 1px; } .ds { width: 50%; height: 100%; background-color: red; border-radius: 13px; transition: width 1s; } .box:hover .ds { width: 100%; } </style>
2. 2D转换
🔰转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果；
🔰转换可以简单理解为变形：
- 移动：
translate- 旋转：
rotate- 缩放：
scale
1）2D转换之移动 translate
🔰2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似
定位。
🔰语法：transform: translate(100px, 50px); /*x,y同时移动*/ transform: translateX(100px); /*x移动*/ transform: translateY(100px); /*y移动*/🔰定义2D转换中的移动，沿着X和Y轴移动元素
🔰translate 最大的优点：不会影响到其他元素的位置
🔰translate 中的百分比单位是相对于自身元素的translate:(50%, 50%);
🔰对行内标签没有效果
🔰可以跟过渡结合使用
2）2D转换之旋转 rotate
🔰2D旋转是指让元素在2维平面内顺时针旋转或者逆时针旋转。
🔰语法：transform: rotate(度数); transform: rotate(45deg);🔰rotate 里面跟度数，单位是deg ；
🔰度数为正时，顺时针，负时，逆时针；
🔰默认旋转的中心点是元素的中心点；
3）2D转换中心点 transform-origin
🔰我们可以设置元素转换的中心点。
🔰语法：transform-origin: x y;🔰注意后面的参数x和y用空格隔开；
🔰x y 默认转换的中心点是元素的中心点 (50% 50%)；
🔰还可以给x y 设置像素或者方向名词(top bottom left right center);
.boxs {
margin-left: 200px;
margin-top: 20px;
width: 200px;
height: 200px;
border: 2px solid #000; }
.boxs::after {
content: "黑马";
display: block;
width: 100%;
height: 100%;
background-color: pink;
/*缩放0.5倍，旋转180度*/
transform: scale(0.5, 0.5) rotate(180deg);
transform-origin: left bottom;
transition: transform 1s; }
/*鼠标经过时，度数回复0，缩小状态恢复正常*/
.boxs:hover::after { transform: scale(1, 1) rotate(0deg); }
4）2D转换之缩放 scale
🔰只要给元素添加这个属性就能控制它放大还是缩小。
🔰语法：transform: scale(x, y);🔰注意其中的x和y 用逗号分隔；
🔰transform: scale(1， 1)：宽高都放大一倍，相对于没有放大；
🔰transform: scale(2，2)：宽高都放大2倍；
🔰transform: scale(2)：只写一个参数，第二个参数和第一个参数一样；
🔰transform: scale(0.5，0.5)：缩小；
🔰scale 缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子。
<!--鼠标放上去，图片放大显示-->
<div class="doxss">
<img src="../图片/唯美动图/雨滴.gif" alt="">
</div>
<style>
.doxss {
overflow: hidden;
margin: 10px;
float: left;
}
.doxss img { transition: all 1s; }
.doxss img:hover { transform: scale(1.1); }
</style>
5）2D转换综合写法
🔰同时使用多个交换，其格式为：
transform: translate() rotate() scale…等。
🔰其顺序会影响转换的效果。（先旋转会改变坐标方向）
🔰当我们同时有位移和其他属性的时候，记得要将位移放到最前。
3. 动画
🔰动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
🔰相比于过渡，动画可以实现更多变化，贡多控制，连续自动播放等效果。
🔰制作动画分两步：
- 先定义动画；
- 再使用（调用）动画；
1）用keyframes 定义动画
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(240px);
}
}
2）元素使用动画
.ds {
width: 20%;
height: 100%;
background-color: red;
border-radius: 13px;
transition: width 1s;
/*调用动画*/
animation-name: move;
/*完成动画所需时间*/
animation-duration: 1s;
}
3）动画序列
🔰0%是动画的
开始，100%是动画的完成。这样的规则就是动画序列。
🔰在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
🔰动画是使元素从一种样式逐渐变化为另一种样式的效果。你可以改变任意多的样式任意多的次数。
🔰请用百分比来规定变化发生的时间，或者关键词“from”和“to”，等同于0%和100%。
4）动画常用属性
5）动画简写属性
🔰
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始或者结束的状态;
🔰简写属性里面不包含animation-play-state;
🔰暂停动画：animation-play-state: puased;经常和鼠标经过等其他配合使用。
🔰想要动画走回来，而不是直接跳回来：animation-direction: alternate;
🔰盒子动画结束后，停在结束位置：animation-fill-mode: forwards;
6）速度曲线细节
🔰
animation-timing-function:规定动画的速度曲线，默认“ease”。
4. 3D 转换
🔰3D转换我们主要学习工作中常用的3D位移和3D旋转。
1）3D移动 translate3d
🔰3D移动在2D的基础上多加了一个可以移动的方向，就是z轴方向。
translform: translateX(100px):仅仅是在x轴上移动；translform: translateY(100px):仅仅是在y轴上移动；translform: translateZ(100px):仅仅是在z轴上移动；translform: translate3d(x, y,z):其中x, y, z分别指移动的轴的方向的距离。
2）透视 perspective
🔰如果想要在网页上产生3D效果需要透视(理解成3D物体投影在2D平面内)；
🔰模拟人类的视觉设置，可认为安排一只眼睛去看；
🔰透视我们也成为视距：视距就是人的眼睛到屏幕的距离；
🔰距离视觉点越近的在电脑屏幕成像越大，越远越小；
🔰透视的单位是像素；
🔰透视写在被观察元素的父盒子上面
perspective: 45px;
3）3D旋转 rotate3d
🔰3D旋转是指可以让元素在三位平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。
🔰语法：
transform: rotateX(45deg)：沿着x轴正方向旋转45度；transform: rotateY(45deg)：沿着y轴正方向旋转45度；transform: rotateZ(45deg)：沿着z轴正方向旋转45度；transform: rotate3d(x, y, z, deg)：沿着自定义轴正方向旋转deg度；
transform: rotate3d(1, 0, 0, 45deg)：就是沿着x轴旋转45度
transform: rotate3d(1, 1, 0, 45deg)：就是沿着对角线旋转45度
4）3D呈现 transfrom-style
🔰控制子元素是否开启三维立体环境；
🔰transfrom-style：flat：子元素不开启3d立体空间 默认的。
🔰transfrom-style: preserve-3d：子元素开启立体空间。
🔰代码写给父级，但是影响的是子盒子。
5. 浏览器私有前缀
🔰浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加。
🔰-moz-：代表 firefox 浏览器私有属性
🔰-ms-：代表 ie 浏览器私有属性
🔰-webkit-：代表 safari，chrome 私有属性
🔰-o-：代表 opera 私有属性
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
十二. 网站制作
(一) 页面布局整体思路
🔰为了提高网页制作的效率，布局时通常有以下的整体思路：
必须确定页面版心(可视区)，我们测量可得知；
2.分析页面中的行模块，以及每行中的列模块。页面布局第一准则；一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。页面布局第二准则；- 制作HTML结构。我们还是
遵循，先有结构，后有样式的原则。结构永远最重要；- 所以，
先理清楚布局结构，再写代码尤为重要；
(二) 网站制作流程
- 客户沟通制定方案
- 签订合同
- 预付定金
- 初稿审核
- 前台页面设计，后台功能开发
- 测试验收
- 上线培训
- 后期维护
(三) 项目搭建工作
🔰1. 需要创建如下文件夹：
名称 说明 项目文件夹 shoping 样式类图片文件夹 images 样式文件夹 css 产品类图片文件夹 upload 字体类文件夹 fonts 脚本类文件夹 js 🔰2. 需要创建如下文件：
名称 说明 首页 index.html CSS初始化样式文件 base.css CSS公共样式文件 common.css 🔰3. 模块化开发：
- 有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用。
- 这里最典型的应用就是 common.css 公共样式。写好一个样式，其余页面用到这些相同的样式。
- 模块化开发具有重复使用，修改方便等特点。
- common.css 公共样式里面包含
版心宽度，清除浮动，页面文字颜色等公共样式。
(三) 网站 favicon 图标
1. 制作favicon图标
🔰1. 把项目图标切成png图片；
🔰2. 把png图片转换为ico图标，这需要借助第三方转换网站，例如比特虫：http://www.bitbug.net/
2. favicon图标放到网站根目录下
3. HTML页面引入favicon图标
🔰在html页面的
<head></head>元素之间引入代码；
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
(四) 网站TDK三大标签SEO优化
🔰SEO汉译为
搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
🔰SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。
🔰页面必须有三个标签用来符合SEO优化：title，description，keyword；
1. title 网站标题
🔰
title具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和网页主题归属的最佳判断点。
🔰建议：网站名（产品名 ）- 网站介绍（尽量不要超过30个汉字）
<title>小米 - 小米5s，红米None4，小米MIX，小米笔记本官方网站</title>
2. description 网站说明
🔰
简要说明我们网站主要是做什么的。
🔰我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”，“我们提供…”，“xxx网作为…”，“电话：010…”之类语句。
🔰<meta name="description" content="京东JD.COM-专业的综合网上购物商城，销售家电等数万个品牌优质商品，为你提供愉悦的网上购物体验！"/>
3. keywords 关键词
🔰
keywords 是页面关键词，是搜索引擎的关注点之一；
🔰keywords 最好限制为6~8个关键词，关键词之间用英文逗号隔开，采用关键词, 关键词2的形式。
🔰<meta name="keywords" content="网上购物，网上商城，手机，笔记本，电脑，相机，手表"/>
十三. Web 服务器
🔰服务器（也称之为主机）：是提供计算服务的设备，他也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器，数据库服务器，应用程序服务器，
Web 服务器等。
🔰Web 服务器一般是指网站服务器，是指驻留在因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。
🔰根据服务器在网络中所在的位置不同，又可以分为本地服务器和远程服务器；
(一) 本地服务器
🔰我们可以把自己的电脑设置为本地服务器，这样同一个局域网内的同学可以访问你的网站了。
(二) 远程服务器
🔰远程服务器是通常是别的公司为我们提供的一台电脑(主机)，我们只要把网站项目传到这台电脑上，任何人都可以利用域名访问我的网站了。
(三) 将自己的网站上传到远程服务器
🔰
注意：一般稳定的服务器都需要收费的。比如：阿里云
🔰给大家推荐一个免费的远程服务器（免费空间）http://free.3v.do/
- 去免费空间网站注册账号；
- 记录下主机名，用户名，密码，域名；
- 利用 cutftp 软件上传网站到远程服务器；
- 在浏览器中输入域名，即可访问我们的网站了；
🔰具体操作流程看如下网站上的流程：
视频讲解：https://www.bilibili.com/video/BV14J4114768?p=354
图文讲解：https://blog.csdn.net/qq_51712954/article/details/130124667
1184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
