前端----CSS层叠样式表

一、CSS简介

1、CSS----用于网页美化

CSS是层叠样式表（Cascading Style Sheets） 的简称，有时我们也叫CSS样式表或级联样式表。CSS主要用于设置HTML页面的文本内容（字体、大小、形状等）、图片的外形以及版面布局和外观显示样式。

CSS的最大价值： 由HTML去做页面的结构呈现，CSS去做样式的优化。即结构（HTML）和样式（CSS）相分离。

2、CSS的语法规范

CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

二、CSS的基础选择器

1、选择器的分类

选择器分为基础选择器和复合选择器两大类，我们先看基础选择器。
基础选择器是由单个选择器组成的；
基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器。

2、标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中的某一标签指定统一的CSS样式。
语法：

   标签名 {属性1: 属性值1;属性2: 属性值2;......}

作用： 标签选择器可以把某一类标签全部选择出来，比如所有的 < p > 标签。
优点： 能快速为页面中的同类型标签统一样式设置。
缺点： 不能做差异化设计，只能选择全部的当前标签。

3、类（class）选择器

如果想要差异化选择不同的标签，单独选择一个或几个标签，可以使用类选择器。
语法：

    .类名 {属性: 属性值;......}

注意：
● 类选择器使用" ."（英文点号）进行标识，后面紧跟着自定义类名。
● 自定义类名不能使用标签的名称。
● 一个标签可以使用多个类名中间使用空格隔开。

4、id选择器

● id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
● HTML 以 id 属性来设置 id 选择器，CSS 中 id 选择器以 " # " 来定义。
● id 选择器和类选择器的不同住处就在于类选择器就好比人的名字，可以重名，id 选择器就相当于身份证号，每个人的都是唯一且不同的。
语法：

    #id名 {属性: 属性值;......}

5、通配符选择器

在 CSS 中，通配符选择器需要使用 “*” 定义，它表示选取当前页面中的所有标签。
通配符选择器不需要调用，它自动就给所有的元素使用样式。
语法：

    * {属性：属性值......}

基础选择器总结：

基础选择器	作用	特点	用法
标签选择器	可以选出所有相同的标签，比如 p	不能差异化选择	p { color：red； }
类选择器	可以选出一个或多个标签	可以根据需求选择	.box { color：red； }
id选择器	一次只能给一个标签调用	id属性只能在每个HTML文档中出现一次	#first { color：red； }
通配符选择器	选择所有的标签	选择的太多，部分不需要	* { color：red；}

三、CSS高级选择器

1、层次选择器

1.1、后代选择器

后代选择器（descendant selector）又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

举例来说，如果希望只对 h1 元素中的 span元素应用样式，可以这样写：

h1 span {color:red;
}

1.2、子选择器

和后代选择器不同，子选择器只能选择某元素的子元素作为元素。
语法：

父元素 > 子元素 {属性:...
}

例如：

 h3 > p {color: red;font-family: 隶书;font-size: 55px;
}
<h3><p>子选择器只能选择父级元素的子元素作为元素</p>
</h3>

1.3、相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

比如你要选择h3下的第2个p，就可以使用相邻兄弟选择器，使用相邻兄弟选择器后，就意味着和它同辈的下一个元素被选中，就像下面这个例子，使用相邻兄弟选择器选中的就是第二个p标签second。

.active+p {background: red;font-family: 隶书;font-size: 30px;
}<h3><p class="active">first</p><p>second</p><p>third</p><p>last</p>
</h3>

1.4、通用兄弟选择器

通用兄弟选择器选择的是同级元素后面的所有的兄弟元素。
例如下面这个例子，你要选择 class 为 active 的 p 标签后面的所有的 p 标签，就可以使用通用兄弟选择器。.

 .active~p {background: #5f5eff;font-family: 楷体;}
<h3><p class="active">first</p><p>second</p><p>third</p><p>last</p>
</h3>

运行结果：

2、结构伪类选择器

用法：

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>ul li:first-child {background: blue;font-size: 20px;font-weight: bolder;}h3 p:last-child {background: red;font-weight: lighter;font-size: 25px;}ul li:first-of-type {background: #34fff5;}h3 p:nth-of-type(2) {background: #922d3a;}</style>
</head>
<body>
<ul><li>1张三</li><li>2李四</li><li>3王五</li><li>4赵倩</li><li>5李云飞</li>
</ul>
<h3><p>p1第一段</p><p>p2第二段</p><p>p3第三段</p><p>p4第四段</p>
</h3>
</body>
</html>

执行结果：

四、美化网页元素

1、美化网页的必要性

1、有效的传递页面信息；
2、使页面变得好看，吸引用户；
3、凸显网页的主题；
4、为用户提供更好地体验；

2、网页的字体样式

<style>body {font-family: 楷体;font-size: large;font-weight: bolder;color: #0000FF;}
</style>

3、文本样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p {background: #34fff5;/*背景*/color: rgba(146, 45, 58, 0.6);/*文本颜色和透明度*/text-align: left;/*文本排版：居左*/text-indent: 3em;/*段落首行缩进*/text-decoration: underline;/*文本装饰：下划线*/height: 100px;line-height: 100px;/*把行高和这个段落的高度设置一样高，文本就可以在这个段落上下居中*/}</style>
</head>
<body>
<p>中国开发者在数量与贡献度上均位列第二。尤其是2019年的新注册用户中40%来自中国，</p>
<p>他们中90后的年轻人居多，完全出于兴趣与自我价值的实现参与开源项目。</p>
<p>可以说由于年轻人的不断加入，开源正在成为大型软件项目开发的新模式，成本很低并且效率很高，开源代表了IT业的未来。</p>
</body>
</html>

执行结果：

4、阴影

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#shadow1 {text-shadow: #4027ff 10px -10px 2px;/*四个参数分别是：阴影颜色 水平偏移 上下偏移 阴影半径*/}</style>
</head>
<body>
<p id="shadow1">可以说由于年轻人的不断加入，开源正在成为大型软件项目开发的新模式，成本很低并且效率很高，开源代表了IT业的未来。</p>
</body>
</html>

执行结果：

5、超链接伪类

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*a:hover 鼠标悬浮在链接上的样式*/a:hover {color: #ff160e;text-decoration: none;font-size: 20px;font-weight: bolder;}</style>
</head>
<body>
<a href="#">点我1</a>
<a href="#">点我2</a>
<a href="#">点我3</a>
</body>
</html>

6、列表样式

 <style>ul li {font-size: 20px;list-style: none;/*列表前面的样式 none：空 circle：空心圆 decimal：数字 square：正方形*/}</style>

7、网页背景

 <style>body{background-image: url("images/1.jpg");/*网页背景图片*/background-repeat: repeat-y;/*背景样式：垂直方向平铺*/}</style>

8、背景颜色渐变

<style>body {background-color: #FFFFFF;background-image: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);}
</style>

效果：

五、盒子模型

1、什么是盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距，边框，内边距和实际内容。

盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

2、盒子模型的三要素

Margin：外边距 Padding：边框 Border：内边距
示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {background-color: lightgrey;width: 300px;border: 25px solid green;padding: 25px;margin: 25px;}</style>
</head>
<body>
<h2>盒子模型演示</h2><p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p><div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>
</body>
</html>

3、圆角边框

 <style>div {width: 100px;height: 100px;border: 10px solid red;border-radius: 50px; /*边框半径*/}</style>

4、盒子阴影

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>img {border-radius: 50px;box-shadow: 10px 10px 100px red;/*四个参数：水平偏移 上下偏移 阴影半径 阴影颜色*/}</style>
</head>
<body>
<div style="width: 200px;display: block;text-align: center"><img src="data:images/74-1G22F93Q0.jpg" alt="#">
</div>
</body>
</html>

六、浮动

了解浮动之前，我们要先了解文 web 页面的几个特性：

（1）空白折叠现象：
无论多少个空格、换行、tab，都会折叠为一个空格。

（2）高矮不齐，底边对齐：
页面的元素默认都是底边对齐。

（3）自动换行：
当你写的内容一行写不满时，会自动换行在下一行写。

（4）行内元素和块级元素：
块级元素： 独占一行，例如 h1~h6 、p、div、等标签都是块级元素。
行内元素： 不是独占一行的，元素可以放在一行内。

行内元素可以放在块级元素中，但反之就不可以。

1、display 属性

    block 块元素inline 行内元素inline-block  是块元素，但是可以内联，在一行！none

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 100px;height: 100px;border: 1px solid red;display: inline;}span {width: 100px;height: 100px;line-height: 100px;border: 1px solid red;display: inline-block;}</style>
</head>
<body>
<div>块级元素
</div>
<span>行内元素
</span>
</body>
</html>

执行结果：

2、float 属性

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

属性值：

float属性值	描述
left	使元素向左浮动
right	使元素向右浮动
none	默认值，元素不浮动
inherit	规定从父元素继承 float 属性的值

七、解决父级边框塌陷问题

看下面的代码
html代码：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>浮动</title><link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father"><div class="layer01"><img src="data:images/1.jpg" alt=""/></div><div class="layer02"><img src="data:images/2.jpg" alt=""/></div><div class="layer03"><img src="data:images/3.jpg" alt=""/></div><div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。</div>
</div>
</body>
</html>

css代码：

div {margin: 10px;padding: 5px;
}#father {border: 1px #000 solid;
}
.layer01 {border: 1px #F00 dashed;display: inline-block;float: left;
}.layer02 {border: 1px #00F dashed;display: inline-block;float: left;
}.layer03 {border: 1px #060 dashed;display: inline-block;float: left;
}.layer04 {border: 1px #666 dashed;font-size: 12px;line-height: 23px;display: inline-block;float: left;
}

运行效果：

我们可以看到包含这四个元素的父级边框已经塌陷进去了，浮动在父级边框之外。

解决方案：

1、给父级元素增加高度

#father {border: 1px #000 solid;height: 500px;
}

2、在增加一个空的 div 标签，把这个标签设置为清除浮动

<body>
<div id="father"><div class="layer01"><img src="data:images/1.jpg" alt=""/></div><div class="layer02"><img src="data:images/2.jpg" alt=""/></div><div class="layer03"><img src="data:images/3.jpg" alt=""/></div><div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。</div><div id="claer"></div> <!--添加的空div标签-->
</div>
</body>

给空标签设置属性：

#claer {clear: both;
}

运行也可以解决问题：

3、给父级元素添加 overflow 属性

#father {border: 1px #000 solid;overflow: hidden;
}

运行结果：

同样也可以解决问题。

4、给父类添加一个伪类：after

给父类添加一个伪类，然后添加一个空的内容，display 设置为 block，再清除浮动。

#father:after {content: "";display: block;clear: both;
}

这个方案也是目前解决父级边框塌陷问题最常用的，它避免了在 html 代码中添加或修改代码，直接添加一个伪类即可，简单快捷。

八、CSS定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

1、相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

相对定位原理就是相对于元素自己原来的位置进行制定位置的偏移。

相对定位仍然在标准文档流中，原来的位置会被保留。

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相对定位</title><style>#father {margin: 0px;padding: 10px;border: red solid 1px;}#first {background: #34fff5;border: #4027ff dashed 1px;position: relative;/*相对定位属性*/top: -20px;/*相对于顶部偏移-20px*/left: 20px;/*相对于左边偏移20px*/}#second {background: #922d3a;border: #34fff5 dashed 1px;}#third {background: #fad65c;border: #922d3a dashed 1px;}</style>
</head>
<body>
<div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</div>
</body>
</html>

执行结果：

2、绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样

绝对定位使元素的位置与文档流无关，因此不占据空间。

绝对定位是基于某个内容进行上下左右偏移的。

绝对定位的三个要素：

a、在没有父级元素定位的前提下，会相对于浏览器进行定位；
b、假设父级元素存在定位，通常会相对于父级元素进行定位；
c、元素在父级元素范围内进行偏移移动，不会超脱父级元素的范围。

3、固定定位 fixed

固定定位就是在一个 html 页面中，这个元素固定定位以后，不管网页有多长，网页如何变化，这个固定定位的元素的位置上不会发生改变，就像一般的网站中底部都有回到顶部那些按钮，不管网页上拉或下滑它的位置都不会发生改变。

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>固定定位</title><style>body {height: 1000px;}#father {margin: 15px;padding: 10px;border: 1px solid red;position: relative;}#first {background: #34fff5;border: #4027ff dashed 1px;}#second {margin: 10px;background: #922d3a;border: #34fff5 dashed 1px;position: fixed;right: 0px;bottom: 0px;}#third {background: #fad65c;border: #922d3a dashed 1px;}</style>
</head>
<body>
<div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</div>
</body>
</html>

执行结果：

像上面的案例，右下角的第二个盒子的位置不管滚动条怎么滑动，它的位置都不会改变。

4、z-index

定义和用法
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

九、总结

CSS 的基础知识就是以上的这些内容，其中我认为比较重要的知识就是选择器还有定位和浮动这些，这些知识我们在平时只要多加留意，自己在浏览网站时可以学习别人的好习惯和技术，多多练习就会掌握的。