css 学习笔记 一

Posted 2020-06-25 睿夏之霞

 css学习笔记1

1.选择特定元素的选择符：

• • 上下文选择符

     标签1 标签2 {声明}
     其中标签2是要选择的目标，而只有在标签1是其祖先元素（不一定是父元素）的情况下才会被选中。
     css代码：

     

    body代码：

     

理解：section标签 article标签就属于上下文的关系，即article为section的后代，只有应用了section的样式，才能应用article的样式。
注意：继承关系中的空格问题，有空格的表示祖先与后代的关系，css写法，body的代码为，说明页面样式表文件按照页面元素由里到外的次序 来读取的；
两者间无空格，就是这种写法，body的代码为：，说明不空格的样式表的写法是针对当前所在元素内而定的，表示两者有交集。

• • 特殊上下文选择符>

       标签1>标签2 {声明}
       标签2必须是标签1的子元素，即标签1必须是标签2的父元素。
      css代码：

      body代码:
css可以定位到ul样式，而不会定位到li，因为他们是祖先关系，不是单纯的父子关系了。

• • 紧邻同胞选择符+

      标签1+标签2 {声明}
      标签2必须紧跟在其同胞标签1的后面。
     css代码：   
     body代码：
      效果图：    
 一般在导航中会用到这种效果，可以理解为“非首位子元素选择符”。

• • 通用选择符*

       *是一个通配符，可以匹配任何元素。在css中，我们可能会经常看到这种代码*{margin：0；padding：0；}它的作用就是：浏览器对标签都有着自己的默认值，如果用*标记，意味着就会消除浏览器的默认内外边距。

• • 属性名选择符

      标签名【属性名】{声明}
      选择任何带有属性名的标签。
     css代码及效果图：
     
      选择input的type属性中的“submit”设置样式。

2.ID和类选择符：
   在html标记中为元素添加id和class属性，就可以在css选择符中使用ID和类名，可以给id和class属性值设定任何值，但是不能以数字或特殊符号开头。

3.什么时候使用类和ID？
   利用ID的唯一性，可以在css中方便地定位到这个元素，以及它的子元素，有一定的规 则性为会给页面中每个顶级区域都添加一个ID，从而得到非常明确的上下文，以便编写 css时只能选择嵌套在相应区域内的标签。
   类的目的为了标识一组具有相同特征的元素。

4.UI伪类

• •   链接伪类：link。此时，链接就在那等着用户点击。

                         visited。用户此前点击过这个链接。
                         hover。鼠标指针正悬停在链接上。
                         active。链接正在被点击（鼠标在元素上按下，还没有释放）
       鼠标悬停改变颜色：

• • :focus伪类 （e:focus，e表示任何元素）

        表单的文本字段在用户点击它时会获得焦点，然后用户才能在其中输入字符。比如：
       会在光标位于input字段时，为该字段添加蓝色边框。

5.结构化伪类
e:first-child与e:last-child, :first-child代表同一组同胞元素中的第一个元素，last-child代表同一组同胞的最后一个。

   
   最后一个列表项有边框不显示
  ：nth-child e:nth-child(n) ：n表示一个数值（也可使用odd或even 奇偶）
  最常用于提高表格的可读性，比如对表格的所有行交替应用不同的颜色。

6.伪元素

• •  ::first-letter,::last-letter;

     

     实现首字符下沉效果：（如果不用伪元素创建这个首字符放大效果，必须手工给字母加上<span>标签，然后在位该标签应用样式）而伪元素实际上是替我们添加了无形的标签。

• •  ::first-line

        
   用::first-line伪元素把第一行变成了小型大写字母，且为元素的长度随浏览器窗口大小的变化而改变。

• • ::before与::after

      

    可用于在特定元素前面或者后面添加特殊内容。（比如弹出层设定时添加三角形）
    content属性值有空格，以便输出结果中的适当距离。

7.继承：css中的祖先元素会向后代传递css属性的值，许多可继承的属性跟文本有关，比如颜色，字体，字号，有许多不能被继承，这些元素主要涉及元素盒子的定位和显示方法，比如边框，外边距，内边距。

8.层叠：就是层叠样式表中的层叠，是一种样式在文本层次逐层叠加的过程，目的是让浏览器面对某个标签特定属性值得多个来源，确定最终使用那个值。

• • 浏览器层叠各个来源样式的顺序：
  • 浏览器默认样式表；
  • 用户样式表；
  • 作者链接样式表（按照他们链接到页面的先后顺序）
  • 作者嵌入样式；
  • 作者行内样式。
  • 层叠规则：

  规则一：找到应用给每个元素和属性的所有声明。
  规则二：按照顺序和权重排序。（空格！important分号用于加重声明的权重，比如： （ p{color：green !imporant;}加重将文本设置为绿色的权重。）
  规则三：按特指度排序。
  计算特指度： 记分规则 I-C-E

1. 1. 选择符中有一个ID，就在I的位置上加1；
   2. 选择符中有一个类，就在C的位置上加1；
   3. 选择符中有一个元素（标签）名，就在E的位置上加1；
   4.  得到一个三位数，进行比较。

注意;ICE并非真正的三位数，只不过大多数情况下把结果看成一个三位数没有问题，三位数最大的胜出。但是得知道0-1-12与0-2-0相比，仍然是0-2-0的特制度更高。

       

  规则四：顺序决定权重。
简单层叠要求：

     规则一：包含ID的选择符胜过包含类的选择符，包含类的选择符胜过包含标签名的选择 符。
     规则二：如果几个不同来源都为同一个标签的同一属性定义了样式，行内式胜过嵌入式，嵌入式胜过链接样式。在链接样式表中，具有相同特制度的样式，后声明的胜过先声明的。
     规则三：设定样式胜过继承样式，此时不考虑特制度（即显式设定优先）。