CSS 概述
CSS：Cascading Style Sheet，层叠样式表。CSS 的作用就是给 HTML 页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS 将网页内容和显示样式进行分离，提高了显示功能。
image.png
CSS 语法：
选择器{ 属性名: 属性值; 属性名: 属性值; }
image.png
CSS 的注释：
注意：CSS 只有/* */这种注释，没有//这种注释。
而且注释要写在<style>标签里面才算生效哦。
image.png
CSS样式速查：
CSS 和 HTML 结合的方式（样式表）
1、CSS 和 HTML 结合方式一：行内样式
采用 style 属性。范围只针对此标签适用。
该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改
2、CSS 和 HTML 结合方式二：内嵌样式表
在 head 标签中加入<style>标签，对多个标签进行统一修改，范围针对此页面。
该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。
3、CSS 和 HTML 结合方式三：引入外部样式表 css 文件
引入样式表文件的方式又分为两种：
（1）采用<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
（2）采用 import，必须写在<style>标签中，并且必须是第一句。例如：@import url(a.css) ;
两种引入样式方式的区别：外部样式表中不能写标签，但是可以写 import 语句。
image.png
三种样式作用优先级？
行内样式>内联样式>外部样式
CSS选择器
CSS 选择器:就是指定 CSS 要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。以下为4种基本选择器
标签选择器：针对一类标签
ID 选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用
标签选择器
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。
举例：
p{ font-size:14px; }
上方选择器的意思是说：所有的<p>标签里的内容都将显示 14 号字体。
标签选择器需要注意的是：
（1）所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input。
（2）无论这个标签藏的多深，一定能够被选择上。
（3）选择的所有，而不是一个。
ID选择器
针对某一个特定的标签来使用，只能使用一次。css 中的 ID 选择器以”#”来定义
举例：
#mytitle{ border:3px dashed green; }
id 选择器的选择符是“#”。
任何的 HTML 标签都可以有 id 属性。表示这个标签的名字。这个标签的名字，可以任取，但是：
（1）只能有字母、数字、下划线。
（2）必须以字母开头。
（3）不能和标签同名。比如 id 不能叫做 body、img、a。
另外，特别强调的是：HTML 页面，不能出现相同的 id，哪怕他们不是一个类型。比如页面上有一个 id 为 pp 的 p，一个 id 为 pp 的 div，是非法的！
类选择器
针对你想要的所有标签使用。优点：灵活。
css 中用.来表示类。举例如下：
.one{ width:800px; }
特性：
和 id 非常相似，任何的标签都可以携带 id 属性和 class 属性。class 属性的特点：
特性 1：类选择器可以被多种标签使用。
特性 2：同一个标签可以使用多个类选择器。用空格隔开。举例如下：（正确）
<h3 class="teshu zhongyao">我是一个h3啊</h3>
初学者常见的错误，就是写成了两个 class。举例如下：（错误）
<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>
通配符*通用选择器
通用选择器，将匹配任何标签。不建议使用，IE 有些版本不支持，大网站增加客户端负担。
效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。
举例：
- {
margin-left: 0px;
margin-top: 0px;
}
高级选择器：
后代选择器
交集选择器
并集选择器
伪类选择器
1、后代选择器
定义的时候用空格隔开，对于E F这种格式，表示所有属于 E 元素后代的 F 元素，有这个样式。空格就表示后代。
后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。描述的是祖先结构。
例如：
<style type="text/css">
.div1 p {
color: red;
}
</style>
空格就表示后代。.div1 p 表示.div1的后代所有的p
注意：这两个标签不一定是连续紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。
2.交集选择器
定义交集选择器的时候，两个选择器之间紧密相连。一般是以标签名开头，比如div.haha，再比如p.special。
如果后一个选择器是类选择器，则写为div.special；如果后一个选择器 id 选择器，则写为div#special。
来看下面这张图就明白了：
image.png
注意:
交集选择器没有空格。所以，没有空格的div.red（交集选择器）和有空格的div .red（后代选择器）不是一个意思。
3、并集选择器
定义的时候用逗号隔开 三种基本选择器都可以放进来
选择器都具备定义的样式。
p,
h1,
#mytitle,
.one {
color: red;
}
4、伪类选择器
伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。
比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。
静态伪类和动态伪类
伪类选择器分为两种。
（1）静态伪类：只能用于超链接的样式。如下：
:link “链接”：超链接点击之前
:visited “访问过的”：链接被访问过之后
（2）动态伪类：针对所有标签都适用的样式。如下：
:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
常见样式与属性
盒子模型
英文即box model。无论是div、span、还是a都是盒子。
但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。
盒子中的区域
一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。
浮动
float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
float 属性可以设置以下值之一：
left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值
浮动特性：
浮动的元素脱标。
性质2：浮动的元素互相贴靠。
浮动的元素有“字围”效果。
收缩，一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度。
定位：
CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。
position: absolute;
position: relative;
position: fixed;
绝对定位
定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。
特性：
（1）如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角：
（2）如果用bottom描述，那么参考点就是浏览器首屏窗口尺寸，对应的页面的左下角：
相对定位
让元素相对于自己原来的位置，进行位置调整
相对定位的定位值(负数表示相反的方向)
left：盒子右移
right：盒子左移
top：盒子下移
bottom：盒子上移
固定定位
就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
z-index属性：
表示谁压着谁。数值大的压盖住数值小的。
有如下特性：
（1）属性值大的位于上层，属性值小的位于下层。
（2）z-index值没有单位，就是一个正整数。默认的z-index值是0。
（3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
（4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。
CSS常见问题
指定了CSS样式，效果却没有呈现
原因可能有：
1、拼写有误，标签未封死或者加入了中文字符。
2、该元素本身无此样式
3.集成错误，多次指定样式，将按优先级选用
网友评论