保安日记：前端学习第三篇之CSS选择器

前端第三篇

Emmet语法

• 快速生成HTML标签

• 快速生成CSS样式
  1．比如w200按tab 可以生成width: 200px;
  2.比如lh26按tab可以生成line-height:26px;

CSS的复合选择器

• 后代选择器
  

• 子元素选择器
  

• 并集选择器
  并集选择器是各选择器通过 英文逗号(，) 连接而成，任何形式的选择器都可以作为并集选择器的一部分。

   语法：规范要求竖着写
  

• 伪类选择器
  伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。用冒号(∶）表示，比:hover .:first-child。
  1.链接伪类选择器
  
  注意：为了确保生效需要按照LVHA的顺序声明
  因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
  
  2.focus伪类选择器
  

复合选择器总结

CSS的元素显示模式

html元素一般分为块元素（如div）和行内元素（span）

• 块元素
  

• 行内元素（内联元素）
  

• 行内块元素
  

• 元素模式的转换
  
  

元素显示模式总结

实现单行文字垂直居中

将文字的行高与盒子的高度相同

行高的上空隙和下空隙把文字挤到了中间，是如果行高小于盒子高度,文字会偏上。如果行高大于盒子高度,则文字偏下。

CSS背景

• 背景色 background-color:transparent 透明色

• 背景颜色半透明
  前三个是颜色

• 背景图 background-image:url （） （默认none）
  

• 背景平铺 background-repeat: no-repeat ;
  

• 背景位置 background-position: x y;
  
  1.参数是方位名词
  
  注：插入背景图片不好调整垂直居中使用 background-image比较简单
  2.参数是精确单位
  
  3.参数是混合单位
  

• 背景固定 background-attachment: fixed;
  

背景复合属性

无特定书写顺序，一般习惯约定顺序为：背景颜色，背景图片地址，背景平铺，背景图像滚动，背景图片位置;

背景总结