CSS概述

1、CSS简介

CSS，层叠样式表，是一种样式表语言，用以描述HTML的呈现内容的方式（美化网页）。CSS书写规则是：

选择器{属性名：属性值}的键值对

CSS有三种引入方式，分别为：

内部样式表：CSS书写在HTML文件里<head>中<title>下方，使用<style>标签包裹CSS代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>你好</title><style>p {color: blue;font-size: 300px;}</style>
</head>
<body><p>你好</p>
</body>
</html>

外部样式表(最常用)：CSS书写在外部的.css文件中，在HTML里使用link标签引入在<title>下方

    p{color: blueviolet;font-size: 200px;}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>你好</title><link rel="stylesheet" href="./testcss.css">
</head>
<body><p>你好</p>
</body>
</html>

行内样式：配合JS使用，CSS写在标签的属性值里

    <div style="color: aqua;font-size: 100px;">你好</div>

2、基础选择器

标签选择器

使用标签名作为选择器，将同名的标签设置为一个样式

标签名{属性名：属性值}

类选择器

在查找标签的同时差异化设置标签内容的样式。步骤：首先定义类选择器：.类名，后在标签里添加类名class=" " 一个标签可以添加很多类，一个类也可以给多种标签使用

    <p class="til">你好</p><p class="cont">你好</p>

/* 写CSS */
.til{
color:red;
font-size: 50px;
}
.cont{
color: blue;
font-size: 30px;
}

id选择器

功能与类选择器类似，但一般与JS配合使用，在CSS中一般不使用。步骤：首先定义ID选择器：#id名，然后在标签里添加id="id名"。ID选择器具有唯一性，同一个ID选择器在一个页面只能使用一次

通配符选择器

查找页面所有的标签，并设置相同的样式。通配符选择器不需要调用，浏览器自动查找并设置

* {

}

3、CSS盒子

利用无语义标签加上CSS可以在Web中画盒子做页面的整体规划，规定盒子样式的属性有：

width：规定盒子宽度

height：规定盒子高度

background-color：盒子背景色

.red-box{width: 100px;height: 100px;background-color: red;
}
.blue-box{width: 200px;height: 200px;background-color: blue;
}

    <div class="red-box">小红盒子</div><div class="blue-box">大蓝盒子</div>

4、文字控制属性

CSS的文字控制属性用于调整web页面的文字风格，常用的文字属性有:

font-size：调整文字大小

font-weight：调整字体粗细，400表示不加粗，700表示加粗

line-height：调整行高，数字+px代表间隔像素值，仅数字代表当前字体大小的倍数，若行高属性值等于盒子高度属性值，可以实现单行文字的垂直居中

font-family：字体族，调整字体格式，使用font-family:字体名，字体名可以设置多个，之间用逗号隔开，这样浏览器可以从做到右查找电脑有的字体。在设置字体时的最后一个设置字体族名，一般设置无衬线字体sans-serif

font：字体的复合属性，将多个字体属性简写为一条，必须按这个顺序书写：font：是否倾斜是否加粗字号/行高字体，其中字号和字体值必须书写

text-indet：调整文本缩进，属性值有两种设置方法：数字+px代表缩进的像素值，数字+em代表缩进的字符数（一般用这个）

text-aligh：调整文本对齐方式，属性值有三种:left(默认)左对齐；center：居中；right：右对齐，text-aligh调整的是标签内容的对齐方式，不影响标签位置

text-decoration：调整文本修饰线，有四个属性值:none：无标签；underline：下划线；line-through：删除线；overline：上划线

color：调整文本颜色，属性值四种表示方法：颜色关键字、rgb表示法、rgba表示法（开发用，实现透明色，a表示透明度，从0到1取值），十六进制表示法（开发用）

.red-box-char{font-size: 30px;font-weight: 700;line-height: 200px;font-family:sans-serif;text-align: center;color: #fc0;;
}
.blue-box-char{font: italic,20px/40px,楷体;text-indent: 2em;text-decoration: underline;color: rgba(255,0,0,0.5);
}

<div class="red-box"><p class="red-box-char">标题</p></div><div class="blue-box"><p class="blue-box-char">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p></div>

5、复合选择器

复合选择器通过两个或以上的基础选择器组合而成，可以更高效的选择目标元素，复合选择器有：后代选择器、子代选择器、并集选择器、交集选择器

后代选择器：选择某元素内所有指定的后代元素，选择器写法：

父选择器子选择器 {CSS}属性

em h1{color: #fc0;
}

子代选择器：选择某元素内最近的子元素，选择器写法：

父选择器>子选择器 {CSS}属性

ul>li{color: blue;
}

并集选择器：选择多组标签设置相同的样式，选择器写法：

选择器1，选择器2，……{CSS属性}

p,div{color: aqua;
}

交集选择器：选中同时满足设定条件的元素，选择器写法（中间没有任何符号，包括空格！）：

选择器1选择器2……{CSS属性}

li.second{color: blue;
}

6、伪类选择器

伪类选择器用于设置元素中在某些情况下的状态，主要是设置带有超链接的元素，例如鼠标悬停、鼠标点击等例如，设置鼠标悬停状态的选择器写法为：选择器:hover{CSS属性}

伪类-超链接：

超链接一共有四种状态，书写状态时一定要按照下列的顺序写：

:link：访问前

:visited：访问后

:hover：鼠标悬停

:active：鼠标点击（激活）

a:link {color: #000;
}
a:visited{color: #0ff;
}
a:hover{color: #f66;
}
a:active{color: #ff0;font-size: 40px;
}
button{background-color: aqua;
}
button:active{color: #f66;background-color: #ff0;
}

7、CSS特性

CSS有三大特性：继承性、层叠性、优先级，利用这些特性可以化简CSS代码，定位解决问题

继承性：

子级标签默认继承父级的文字控制属性

层叠性：

不同的CSS在同一个标签下设置了相同的属性，后面的CSS会覆盖前面的CSS；不同的CSS在同一个标签下设置不同的属性，几个属性会叠加

优先级：

不同的选择器设置同一个标签，优先级高的选择器生效，选择器的优先级为：

通配符选择集<标签选择器<类选择器<id选择器<行内样式<!important（选中标签的范围越大，优先级越低）

如果是复合选择器，则需要权重计算：权重从左往右计算：行内样式，id选择器个数，类选择器个数，标签选择器个数

!improtan权重最高，子级继承的属性权重最低

8、背景属性

背景图实现网页装饰性图片，添加方法为:

background-image：url.(图片路径)，背景图片默认是平铺的

背景图的其他属性还有：

设置平铺方式：

background-repeat:属性值,有:

no-repeat:不平铺

repeat：平铺（默认）

repeat-x：水平方向平铺

repeat-y：垂直方向平铺

设置背景图位置:

background-position：属性值，属性值有两种写法：

关键字：left：左；right:右；center：居中；top：顶部；bottom：底端

坐标:水平坐标垂直坐标（默认0 0，即左上角）若关键字只写一个值，另外一个值默认居中

坐标只写一个值，代表水平方向，垂直方向默认居中

设置背景图比例：

background-size:属性值，有三种写法：

关键字：cover，等比例完全覆盖背景区，可能剪切掉部分背景图；contain:等比例完全装入背景区，可能导致背景留白

百分比：根据盒子尺寸计算大小，100%代表图片宽度与盒子宽度一致

数字+单位

固定背景图：

background-attachment:fixed：这样背景图不会随着页面滚动而滚动

div{width: 2000px;height: 1000px;background-image: url(./dd.jpeg);background-repeat: no-repeat;background-position: 0 0;background-size: 50%;background-attachment: fixed;
}

背景属性也可以用复合写法

background:属性值1 属性值2 背景图位置/缩放……不同的属性值用空格分开，不区分顺序

div{width: 2000px;height: 1000px;background: #ff0 url(./dd.jpeg) no-repeat center/50% fixed;
}

9、盒子显示模式

CSS的盒子显示模式有三种：

块状显示(div默认)：

独占一行，字级宽度默认是父级的100%，可以添加宽高

行内显示（span默认）：

一行可以放多个，宽高不生效，宽高由内容展开

行内块显示（图片标签默认）：

一行可以存多个，宽高生效，宽高默认由内容展开

CSS可以转换标签的显示模式，写法为：display:属性值，属性值有：

block：块状显示

inline-block：行内块显示

inline：行内显示

10、结构伪类选择器

结构伪类选择器可以根据元素之间的结构关系查找标签，写法为：

选择器：结构关系{CSS属性}

结构关系有:

first-child：查找第一个选择器

last-child：查找最后一个选择器

nth-chlid(N)：查找第n个选择器

nth-child(公式)：根据公式找选择器，如:2n,第（所有的偶数）选择器；2n+1，第（所有的奇数）选择器；Xn，第（所有X的倍数）选择器；n+x：第（x之后）所有选择器；-n+x：第（x之前）所有选择器

li:first-child{
color: #be2;
}
li:last-child{
color: #a52;
}
li:nth-child(5){
color: rgba(100, 200,100,0.5);
}
li:nth-child(2n){
font-size: 30px;
}
li:nth-child(n+5){
font-weight: 700;
}

11、伪元素选择器

伪元素选择器用于创建虚拟元素，用于装饰标签内容，写法为：

在元素前加伪元素：选择器::before{CSS属性}

在元素后加选择器：选择器::after{CSS属性}

伪元素默认是行内显示，权重与选择的标签相同，CSS属性中必须有content，但content可以为" "

div::before{
content: ">";
width: 100px;
height: 100px;
background-color: brown;
display: inline-block;
}
div::after{
content:"<"
}

12、flex布局

Flex布局也叫做弹性布局，布局网页灵活简单，是浏览器推荐的布局方式。设置方式为给父级元素设置display:flex，子元素可以自动挤压拉伸。flex的组成有：

弹性容器：父级盒子

弹性盒子：子级盒子

主轴：默认水平

侧轴：默认垂直

弹性盒子沿主轴方向排列，沿侧轴方向拉伸，flex的方法有：

创建flex容器：display:flex

.fath{display: flex;width: 1000px;height: 300px;background-color: blue;
}
.fath div{width: 100px;height: 100px;background-color: red;
}

主轴对齐:

justify-content：属性值，属性值有:

flex-start：默认值，盒子从起点开始依次排序

flex-end：盒子从终点开始默认排序

center:盒子沿主轴居中排列

space-between：沿主轴均匀排列，空白区域在两个盒子之间，弹性盒子之间间距相等

space-around：沿主轴均匀排列，空白区域在盒子两侧

space-evenly：沿主轴均匀排列，弹性盒子与容器之间间距相等

.fath{display: flex;width: 1000px;height: 300px;background-color: blue;justify-content: space-between;
}
.fath div{width: 100px;height: 100px; background-color: red;border: 1px solid #000;
}

侧轴对齐，用于设置弹性容器:

设置所有弹性盒子：align-items：属性值；设置单个弹性盒子：align-self：属性值；属性值有：

stretch：弹性盒子沿侧轴拉伸，两端对齐容器（弹性盒子没有设置侧轴方向尺寸时默认）

center：弹性盒子居中排列

flex-start：沿起点开始排列

flex-end：沿终点开始排列

.fath{display: flex;width: 1000px;height: 300px;background-color: blue;justify-content: space-between;align-items: center;
}.fath div:nth-child(3) {align-self: flex-start;
}

修改主轴方向:

flex-direction：属性值，属性值有：

row：水平方向，从左到右（默认）

column：垂直方向，从上到下

row-reverse：水平方向，从右到左

colunmn：垂直方向，从上到下

.fath {display: flex;width: 1000px;height: 300px;background-color: blue;justify-content: space-between;align-items: center;flex-direction: column;
}

弹性伸缩比，用于控制弹性盒子在主轴方向的尺寸：

flex：整数数字，用于表示占用父级剩余尺寸的份数

.fath div:nth-child(3) {align-self: flex-start;flex: 1;
}

弹性盒子默认在一行，若弹性容器撑不下时弹性盒子自动挤压，弹性盒子换行:

flex-warp：wrap(换行)/nowrap（不换行，默认）

行对齐方式:

align-content：属性值，属性值与主轴对齐方式一致，对单行盒子不生效

.fath {display: flex;width: 1000px;height: 300px;background-color: blue;justify-content: space-between;align-items: center;flex-direction: row;flex-wrap: wrap;align-content: space-around;
}