5. CSS介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）
5.1 CSS语法
每个CSS样式由选择器和声明组成，声明又包括属性和属性值。每个声明之后用分号结束
5.2 CSS的注释
/* 这是注释 */
6. CSS的几种引入方式
6.1 行内样式
行内式是在标记的style属性中设定CSS样式。不推荐大规模使用
6.2 内部样式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中，格式和展示效果如下：
6.3 外部样式
外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可，推荐使用此方式。但需注意，现在写的这个.css文件是和你的html是一个目录下，如果不是一个目录，href里面记得写上这个.css文件的路径
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
7. CSS选择器
7.1 基本选择器
7.1.1 元素选择器（标签名）
格式如下：标签{属性1:值1; 属性2:值2; }
div {color:blue;}
但是这样有一个问题，如果有多个div标签，我想把其中一个div标签中的文字颜色改为蓝色，或者背景改成红色怎么办？看下面的ID选择器
7.1.2 ID选择器
格式如下：#id属性值{属性1:值1; 属性2:值2; }
#i1 {background-color: red; color:red}
针对格式的说明：#号表示id属性，i1表示id属性的值
id 是不能重复的，如果想给多个p标签同时添加一个css样式挨个添加id属性吗？并且，如果是不同的标签，但是他们的css样式要一样，怎么办？看下面的类选择器
7.1.3 类选择器
格式如下：.class属性值{属性1:值1; 属性2:值2; }
.c1{font-size:14px;}
/* 所有p标签里面含class属性的值为c1的p标签，注意中间没有空格 */
p.c1{color: red;}
针对格式的说明：.号表示class属性，c1表示class属性的值
注意：
① 样式类名不要用数字开头（有的浏览器不认）
② 标签中的class属性如果有多个，要用空格分隔
7.1.4 通用选择器
格式如下：*{属性1:值1; 属性2:值2; }
*{color: white;}
针对格式的说明：*表示所有的标签
7.2 组合选择器
7.2.1 后代选择器（子孙）
格式如下：#外部标签 内部标签{属性1:值1; 属性2:值2; }
#li a {color: green;}
针对格式的说明：选择li标签内部的所有a标签，进行修改样式
7.2.2 儿子选择器
格式如下：#父级标签>子标签{属性1:值1; 属性2:值2; }
#div>p {font-family: "Arial Black", arial-black, cursive;}
针对格式的说明：选择所有父级是div元素的p元素，进行修改样式
7.2.3 毗邻选择器
格式如下：标签+紧接其后的标签{属性1:值1; 属性2:值2; }
div+p {margin: 5px;}
针对格式的说明：选择所有紧接着div标签之后的p标签，进行修改样式
7.2.4 弟弟选择器
格式如下：#标签~兄弟标签{属性1:值1; 属性2:值2; }
#i1~p{border: 2px solid royalblue;}
针对格式的说明：选择i1标签后面所有的兄弟p标签，进行修改样式
7.2.5 组合选择器
格式如下：标签一,标签二{属性1:值1; 属性2:值2; }
div,p{color: green;}
针对格式的说明：div标签以及p标签都会被组合选中，进行修改样式
7.2.6 其他选择器
1、div.c1{color:red} 过滤：找到有c1类值的所有div标签
2、div .c1{color:red} 找后代：找到div标签后代中有类值为c1的所有标签
7.3 属性选择器
7.3.1 属性选择器
/* 用于选取带有指定属性的元素 */
p[title]{color: red;}
/* 用于选取带有指定属性和值的元素 */
p[title="213"]{color: green;}
通过属性或者属性的值来查找，这个属性是我们自己定义的，非id或class这种html自带的属性
7.3.2 titile属性的正则写法
① 所有title属性以hello开头的元素
[title^="hello"]{color: blue;}
② 所有title属性以hello结尾的元素
[title$="hello"]{color: yellow;}
③ 所有title属性中字符串包含hello的元素
[title*="hello"]{color: red;}
④ 所有title属性(有多个值或值以空格分割)中有一个值为hello的元素
[title~="hello"]{color: green;}
7.4 分组选择器
7.5 伪类选择器
伪类选择器比较特殊，CSS3版本新加的特性，可以根据标签的不同状态再进行进一步的区分，比如一个a标签，点击前，点击时，点击后有不同的三个状态
7.5.1 a标签的伪类选择器
1、未访问的链接
a:link {color: #FF0000}
2、鼠标移动到链接上
a:hover {color: #FF00FF}
3、选定的链接 - 鼠标点下但还没抬起的瞬间
a:active {color: #0000FF}
4、已访问的链接
a:visited {color: #00FF00}
7.5.2 div标签的伪类选择器
7.5.3 input标签的伪类选择器
7.6 伪元素选择器
通过css来造标签，不推荐使用
1、first-letter：给首字母设置特殊样式
2、before：在每个p标签之前插入内容
3、after：在每个p标签之后插入内容
注意：不过上面的这些前后添加的文本内容，在页面上是无法选中的，正常的标签或者文字是可以选中的。且before和after多用于清除浮动
8. 选择器的优先级（难点）
8.1 CSS继承
我们可以通过很多种选择器来选择标签，如果有不同的选择器选中了相同的标签，并且赋予了不同的CSS样式，那么该按照哪个CSS样式来进行渲染呢？首要浏览器拿到HTML文件时，它是从上到下加载文件内容的，这也是为什么你会先看到head标签里面的内容，比如那个title标签
再看下面的例子：我在style里面写了两个#p1并且设置了不同的CSS样式，还有一个1.css文件，文件里面也写了一个#p1，对应一个其他的css样式，最后页面渲染的时候是选择的最后一个link那个文件中的#p1对应的那个css样式来渲染的，是因为按照顺序加载导致的，一个把一个覆盖了
总结：当选择器相同的时候，按照顺序来看CSS样式，谁最后就按照谁渲染。那如果是不同的选择器的时候，就要学习我们下面的优先级了，首先看一下继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中
此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的，他的权重是0。我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式
但CSS继承也是有限制的，有一些属性不能被继承，如：border, margin, padding, background等
8.2 选择器的优先级
浏览器根据什么来决定应该应用哪个样式，其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：
注意：
1、内联样式的意思是把css样式写在标签里面
2、权重计算永不进位，即无论多少个低级选择器叠加在一起的优先级仍比不过一个较高级的选择器
3、选择器的权重可以相加
4、!important方式来强制让样式生效，不讲道理的操作，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护
5、继承虽然也能让后代标签继承父代的样式，但是继承的权重为0，也就意味着它的后代标签很容易被其他选择器所改变
9. CSS属性
9.1 宽和高
width属性可以为元素设置宽度；height属性可以为元素设置高度。但需注意：块级标签才能设置高度宽度，内联标签的高度宽度由内容来决定
9.2 字体属性
9.2.1 文字字体
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值，例如：
9.2.2 字体大小
如果设置成inherit表示继承父元素的字体大小值
9.2.3 字重（粗细）
font-weight用来设置字体的字重（粗细）
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
9.2.4 文本颜色
颜色属性被用来设置文字的颜色，颜色是通过CSS最经常的指定：
① 十六进制值 - 如：#FF0000，前两位是表示红，中间两位表示绿，后面两位表示蓝，F是最高级别，0表示最低级别（无色），如果两两相同，例如FFFFFF可简写成FFF；
② 一个RGB值 - 如：RGB(255,0,0) ，RGB代表红绿蓝，最高255，最低0；
③ 颜色的名称 - 如：red；
④ rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，其范围为0.0-1.0
9.2.5 文本属性
1、文字对齐
text-align属性规定元素中的文本的水平对齐方式（letter-spacing）
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
2、文字装饰
text-decoration属性用来给文字添加特殊效果
| 值 | 描述 |
|---|---|
| none | 默认（定义标准的文本） |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本下的一条线 |
| inherit | 继承父元素的text-decoration属性的值 |
注意：line-height与height设置值相同时，字体会垂直居中
3、首行缩进
text-indent可设置段落首行缩进，一个字在页面上的默认大小为16px
9.3 背景属性
9.3.1 背景颜色
background-color可设置背景颜色
9.3.2 背景图片
background-image: url('图片路径')，如果图片路径和HTML文件在同一目录下，可直接写图片名称
9.3.3 背景重复
background-repeat可设置图片是否重复
注意：
1、background-repeat的默认重复方式为：沿x轴和y轴都平铺；
2、x轴方向即从左往右，y轴方向即从上往下，z轴方向即从内往外
9.3.4 背景位置
background-position可设置背景的位置
设置图片位置方式一：left左、right由、top顶（上）、bottom底（下）
设置图片位置方式二：通过数字调整图片位置
简写方式：
background-image:url("帅气雨落.jpg");
background-repeat:no-repeat;
background-position:30px 15px;
background-color:yellow
/* 可直接简写成如下格式 */
background:yellow url("帅气雨落.jpg") no-repeat 30px 15px
9.3.4 图片固定
9.4 边框
9.4.1 边框三大属性
边框主要有三大属性：①border-width 宽度；②border-style 样式；③border-color 颜色
通常使用简写方式：
边框样式
| 值 | 描述 |
|---|---|
| none | 无边框 |
| dotted | 点状虚线边框 |
| dashed | 矩形虚线边框 |
| solid | 实线边框 |
除了可以统一设置边框外，还可以单独为某一个边框设置样式，如下所示：
9.4.2 border-radius圆角属性
当该矩形为正方形，圆角属性值为50%及以上，得到一个圆形；当该矩形为非正方形，圆角属性值为50%及以上，得到一个椭圆形，如下：
9.4.3 display属性
用于控制HTML元素的显示效果
| 值 | 意义 |
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点 |
注意：块级标签不管你设置的宽度是多少，都会占用你整个页面宽度的空间
visibility:hidden与display:"none"的区别：
1、visibility:hidden：可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局
2、display:none：可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失
display的效果inline-block，高度宽度还可以设置，包含内联和块级标签的属性，此时可以设置高度和宽度，但是不会再像其他块级标签一样另起一行
display的效果block，可以将内联标签改为块级标签
10. CSS盒子模型
在CSS里面，每个标签可以称为一个盒子模型
1、content（内容）：盒子的内容，显示文本和图像
2、padding（内边距）：用于控制内容与边框之间的距离
3、border（边框）：围绕在内边距和内容外的边框
4、margin（外边距）：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
关于content：这里的100x100px，就是div标签内部的内容设置的大小格式
关于padding：这里的上下边距20px，左右边距10px，就是div标签内部内容与边框的距离
关于border：这里的10px，就是我们设置的边框的粗细
关于margin：这里的上下外边距20px，左右外边距10px，就是框框与外界的边距
10.1 margin外边距
从网页代码可以看出，在body标签内，页面的上下左右都会有一个margi值，这个值是浏览器自动添加的，因此我们在写CSS样式时，如果想顶格写，就会先写一个margin:0，这个可表示上右下左的外边距都为0
body {
margin:0;
}
推荐简写：顺序是上、右、下、中（顺时针方向）
如果上下左右的外边距都设置成一样，可以简写成一个数，即margin:50px，即可表示该标签距离上下左右的外边距都为50像素
常见居中：
1、margin:0 auto：表示上下边距0像素，左右自适应（居中的效果）
2、margin:10px 20px 30px：表示上为10px，左和右为20px，下为30px
如果我们将上下两个标签都设置了margin值，分别设置了上标签的下边距为50px，下标签的上边距也为100px，那么这两个标签的距离其实是100px，而不是150px，这是因为margin属性会按照最大的值来隔离两者，并非简单的相加
10.2 padding内填充
同样的，padding的简写方式与margin一样
1、如果提供两个数据，则表示第一个数用于上和下，第二个数用于左和右
2、如果提供三个数据，则表示第一个数用于上，第二个数用于左和右，第三个数用于下
10.3 float
在 CSS 中，任何元素都可以浮动，类似于word文档里，插入图片可环绕文字的效果，现在多数用来做网页布局的。浮动元素会生成一个块级框，而不论它本身是何种元素
浮动的两个特点：
① 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
② 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
浮动的三种取值：
① left：向左浮动；② right：向右浮动；③ none：默认值，不浮动
先看这段代码，我们设置两个方框，看看它们在网页中的布局
如何让下面这个绿色框框放到红色框框的右侧，我们可以加一个浮动float
但是浮动有一个副作用，就是我们重新创建一个HTML文件时，写入如下内容
此时我们如何让这个绿色框框移动到红色框框的右侧去，于是我们尝试用以下代码
这里我们只是把两个红色框框分别设置成左、右浮动，但绿色框框未做任何更改，它自动往上跑了，并且被两个红色框框盖在上面。其实我并没有给c1标签设置高度，但这个c1标签实际是有高度的，主要是这两个c2标签设置了高度，从而导致这两个c2标签将c1标签撑起来了。当两个c1标签设置了浮动效果后，浮动起来之后脱离了页面文档，无法撑起自己的父级标签，故导致c3标签上去了，进而影响到了整个页面布局
如果不想这个绿色框框上去，可以将c1标签的子标签高度（内边距+外边距+边框宽度+标签高度）设置成c1这个父标签的高度，这样父级的标签就有了自己的高度，也可以被自己的子标签所撑起
此时我们可以看到，我们将c1标签的高度设置为102px后，绿色框框也就是c3标签没有上去了。但我们一般不采用这种方式，而是用clear清除浮动
10.4 clear
clear属性规定元素的哪一侧不允许其他浮动元素
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左右两侧均不允许浮动元素 |
| none | 默认值，允许浮动元素出现在两侧 |
| inherit | 规定应该从父元素继承 clear 属性的值 |
注意：clear属性只会对自身起作用，而不会影响其他元素。再看上面的例子，我们可以给绿色框框的那个c3标签设置一个clear:both，意思是说，这个标签的左右都不能有浮动的标签，那么它只能跑到两个浮动的c2标签的下面。但是一般我们都会在c2和c3的中间加一个别的标签，给这个标签设置一个clear属性，并且高度设置为0或者不给高度，因为浮动的标签是你自己c1里面的，所以你要自己解决，才能撑起你自己的高度，并且再用其他的标签的时候，我们就不需要再考虑浮动的问题了，直接写自己的样式就可以了，不然每次加其他的标签都要去看看上面的标签有没有浮动的
10.5 清除浮动
浮动的副作用我们上面已经提到，就是父标签塌陷问题，因此要清除浮动，主要有三种方式：
1、父级标签设置高度：就是上面的示例，在父标签里面加一个其他的标签，从而撑起父级标签
2、伪元素清除法：CSS来解决
3、overflow:hidden：给塌陷的父级标签设置这个属性就可以清除浮动
10.5.1 伪元素清除法
这种方法使用较多，我们可以通过伪元素清除法来清除一下浮动，用法如下：
一般业内约定成俗，都把这个清除浮动的class属性命名为clearfix，而不是cc，如果你在别的网页看到了这个clearfix，这个一定是用来清除浮动的，因此它的写法一般为：
.clearfix:after {
content: "";
display: block;
clear: both;
}
10.5.2 overflow溢出属性
首先我们来解释下这个属性，我们在标签里写了一堆文字，但是标签的高度和宽度设置的较小，这时候文字就会溢出，例如：
然后我们就可以设置一下，如果文字溢出了，溢出的部分怎么办，设置一个overflow的属性，其主要的值如下表：
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外 |
| hidden | 内容会被修剪，并且其余内容是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 |
| inherit | 规定应该从父元素继承 overflow 属性的值 |
如果设置成overflow为scroll，就会出现滚动条，overflow相关属性如下：
10.5.3 拓展：制作圆形头像
10.6 定位（position）
1、static：默认值，无定位。不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的
2、relative：相对定位。相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置左上角为参照物。不过即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，所以不会出现像浮动那种父级标签塌陷的副作用，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。往上移动：top:-100px（负值）或者bottom:-100px（负值），往左移动：left:-100px（负值）或者right:-100px（负值），往下移动：bottom:100px（正值）或者top:100px（正值），往右移动：right:100px（正值）或者left:100px（正值）。凡是标签要进行移动，不管是float还是relative还是线面的absolute，都是按照元素自己的左上角进行计算的
注意：position:relative的一个主要用法：方便下面要学的绝对定位元素找到参照物。可以将元素设置成relative，不设置任何的top、left、right、bottom等，它还是它原来的位置
3、absolute：绝对定位。设置为绝对定位的元素框从文档流完全删除，也会有父级标签塌陷的问题，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框
注意：如果父级设置了position属性，例如position:relative，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那子元素就设置position:absolute，父元素设置position:relative，然后Top、Right、Bottom、Left用百分比宽度表示。另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义
4、fixed：固定。不管页面怎么动，都在整个屏幕的某个位置。对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义
注意：一个元素若设置了position:absolute | fixed，则该元素就不能设置float，因为这是两个不同的流，一个是“浮动流”，另一个是“定位流”。但是 relative 却可以，因为它原本所占的空间仍然占据文档流。在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置
10.7 层叠顺序（z-index）
z-index设置对象的层叠顺序。一般用在模态对话框上：
1、z-index 值：数值大的压盖住数值小的
#i1 {z-index: 999;}
2、只有定位了的元素，才能有z-index：也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index
3、z-index值没有单位，默认值为0：如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4、从父现象：如果A、B节点都定义了position:relative，A节点的z-index比B节点大, 那么A的子节点必定覆盖在B的子节点前面
10.8 透明效果（opacity）
opacity用来定义透明效果：取值范围是0~1，0是完全透明，1是完全不透明
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
