前言
本文需要一点HTML的基础，没有基础的小伙伴可以看我的这篇文章：前端HTML万字血书大总结，来看看你入门了吗？
一、初识CSS
1.1、HTML的缺点
说起HTML，这其实是个非常单纯的家伙， 他只关注内容的语义， 比如<h1>表明这是一个大标题，用<p> 表明这是一个段落，用<img> 表明这儿有一个图片， 用<a> 表示此处有链接。很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点： 丑。我们来看看早期的Google。总结来说HTML的缺点：
-
HTML满足不了设计者的需求
-
操作html属性不方便
-
HTML里面添加样式带来的是无尽的臃肿和繁琐
1.2、CSS初识
CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表），他主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
- 选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。
- 属性和属性值以“键值对”的形式出现。
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
- 属性和属性值之间用英文“:”连接。
- 多个“键值对”之间用英文“;”进行区分。
1.3、引入CSS
上面我们说了CSS的那么多好处，那么我们应该如何引入CSS呢？我们引入CSS的方式有三种：
- 行内式（内联样式）
- 内部样式表（内嵌样式表）
- 外部样式表（外链式）
1.3.1、 行内式（内联样式）
称行内样式、行间样式，是通过标签的style属性来设置元素的样式，也就是说直接写在标签，他只适用于学习或者是小型的项目，一般不推荐使用。任何HTML标签都拥有style属性，用来设置行内式，他的语法格式：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
<!--示范-->
<div style="color: red; font-size: 12px;">XiaoLin</div>
总结来说：
- style其实就是标签的属性。
- 样式属性和值中间是
:。 - 多组属性值之间用
;隔开。 - 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余。
- 没有实现样式和结构相分离（致命的缺点）。
1.3.2、内部样式表（内嵌样式表）
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，这种也**只适用于学习或者是小型的项目，一般不推荐使用。**不过对比于行内式的好处是他将样式和标签进行了分离，耦合度相对来说没那么高。他的基本语法如下：
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
比如我们可以这样写：
<style>
div {
color: red;
font-size: 12px;
}
</style>
总结来说：
- style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
- type=“text/css” 在html5中可以省略。
- 只能控制当前的页面。
- 缺点是没有彻底分离。
1.3.3、外部样式表（外链式）
外链式是将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，基本用法：
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
他的常见属性和作用大概有三个。
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。 |
| type | 定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略 |
| href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 |
需要注意的点：
- link 是个单标签。
- link标签需要放在head头部标签中，并且指定link标签的三个属性。
1.3.4、三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
1.4、CSS 三大特性
1.4.1、CSS层叠性
层叠性是指多种CSS样式的叠加，是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。他有两个原则，有点像长江后浪推前浪，前浪死在沙滩上。
-
样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
-
样式不冲突，不会层叠
1.4.2、CSS继承性
CSS的继承性指的是子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
-
恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
-
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
1.4.3、CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时分为选择相同和不同的时候：
- 选择器相同，则执行层叠性。
- 选择器不同，就会出现优先级的问题。
1.5、CSS注释
CSS的注释如下：
p {
/* 所有的字体是14像素大小*/
font-size: 14px;
}
二、CSS选择器
2.1、CSS选择器作用
我们可以通过选择器，快速找到特定的HTML页面元素，把我们想要的标签选择出来。简答来说，CSS一声就做两件事：
- 选对人
- 做对事。
h3 {
color: red;
}
这段代码就是2件事， 把 h3选出来（选对人）， 然后把它变成了红色（做对事），选择器分为基础选择器和复合选择器。
2.2、CSS基础选择器
2.2.1、标签选择器
2.2.1.1、概念
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
2.2.1.2、语法
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
2.2.1.3、作用
标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签
2.2.1.4、优缺点
-
优点：
是能快速为页面中同类型的标签统一样式
-
缺点：
不能设计差异化样式。
2.2.1.5、总结
标签选择器，
页面同选起。
直接写标签，
全部不放弃。
2.2.2、类选择器
2.2.2.1、概念
类选择器使用.（英文点号）进行标识，后面紧跟类名。
2.2.2.2、语法
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
<p class='类名'></p>
我们还可以给标签指定多个类名，从而达到更多的选择目的。我们可以看到大厂做的产品，一般制定两个以上的类名。
注意：
- 各个类名中间用空格隔开。
- 多类名选择器在后期布局比较复杂的情况下，还是较多使用的。
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">后羿</div>
<div class="font14">貂蝉</div>
2.2.2.3、优点
可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签。
2.2.2.4、注意
- 类选择器使用
.（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)。 - 长名称或词组可以使用中横线来为选择器命名。
- 要纯数字、中文等命名， 尽量使用英文字母来表示。
2.2.2.5、总结
差异化选择
一个或多个
上面点定义
类名别写错
谁用谁调用
class来做。
2.2.2.6、小案例
<head>
<meta charset="utf-8">
<style>
.blue {
color: blue;
font-size: 100px;
}
.red {
color: red;
font-size: 100px;
}
.orange {
color: orange;
font-size: 100px;
}
.green {
color: green;
font-size: 100px;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
2.2.3、 id选择器
id选择器使用#进行标识，后面紧跟id名。
2.2.3.1、语法
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<p id="id名"></p>
2.2.3.2、注意
-
元素的id值是唯一的，只能对应于文档中某一个具体的元素。
-
用法基本和类选择器相同。
2.2.3.3、id选择器和类选择器区别
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class，id选择器和类选择器最大的不同在于使用次数上。类选择器我们在修改样式中，用的最多。id选择器一般用于页面唯一性的元素身上，经常和我们后面学习的javascript 搭配使用。
- 类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜
- id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。
2.2.4、通配符选择器
2.2.4.1、概念
通配符选择器用*号表示， * 就是选择所有的标签，他是所有选择器中作用范围最广的，能匹配页面中所有的元素，他会匹配页面所有的元素，降低页面响应速度，不建议随便使用。
2.2.4.2、语法
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
2.2.5、基础选择器总结
| 选择器 | 作用 | 缺点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p { color：red;} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
| id选择器 | 一次只能选择器1个标签 | 只能使用一次 | 不推荐使用 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 不推荐使用 | * {color: red;} |
2.3、CSS复合选择器
2.3.1、后代选择器
2.3.1.1、概述
后代选择器又称为包含选择器，用来选择元素或元素组的子孙后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。
父级 子级{属性:属性值;属性:属性值;}
.class h3{color:red;font-size:16px;}
2.3.1.2、注意
- 当标签发生嵌套时，内层标签就成为外层标签的后代。
- 子孙后代都可以这么选择，或者说，它能选择任何包含在内的标签。
2.3.2、 子元素选择器
子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素，其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。
.class>h3{color:red;font-size:14px;}
2.3.3、交集选择器
交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点，用的相对来说比较少，不太建议使用。
他的语法格式如下，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格：
标记选择器.类别选择器{color:red;font-size:25px;}
# 举例
h3.class：的意思是说类名为class的所有h3的标签
2.3.4、并集选择器
如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。
并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。
.选择器1,选择器2...{color:red;font-size:25px;}
# 举例
.one,p,#test {color: #F00;}
# 说明
.one 和 p 和 #test 这三个选择器都会执行颜色为红色。
通常用于集体声明。
2.3.5、复合选择器总结
| 后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 .nav a |
|---|---|---|---|---|
| 子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是**>** .nav>p |
| 交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
| 并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
三、标签显示模式（display）
3.1、什么是标签显示模式
标签以什么方式进行显示，比如div 自己占一行，比如span一行可以放很多个。我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。
3.2、块级元素(block-level)
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
<!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>Document</title>
</head>
<body>
<div>我是div元素，我是块级元素</div>
<p>我是一个p元素，块级元素</p>
</body>
</html>
块级元素的特点：
（1）比较霸道，自己独占一行
（2）高度，宽度、外边距以及内边距都可以控制。
（3）宽度默认是容器（父级宽度）的100%
（4）是一个容器及盒子，里面可以放行内或者块级元素。
注意：
- 只有文字才能组成段落 因此
p标签里面不能放块级元素，特别是p标签不能放div>标签。 - 同理还有这些标签
h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
3.3、行内元素(inline-level)
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也称为内联元素。
<!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>Document</title>
</head>
<body>
<span>我是span元素，我是行内元素</span>
<a href="#">我是a标签，同时也是行内元素</a>
</body>
</html>
行内元素的特点：
-
相邻行内元素在一行上，一行可以显示多个。
-
高、宽直接设置是无效的。
-
默认宽度就是它本身内容的宽度。
-
行内元素只能容纳文本或则其他行内元素。
注意：
-
链接里面不能再放链接。
-
特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。
3.4、行内块元素（inline-block）
在行内元素中有几个特殊的标签<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
3.5、三种模式总结区别
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
3.6、标签显示模式转换 display
- 块转行内：display:inline;
- 行内转块：display:block;
- 块、行内元素转换为行内块： display: inline-block;
四、 CSS 背景(background)
4.1、背景颜色(color)
他的语法格式是：
background-color:颜色值;
4.2、背景图片(image)
他的语法格式为：
background-image : none | url (url)
/*举例*/
background-image : url(images/demo.png);
| 参数 | 作用 |
|---|---|
| none | 无背景图（默认的） |
| url | 使用绝对或相对地址指定背景图像 |
我们提倡背景图片后面的地址，url不要加引号。
4.3、背景平铺（repeat）
他的语法格式为：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
| 参数 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
4.4、背景位置(position)
他的语法格式为：
background-position : length || length
background-position : position || position
| 参数 | 值 |
|---|---|
| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名词 |
注意：
- 必须先指定background-image属性
- position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
- 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
- 如果只指定了一个方位名词，另一个值默认居中对齐。
- 如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y
- 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
- 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
4.5、背景附着
背景附着就是解释背景是滚动的还是固定的，他的语法格式为：
background-attachment : scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
4.6、背景的书写
background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
background: transparent url(image.jpg) repeat-y scroll center top ;
4.7、背景透明(CSS3)
他的语法格式为：
background: rgba(0, 0, 0, 0.3);
- 最后一个参数是alpha 透明度 取值范围 0~1之间
- 我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
- 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
- 因为是CSS3 ，所以 低于 ie9 的版本是不支持的。
4.8、背景总结
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
| background-image | 背景图片 | url(图片路径) |
| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法 |
| background-attachment | 背景固定还是滚动 | scroll/fixed |
| 背景简写 | 更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序 |
| 背景透明 | 让盒子半透明 | background: rgba(0,0,0,0.3); 后面必须是 4个值 |
4664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
