带你一起学习CSS样式

CSS介绍

CSS全称为： Cascading Style Sheets ，意为层叠样式表 ，与HTML相辅相成，它是网页的装饰者，用来修饰各标签排版（大小、边距、背景、位置等）、改变字体的样式（字体大小、字体颜色、对齐方式等）、设置图片（宽高、位置等）等。

CSS引入方式

引入方式：也就是说我们的css写在什么地方。

行内样式

行内样式就是将我们的css写在标签内部

<标签名 style="样式声明">

CSS样式声明: 由CSS属性和值组成

• CSS属性：你希望给HTML标签设置的样式名字
• 值：使用值来控制某个属性显示的效果
  • 设置文本的颜色：color:red;
  • 设置字体的大小：font-size：字体的像素;

style="css属性名:值;css属性名:值;"

内嵌样式

借助于style标签，我们可以将css样式和html进行分离，不过需要借助css的选择器到html中进行选择来定义样式。

<style>
   	选择器{
   	 	css属性名:值;
        css属性名:值;
   	}
</style>

选择器：在HTML页面当中找到元素

外链样式表

创建一个后缀为.css的外部样式表文件夹，然后在html文件中用标签引入外部样式表；相当于将css样式存在一个单独的文件里面，当我们需要的时候就可以进行引入。

<link rel="stylesheet" href="外部样式表的地址">

三种方式的总结

样式表	优点	缺点	使用情况	使用场景
行内样式表	书写方便	没有实现结构与样式分离，不便于维护，不可以重复利用	极少	某个标签需要单独的样式设置时使用
内嵌样式	部分结构与样式分离，较便于维护	没有彻底实现结构与样式分离，不可以重复利用	一般	css代码量不多，且和当前页面联系紧密不需要复用时使用
外链样式表	完全实现结构与样式分离，可重复利用	如果代码量较少情况下，引入法更麻烦	最多，推荐	css代码量大时，或者需要重复利用时使用

CSS选择器

标签选择器 ***

一个完整的html是由各式各样的标签组成，而标签选择器就是选定指定的标签进行添加样式修改 。
如下所示：

/* 找到页面当中所有的p标签 */
p {
    color: blue;
}

类选择器 *****

类选择器就是根据标签的class定义的名字，来找到具体的html标签，然后对整个class包裹的内容进行添加样式。
类选择器的定义形式是：用一个英文的 . 加上一个class属性的值也就是类名。
如下所示：

.mouse {
	color : black;
	}

id选择器

id选择器就是根据标签的id定义的名字，来找到具体的html标签，然后对整个class包裹的内容进行添加样式。
如下所示：

#nav {
    color: red;
}

通配符选择器 **

用*号来表示，选定所有的内容，html中的所有元素，在开发中，我们通常使用通用选择器来清除 HTML元素中默认的内外边距

 * {    
 	 margin: 0;   
	 padding: 0;
	 }

交集选择器 ***

• 结构：选择器1选择器2{css属性名:属性值;}

• 找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

• 交集选择器中的选择器之间是紧挨着的，没有东西分隔

  p.box {
      color: red;
  }
  

分组选择器

• 结构：选择器1 ， 选择器2 {css属性名:属性值;}

• 同时选择多组标签，设置相同的样式

• 并集选择器中的每组选择器之间通过 , 分隔

• 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

  <style>
      p, 
      div, 
      span, 
      h1 {
          color: red;
      }
  </style>
  

  默认样式的清除：浏览器会给我们的元素默认添加一些样式，默认样式会影响到我们页面的布局

元素关系选择器

子代选择器 *****

• 结构：选择器1 > 选择器2 {css属性名:属性值;}

• 在选择器1所找到标签的子代（子代只包括：儿子）中，找到满足选择器2的标签，设置样式，

  div>a {
      color: red;
  }
  

后代选择器 *****

• 结构：选择器1 选择器2 {css属性名:属性值;}

• 在选择器1所找到标签的后代（后代包括：儿子、孙子、重孙子……）中，找到满足选择器2的标签，设置样式

  div a {
      color: red;
  }
  

相邻兄弟选择器

• 相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素，这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到加号+，加号两边为相邻的两个元素，选择器会匹配加号后面的元素

  div + p {
      color: red;
  }
  

通用兄弟选择器

• 选中后面所有的兄弟，除了自己

  p ~ p {
      color: pink;
  }
  

CSS特性

继承性

某些属性我们只需要给父元素加子元素也会生效。有这样的特点的存在好处就是可以减少代码。给父元素加子元素就有了。如果元素有默认样式，此时继承性依然存在，但是优先显示默认样式

层叠性

所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖

• 给同一个标签设置不同的样式： 会共同作用在标签上

• 给同一个标签设置相同的样式：最终写在最后的样式会生效

• 只有当选择器优先级相同时，才能通过层叠性判断结果

优先级

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式

权重叠加计算

• 如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
• 第一级：行内样式的个数
• 第二级：id选择器的个数
• 第三级别：类选择器的个数
• 第四级别：标签选择器的个数
• 比较规则
  • 先比较第一级数字，如果比较出来了，之后的统统不看
  • 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
  • 如果最终所有数字都相同，表示优先级相同，则比较层叠性