1、CSS
1.1CSS简介
1：CSS：CSS 的全称为：层叠样式表 ( Cascading Style Sheets ) 。用于给 HTML 结构设置样式。也就是说CSS就是美化HTML。核心思想：HTML搭建结构，CSS添加样式。
2：CSS的特点：丰富的样式定义、易于使⽤和修改、多⻚⾯应⽤、层叠、⻚⾯压缩
1.2引入方式
1.⾏内样式 （内联样式）：使⽤HTML标签的style属性定义CSS样式
<h1 style="color:red;font-size:60px;">人中吕布，马中赤兔</h1>
<!--
1.行内样式，背景颜色
2.字体、字体颜⾊、字体⼤⼩
3.⽂本对⻬⽅式
-->
1.<p style="background-color: cyan;">这是⼀个段落标签</p>
2.<p style="font-family:'楷体';color:hotpink;font-size:30px">这是⼀个段落标签</p>
3.<h1 style="text-align:center;">标题居中</h1> 1
<!--
-->
2.内部样式 ：使⽤<style>标签在</head>结束标签和<body>开始标签之间定义CSS样式;可以放在任何位置，但一般都放在 <head> 标签 中。
<style>
h1 {
color: red;
font-size: 40px;
}
</style>
3.外部样式 （链接式）：使⽤标签引⼊外部CSS样式表⽂件
外部样式优点：①：CSS⽂件可以放在不同的HTML⽂件中，使⽹站所有⻚⾯样式统⼀，提⾼代码复⽤性
②：便于管理、减少代码及维护时间
③：当修改CSS⽂件时，所有应⽤此⽂件的HTML⽂件都将更新，⽽不必从服务器上将所有⻚⾯取回再修 改完毕后上传
h1{
color: red;
font-size: 40px;
}
<!--
在 HTML 文件中引入 .css 文件。
<link> 标签要写在 <head> 标签中。
<link> 标签属性说明：
href ：引入的文档来自于哪里
rel ：( relation ：关系）说明引入的文档与当 前文档之间的关系
-->
<link rel="stylesheet" href="./xxx.css">
1.3CSS选择器
1.基础选择器
1.通配选择器:主要用清楚样式
/* 选中所有元素 */
* {
color: orange;
font-size: 40px;
}
/* 清除所有元素的外边距和内边距 */
* {
margin:0;
padding:0;
}
- 类选择器：类选择器可以根据标签的 class 属性 匹配具体的 HTML 标签，所有符合条件的标签都会根据选 择器内的样式进⾏格式化。类选择器的定义需要⽤到⼀个英⽂的句号 . ，后⾯紧跟 class 属性的值。
.list{
color: darksalmon;
}
- ID选择器：ID 选择器 ⽤来匹配 HTML ⽂档中具有指定 ID 属性 的标签，ID 选择器的定义需要⽤到井号 # ，后⾯紧跟 ID 属性的值。
#nav{
color: aqua;
}
4.标签选择器：⼀个完整的 HTML ⽂档由各式各样的标签组成，⽽ 标签选择器 可以通过具体的 标签名称 来匹配 ⽂档内所有同名的标签
p{
color: blue;
}
2.高级选择器
1.并集选择器 是由多个选择器通过逗号 “ , ” 连接⽽成
/* 并集选择器 */
p,.dingxiang{
color: red;
}
2.交集选择器 是由两个选择器连接构成，选中⼆者范围的交集
注意：①两个选择器之间不能有空格②第⼀个必须是 标签选择器 ，第⼆个必须是 类选择器 或 id选择器
/* 交集选择器 */
div.one{
color: red;
}
div#two{
color: darkorchid;
}
3.后代选择器：定义⽅式就是将 标签名 、 class 属性 或 id 属性 等按照标签的嵌套关系由外到内罗列，中间使⽤ 空格 分开。
/* 后代选择器 */
ul a{
color: gray;
line-height: 30px;
}
4.子元素选择器：⼦元素选择器与后代选择器类似，不过⼦元素选择器只会匹配某个元素的直接后代（元素与其⼦元素之间只有⼀层嵌套关系），⼦元素选择器由两个或多个选择器组成，选择器之间⽤⼤于号 > 分隔开。
/* ⼦元素选择器 */
div>p>em{
font-size: 22px;
}
div>p>.uname{
color: red;
font-weight: 600;
}
5.属性选择器：是指选取带有属性的元素
/* 属性选择器 */
input{
background-color: pink;
}
input[type]{
background-color: aqua;
}
input[name]{
background-color: yellow;
}
input[name="userpwd"]{
background-color: greenyellow;
}
1.4CSS注释
1.在 CSS 中注释以 /* 开头（起始符），以 */ 结尾（结束符）， /* 与 */ 是成对出现的，所有 在 /* 与 */ 之间的内容都会被看作注释的内容。CSS 中的注释只有这⼀种写法，⽆论是在单⾏中使⽤ 还是跨越多⾏使⽤，只要保证注释的内容在 /* 与 */ 之间即可。
/* 单⾏注释 */
/*
多⾏注释
*/
1.5CSS背景
| css 属性名 | 功能 | 属性值 |
|---|---|---|
| background-color | 设置背景颜色 | 符合 CSS 中颜色规范的值。 默认背景颜色是 transparent 可以使用颜色英文、十六进制、rgb()、rgba(); |
| background-image | 设置背景图片 | url(图片的地址) none默认值，不显示背景图像 |
| background-repeat | 设置背景重复方式 | repeat ：重复，铺满整个元素，默认值。 repeat-x ：只在水平方向重复。 repeat-y ：只在垂直方向重复。 no-repeat ：只显示一次，不重复。 |
| background-position | 设置背景图位置 | 通过关键字设置位置： 写两个值，用空格隔开 水平： left 、 center 、 right 垂直: top 、 center 、 bottom 如果只写一个值，另一个方向的值取 center 通过长度指定坐标位置： 以元素左上角，为坐标原点，设置图片左上角的位置。 两个值，分别是 x 坐标和 y 坐标。 只写一个值，会被当做 x 坐标， y 坐标取center |
| background-size | 设置背景图像的尺⼨ | 使⽤ 像素(px) 或其他CSS单位来设置背景图像的 宽度 和 ⾼度 ， xpos 表示宽度， ypos 表示⾼度，如果只设置第⼀个值，那么第⼆个值将被设置为默认值 auto (⾃动) 使⽤百分⽐表示背景图像相对于所在元素宽度与⾼度的百分⽐， x% 表示宽度， y% 表示⾼度，如果只设置第⼀个值，那么第⼆个值将被设置为默认值auto （⾃动） contain：背景图⽚尺⼨宽度和⾼度完全适应内容区域。图⽚不会变形，但所属元素宽⾼⽐例与背景图⽚宽⾼⽐例不同时，会出现背景留⽩ cover:背景图⽚扩展并覆盖填充满整个所属元素区域，但超出 的部分会被隐藏 |
| background | 复合属性 | 没有数量和顺序要求 |
1.6CSS宽度和高度
1.width：定义宽度、默认情况下是100%
| 属性值 | 描述 |
|---|---|
| length | 使⽤具体数值配合px、cm等单位来定义宽度 |
| % | 定义基于⽗元素宽度百分⽐的宽度 |
注意：对于 标签来说，如果指定 width属性 ，那么它的height属性将根据原图⽚尺⼨进⾏等⽐例缩放.
⼀般情况下 width 属性需要与 height 属性配合使⽤来同时定义元素的宽度和⾼度，因为 某些元素没有默认的宽度或⾼度（或者宽度与⾼度默认为 0px）
如果不定义宽度或⾼度⽽且元素中⼜没有内容（⼦元素、⽂本等）时，这个元素的宽度或⾼度就会 被设置为 0px
-
height：
属性值 描述 length 使⽤具体数值配合px、cm等单位来定义高度 % 定义基于⽗元素宽度百分⽐的高度 3.display:行内元素和块级元素的相互之间转换
CSS规定，每⼀个元素都有⼀个 display 属性⽤于确定该元素的类型。每⼀个元素都有⼀个 display 属性值
| 属性值 | 描述 |
|---|---|
| none | 设置元素不会被显示 |
| inline | 元素显示为内联元素 |
| block | 元素会被显示为块级元素 |
| inline-block | ⾏内块元素 |
1.7CSS边框
1.border-style ：设置边框的样式，如实线、虚线等（top、bottom、right、left）一致。
none：⽆边框
solid：实线边框
dashed：虚线边框
dotted：点状边框
double：双线边框
hidden：与none相同，应⽤于解决边框冲突
属性值为none：在这种情况下，如果没有设置背景图⽚，即使之前指定过border-width的值，它的 值依旧为0。在单元格边框重叠的情况下，none的优先级最低，所以如果存在其他的重叠边框，则会 显示其他的边框
属性值为hidden：在这种情况下，如果没有设置背景图⽚，即使之前指定过border-width的值，它 的值依旧为0。在单元格边框重叠的情况下，hidden的优先级更⾼，所以如果存在其他的重叠边框， 则不会显示其他的边框
2.border-width 属性⽤来设置元素中所有边框的宽度，或者单独为某个边框设置宽度（top、bottom、right、left）一致。
thin：较细的边框
medium：中等宽度的边框
thick：较粗的边框
length：数值加单位的形式设置具体边框宽 度，例如2px
3.border-color 属性⽤来设置元素中所有边框的颜⾊，或者单独为某个边框设置颜⾊（top、bottom、right、left）一致。
color_name：颜⾊名称，如red
hex_number：颜⾊的⼗六进制值，如 #FF0000
rgb_number：rgb()函数，如rgb(255,0,0)
4.border 属性是上⾯介绍的 border-width 、 border-style 、 border-color 三种属 性的简写，使⽤ border 属性可以同时定义上述三个属性
border:border-width border-style border-color
5.border-radius:可以给元素设置圆⻆边框，甚⾄实现圆形、半圆、椭圆等各种圆⻆圆形。
当 border-radius 设置⼀个值时，四个边⻆为相同弧度；设置四个数值时，通常按照上、右、下、左的顺序执⾏
1.8伪类和伪元素
1.伪类：
伪类⽤于已有元素处于某种状态时为其添加对应的样式，这个状态会根据⽤户的⾏为⽽发⽣变化。 ⽐如⿏标悬停，就可以使⽤伪类，由浏览器指定⼀个类，如a:hover，效果类似于class=“hover”。因 为可以多次使⽤，所以叫做伪类⽽不是伪ID。
语法格式：
选择器名称:伪类名称{
//样式
}
:link 超链接未被访问的状态。
:visited 超链接访问过的状态。
:hover 鼠标悬停在元素上的状态。
:active 元素激活的状态。
注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active 。
:focus 获取焦点的元素（表单类元素才能使用）。点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式，选择元素时，就是获 得焦点。
:checked 被选中的复选框或单选按钮。
:enable 可用的表单元素（没有 disabled 属性）。
:disabled 不可用的表单元素（有 disabled 属性）。
:not(选择器) 排除满足括号中条件的元素
:target 选中锚点指向的元素
:lang() 根据指定的语言选择元素（本质是看 lang 属性的值）。
2.伪元素
选择器名称::伪元素名称{
//样式
}
::first-letter 选中元素中的第一个文字。⽤于向⽂本的⾸字⺟添加特殊样式
::first-line 选中元素中的第一行文字。只能⽤在块级元素上
::selection 选中被鼠标选中的内容。
::placeholder 选中输入框的提示文字。
::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容，在该内容前插入）。 在元素内容之前添加⼀些内容
::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容，在该内容后插入）。 在元素内容之后添加⼀些内容
3.CSS鼠标属性
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| cursor | 设置鼠标光标的样式 | pointer ：小手 move ：移动图标 text ：文字选择器 crosshair ：十字架 wait ：等待 help ：帮助 default：默认光标 |
语法格式
/* 自定义鼠标光标 */
cursor: url("./arrow.png"),pointer;
1.9CSS字体
| 属性 | 功能 | 描述 |
|---|---|---|
| font-family | 设置字体 | 可以通过该属性定义⼀个由若⼲字体名称组成的列表， 字体名称 之间使⽤逗号 , 隔开。浏览器会⾸先尝试列表中的第⼀个字体，如果不⽀持则尝试下⼀ 个，以此类推。 |
| font-weight | 设置字体粗细 | normal ：默认值，标准字体 bold ：粗体字体 bolder： 更粗的字体 lighter： 更细的字体 100~ 900（整百） ：由细到粗的设置字体粗细，100为最细的字体，400等同于normal,700 等同于bold |
| font-size | 设置字体尺⼨ | 通常使⽤ 数值加单位 的形式把字体设置为 ⼀个固定尺⼨。 |
| font-style | 设置字体⻛格（如：italic 斜体） | italic ：斜体，是⼀种单独的字体⻛格 oblique ：正常⽂本的倾斜版 normal ：正常字体 |
| font | 字体属性的缩写，可以在⼀个声明中设置多个字体属性 |
/*使用时必须遵循顺序：
使⽤ font 属性时必须按照如上所示的顺序，并且 font-size 和 font-family 两个属性不可忽略；
font 属性中的每个参数仅允许设置⼀个值，除 font-size 和 font-family 属性外，被忽略的属性将被设置为各⾃的默认值；
*/
font-style || font-weight || font-size || font-family 1
1.10CSS定位
1.静态定位：position:static 即可实现静态定位
2.相对定位： position:relative 即可实现相对定位。可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
相对定位参考点：相对自己原来的位置
相对定位特点：
1）不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
2）定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
默认规则是： ①定位的元素会盖在普通元素之上。②都发生定位的两个元素，后写的元素会盖在先写的元素之上
3）left 不能和 right 一起设置， top 和 bottom 不能一起设置。
4）相对定位的元素，也能继续浮动，但不推荐这样做。
5）相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。
3.绝对定位：给元素设置 position: absolute 即可实现绝对定位。可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
绝对定位参考点：参考它的包含块；①对于没有脱离文档流的元素：包含块就是父元素；② 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都 没定位，那包含块就是整个页面）。
相对定位特点：
1）脱离文档流，会对后面的兄弟元素、父元素有影响。
2） left 不能和 right 一起设置， top 和 bottom 不能一起设置。
3） 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
4） 绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做。
5） 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。
4.固定定位：给元素设置 position: fixed 即可实现固定定位。可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
固定定位参考点：参考它的视口；— 对于 PC 浏览器来说，视口就是我们看到的网页。
固定定位特点：
1）脱离文档流，会对后面的兄弟元素、父元素有影响。
2） left 不能和 right 一起设置， top 和 bottom 不能一起设置。
3） 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
4）固定定位的元素，也能通过 margin 调整位置，但不推荐这样做。
5）无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。
5.粘性定位：给元素设置 position:sticky 即可实现粘性定位。可以使用 left 、 right 、 top 、 bottom 四个属性调整位置，不过最常用的是 top 值。
粘性定位参考点：离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。
粘性定位特点：
1）不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
2）最常用的值是 top 值。
3）粘性定位和浮动可以同时设置，但不推荐这样做。
4）粘性定位的元素，也能通过 margin 调整位置，但不推荐这样做。
1.11CSS浮动
1.标准文档流：标准⽂档流 指的是元素排版布局过程中，元素会默认⾃动从左往右，从上往下的流式排列⽅式。 当前⾯内容发⽣了变化，后⾯的内容位置也会随着发⽣变化。（标准⽂档流 分为两种形式：块级元素和内联（⾏内元素））
2.float浮动
| 属性值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
.div_one{
float: left;
}
3.浮动后特点：①脱离文档流。②不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。 ③不会独占一行，可以与其他元素共用一行。④不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding 。⑤不会像行内块一样被当做文本处理（没有行内块的空白问题）。
4.浮动产生的影响：①对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟 无影响。 ②对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。
5.解决浮动产生的影响（清除浮动）：①给父元素指定高度。②给父元素也设置浮动，带来其他影响。③给父元素设置 overflow:hidden 。④在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。⑤给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===> 推 荐使用
6.清除浮动:clear
| 属性值 | 描述 |
|---|---|
| left | 左侧不允许浮动元素 |
| right | 右侧不允许浮动元素 |
| both | 左右两侧均不允许浮动元素 |
.parent::after {
content: "";
display: block;
clear:both;
}
布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。
1.12CSS盒子模型
1.盒子模型：从内⽽外分别为内容区（ content ）、内边距（ padding ）、边框（ border ）和外边距（ margin ）,CSS为这四部分提供 了⼀系列相关属性，通过对这些属性的设置可以丰富盒⼦的表现效果
盒子的大小 = content + 左右 padding + 左右 border 。外边距 margin 不会影响盒子的大小，但会影响盒子的位置。
2.内容区/网页区（content）①：内容区是整个盒⼦模型的中⼼，其中存放了⽹⻚的主要元素，这些元素可以是 ⽂本 、 图像 等②内容区有 width 、 height 、 overflow 三个属性。其中 width 和 height 属性⽤来指定盒⼦内容区域的宽度和⾼度。
当内容信息过多，超出内容区设置的范围时，可以使⽤ overflow 属性设置溢出内容的处理⽅式 overflow属性 的四个可选值：
| 属性值 | 描述 |
|---|---|
| hidden | 隐藏溢出的部分 |
| visible | 显示溢出的部分（溢出部分显示在盒⼦外部） |
| scroll | 为内容区添加⼀个滚动条，可以通过滑动滚动条来查看内容区的全部内容 |
3.内边距（padding）：是内容区和边框之间的空间，我们可以通过 padding-top 、 padding-right 、 padding-bottom 、 padding-left 及它们的简写属性 padding 来设置内容区各个⽅向上与边框之间的距离。在为盒⼦模型设置背景属性时，背景属性可以覆盖到内边距区域。
4.外边距（margin）:位于盒⼦模型的最外围，是边框之外的空间。我们通常使⽤ margin-top 、 margin-bottom 、 margin-left 、 margin-right 及它们的简写属性 margin 来设置外边距，即控制盒⼦和盒⼦之间的距离。
5.边框（border）：是环绕内容区和内边距的边界，我们可以使⽤ border-style 、 border-width 和 border-color 及它们的简写属性 border 来设置边框的样式。其中， border-style 属性是边框中最主要的属性，如果没有设置该属性的话，其他的边框属性也会被忽略。
6.margin折叠（塌陷）问题：在CSS标准⽂档流中，当两个或者多个元素（块级元素）垂直边距相遇时，它们将形成⼀个外边距。这个外边距的⾼度等于两个发⽣叠加的外边距⾼度中的最⼤者。
1）自身折叠：当元素不设置内外边距以及边框和内容时，会出现margin折叠（没有内容无法撑开）
自身折叠解决办法：设置宽度、高度或添加内容
2）相邻元素折叠：在标准⽂档流中，当两个相邻的元素垂直摆放时，会产⽣margin折叠。 ①两个元素的外边距设置相同值：只显示一个②两个元素的外边距值不相同时，显示两者中大的。
相邻元素折叠解决办法：设置一个。
3）⽗⼦元素折叠：在⽹⻚中如果出现⽗⼦元素，当给⼦元素设置上边距时，⽗元素和⼦元素会⼀起移动
⽗⼦折叠解决办法：给父元素添加内边距。
扫一扫
3709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
