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:并且符号
posted @ 2019-12-09 14:58  芮祁&  阅读(...)  评论(...编辑  收藏