CSS3笔记

前端系列
一、HTML5
二、CSS
三、JavaScript
四、jQuery
五、BootStrap
六、Element
七、Ajax
八、JSON
九、VUE3

---

第一章、CSS基础

一、CSS规范

CSS主要有两个部分构成：选择器和声明。选择器是用于指定HTML标签，花括号是设置该对象的具体样式。

属性和属性值以“键值对”的形式出现，用英文“:”连接多个“键值对”之间用英文“;”进行区分。

1、CSS三大特性：

（1）层叠性
一个标签由多个选择器。当相同选择器设置了相同样式，那么后一个样式会覆盖前一个样式。
原则：1.冲突时，就近原则。
      2.不冲突，不会层叠

（2）继承性
子标签会继承父标签的样式。

（3）优先级
当一个标签多个选择器，当选择器相同，后面的样式会覆盖掉前面的样式。当选择器不相同则会比较权重。

2、元素显示模式

块级标签：一行只能放一个，可以设置宽高，标签内可以包含任何标签。
行内标签：一行可以放多个，不可以设置宽高，标签内只能包含文本或其他行内标签。
行内块级标签：一行放多个行内元素，可以设置宽高。

将行元素转化成块元素：display: block;
将块元素转化成行元素：display: inline;
将元素转换成行内块元素：display: inline-block;

二、CSS的引入方式

1、标签：
样式定义：<style></style>
样式引用：<link></link>
	
2、属性：
	rel="stylesheet"	外部样式表
	type="text/cass"	引入样式的类型

3、三种样式表插入方法：
外部样式表：<link rel="stylesheet" type="text/css" href="mystyle.css">

内部样式：
<style type="text/css">
	body {background-color.red}
	p{margin-left:20px}
</style>

内联样式表：
<p style="color:red"></p>

二、CSS选择器

1、标签选择器：写上标签名

1）定义，指定样式的标签名，统一的为标签设置样式。
p {
	color: red;
}

2）分组
h1 h2 h3 h4 h5 h6 {
	color: red;
}

2、类选择器：样式 . 定义，结构class调用。

1）、定义
.red {
	color: red;
}
.size {
	width: 10px
	height: 10px;
}

2）、调用
<h1 class="red">啊哈哈哈哈哈</h1>

3）多类
多类名：一个标签中放多个类样式，每个样式用空格隔开，当类样式有内容重复，后面的会覆盖掉前面的样式。
<h1 class="red size">啊哈哈哈哈哈</h1>

3、id选择器：样式#定义，结构id调用。

1）、定义
#blue {
	color: blue;
}

2）、调用
<div id="blue">蓝色</div>

只能调用一次

4、通配符选择器：样式*定义，自动调用

* {
	margin: 0;
	padding: 0;
}

自动给所有的标签附上样式

5、属性选择器

定义属性选择器
[title]{
	color: blue;
}
定义属性和值选择器
[title="t1"]{
	color: blue;
}

调用
<p title="">属性选择器</p>
<p title="t1">属性和值选择器</p>

6、后代选择器

HTML结构：
<p>从明天起，做一个<string>幸福的人</string>，喂马，劈柴，周游世界</p>

CSS样式：
p string{
	color: red;
}

7、子元素选择器

HTML结构：
<ul>
	<li><li>
</ul>

CSS样式：
ul > li {
	color: red;
}

使用>分隔，只能选择子元素。

8、伪类选择器

链接样式：
a:link		普通的、未被访问的链接
a:visited	用户以访问的链接
a:hover		鼠标指针位于链接上方
a:active	链接被点击的时刻


光标样式 focus
input:focus {
	background-color: yellow;
	color: red;
}

使用:分隔

9、格式化伪类选择器

第二章、CSS样式

一、背景样式

1、 设置背景颜色：background-color

定义背景颜色
body {
    background-color: red;
}

设置标签背景的背景颜色
.back-color {
    background-color: blue;
}

设置背景颜色半透明：
background: grba(0,0,0,0.5);

2、设置背景图片：background-image

body {
    background-image: url(../img/bg1.jpg);
}

# 给标签添加图片
.div-bg {
    background-image: url(../img/bg1.jpg);
}

3、背景图像是否固定或随着页面内容滚动而滚动：background-attachment

body {
    background-attachment: fixed;
}

默认滚动，滚动:scroll、固定:fixed

4、设置背景图片的起始位置：background-position

body {
    background-position: 40px,40px;
}

设置百分比：0%、25%、50%、100%，
设置像素：X、Y，
设置方位：center、top、left、right、bouten

5、设置背景图片是否重复以及如何重复：background-repeat

body {
    background-repeat: repeat;
}

repeat:重复、no-repeat:不重复、repeat-x:x轴重复、:repeat-y:y轴重复

6、设置背景图片的大小：background-size

body {
    background-size: 400px,200px;
}

设置方位：autu、center、top、left、
设置百分比：0%、25%、50%、100%，
设置像素：X、Y，

7、设置图片的定位区域：background-origin

body {
    background-origin: border-box;
}

padding-box	背景图像相对于内边距框来定位。
border-box	背景图像相对于边框盒来定位。
content-box	背景图像相对于内容框来定位。

8、设置图片的绘制区域：background-clip

body {
    background-clip:content-box;
}

border-box：背景延伸至边框外沿（但是在边框下层）。
padding-box：背景延伸至内边距（padding）外沿。不会绘制到边框处。
content-box：背景被裁剪至内容区（content box）外沿。

9、背景复合样式

background: background-color background-image background-repeat background-position brackground-attachment

二、文字样式

1、字体样式

.font {
    // 字体
    font-family: "仿宋";

    // 字体粗细
    font-weight: 100;

    // 字号大小
    font-size: 30px;

    // 字体颜色：red #1103
    color：red;

    // 体的透明度，值是0-1之间的数，1：不透明；0：全透明。
    opacity: 0.2;

    // 字体样式：无样式:normal、加粗、italic斜体、下划线
    font-style: italic;

    // 定义字母大小写 无样式:normal、小体大写:small-caps
    font-variant: normal
}

文字样式
1、color：字体颜色

2、opacity：字体的透明度，值是0-1之间的数，1：不透明；0：全透明。

3、font-size：字体的大小，默认字体大小是16px，font-size:200%;

4、font-family：字体("宋体","仿宋",sans-serif; )

5、font-weight：字体的粗细，值：10px；bold：加粗；bloder：深度加粗；lighter：细体；

6、font-style：字体的显示样式，italic：斜体；  normal：正常

7、font-variant：定义字母大小写，无样式:normal、小体大写:small-caps

2、文字阴影

text-shadow: h-shadow v-shadow blur color;

p{
text-shadow: 10px 10px 1px blue;
}

h-shadow：必需，水平阴影位置
v-shadow：必需，垂直阴影位置
color：可选，阴影颜色
blur：可选，模糊距离

3、字体复合属性写法

.font {
	// font: font-style font-weight font-size font-family
	font: italic 700 16px "仿宋"
	
}

三、文本样式

.text1 {
	// 文本颜色
	color: darkred;
	// 对齐方式
	text-align: center;
	// 装饰文本
	text-decoration: underline;
	// 首行缩进
	text-indent: 2em;
	// 文本行间距
	line-height: 20px;
	// 字母处理
	text-transform: capitalize;
	// 阴影效果：水平距离、垂直距离、清晰度、颜色
	text-shadow: 20px 20px 1px F00;
}

color：文字颜色
line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。像素px，百分比%。
text-align：对齐方式：center:居中对齐、left:左对齐、right:右对齐、justify:两端对齐。
text-decoration：装饰文本：none:无、line-through删除线、underline:下划线、overline上划线
text-indent：文本首行缩进，em：相对于当前像素的一个文字大小。
text-transform：字母处理：capitalize:首字母大写、lowercase:全部小写、uppercase:全部大写
text-shadow：阴影效果：10px:距右距离，10px:距下距离、清晰度2px、颜色#00

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。
word-spacing属性用于定义英文单词之间的间距.

text-overflow属性用于处理溢出的文本。
    clip：修剪溢出文本，不显示省略标签“…”。
    ellipsis：用省略标签“…”替代被修剪文本，省略标签插入的位置是最后一个字符。

word-wrap属性用于实现长单词和URL地址的自动换行。
    normal：只在允许的断字点换行（浏览器保持默认处理）。
    break-word：在长单词或 URL 地址内部进行换。

四、列表样式

1、列表类型：list-style-type

li {
    list-style-type: georgian;
}

无：	none
方块	square
数字	decima
空心圆	circle
鬼画符	georgian

2、列表项图像：list-style-image

li {
    list-style-image: url("../img/花瓣.png");
}

3、列表标志位置：list-style-position

li {
    list-style-position: inside;
}

li {
    list-style-position: outside;
}

outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。

五、表格样式

1、设置表格外边框：border

#ta tr th td  {
    border: 5px solid blue violets;
}

dotted：上边框
solid：右边框
double：底边框
dashed：左边框
border-width：设置边框的框，也可以设置单个的边框宽（border-top-width）

2、合并边框：border-collapse

#ta {
    border-collapse: collapse;
}

separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit		规定应该从父元素继承 border-collapse 属性的值。

3、设置表格内边距 padding

td {
	padding: 10px;
}

4、设置宽和高

#ta {
    width: 400px;
    height: 400px;
}

5、设置对齐方式text-align

#ta {
	text-align: center;
	vertical-align: middle;
}

设置水平对齐 text-align: left、right、center
设置垂直对齐 vertical-align: top、bottom、middle

6、设置表格颜色：background-color

#ta {
	background-color: aqua
}

border-color属性用于设置边框的颜色。可以设置单边框的颜色：（border-top-color）

六、超链接样式

1、超链接的状态

a:link		普通的、未被访问的链接
a:visited	用户以访问的链接
a:hover		鼠标指针位于链接上方
a:active	链接被点击的时刻

2、超链接的样式：text-decoration

a:link {
	// 除去链接中的下划线
	text-decoration: none;
	// 设置背景色
	background-color: red;
	// 设置前景色
	color:#F000
}

七、鼠标、光标、滚动条、滤镜

1、鼠标样式 cursor

.div {
	cursor: wait;
}

cursor属性：
自动默认选择：auto
正常选择：default
移动：move
忙：wait
水平调整：w-resize
垂直调整：s-resize
连接选择：pointer
精准定位：crosshair
连接选择：hand
帮助选择：help
文本选择：text
水平调整：e-resize
垂直调整：n-resize
外部连接鼠标样式：url
沿对角线调整：ne-resize、sw-resize、se-resize、nw-resize

2、光标样式 focus

input:focus {
	background-color: yellow;
	color: red;
}

3、滚动条 overflow

（1）overflow属性
自动显示滚动条
overflow: auto;
没用滚动条
overflow: hidden;
没有水平滚动条
overflow-x: hidden;
没有垂直滚动条
overflow-y: hidden;

.div {
    overflow-x:hidden;
    overflow-y: hidden;
    overflow: hidden;
    overflow: auto;
}

（2）设置滚动条颜色
顶部/底部图标颜色
scrollbar-arrow-color: black; 
滚动条颜色
scrollbar-face-color: black; 
滚动条阴影颜色
scrollbar-shadow-color: black;
滚动条背景颜色
scrollbar-track-color: black;
滚动条基本颜色
scrollbar-base-color: black;

4、滤镜 filter

1、设置透明度 alpha
filter: alpha(10)

2、设置模糊滤镜 blur(Npx)
filter: blur(4px);

3、设置亮度 brightness(%)
filter: brightness(2%);

4、设置对比度 contrast(%)
filter: contrast(30%);

5、饱和度saturate(%)
filter: saturate(20%);

6、投影dropShadow(color=颜色, offX=x偏移, offY=y偏移, positive模糊范围)
filter: dropShadow(2px 10px 0 rgba(255,0,0,0.5));

7、设置水平反转 flipH
filter: flipH;

8、设置垂直反转 flipV
filter: flipV;

9、设置外发光 glow(color=颜色,strength=强度)
filter:  glow(color=red, strength=10)

10、灰度 gray(%)
filter:gray(0.5);

11、设置波纹效果 wave(add=1, )
filter:wave(1);

12、色相旋转hue-rotate(deg)
filter:hue-rotate(125deg);

第三章、盒子模型

1、组成：内容、内边距、边框、轮廓、外边距

一、内边距 padding

// 设置所有边距 padding
.tdbj {
	padding: 100px;
}

.tdbj {
    // 设置上边距 padding-top
	padding-top: 100px;
    // 设置底边距 padding-botton
	padding-botton: 100px;
    // 设置左边距 padding-left
	padding-left: 100px
    // 设置右边距 padding-right
	padding-right: 100px
}

像素：10px
百分比：10%

二、边框样式 border

1、边框的样式：border-style

.div1 {
	border-style: dotted;
 }

2、边框的单边样式
border-top-style: ;
border-left-style: ;
border-right-style: ;
border-bottom-style: ;

none:无样式、solid:实线样式、double:双线样式、dotted虚线样式、inset:3D凹边、outset:3D凸边

3、边框的粗细 border-width

.div1 {
	border-width: 10px;
 }
 
单边框粗细
border-top-width
border-left-width
border-right-width
border-bottom-width

4、边框颜色 border-color

.div1 {
	border-color: red;
}

5、圆角边框 border-radius

.div1{
	border-radius: 10px;
}

# 设置单边圆角
.div1{
	border-radius: 10px 20px 30px 40px;
}

6、边框阴影 box-shadow

.classid {	
	// 设置边框阴影：距右距离、距下距离、阴影尺寸、清晰度、颜色、内部颜色
	box-shadow: 10px 10px 5px 5px #FF00 inset
}

默认外阴影、inset内阴影

7、合并边框 -border-collapse

#ta {
    border-collapse: collapse;
}

三、轮廓样式 outline

1、设置轮廓属性 outline:

p {
	// 1、设置轮廓属性
	outline: 
	// 2、设置轮廓的颜色
	outline-color: red;
	// 3、设置轮廓的样式
	outline-style: groove;
	// 4、设置轮廓的宽度
	outline-width: 10px;
}

outline-style属性：
无样式:none、
dotted:定义点状的轮廓、
dashed:定义虚线轮廓、
solid:定义实线轮廓、
double:定义双线轮廓。

四、外边距 margin

.div {
	// 外边距：上 右 下 左
	margin: 25px 50px 10px 15px;
	
	// 顶部外边距
    margin-top: 10px;
	// 底部外边距
    margin-bottom1: 10px;
    // 左边外边距
    margin-left: 10px;
    // 右边外边距
    margin-right: 10px;
}

像素：10px
百分比：10%

清除内外边距：

* {
	padding: 0;
	margin: 0;
}

第四章、页面布局

1、三种布局机制的上下顺序：

标准流在最底层（海底）----浮动的盒子在中间（海面）—定位的盒子在最上层（天空）

普通布局：元素按照HTML的默认位置顺序决定排布的过程。

浮动布局：脱离普通流的控制，浮动流的盒子不会保留原先的位置。

定位布局：将盒子定在某一位置，自由的漂浮在其他盒子（包括标准流和浮动）的上面。

一、标准布局： position

1、标准流：元素按照HTML的位置顺序决定排布的过程。
所谓的标准流，就是标签按规定好的默认方式排列。

2.块级元素：独占一行，从上而下。
常见：<div>、<h>、<p>、<hr>、<ul>、<ol><dl>、<form>、<table>等

3.行内元素会按照顺序，从左到右排序，碰到父级元素边缘则自动换行。
常见：<span>、<a>、<i>、<em>等

以上都是标准流布局，我们前面所学的就是标准流。标准流就是最基本的布局方式。

二、浮动布局：float

1、浮动

选择器{float: 属性值}

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动
inherit	从父级继承浮动属性

选择器{float: 属性值}

浮动
1.脱离标准流的控制，（浮）移动到指定的位置（动），俗称脱标。
2.浮动元素会一行显示并且元素顶端对齐（行显）不再保留原先位置。
3.浮动元素会具有行内块元素属性（行内块属性）
①如果块级盒子没有设置宽度，默认宽度和父级一样宽，但添加浮动后，他们的大小由内容决定。
②浮动的盒子中间是没有缝隙的，是紧挨的。
③如果行内元素有了浮动，则不需要转换成块级或行内块元素，可以直接给高度和宽度。

2、清除浮动：clear

选择器{clear: both;}

clear属性值	描述
both	清除左右两侧浮动
laft	清除向左浮动
right	清除向右浮动
inherit	清除父级继承浮动

清除浮动的方法

1. 额外标签法也称隔墙法 
  额外标签法会在浮动元素的末尾添加一个空的标签<div style=”clear:both;”></div>，或<br />标签等。是W3C推荐的做法。
  优点：通俗易懂，方便书写
  缺点：添加许多无意义的标签，结构化较差

2. 父级添加一个overflow
	可以给父级添加overflow属性，将其属性值设置为hidden，auto或scroll。注意是给父元素添加代码。
    优点：代码简洁
    缺点：无法显示溢出的部分

3. 清除浮动：after伪元素法
after方式是额外标签法的升级版，也是给父元素添加
优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
.clearfix: after{
	conten：“”；
    display：block；
    height：0；
    clear：both；
    visibility：hidden；
}
/* IE6\7专有 */
.clearfix {
	*zoom:1;
}
    
4. 清除浮动双伪元素浮动
.clearfix:after, .clearfix:before {
	content: "";
	display: table;
}
.clearfix:after{
	clear: both;
}
/* IE6\7专有 */
.clearfix {
	*zoom:1;
}

总结：
1.父级没有高，子盒子有浮动，影响下面的布局

3、设置元素的堆叠顺序：z-index

选择器 {z-index: 1;}

4、浮动样式应用

HTML结构
<!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>瀑布流布局</title>
    <link href="浮动应用样式.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div>
        <ul>
            <li><img src="../img/花瓣.png"></li>
            <li><img src="../img/花瓣.png"></li>
            <li><img src="../img/花瓣.png"></li>
        </ul>
        <ul>
            <li><img src="../img/花瓣.png"></li>
            <li><img src="../img/花瓣.png"></li>
            <li><img src="../img/花瓣.png"></li>
        </ul>
        <ul>
            <li><img src="../img/花瓣.png"></li>
            <li><img src="../img/花瓣.png"></li>
            <li><img src="../img/花瓣.png"></li>
        </ul>
    </div>
</body>
</html>


CSS样式
*{
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
}

#div1 {
    width: 1000px;
    height: auto;
    margin: 20px auto;
}

ul{ 
    width: 250px;
    float: left;
}

三、定位布局

1、定位机制：

将盒子定在某一位置，自由的漂浮在其他盒子（包括标准流和浮动）的上面。

2、定位模式：position

position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{ position: 属性值; }

position属性值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

3、边偏移

通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为像素或百分比。

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

4.1、静态定位（static）–了解

静态定位是元素的默认定位方式，无定位的意思。它相当于border中的none，不要定位的时候用。

静态定位按照标准流特定摆放位置，它没有边偏移。

4.2、相对定位（relative）----重要

相对于自己原来在标准流中位置来移动，原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

4.3、绝对定位（absolute）----重要

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位（拼爹型）。

1.完全脱标—完全不占位置

2.父级元素没有定位，则以浏览器为准定位

3.父级要有定位

将元素依据最近的已经定位（绝对、固定或相对定位）的父级元素（祖先）进行定位。

结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

绝对定位布局的居中

left：50%，让盒子的左侧移动到父级元素的水平中心位置

margin-left：-100px；让盒子向左移动自身宽度的一半。

4.4、固定定位（fixed）----重要

固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

1.完全脱标----完全不占位置

2.只认浏览器的可视窗口，跟父元素没有任何关系，不随滚动条滚动

5、堆叠顺序（z-index）

设置元素的堆叠顺序：z-index

选择器{position: static; z-index: 1;}

堆叠顺序（z-index）
在使用定位布局时，可能会出现盒子重叠的情况。
加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子。
应用（z-index）层叠等级属性可以调整盒子的堆叠顺序。

z-index的特性如下：
1.属性值：正整数、负整数或0，默认是0，数值越大，盒子越靠上；
2.如果属性值相同，则按照书写顺序，后来者居上
3.数字后面不能加单位。

注意：z-index只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

6、定位改变display属性

所以说，一个行内的盒子，如果加了浮动，固定定位和绝对定位，不用转换，就可以给这个盒子直接设置高度和宽度

同时注意：浮动元素、绝对定位元素和固定定位元素都不会触发外边距合并的问题（以前用border、padding、overflow清除），也就是说，我们给盒子改为浮动或定位，就不会有垂直外边距合并的问题。

第五章、CSS常见操作

一、对齐操作

1、使用margin属性进行左右对齐

.div {
	margin-left: auto;
	margin-right: auto;
}

2、使用position属性进行左右对齐

.div {
	position: absolute;
	// 向左对齐
	left: 0px;
	// 向右对齐
	right: 0px;
}

3、使用float属性进行左右对齐

div{
	float: left;
	float: right;
}

二、分类

1、尺寸

设置元素高度

.p{
    // 设置元素高度
    height: 10px;
    // 设置元素宽度
    widht: 10px;
    // 设置行高
    lie-height: 10px;
}

2、分类

设置鼠标样式 cursor

.p{
	cursor: alias;
}

设置元素是否可见 visibility

li {
	 visibility:  visible;
}
visible:可见、hidden不可见

三、导航栏

1、垂直导航栏

HTML结构
<!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>导航栏</title>
    <link href="导航栏样式.css" type="text/css" rel="stylesheet">
</head>
<body>
    <ul>
        <li><a href="https://www.baidu.com/">百度</a></li>
        <li><a href="https://www.sogou.com/">搜狗</a></li>
        <li><a href="https://www.bilibili.com/">bilibili</a></li>
        <li><a href="https://www.zhihu.com/">知乎</a></li>
    </ul>
</body>
</html>

CSS样式
ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
}

a:link,a:visited{
    text-decoration: none;
    display: block;
    background-color: aqua;
    width: 50px;
    text-align: center;
}

a:active,a:hover{
    background-color: bisque;
}

2、水平导航栏

HTML结构
<!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>导航栏</title>
    <link href="导航栏样式.css" type="text/css" rel="stylesheet">
</head>
<body>
    <ul>
        <li><a href="https://www.baidu.com/">百度</a></li>
        <li><a href="https://www.sogou.com/">搜狗</a></li>
        <li><a href="https://www.bilibili.com/">bilibili</a></li>
        <li><a href="https://www.zhihu.com/">知乎</a></li>
    </ul>
</body>
</html>

CSS样式
ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
    background-color: darkgray;
    width: 250px;
    text-align: center;
}

a:link,a:visited{
    font-weight: initial;
    text-decoration: none;
    background-color: aqua;
    width: 50px;
    text-align: center;
}

a:active,a:hover{
    background-color: bisque;
}

li {
    display: inline;
    padding: 3px;
    padding-left: 5px;
    padding-right: 5px;
}

四、图片样式

HTML结构
<!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>图片样式</title>
    <link href="图片样式1.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div>
        <div class="image">
            <a href="#" target="_self">
                <img src="../img/时崎狂三.jpg" alt="风景" width="400px" height="200">
            </a>
            <div class="text">时崎狂三</div>
        </div>
        <div class="image">
            <a href="#" target="_self">
                <img src="../img/时崎狂三.jpg" alt="风景" width="400px" height="200">
            </a>
            <div class="text">时崎狂三</div>
        </div>
        <div class="image">
            <a href="#" target="_self">
                <img src="../img/时崎狂三.jpg" alt="风景" width="400px" height="200">
            </a>
            <div class="text">时崎狂三</div>
        </div>
        <div class="image">
            <a href="#" target="_self">
                <img src="../img/时崎狂三.jpg" alt="风景" width="400px" height="200">
            </a>
            <div class="text">时崎狂三</div>
        </div>
    </div>
</body>
</html>

CSS样式
body {
    margin: 10px auto;
    width: 70%;
    height: auto;
}

.image {
    border: 1px solid darkgray;
    width: auto;
    height: auto;
    float: left;
    text-align: center;
    margin: 5px;
}

img {
    margin: 5px;
}

.text {
    font-size: 12px;
    margin-bottom: 5px;
}

第六章、CSS动画

一、3D与2D的转换

实现一些效果，例如移动、旋转、缩放、倾斜、拉伸

1、2D转换的方法：

translate()	移动
rotate()	旋转
scale()		缩放
skew()		倾斜
matrix()	拉伸


/* 移动 */
.div1 {
    transform: translate(200px,100px);
    /* 指定浏览器 */
    -ms-transform: translate(100px,100px); /*IE*/
}

/* 旋转 */
.div1 {
    transform: rotate(200deg);
    /* 指定浏览器 */
    -ms-transform: translate(100px,100px); /*IE*/
}

/* 缩放 */
.div1 {
    transform: scale(1,2);
    /* 指定浏览器 */
    -ms-transform: translate(100px,100px); /*IE*/
}

/* 倾斜 */
.div1 {
    transform: skew(30deg, 20deg);
    /* 指定浏览器 */
    -ms-transform: translate(100px,100px); /*IE*/
}

/*  */
.div1 {
    transform: matrix(1,2,3,4,5,6);
    /* 指定浏览器 */
    -ms-transform: translate(100px,100px); /*IE*/
}

2、3D转换的方法：

rotateX()
rotateY()

/*  */
.div1 {
    transform: rotateX(500deg);
    /* 指定浏览器 */
    -ms-transform: translate(100deg); /*IE*/
}

/*  */
.div1 {
    transform: rotateY(500deg);
    /* 指定浏览器 */
    -ms-transform: translate(100deg); /*IE*/
}

二、过度

是元素从一种样式转换成另一种样式。

// 设置过度
transition
// 过度名称 
transition-property
// 过度效果的时间
transition-duration
// 过度效果的时间曲线
transition-timing-functio
// 过度效果的延时时间
transition-delay

// 实战-
div {
    width: 100px;
    height: 100px;
    background-color: darkturquoise;
    -webkit-transition: width 2s, height 2s, -ms-transform 2s;
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
}
div:hover {
    width: 200px;
    height: 200px;
    transform: rotate(360deg);
    -ms-transform: rotate(360deg)
}

三、动画

遵循@keyframes规则：规定动画时长、规定动画名称

四、多列

对文本或区域进行布局

column-count	分列的数量
column-gap		列间距
column-rule		间距线

<!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>多列</title>
    <link rel="stylesheet" href="多列样式.css" type="text/css">
</head>
<body>
    <div class="div1">
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
        哈啊哈哈哈哈哈哈哈
    </div>    
</body>
</html>

.div1 {
    column-count: 4;
    -webkit-column-count: 4;
    -webkit-column-gap: 30px;
    column-gap: 30px;
    column-rule: 5px outset red;
    -webkit-column-rule: 5px outset red;
}

第七章、CSS高级

一、元素的显示与隐藏（与js搭配）

目的：让一个元素在页面中消失或显示出来。

场景：类似网站广告，当我们点击关闭就不见了，但是我们重新刷新网页，会重新出现。

1、display显示（重点）

display 设置或检索对象是否及如何显示。

display：none；隐藏对象。

display：block；除了转换为块级元素之外，同时还有显示元素的意思。

特点：隐藏后，不再保留位置

2、visibility可见性（了解）

设置或检索是否显示对象

visibility：visible；对象可见

visibility：hidden；对象隐藏

特点：隐藏之后，继续保留原有位置

3、overflow溢出（重点）

检索或设置当对象的内容超过其制定高度及宽度时，如何管理内容。

属性值	描述
Visible	不剪切内容也不添加滚动条
Hidden	不现实超过对象尺寸的内容，超出的部分隐藏掉
Scroll	不管超出内容否，总是显示滚动条
Auto	超出自动显示滚动条，不超出不显示滚动条

实际开发场景：

1.单行文本显示不全，用…代替

2.清除外边距合并

3.清除浮动

4、显示与隐藏总结

属性	区别	用途
Display	隐藏对象，不保留位置	配合后面JS做特效，如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛
Visibility	隐藏对象，保留位置	使用较少
Overflow	只隐藏超出大小的部分	1.可以清除浮动，2.保证盒子里面的内容不超出该盒子范围

5、案例：视频播放按钮的显示与隐藏

<!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>土豆</title>
    <style>
        .tudou{
            position: relative; /* 定位：相对定位 */
            width: 444px; /* 设定盒子宽 */
            height: 320;
            background-color: pink; /* 盒子颜色  */
            margin: 30px auto; /* 盒子居中 */
        }
        .tudou img{
            width: 100%; /* 图片显示的宽高百分比 */
            height: 100%;
        }
        .mask{ /* 隐藏元素 */
            display: none;
            position: absolute; /* 定位：绝对定位 */
            top:0; /* 偏移量 */
            left:0;
            width: 100%; /*显示大小*/
            height: 100%;
            background: rgba(0, 0, 0, 4) url(./images/demo24/arr.png) no-repeat center; /* 显示 */
        }
        .tudou:hover .mask{ /* 当鼠标经过 tudou盒子 显示元素 */
            display: block;
        }
    </style>
</head>
<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="./images/demo24/tudou.jpg" alt="">
    </div>

</body>
</html>