CSS层叠样式表：深入学习慕课教程精华

更新:11-21 民间故事我要投稿纠错投诉

今天给各位分享CSS层叠样式表：深入学习慕课教程精华的知识，其中也会对进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

，

、

，```。例如，以下代码：p{font-size:12px;line-height:1.6em;}

上面CSS样式代码的作用是设置p标签的字体大小为12px，行距为1.6em。

######类选择器

类选择器最常用于CSS 样式编码中。例如，右侧代码编辑器中的代码：可以实现为“胆小如鼠”，“勇气”字体设置为红色。

语法：class选择器名称{css样式代码；}```

注意：

1. 点开头的英文

2、类选择器的名称可以任意命名（但不要用中文命名）

使用方法：

第一步：使用适当的标签标记需要修改的内容，如下：

像老鼠一样胆怯

步骤2：使用class="类选择器名称"为标签设置类，如下：

像老鼠一样胆怯

第三步：设置类选择器css样式如下：

.stress{color:red;} 类前面加一个英文点

ID选择器

在许多方面，ID 选择器与类选择器相似，但也有一些重要的区别：

1、标签设置id="ID名"，而不是class="类名"。

2. ID 选择器前面是井号(#)，而不是点(.)。

类和ID选择器的区别

相似之处：可应用于任何元素

差异：

1. ID选择器在文档中只能使用一次。与类选择器不同，ID 选择器只能使用一次，而且只能在HTML 文档中使用一次。类选择器可以多次使用。

以下代码正确的是：

三年级时，我是一个胆小的小女孩。上课时我从来不敢回答老师的问题，生怕回答错了老师会批评我。我一直没有勇气回答老师的问题。

下面的代码是错误的：

三年级时，我是一个胆小的小女孩。上课时我从来不敢回答老师的问题，生怕回答错了老师会批评我。我一直没有勇气回答老师的问题。

2. 可以使用类选择器词列表方法同时为一个元素设置多种样式。我们可以同时为一个元素设置多种样式，但这只能使用类选择器来实现，而不能使用ID选择器（不能使用ID单词列表）。

下面的代码是正确的（完整代码见右侧代码编辑器）。压力{

颜色：红色；

}

.大尺寸{

字体大小：25px；

}三年级下学期，我们班有公开课……

上面代码的作用是设置“三年级”三个字的文字颜色为红色，字体大小为25px。

以下代码不正确（完整代码见右侧代码编辑器）

颜色：红色；

}

#大尺寸ID{

字体大小：25px；

}```

``````下学期三年级``````我们班有公开课……

上面的代码无法实现将“三年级”三个字的文字颜色设置为红色、字体大小设置为25px的功能。

######子选择器

还有一个比较有用的选择器子选择器，大于符号()，用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：foodli{border:1px Solid red;}```

这行代码将为类名food 下的子元素li（水果和蔬菜）添加红色实线边框。

包含(后代)选择器

包含选择器，即添加空格，用于选择指定标签元素下的后代元素。如右图代码编辑器所示：

.第一个跨度{color:red;}```

这行代码会将第一段文本中“Cowardly as a Mouse”的字体颜色更改为红色。

请注意此选择器和子选择器之间的区别。子选择器仅指其直接后代，或者您可以将其理解为作用于子元素的第一代后代。后代选择器作用于所有子后代元素。后代选择器使用空格进行选择，而子选择器使用“”进行选择。

摘要：作用于元素的第一代后代，空格作用于元素的所有后代。

######通用选择器

通用选择器是最强大的选择器。它用(*) 符号指定。它的作用是匹配HTML中的所有标签元素。使用下面的代码可以将HTML 中任意标签元素的字体颜色设置为红色： { color:red;}```

伪类选择符

比较有趣的是伪类选择器。为什么称为伪类选择器？它允许为html中不存在的标签（标签的某种状态）设置样式。例如，我们给一个设置鼠标悬停时标签元素的字体颜色：

a:hover{color:red;}```

当鼠标悬停在标签上时，上面的代码行将标签的字体颜色设置为红色。这将为文本第一段中的“像老鼠一样胆怯”添加特殊效果，并在鼠标滑过时将字体颜色更改为红色。

关于伪选择器：

关于伪类选择器，到目前为止，兼容所有浏览器的“伪类选择器”就是在a标签上使用```:hover```（其实伪类选择器还有很多，特别是CSS3，但由于它不兼容所有浏览器，所以本教程只讲这个最常用的）。其实``:hover``可以放在任何标签上，比如p:hover，但是它们的兼容性也很差，所以现在比较常用的是``a:hover```的组合。

组选择器

当你想为HTML中的多个标签元素设置相同的样式时，可以使用分组选择器（,）。下面的代码同时将右侧代码编辑器中的h1和span标签的字体颜色设置为红色：

h1，跨度{color:red;}

相当于下面两行代码：

h1{color:red;}

跨度{color:red;}

######组选择器

当你想为HTML中的多个标签元素设置相同的样式时，可以使用分组选择器（,）。下面的代码同时将右侧代码编辑器中的h1 和span 标签的字体颜色设置为红色： h1, span{ color:red;}```

相当于下面两行代码：

h1{color:red;}

跨度{color:red;}```

继承

有些CSS样式是继承的，那么什么是继承呢？继承是一种规则，允许样式不仅应用于特定的html 标签元素，还应用于其后代元素。例如下面的代码：如果给p标签应用了某种颜色，那么这个颜色设置不仅适用于p标签，还适用于p标签中的所有子元素文本，其中子元素为span标签。 ``p{color:red;}````当我上三年级的时候，我还是一个胆小如鼠的小女孩。

可以看到右侧结果窗口中p中的文本和span中的文本都设置为红色。但请注意，某些CSS 样式是不能继承的。如border:1px纯红色；

p{border:1px 纯红色；}```

三年级时，我还是一个胆小的小女孩。

上面的例子中，代码的作用只是为p标签设置边框为1像素、红色、边框实线，但对子元素span没有任何影响。

特殊性

有时我们会为同一个元素设置不同的CSS样式代码，那么该元素会启用哪种CSS样式呢？我们看一下下面的代码：

p{color:red;}

.first{color:green;}

三年级时，我还是一个胆小的小女孩。

p和.first都匹配p标签，那么会显示哪种颜色呢？绿色是正确的颜色，为什么呢？这是因为浏览器根据权重来决定使用哪种CSS样式，并且使用权重较高的CSS样式。

以下是权重规则：

标签的权重为1，类选择器的权重为10，ID选择器的权重最大为100。例如下面的代码：

p{color:red;} /*权重为1*/

p span{color:green;} /*权重为1+1=2*/

.warning{color:white;} /*权重为10*/

p span.warning{color:purple;} /*权重为1+1+10=12*/

#footer .note p{color:yellow;} /*权重为100+10+1=111*/```

注意：还有一个特殊的权重——继承也有权重，但是很低。有文献提出只有0.1，因此可以理解为继承权重最低。

级联

我们思考一个问题：如果html文件中同一个元素可以有多个css样式，并且这多个css样式的权重值相同怎么办？好了，本节的级联就帮你解决这个问题了。

级联意味着html 文件中的同一元素可以存在多种css 样式。当存在相同权重的样式时，会根据这些css样式的顺序来确定，并应用最后的css样式。

例如，以下代码：p{color:red;}

p{color:green;}

三年级时，我还是一个胆小的小女孩。

````

最后，p中的文本将被设置为绿色。这种级联很容易理解。据了解，后面的样式会覆盖前面的样式。

那么前面的CSS样式优先级就不难理解了：

内联样式表（标记内）嵌入样式表（在当前文件中）外部样式表（在外部文件中）。

重要性

我们在制作网页代码的时候，有一些特殊的情况，需要给某些样式设置最高的权重。我们应该做什么？这时候我们可以使用!important来解决。

下面的代码：

p{color:green;}三年级时，我还是一个胆小的小女孩。

````

这时，p段中的文字就会显示为红色。

注意：important要写在分号前面

这里需要注意的是，当网页创建者没有设置css样式时，浏览器会按照自己设置的样式来显示网页。并且用户还可以在浏览器中设置自己的自定义样式。例如，一些用户习惯将字体大小设置为较大的尺寸，以便可以更清晰地查看网页的文本。这时要注意样式优先级：浏览器默认样式、网页创建者样式、用户设置的样式，但要记住!important优先级样式是一个例外，它的权重高于用户设置的样式。

######文本布局--字体

我们可以使用css样式来为网页中的文字设置字体、字号、颜色等样式属性。让我们看一个例子。下面的代码实现：将网页中的文字字体设置为宋体。 body{font-family:"宋体";}```

注意这里不要设置不常见的字体，因为如果用户本地计算机上没有安装你设置的字体，就会显示浏览器的默认字体。（因为用户能否看到你设置的字体样式取决于用户本地计算机上是否安装了你设置的字体。）

现在大多数网页都喜欢设置“微软雅黑”，如下代码所示：

body{font-family:"微软雅黑";}```

或者body{font-family:"微软雅黑";}```

注意：第一种方法比第二种方法兼容性更好。

因为这个字体很漂亮，而且可以安全地在客户端显示（本地一般默认安装的）。

文本布局- 字体大小、颜色

您可以使用以下代码将网页文本的字体大小设置为12像素，并将字体颜色设置为#666（灰色）：

正文{font-size:12px;color:#666}```

######文本布局--粗体

我们还可以使用CSS 样式来更改文本样式：粗体、斜体、下划线、删除线。您可以使用以下代码设置文本以粗体样式显示。 p跨度{font-weight:bold;}```

这里可以看到，如果要为文本设置粗体，有单独的css样式来实现。您不再需要使用h1-h6 或强标签来实现大胆的风格。

文字排版--斜体

以下代码可以在浏览器中以斜体显示文本：

p a{font-style:italic;}```三年级时，我还是一个胆小的小女孩。

````

段落排版--缩进

在中文文本中，习惯上在段落前留两个空格。这种特殊的样式可以通过以下代码实现：

p{text-indent:2em;}1922年春天，一位一心想成名的作家名叫尼克·卡拉威（托比·马奎尔Tobey Maguire 饰）离开美国中西部来到纽约。那是一个道德败坏、爵士乐盛行、走私为王、股票盛行的时代

飙升的时代。为了追求他的美国梦，他搬到了纽约附近的一个海湾。

````

注意：2em 表示文本大小的两倍。

######段落布局--行间距（行高）

下面的代码实现了将段落行间距设置为1.5倍。

``p{line-height:1.5em;}菲茨杰拉德，20世纪美国文学巨擘之一，具有作家和编剧的双重身份。他以诗人的敏感和剧作家的想象力创造了“爵士时代”

唱着华丽的挽歌，他作为诗人和梦想家的气质也是对那个奢靡时代的完美诠释。

````

######段落布局--汉字间距、字母间距

汉字间距和字母间距设置：

如果你想在网页布局中设置文字间距或者字母间距，可以使用letter-spacing来实现，比如下面的代码： h1{

字母间距：50px；

}

了不起的盖茨比

````

注意：当此样式用于英文单词时，它设置字母之间的间距。

字间距设置：

如果我想设置英文单词之间的间距怎么办？这可以通过使用字间距来实现。下面的代码：

h1{

字间距：50px；

}

welcome to imooc!

````

######段落布局--对齐

想要为块元素中的文本和图像设置居中样式吗？您可以使用文本对齐样式代码。下面的代码可以实现文本居中显示。（那么什么是块元素？我们会在下面的11-1和11-2章节中讲到。） h1{

文本对齐：居中；

}

了不起的盖茨比

````

您也可以将其设置为左侧：

h1{

文本对齐：左；

}

了不起的盖茨比

````

您还可以设置正确的位置：h1{

文本对齐：右；

}

了不起的盖茨比

````

元素分类

在讲解CSS布局之前，我们需要提前了解一些知识。在CSS中，html中的标签元素一般分为三种不同类型：块元素、行内元素（也称行内元素）和行内元素。连接的块元素。

常用的块元素包括：

...

,```

常用的行内元素有：

,、、、、、```常用的内联块元素有：

,```

######元素分类--块级元素

什么是块级元素？

在HTML 中，```、

、

和``` 是块级元素。设置display:block 会将元素显示为块级元素。下面的代码将行内元素a转换为块元素，使a元素具有块元素的特性。 a{display:block;}```

块级元素特性：

1、每个块级元素另起一行，后续元素也另起一行。（真是霸道，一个块级元素占一行）

2、可以设置元素的高度、宽度、行高、上下边距。

3. 未设置时，元素的宽度为其父容器的100%（与父元素的宽度相同），除非设置了宽度。

元素分类--内联元素

在HTML中，和是典型的内联元素（inline elements）。当然，块元素也可以通过代码display:inline设置为内联元素。下面的代码将块元素div转换为内联元素，使div元素具备内联元素的特性。

div{

显示：内联；

}```

.我想让它成为一个内联元素```

行内元素的特点：

1、与其他元素在同一行；

2、元素的高度、宽度、上下边距无法设置；

3. 元素的宽度是其包含的文本或图像的宽度，不能更改。

元素分类--内联块状元素

行内块元素（inline-block）兼有行内元素和块元素的特点。代码display:inline-block 将元素设置为内联块元素。（css2.1中新增），而标签就是这样的内联块标签。

内联块元素的特点：

1、与其他元素在同一行；

2、可以设置元素的高度、宽度、行高、上下边距。

盒模型--边框（一）

盒模型的边框是围绕内容和填充物的线。你可以设置这条线的粗细、样式和颜色（边框的三个属性）。

例如，下面的代码用于div设置边框粗细为2px，样式为实心，颜色为红色：

div{

border:2px 纯红色；

}```

上面是边框代码的缩写，可以单独写成：div{

边框宽度：2px；

边框样式：solid；

边框颜色：红色；

}```

注意：

1. Border-style（边框样式）常见的样式有：

虚线|点|坚硬的。

2、border-color中的颜色可以设置为十六进制颜色，如：

border-color:#888;//别忘了前面的井号。

3、border-width（边框宽度）中的宽度还可以设置为：

薄|中等|厚（但不是很常用），像素（px）是最常用的。

盒模型--边框（二）

现在有一个问题。如果想给p标签单独设置下边框，但不设置其他三边的边框样式怎么办？ css 样式允许您仅在一个方向上设置边框样式：

div{border-bottom:1px 纯红色；}```

还可以使用以下代码设置其他三边（上、右、左）边框： border-top:1px Solid red；

border-right:1px 纯红色；

border-left:1px 纯红色；```

盒模型--宽度和高度

盒模型的宽度和高度与我们通常认为的物体的宽度和高度不同。 CSS中定义的宽度和高度是指填充内的内容范围。

因此，元素的实际宽度（盒子的宽度）=左边框+左边框+左内边距+内容宽度+右内边距+右边框+右边框。

元素的高度也是如此。

例如：

CSS代码：

div{

宽度：200px；

内边距：20px；

border:1px 纯红色；

边距：10px；

}```html 代码：

文字内容

````

元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。可以在Chrome浏览器中查看元素盒模型，如下图：

盒模型--填充

可以设置元素内容与边框的距离，称为“填充”。填充还可分为上、右、下、左（顺时针方向）。下面的代码：

div{padding:20px 10px 15px 30px;}````

一定不要混淆顺序。可以单独编写上面的代码：div{

填充顶部：20px；

填充右：10px；

填充底部：15px；

填充左：30px；

}```

如果上、右、下、左内边距均为10px；你可以这样写

div{padding:10px;}```

如果顶部和底部内边距相同10px，左右内边距相同20px，则可以这样写：div{padding:10px 20px;}```

盒模型--边界

元素与其他元素之间的距离可以使用边距设置。边界也可分为上、右、下、左。下面的代码：

div{margin:20px 10px 15px 30px;}```

也可以单独写：div{

边距顶部：20px；

边距-right:10px；

边距底部：15px；

边距-left:30px；

}```

如果上、右、下、左边框均为10px；你可以写：

div{ margin:10px;}```

如果上下边框同为10px，左右边框同为20px，则可以这样写：div{ margin:10px 20px;}```

总结一下：padding和margin的区别，padding在边框之内，margin在边框之外。

css布局模型

现在我们了解了CSS盒模型的基本概念和盒模型类型，接下来我们就可以深入研究网页布局的基本模型了。布局模型和盒子模型一样，是CSS最基本、最核心的概念。但布局模型是基于盒模型的，与我们常说的CSS布局样式或者CSS布局模板不同。如果说布局模型是基础，那么CSS布局模板就是末端，是外在的表达。

CSS包含三种基本布局模型，英文概括为：Flow、Layer和Float。

在网页中，元素的布局模型有以下三种：

1. 流量模型（Flow）

2. 浮动模型（Float）

3.层模型（Layer）

流动模型（一）

Flow 是默认的网页布局模式。也就是说，默认状态下网页的HTML网页元素按照流模型来分配网页内容。

流式布局模型有两个典型特征：

第一点是块元素会在包含元素内按照从上到下的顺序垂直延伸，因为默认情况下块元素的宽度是100%。事实上，块元素都是以行的形式占据位置的。例如，右侧代码编辑器中三个块元素标签（div、h1、p）的宽度显示为100%。

流动模型（二）

第二点，在流模型下，内联元素会在包含元素内从左到右水平显示。（行内元素不像块元素那么霸气，单独占一行）

浮动模型

块元素太霸道了，占据了一排。如果我们希望两个块元素并排显示怎么办？别担心，将元素设置为浮动就可以实现这个愿望。

默认情况下任何元素都不能浮动，但可以使用CSS 将其定义为浮动。 div、p、table、img 等元素可以定义为浮动。下面的代码可以在一行中显示两个div元素。

div{

宽度：200px；

高度：200px；

border:2px 红色实心；

浮动：左；

}```

效果图

![](http://img.mukewang.com/540e62c60001c56a06760417.jpg)

当然，你也可以设置两个元素同时向右浮动，实现一行显示。 div{

宽度：200px；

高度：200px；

border:2px 红色实心；

浮动：右；

}```

效果图

还有朋友问，设置一左一右两个元素可以显示一行吗？当然：

div{

宽度：200px；

高度：200px；

border:2px 红色实心；

}

#div1{float:left;}

#div2{float:right;}```

效果图

![](http://img.mukewang.com/540e63b50001f6a206760417.jpg)

######什么是图层模型？

什么是图层布局模型？图层布局模型就像图像软件PhotoShop中非常流行的图层编辑功能。每一层都可以精确定位和操作。然而，在网页设计领域，由于网页尺寸的流动性，图层布局一直没有流行起来。然而，在网页本地使用图层布局仍然有一些优点。我们来了解一下html中的图层布局。

如何在网页中准确定位html元素，就像图像软件PhotoShop中的图层一样，每个图层都可以精确定位和操作。 CSS 定义了一组定位属性来支持图层布局模型。

层模型有三种形式：

1.绝对定位（position:绝对）

2.相对定位（position:relative）

3.固定定位（position

ion: fixed) ###### 层模型--绝对定位如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; } ``` 效果如下： image.png

层模型--相对定位

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。如下代码实现相对于以前位置向下移动50px，向右移动100px; #div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; }``` 效果图：![image.png](http://upload-images.jianshu.io/upload_images/3934309-11f2b06eacd01dc9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 什么叫做“偏移前的位置保留不动”呢？大家可以做一个实验，在右侧代码编辑器的19行div标签的后面加入一个span标签，在标并在span标签中写入一些文字。如下代码：偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置