前端复习：CSS专题1

1 CSS整体感知

• css是cascading style sheet层叠样式表的简写。css的最新版本是css3，常用版本为css2.1。（css3新增了一些功能）
• 语法格式为：，写在head标签里面中。type表示“类型”，text表示“纯文本”，所以css也是纯文本的。如果想要用sublime自动生成，需要键入
• css对换行并不敏感，对空格也不敏感。但是一定要有标准的语法，便于程序员阅读。

  选择器{
  k:v;
  k:v;
  k:v;
  k:v;
  }
  选择器{
  k:v;
  k:v;
  k:v;
  k:v;
  }

  2 一些常用的属性

• 字符颜色：color:red;，color属性的值，可以是英文单词，比如说red、blue、yellow等，也可以是rgb、十六进制数。sublime中的快捷键是键入c，然后tab。
• 字号大小：font-size:40px;，font就是“字体”，size就是“尺寸”，px就是“像素”。单位必须加上，不可不加。sublime中的快捷键是键入fos，然后tab。
• 背景颜色：background-color:blue;，background就是“背景”，sublime中的快捷键是bgc，然后tab。
• 加粗：font-weight:bold;，font是“字体”，weight是“重叠”的意思，bold粗。sublime中的快捷键是键入fwb，然后tab。
• 不加粗：font-weight:normal;，normal就是”正常“的意思，sublime中的快捷键是键入fwn，然后tab。
• 斜体：font-style:italic;，italic就是“斜体”的意思，sublime中的快捷键是键入fsi，然后tab。
• 不斜体：font-style:normal;，sublime中的快捷键是fsn，然后tab。
• 下划线：text-decoration:underline;，decoration就是“装饰”的意思。sublime中的快捷键是键入tdu，然后tab。
• 没有下划线：text-decoration:none;。 sublime中的快捷键是键入tdn，然后tab。

  3 基础选择器

  3.1 标签选择器

• 就是标签的名字。

  前端与移动开发真棒呀

  1   

• 需要注意的有三点：
  1、所有的标签，都可以是选择器，比如说ul、li、label、dt、dl、input等；
  2、无论这个标签在什么位置，一定能够被选择上；
  3、选择标签为所有，而不只是一个。即标签选择器，选择的是页面中所有这种类型的标签，所以经常用于描述“共性”，无法描述某一元素的“个性”。

  3.2 id选择器

  我是段落1
  我是段落2
  我是段落3

• id 选择器的选择符为“#”号。任何的HTMl标签都可以有id属性，表示这个标签的名字。
• 这个标签的名字，可以任取，但是：1、只能有字母、数字、下划线；2、必须以字母开头；3、不能和标签同名，比如说id不能够叫做body、img、a。
• 在一个HTML页面中，不能够出现相同的id，哪怕他们不是同一个类型。比如说页面中有一个id为pp的p，一个id为pp的div，是非法的。

  3.3 类选择器

• .就是类的符号。类的英文叫做class。
• 所谓的类，就是class属性，class属性和id非常相似，任何的标签都可以携带class属性。
• class属性可以重复，比如说，页面中可能有很多标签都有teshu这个类：

  我是一个h3啊
  我是一个h3啊
  我是一个h3啊
  我是一个段落啊
  我是一个段落啊
  我是一个段落啊

• css里面用.来表示类：

      .teshu{
          color: red;
      }

• 同一个标签，可能同时属于多个类，用空格隔开：

  我是一个h3啊

• 这样，这个h3就同时属于teshu类，也同时属于zhongyao类。（初学者常见的错误，就是写成了两个class）。
• 类选择器的使用，能够决定编辑页面的人的css水平高低。比如说，设计一个这样的页面：

  段落1
  段落2
  段落3

• 也就是说，不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式；每个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

  3.4 到底是使用id还是使用class？

• 尽可能多的使用class，除非极其特殊的情况下才使用id。
• 原因是：id是js使用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一个层面，我们会认为一个id的元素，有动态效果。
• 附加说明：一个标签，可以同时被多种选择器选择，如标签选择器、类选择器。这些选择器都可以选择同一个标签，从而影响样式，这就是css的cascading“层叠式”的第一层含义。

  4 css高级选择器

  4.1 后代选择器

• 使用空格就代表后代，（需要强调的是，选择的是后代，不一定是要子代。）
• 比如说：

  
      
  
          
  
              
  段落
              
  段落
              
  段落
          
      
  

• p标签能够被下面的选择器选择上：

  .div1 p{
          color:red;
      }

• 空格也可以出现多次：

  .div1 li p{
          color:red;
      }

• 后代选择器，可以看做是一种平衡：共性、特性的平衡。当要把某个部分的所有的什么，进行样式改变时，就可以使用后代选择器。（后代选择器，描述的是祖先结构）

  4.2 交集选择器

  

  h3.special{
  color:red;
  }

• 选择的元素是同时满足两个条件：必须是h3标签，然后也必须是special标签。
• 交集选择器没有空格。
• 在选择器中有没有空格，可以表示不同的意思。

  div.red

  div .red

• 交集选择器可以连接交（一般不建议这样写）：

  h3.special.impo{
  color:red;
  }

• 交集选择器，我们一般都是以标签名开头，比如说div.special。

  4.3 并集选择器（分组选择器）

  h3,li{
  color:red;
  }

• 使用逗号表示并集。

  4.4 通配符*

• *表示所有元素：

  *{
  color:red;
  }

• 效率不高，如果页面上的标签越多，效率越低，所以页面中不能出现这个选择器。

5 一些CSS3选择器

5.1 兼容性问题介绍

• 介绍一下浏览器：
• 微软的浏览器，随着操作系统而安装。所以每个windows都有IE浏览器：

  windows xp  操作系统安装的IE6
  windows vista 操作系统安装的IE7
  windows 7   操作系统安装的IE8
  windows 8   操作系统安装的IE9
  windows10   操作系统安装的edge

• 浏览器兼容问题，要出，基本上就是出在IE6、7身上，这两个浏览器是非常低级的浏览器。
• 2018年浏览器的市场占有比率如下图：
  

  5.2 子代选择器

• IE7开始兼容，IE6不兼容。

  div>p{
  color:red;
  }

• 以上选择器能够选择：

  
      
  我是div的儿子
  

• 不能够选择：

  
      
  
          
  
              
  我是div的重孙子
          
      
  

  5.3 序浏览器

• IE8开始兼容，IE6、7不兼容。
• 选择第1个li：

• 选择最后一个li：

      ul li:last-child{
          color:blue;
      }

• 由于浏览器的更新需要过程，所以现在如果公司里还要求兼容IE6、7，那么就要求自己写类名：

  
      
  项目
      
  项目
      
  项目
  

• 用类选择器来选择第一个或者是最后一个：

      ul li.first{
          color:red;
      }
      ul li.last{
          color:blue;
      }

  5.4 下一个兄弟选择器

• IE7开始兼容，IE6不兼容。
• +表示选择下一个兄弟。

• 以上选择器选择的是h3元素后面紧挨着的第一个兄弟：

  我是一个标题
  我是一个段落
  我是一个段落
  我是一个标题
  我是一个段落
  我是一个段落
  我是一个标题
  我是一个段落
  我是一个段落
  我是一个标题

  6 CSS的继承性和层叠性

  6.1 继承性

• 有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。
• 有哪些属性能够继承的呢？
• color、text-开头的、line-开头的、font-开头的。
• 这些关于文字样式的，都能够被继承；所有关于盒子、定位的、布局的属性都不能够被继承。
• 所以，如果我们的页面的文字，都是灰色，都是14px，那么就可以利用继承性：

  body{
  color:gray;
  font-size:14px;
  }

• 继承性是从自己开始的，直到最小的元素。

  6.2 层叠性与权重

• 层叠性就是css处理冲突的能力。
• 当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖（层叠）。
• 可以这样理解权重：这个选择器对于这个元素的重要性。
• 权重的计算公式很简单，当选择器选上某个元素的时候，就会统计权重，计算的格式为：

  id数量，类的数量，标签的数量

• 如选择器直接作用到p标签上：

  #box .imp p{
  }

• 此时权重计算为：1,1,1。

  div.imp div.imp2 div.imp3 p{
  }

• 此时权重计算为：0,3.4。
• 那么如何比较权重的大小呢？将权重看做三位数比较即可，但是需要注意，权重不可以进位。（理论上255个标签可以进一位）
• 比如，权重1,0,0 > 0,100,100。
• 附加说明：如果两个选择器权重相同时如何？当选择器的权重相同时，会选择声明在后面的选择器，类似于变量赋值。

  我最帅！！

  此时颜色显示为蓝色，因为两个选择器的权重相同，蓝色位置靠后。

  6.3 !important标记

  我是一个大帅哥

• !important标签可以给一个属性提高权重，这个属性的权重就是无穷大。我们可以通过语法：k:v !important;来进行设置。
• !important需要强调3点：
  1、!important提升的是一个属性，而不是一个选择器；

      p{
          color:red !important;   → 只写了这一个!important，所以就字体颜色属性提升权重
          font-size: 100px ;      → 这条属性没有写!important，所以没有提升权重
      }
      #para1{
          color:blue;
          font-size: 50px;
      }
      .spec{
          color:green;
          font-size: 20px;
      }

  所以，综合来看，字体颜色是red（听important的）；字号是50px（听id的）;
  2、!important无法提升继承的权重，该是0还是0；

• 比如说HTML结构：

  
      
  哈哈哈哈哈哈哈哈
  

• 有CSS样式：

      div{
          color:red !important;
      }
      p{
          color:blue;
      }

• 由于div是通过继承性来影响文字颜色的，所以!important无法提升它的权重，权重依然是0，比不过p标签，因为p标签是实实在在选中了，所以字是蓝色的（以p为准）。
  3、!important不影响就近原则:
• 如果大家都是继承来的，按理说应该按照“就近原则”，那么important能否影响就近原则呢？答案是：不影响。远的，永远是远的。不能给远的写一个important，比过近的。
• 附加说明：!important做站的时候，不允许使用。因为会让css写的很乱。
• 权重计算总结：