css发展史

 

(接着上次博客的内容，现在我们进入css基础)

 

外部样式表  <link>

内部样式表  <style>

行内样式表  style  （多用于JS)

* css注释

  书写格式：/*   注释内容  */

 

* css规则

  选择器{

  属性：值；            （一条声明后面必须跟一个“  ；”）

  }

 

* css元素选择器

  书写格式：标签名{声明块}；

  所有与该标记名匹配的元素，都将应用于该标签。

 

* css类选择器

  书写格式：. 类名 {声明块}；

  类选择器是我们最常使用的选择器         

   使用原因：复用

  类选择器基于标签中的class属性进行书写的

 

* css  id 选择器

  书写格式：# id名 {声明块}；

  id选择器具有唯一性，id的值不能重复使用

  一般多用于JS中使用

 

* *{   }    通配符

  可以选择所有元素

  margin  外边距

  padding 内边距

 

* 后代选择

  用空格表示

  例：ul    li{    }

 

* 子级选择

  用>符号表示

  例：ul > li{    }

 

* 并集选择

  用“ ，”隔开

  例：h1,h2,h3{    }

 

* 属性选择器

  多用于表单元素

  书写方式用【】把属性名和属性值给括起来

  例：[ herf="#" ]{    }

 

* 伪类选择器（伪类元素）

  :nth-child( )

  从上往下数的第几个，括号里填写需要选中的数量名

  例：ul>li:nth-child( 3 ){  }

 

  :nth-last-child( )

  从下往上数的第几个，括号里填写需要选中的数量名

  例：ul>li:nth-last-child( 3 ){  }

 

  :nth-child( n )

  从0开始算，n代表的倍数，在n前面加上数子得到你需要的倍数

  例：ul>li:nth-child( 3n ){  }

 

  若括号里填odd或者even，则表示奇数或者偶数

  odd：奇数         even：偶数

 

* 用于a标签的伪类元素

  a:link{   }  未访问的样式

  a:visited{  }    访问后的样式

  a:hover{  }     当鼠标移入或者悬停时的样式

  a:active{  }      点击时的样式

  如果4个样式需要同时出现，那么书写顺序为  l,v,h,a

 

* 伪元素

  before   在什么之前

  after    在什么之后

  例：a::before {  };

  ​        a::after {  };

 

  first-letter     首字母的变化

  例：h1::first-letter{  };

 

* 伪类元素和伪元素的区别

  伪类元素由一个“ ：”隔开

  伪元素由两个“：：”隔开，但为了兼容第版本的浏览器通常用 “ ：”

 

* 声明冲突

  指属性相同，值不同，就是声明冲突

* 层叠

  ：层叠是一种机制，用于解决css 声明冲突

  层叠过程：比较优先级，比较特殊性，比较源次序

* 比较优先级

  ！important    重要声明

  若属性后跟了重要声明则表示它优先，否则就是普通声明

  例：color：red   ！important  ;

 

* 比较特殊性

  |                   | 嵌入 | id   | class | 元素 |
  | ----------------- | ---- | ---- | ----- | ---- |
  |                   | a    | b    | c     | d    |
  | style             | 1    | 0    | 0     | 0    |
  | id                | 0    | 1    | 0     | 0    |
  | calss，属性，伪类 | 0    | 0    | 1     | 0    |
  | 元素，伪元素      | 0    | 0    | 0     | 1    |
  | 通配符            | 0    | 0    | 0     | 0    |
  | ! important       | 最高 | 最高 | 最高  | 最高 |

 

* 继承

  子元素会自动拥有父元素的某些css属性，文本类型会被继承

* 常见的字符

  &nbsp:  空格

  &lt：小于符号

  &gt：大于符号

  &copy：版权符号

  &amp：并且符号