现在的互联网前端分为三层：
- HTML:超文本标记语言。从语义的角度描述页面结构
- CSS:层叠样式表。从审美的角度负责页面样式
- JS:Javascript。从交互的角度描述页面的行为
css它是一个很神奇的东西，设计者可以通过修改样式表的定义从而使我们的网页呈现出完全不同的外观。比如大家耳熟能详的购物网站：淘宝、京东、小米等等。
认识css
1.认识css
CSS全称为“层叠样式表”(Cascading Style Sheets),它主要是用于定义HTML内容在浏览器内的显示样式，比如文字大小、颜色、字体加粗等等。
如下代码：
p {
font-size:12px;
color:red;
font-weight:bold;
}
代码解释：
使用css样式的一个好处是可以通过定义某个样式，可以让不同网页位置的文本有着统一的字体、字号或者颜色。比如上面代码就是选中了页面中所有的p标签来设置统一样式。
2.css的优势
那么，在哪里编写我们的css呢？接下来给大家介绍style标签。
style标签包含网页的样式信息。默认情况下，该标签的样式信息通常是CSS的格式。
比如下面这样一段话：
如果每个人都是一颗小星球，
逝去的亲友就是身边的暗物质。
我愿能再见你,
我知我再见不到你。
但你的引力仍在。
我感激我们的光锥曾彼此重叠，而你永远改变了我的星轨。
纵使再不能相见，你仍是我所在的星系未曾分崩离析的原因，
是我宇宙之网的永恒组成。
这两个短语的文本颜色设置为红色，这时我们就可以通过设置样式来作用，而且只需要编写一条css样式语句。
第一步，新建index.html,将整段文字用<p></p>标签包括起来。
第二步，在head标签中使用<style>标签写入下列代码。
span{
color:red;
}
第三步，用浏览器打开该网页,观察文字的颜色变为了红色
代码如下：
<!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>
<style>
span{
color: red;
}
</style>
</head>
<body>
<div>
<p>
如果每个人都是一颗小星球， <br>
逝去的亲友就是身边的暗物质。 <br>
<span>我愿能再见你,</span> <br>
<span>我知我再见不到你。</span> <br>
但你的引力仍在。 <br>
我感激我们的光锥曾彼此重叠，而你永远改变了我的星轨。<br>
纵使再不能相见，你仍是我所在的星系未曾分崩离析的原因， <br>
是我宇宙之网的永恒组成。<br>
</p>
</div>
</body>
</body>
</html>
注意：单独将标语用span标签标示出来，不会影响文本的正常显示。如果再给span标签设置了样式，那么该span标签就体现了它的语义。
那么在网页中，尤其是文本，在不影响文本内容变化的情况下，并且将凸显的内容标识出来，我们就可以使用span标签再配合我们的css来修改样式。
效果展示：
3.css的语法
我们讲解完css的优势之后，我们重点来看一下，如何编写我们的css。
css样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：
-
选择符:我们又称为选择器，指明网页中应用样式规则的元素，如上述图中网页的所有
<p>的文本变为蓝色，而其它元素(如ul,ol等等)不会受到影响。 -
声明：在英文大括号"{}“中的就是声明，属性和值之间用英文冒号”：“分割。当有多条声明时，中间可以英文分号”;"分割，如下所示：
p{ font-size：12px; color:red; }
举个例子有助于大家理解什么是选择符、属性、值
比如我家隔壁有三个人，并且有两个人同名，都叫张三，并且身高是175，年龄都是20岁。还有一个人叫李四，年龄18岁。那么我就可以这样表示。
张三{
身高:175cm;
年龄:20岁;
}
那么，张三，就是选中了隔壁三个中的其中同名的两个人。叫张三的这个两个人，他们有共同的特征，比如身高和年龄一样。那么这些特征我们称为叫声明。身高和年龄表示属性，175cm和20岁表示值。那么我们就能将这个人表示出来了。对比上述的例子，我们来看css的话，就变得比较易懂
注意：
为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：
p{
font-size：12px;
color:red;
}
4.css注释
在CSS 也有注释语句，作用与HTML中的相同，大家可以翻看 HTML 的注释，
CSS中用/*注释语句*/或者用//来表明(HTML 中使用<!--注释语句-->)。就像下面代码：
/*设置段落默认样式*/
p {
font-size：12px;
color: red;
}
CSS基础
1.css引入的三种方式
css的样式可以写在哪些地方呢？从css样式代码插入的形式来看可以分为以下3种：
- 内联式
- 嵌入式
- 外部式
（1）内嵌式
css样式表把css代码直接写在现有的HTML标签中，如下代码：
<p style='color:red;'>文字颜色为红色</p>
把对应的style属性，写在p标签的开始标签中。css样式代码要写在style=“”双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码
<p style='color:red;font-size:12px;'>文字颜色为红色</p>
（2）嵌入式
现在有个新任务，把下面的文本中，你好、多彩多姿的世界 这两个短语都修改为18px。如果用上节课我们学习的内嵌式的css样式的方法进行设置将是很头疼的事情（为每一个<span>标签加入style="font-size:18px;"语句，试想一下，如果有多个span呢？）。那么嵌入式css样式的编写就让我们很快的解决了这个问题。那么这节课讲解嵌入式css
嵌入式css样式，就是可以把css样式代码写在<style type='text/css'></style>标签之间。
统一设置span标签的样式：
<style type='text/css'>
span{
font-size:18px;
}
</style>
嵌入式的css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。
（3）外部式
如果我们做一个类似淘宝那样的商城网站，那么随着项目需求的增多，我们的css代码量也会更庞大，越发到了后期，我们上述的内联式和嵌入式css样式的方式肯定是不行的，那我们应该怎么办? 这个时候，我们可以使用将我们的css代码编写到另一个单独的文件中，以为了后期方便维护我们的代码。那么这就是外部式css样式。
外部式css样式(也可称为外链式)就是把css代码写一个单独的外部文件中，这个css样式文件以".css"为扩展名，在<head>内（不是在style标签内）使用<link>标签将css样式文件链接到HTML文件内，如下代码：
<link rel="stylesheet" href="index.css" type="text/css">
-
css样式文件名称以有意义的英文字母命名，如main.css、index.css、base.css等。
-
rel=“stylesheet”
- rel:relationship的缩写，rel属性用于定义链接的文件和HTML文档之间的关系
- stylesheet：文档的外部样式表
-
href：Hypertext Reference的缩写。意思是指定超链接(之前学习a标签的时候)目标的URL。是css代码的一种。href属性的值为样式表文件的地址。
-
<link>标签位置一般写在<head>标签之内
2.三种方法的优先级
我们介绍完css的三种引入方式，那么可能会有疑问，如果对于同一个元素我们同时用了三种方法设置css样式，那么哪种方法真正有效呢？这就是我们下面介绍的三种方式的优先级
我们做个测试：
- 使用内联css设置 ”皮卡丘“ 文字为红色。
- 然后使用嵌入式css设置文字为绿色
- 最后使用外部式设置文字为蓝色(index.css文件中设置)
最终发现 ”皮卡丘“ 这个文本被设置为了红色。
这就是我们所说的优先级，因为这三种引入方式是优先级的，谁的优先级高浏览器就会显示谁的样式属性
优先级的高低：内联式>嵌入式>外部式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。
代码如下：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!-- 嵌入式css样式的位置一定在外部式的后面 -->
<link rel="stylesheet" href="index.css">
<style type="text/css">
p{
color:green;
}
</style>
</head>
<body>
<p style='color:red;'>
皮卡丘
</p>
</body>
</html>
总结：”就近原则“（离被设置元素越近优先级别越高）
什么是就近原则？
比如吃饭，前面三碗一样的饭排成一列，你肯定是吃最近的一碗，这就相当于你受那碗饭的控制
CSS选择器
1.什么是选择器
每一条css样式声明由两部分组成，如下：
选择器{
样式;
}
在css中{}之前的部分就是 “选择器” , “选择器” 指明了{}中的 ”样式“ 的作用对象，也就是说该”样式“作用与网页中的哪些元素。
（1）基础选择器
① 标签选择器
标签选择器顾名思义就是html代码中的标签。我们之前学习的html、body、h系列的标签、p、div、img等等我们都可以使用标签选择器来设置对应的css样式属性。
它可以选中页面中所有的元素，而不是某一个元素内容，所以选中的是页面中共有的属性
举个栗子：
为页面中所有的段落设置字号为12px,字体颜色为红色，字体粗细为更粗。
代码如下：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style type='text/css'>
p{
color:red;
font-size:12px;
font-weight:bold;
}
</style>
</head>
<body>
<h3>《最好的我们》</h3>
<p>
当时的他是最好的他，而很久以后的我，才是最好的我，最好的我们之间隔了一整个青春，怎么跨也跨不过去的青春
</p>
<img src="index01.jpeg" alt="">
<p>
他用生命换来你的自由，不是让你偷生，而是让你重生！
</p>
<img src="index02.jpeg" alt="">
</body>
</html>
上面的<h3></h3> <p></p> 等都属于标签元素
② ID选择器
ID好比是每个人的身份证号一样，每个人都有身份证，并且身份证号是不一样的。在网页中所有的标签都可以设置id，并且id不能重复。
语法：
#ID选择器名称{
css样式代码;
}
注意：
1、以#开头
2、其中ID选择器名称可以任意起名(最好不要起中文)
3、ID的名称必须是唯一的
ID选择器选中的是页面中元素特有的属性。
比如标签选择器中的 当时的他是最好的他，而很久以后的我，才是最好的我，最好的我们之间隔了一整个青春，怎么跨也跨不过去的青春 这段文本来设置字体颜色为绿色，并且字体大小为14px。并且设置他用生命换来你的自由，不是让你偷生，而是让你重生！文本的字体大小也为14px。那么仅仅靠标签选择器是完成不了的，我们可以这样做。
使用步骤如下：
1、使用合适(<span></span>)的标签把要修饰的内容标记出来，如下：
<span>最好的我</span>
<span>让你重生</span>
2、使用 id='id选择器名称'为每个标签设置不同的id。如下
<p>
当时的他是最好的他，而很久以后的我，才是<span id='span1'>最好的我</span>，最好的我们之间隔了一整个青春，怎么跨也跨不过去的青春
他用生命换来你的自由，不是让你偷生，<span id='span2'>而是让你重生！</span>
</p>
有些人可能会想，难道我不能给上面的两段话添加完span标签之后，直接设置要求的样式么？动手之后大家会发现，给文本全部设置为14px,并且设置了绿色，那么而是让你重生！也会变为绿色，这是不能满足需求的。所以我们可以给每个span设置不同的id，来分别设置不同的样式
3、设置ID选择器css样式，如下：
#span1{
color:red;
font-size:14px;
}
#span2{
font-size:14px;
}
效果展示：
大家会发现前面字体大小和颜色都发生了改变，后面只有字体大小变化了
③ 类选择器
类选择器跟id有点相似，任何的标签元素都可以添加类(class)，但是不同的是类是可以重复，有“归类”的概念，并且同一个标签中可以携带多个类，用空格隔开。
比如狗、猫、刺猬属于动物类，黑白打印机和彩色打印机属于打印机类。同样情况下，比如网页中的某几个标签，像p、li、a标签同属于active类，那么我们就可以这边表示<p class='active'></p>，语法如下。
.类选择器名称{css样式代码;}
注意：
1、英文圆点开头
2、其中类选择器名称可以任意起名(最好不要起中文)
既然类可以重复添加，并且同一个标签可以添加多个类，那么我们在使用类选择器的使用一定要有公共类的概念。
举个例子：
比如有三个同样的文本内容
<p>张三爱犯罪</p>
<p>张三爱犯罪</p>
<p>张三爱犯罪</p>
现在有个需求，要求第一个张三爱犯罪文本颜色是绿色并且字体大小是20px,第二个张三爱犯罪的文本颜色也是绿并且文本粗细更粗，第三个张三爱犯罪文本颜色是默认黑色且文本粗细更粗并且字体大小也为20px。
如果用我们的id选择器来书写的话，我们看一下代码。代码如下：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#p1{
color:green;
font-size:20px;
}
#p2{
color:green;
font-weight:bold;
}
#p3{
font-weight:bold;
font-size:20px;
}
</style>
</head>
<body>
<p id='p1'>张三爱犯罪</p>
<p id='p2'>张三爱犯罪</p>
<p id='p3'>张三爱犯罪</p>
</body>
</html>
通过上面的例子，我们会通过需求发现，p1和p2有公共属性字体颜色为绿色，p1和p3有公共属性字体大小为20px，p2和p3有公共属性字体粗细为更粗。那么我们可以给每个p标签设置相应的类，代码如下：
<p class="lv big">张三爱犯罪</p>
<p class="lv bold">张三爱犯罪</p>
<p class="big bold">张三爱犯罪</p>
其中lv代表绿色，big代表字体大小20px,bold代表字体更粗
css代码
<style>
.lv{
color:green;
}
.big{
font-size:20px
}
.bold{
font-weight:bold;
}
</style>
那么，会发现明显更有效的使用类，能有效的减少一些冗余性的代码。
（2）类和ID选择器的区别
类选择器和ID选择器，我们会发现他们之间有很多的相似处，是否两者可以通用使用呢？那么，我们先来总结他们的相同点和不同点：
相同点：可以应用于任何元素
不同点：
- ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅仅一次。而类选择器可以使用多次。
正确的编写：
<p>年后，一股抖音风火爆了社媒，抖音上的博主带火了<span class='pq'>小猪佩奇</span>。他们的标志是"<span class='pq'>手带小猪佩奇手表，身披小猪佩奇纹身</span>"，于是就诞生了"小猪佩奇身上纹，掌声送给社会人"。</p>
错误的编写：
<p>年后，一股抖音风火爆了社媒，抖音上的博主带火了<span id='pq'>小猪佩奇</span>。他们的标志是"<span id='pq'>手带小猪佩奇手表，身披小猪佩奇纹身</span>"，于是就诞生了"小猪佩奇身上纹，掌声送给社会人"。</p>
- 可以使用类选择器为一个元素同时设置多个样式。我们可以为一个元素同时设置多个样式，但值可以用类选择器的方法实现，ID选择器是不可以添加多个ID名字的。
正确的代码：
.pq{
color:red;
}
.bigSize{
font-size:20px
}
<p>年后，一股抖音风火爆了社媒，抖音上的博主带火了<span class='pq bigSize'>小猪佩奇</span>。他们的标志是"<span class='pq'>手带小猪佩奇手表，身披小猪佩奇纹身</span>"，于是就诞生了"小猪佩奇身上纹，掌声送给社会人"。</p>
错误的代码：
#pq{
color:red;
}
#bigSize{
font-size:20px
}
<p>年后，一股抖音风火爆了社媒，抖音上的博主带火了<span id='pq bigSize'>小猪佩奇</span>。他们的标志是"<span class='pq'>手带小猪佩奇手表，身披小猪佩奇纹身</span>"，于是就诞生了"小猪佩奇身上纹，掌声送给社会人"。</p>
（3）高级选择器
① 后代选择器
所谓后代，就是父亲的所有后代(包括儿子、孙子、重孙子等)。
语法：
div p{
css代码样式;
}
元素标签之间使用空格表示后代选择器，上面表示 div是父元素，而p是div的后代元素。
以前说div标签的时候，说到div是一个容器，它可以装任何内容，这样我们能联想到我们的html结构应该是这样的。
<div>
<p>MJJ</p>
</div>
刚刚咱们又学习完了基本的选择器，我们也可以给div命名，比如<div class="container"></div>，那么css的编写如下代码：
.container p{
color:red;
}
②子代选择器
子代，仅仅表示父亲的亲儿子，只有亲儿子。使用>表示子代选择器。
语法：
div>p{css代码样式;}
对比一下后代选择器和子代选择器分别在网页中的作用。
举个栗子：
有一个三级菜单，分别对二级菜单的列表的内容文本设置为绿色。
-
想到二级菜单，我们瞬间会想到使用我们的列表标签，那么开始搭建我们的html结构
<div class="menu"> <ul class="food"> <li> 水果 <ul> <li>香蕉 <ul> <li>仙人蕉</li> <li>西贡蕉</li> <li>畦头大蕉</li> </ul> </li> <li>苹果 <ul> <li>红蛇果</li> <li>烟台苹果</li> </ul> </li> </ul> </li> <li> 蔬菜 <ul> <li>白菜 <ul> <li>北京青白</li> <li>山东胶州大白菜</li> <li>东北大矮白菜</li> </ul> </li> <li>黄瓜 <ul> <li>春花瓜</li> <li>架黄瓜</li> <li>北京刺瓜</li> </ul> </li> </ul> </li> </ul> </div> -
如果使用后代选择器，为了省事，直接
ul li{color:green;}那么，我们会发现所有的列表都变成了绿色，不满足需求，因为ul的后代元素li,既选中了一级菜单的列表，又选中了二级菜单的列表,也选中了三级菜单。 -
如果我们使用子代选择器，我们可以这里编写css代码，css代码如下
.food>li>ul>li{ color:red; }会发现，三级菜单也变成了绿色，这个是由于css的属性继承性导致的，后面会介绍。
③通用选择器
通用选择器是功能最强大的选择器，它使用一个*号来表示，它的作用是匹配html中所有标签元素。使用它，我们可以对网页进行重置样式，以按照产品需求来开发对应的网页。
对页面中所有的文本设置为红色。
*{color:red;}
④组合选择器
当你想在html中为多个标签元素设置同一个样式时，我们可能会想到添加相同的类，但是如果网页中的这样的标签非常多呢？是不是添加相同的类名，又成了我们累加的工作。不易于效率开发。那么我们可以使用组合选择器来选择，语法如下：
比如对网页中的h1，span,p标签的字体设置为color:gray;font-size:14px;
h1,span,p{
color:red;
font-size:14px;
}
对比一下：
标签选择器
h1{
color:red;
font-size:14px;
}
span{
color:red;
font-size:14px;
}
p{
color:red;
font-size:14px;
}
类选择器
<h1 class='active'>张三</h1>
<span class='active'>张三</span>
<p class='active'>张三</p>
.active{
color:red;
font-size:14px;
}
⑤伪类选择器
更有趣的是伪类选择器，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色。
a:hover{
color:red;
}
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器的使用</title>
<style type="text/css">
a:hover{
color:red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
效果展示：
另外a标签不仅仅是应用在hover，鼠标悬浮上，它遵循”爱恨准则“，所谓爱恨就是”LoVe HAte“
那么分别是，代码如下：
/*没有被访问过a标签的样式*/
a:link {
color: green;
}
/*访问过后a标签的样式*/
a:visited {
color: yellow;
}
/*鼠标悬浮时a标签的样式*/
a:hover {
color: red;
}
/*鼠标摁住的时候a标签的样式*/
a:active {
color: blue;
}
注意：在页面中使用a的时候，一定按照顺序Link->visited->hover>active。
对于hover来说，不仅仅可以应用在a上，也可以应用在其他标签，比如div,p,li等等
CSS的继承性、特殊性、层叠性
1.继承性
在css中某些样式是具有继承性的，那么什么是继承呢？官方解释，继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。
如果你父亲是双眼皮，你母亲是单眼皮，那么你是双眼皮，那么你就是继承了父亲的双眼皮。
拿到我们实际的代码中应用，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承性</title>
<style type="text/css">
div{
color: red;
}
</style>
</head>
<body>
<div>
我是你们<span>罗</span>老师,这里是<span>张三</span>犯罪教科书！
</div>
</body>
</html>
那么该颜色不仅仅应用在了div标签，还应用与div标签中的所有子元素(包括div中的文本和span包含的文本)文本。
注意：某些属性是可以继承下来的，比如常见的color、font系列的、text-*系列的等等。
但有些属性是不可以继承下来的，比如border:1px solid green;
给div设置border:1px solid green;之后发现，div有条实心边框线，但是子元素span包含的文本根本就没起到作用。
网站应用：比如我们在去设计网站的时候，网站统一的字体颜色为gray,字体大小为14px。那么我们可以很好的利用css的继承性来实现此效果。
代码如下：
body{
color:gray;
font-size:14px;
}
2.层叠性
-
CSS全称 Cascading StyleSheet (层叠式样式表), 其中的层叠就是指层叠性
-
什么是层叠性?
-
作用: 层叠性就是CSS处理冲突的一种能力
示例代码
<style>
p{
color: red;
}
.para{
color: blue;
}
</style>
<p id="identity" class="para">我是段落</p>
<!-- 最终显示蓝色, 因为红色被覆盖掉了 -->
注意点:
层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性
3.优先级
-
什么是优先级?
-
作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
-
如果是间接选中, 那么就是谁离目标标签比较近就听谁的
-
间接选中就是指继承
<style>
li{
color: blue;
}
ul{
color: red;
}
</style>
<ul>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</ul>
<!-- 最终显示蓝色 -->
- 相同选择器(直接选中)
- 如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
<style>
p{
color: blue;
}
p{
color: red;
}
</style>
<ul>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</ul>
<!-- 最终显示红色 -->
- 不同选择器(直接选中)
- 如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
- id > 类 > 标签 > 通配符 > 继承 > 浏览器默认
<style>
#identity{
color: purple;
}
.para{
color: pink;
}
p{
color: green;
}
*{
color: blue;
}
li{
color: red;
}
</style>
<ul>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</ul>
<!-- 最终显示紫色 -->
- 注意点:
- 通配符选择器也是直接选中
4.特殊性
上面我们介绍了那么多的选择器，那么大家是否有疑问呢？比如，如果我对同一个元素来设置了不同的css样式代码之后，那么元素会启用哪个css样式呢？接下来用案例来解释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
color:red;
}
#wrap{
color:green;
}
.box{
color:yellow;
}
</style>
</head>
<body>
<p class='box' id="wrap">
我是张三，猜猜我是什么颜色
</p>
</body>
</html>
效果展示：
会发现结果是绿色的，这是因为什么呢？因为浏览器是根据权值来判断使用哪种css样式的，权值高的它的优先级会越高，就会呈现那种css样式，
css权值的规则：
有一个这样的结构：
<div class='wrap1' id='box1'>
<div class="wrap2" id="box2">
<p class='active'>MJJ</p>
</div>
</div>
举几个例子看看他们的权值：
p{color:gray;}/*权值为1*/
div div p{color:yellow;}/*权值为1+1+1=3*/
.active{color:red;}/*权值10*/
div .active{color:black;}/*权值为11*/
div div .active{color:blue;}/*权值为12*/
.wrap #box2 .active{color:purple;}/*权值为120*/
#box1 #box2 .active{color:green;}/*权值为210*/
由此可以看出，其实对于权值的计算来说，首先它是不进位的，对于使用的选择器我们无非就是在数数，数选择器的数量(按照顺序来，先是id再是class，再是元素)，比如：
/*权值为 1 1 1*/
#box1 .wrap2 div{
color:red;
}
注意：继承来的属性也有权值，不过它的权值非常低，有的文档提出它只有0.1,所以可以理解为继承的权值最低。
5.!important
我们在做网页代码时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？比如我们知道内联样式的权值是1000，比较大，那么我们可以使用!important来解决。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>!important的使用</title>
<style type="text/css">
div{
color:green !important;
}
</style>
</head>
<body>
<div id="box" style="color:red;">
<span>张三</span>
</div>
</body>
</html>
注意：!important要写在分号的前面
效果发现文本变为了绿色。但是使用!important应该尽量避免，因为这严重破坏了样式表中固有的权值比较规则，使得在调试bug变得更加困难。当两条相互冲突的带有!important规则作用与同一个标签，那么拥有最大优先级的将会被采用。
什么情况下可以使用!important?
-
第一种
- 你的网站上有一个设计了全站样式的css文件
- 同时你或者你的小伙伴写了一些很差的内联样式
-
第二种
#box p { color: blue; } p.awesome { color: red; }怎样才能使得文本的颜色变为红色？这种情况下，如果不使用!important.第一条规则永远大于第二条的规则。
CSS常用格式化排版
1.字体属性
字体
在日常工作中，我们会用到word来编写内容，比如可以对我们需要设置的内容设置字体、字号、颜色等设置。如图所示。
那么我们在网页中使用css样式时，同样也能做相关的设置。
看个例子，为网页中的文字设置字体为微软雅黑。
body{font-family:'微软雅黑'}
这里要注意不要设置不常用的字体，比如你给我来个’圆体-简’,因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。也就是说，用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。
现在一般网页中喜欢设置"微软雅黑"，如下代码：
body{font-family:"Microsoft Yahei"}
因为这种字体既美观又可以在客户端完全的显示出来(用户本地一般都是默认安装的)
备选字体
备选字体是为了防止用户电脑上没有”微软雅黑“这个字体。
语法：
body{font-family:'Microsoft Yahei','宋体','黑体'}
备选字体可以有无数个，那么浏览器在去解析这个代码的时候，是从左往右解析的，如果没有微软雅黑，再去找宋体，最后黑体。
字体大小
可以为网页中的文本设置字体大小，那么一般浏览器的字体大小默认为为16px。
最常用的像素单位：px、em、rem，这里咱们先介绍一种单位，px。
px:像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。看下图。
比如之前我们小时候玩的超级玛丽，这些动图的尺寸就是用像素单位来表示的。
字体颜色
颜色分为三原色：红、绿、蓝，如图所示，三原色进行混合能呈现出不同的颜色
比如红色+绿色=黄色。
颜色表示方法在css中有三种方式：
- 英文单词表示法，比如red、green、blue
- rgb表示法
- 十六进制表示法
对于rgb表示法和十六进制表示法，我们可以通过编辑器中辅助工具（颜色取色器）来取到对应的颜色。
字体样式
网站中的字体分为了普通字体和斜体字体，我们可以使用font-style属性来设置对应的字体样式。
| 属性值 | 描述 |
|---|---|
| normal | 默认的，文本设置为普通字体 |
| italic | 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。常用 |
| oblique | 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。 |
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<style type="text/css">
p{
font-style: italic;
}
i{
font-style: normal;
}
</style>
</head>
<body>
<p>普通字体样式</p>
<i>斜体样式</i>
</body>
</html>
效果展示：
因为i标签本身具有倾斜的含义，所以可以对已有的倾斜的字体来按照需求进行相应的设置。
字体粗细
网站中我们可以通过font-weight来设置文字的粗体大小。这里有很多值可选，那么使用最多的就是normal和bold分别代表普通和加粗和字体粗细。
| 属性值 | 描述 |
|---|---|
| normal | 普通的字体粗细，默认 |
| bold | 加粗的字体粗细 |
| lighter | 比普通字体更细的字体 |
| bolder | 比bold更粗的字体 |
| 100~900 | 400表示normal |
2.文本属性
文本修饰
在网页中有些时候我们需要对文本设置下划线，或者删除线。如图所示：
如果想实现下划线或者删除线，使用text-decoration属性。
| 属性值 | 描述 |
|---|---|
| none | 无文本的修饰 |
| underline | 文本下划线 |
| overline | 文本上划线 |
| line-through | 穿过文本的线， |
文本缩进
比如我们通常写文章的时候，首字母要空两格。那么我们需要使用text-indent属性来实现。它的属性值是像素(px、em、rem)单位。
代码如下：
<p>在人类漫长的历史长河中，推动社会向前的从不会是那些甘于平凡的多数人，相反，他们往往都是一群特立独行桀骜不驯的疯子！这一群疯子中有位传奇的人物，他颠覆性地将人文与科技完美融合，极大地改变了人类计算机领域，改变了人们的生活方式，其一手创建的计算机公司到如今仍是手机行业的传奇，没错！他就是乔布斯！</p>
效果显示：
我们希望整段文章描述，首行空两格，那么首先要知道字体大小是多少。比如字体大小默认是16px，那么我需要给它设置text-indent:32px;才能实现效果。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本缩进</title>
<style type="text/css">
p{
text-indent: 32px;
}
</style>
</head>
<body>
<p>在人类漫长的历史长河中，推动社会向前的从不会是那些甘于平凡的多数人，相反，他们往往都是一群特立独行桀骜不驯的疯子！这一群疯子中有位传奇的人物，他颠覆性地将人文与科技完美融合，极大地改变了人类计算机领域，改变了人们的生活方式，其一手创建的计算机公司到如今仍是手机行业的传奇，没错！他就是乔布斯！</p>
</body>
</html>
那么问题来了，如果我更改了p标签的字体大小呢？比如，
p{
text-indent: 32px;
font-size:20px;
}
必须再重新的计算text-indent的值来合适。那么这样的话，使得让我们的开发效率降低，后期不宜维护。如何解决这一问题呢？
我们可以设置另一个单位em，它是一个相对单位，相对于p标签的字体大小来进行设置。
如果p标签的字体是16px,那么1em=16px。如果我后期设置了字体大小为20px,那么2em就自动变为40px。
正确设置方式：
p{
text-indent:2em;
font-size:30px;
}
行间距
行间距，也叫行高，表示行与行之间的距离。
上个案例的呈现效果会发现，行与行之间的距离有点近，那么为了使文本显示更加美观，我们可以使用line-height属性来进行设置行间距，它的单位为像素。举个例子，我们在word文档中对段落设置。如图所示
在css中设置代码如下：
p{
font-size: 20px;
text-indent: 2em;
line-height:2em;
}
line-height:2em;表示2倍行间距。
效果展示：
中文字间距、字母间距
我们在使用word文档时，通常会对文字之间的间隔进行设置，如图所示。
如果想在网页排版中设置中文字间隔或字母间隔可以使用letter-spacing或word-spacing来实现。
代码如下：
p{
/*文字之间的距离*/
letter-spacing:5px;
/*调整英文单词之间的距离*/
word-spacing: 10px;
}
效果显示：
文本对齐
在word文档中，我们通常都知道对文本甚至图片可以设置对齐方式，比如让文本或者图片居中显示。那么在网页排版中我们可以使用text-align属性来进行设置。
| 属性值 | 描述 |
|---|---|
| left | 文本左对齐，默认 |
| right | 文本右对齐 |
| center | 中心对齐 |
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本对齐</title>
<style type="text/css">
div{
/*给父级标签设置一个边框，表示这是一行，让p段落标签中的内容实现文本对齐的方式，这是文本中心对齐*/
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>这是了不起的乔布斯</p>
</div>
</body>
</html>
效果展示：
注：
以上是学习中的总结，如有不足之处，望指出。
547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
