CSS快速记忆笔记（二）

知识点12：复合选择器---后代选择器、并集选择器、伪类选择器
   更准确更精确，是由两个或两个以上的基础选择器组成，也称组合选择器，
   ①后代选择器（重点）---“空格”隔开，又称包含选择器
   父级子孙级 { ……}
   ②子元素选择器---“>”
   如果孙子和儿子是同一个标签，怎么样选择，直接用父级加上>符号后跟儿子级标签，这样只会选择出儿子级标签元素，写法：父级>子级 {……}，注意后代选择器和子元素选择器的区别
   ③交集选择器---标签+属性{……}（即是 ……又是……）
   例如：p.red {……} 注意p.red中间不能有空格
   ④并集选择器（重点）---用“,”隔开，代码更简洁
   逗号的意思是 “和”，通常用于相同样式的集体申明，节约了代码
   ⑤链接伪类选择器（重点）---“:”，伪类选择器是冒号
   用于给某些元素指定特定的效果
   a:link 未访问的链接样式，可修改属性，
   a:visited 已访问过的链接样式，可修改属性，效果在访问之后返回可见
   a:hover（常用）   鼠标经过链接时的状态链接样式，只有hover能设置文字外观样式text
   a:active 当我们点击选定，不松开的时候的状态链接样式
   :link 、:visited、:active不可以设置文本的外观样式（下划线、删除线），安全起见
   ⑥实际开发中链接的写法：如果要写全四个链接选择器，则顺序不能乱，一般网页中链接需要指定修改属性，不然浏览器会有默认的属性。
知识点13：标签显示模式---（重点）
   标签三种显示模式、特点及区别、如何相互转换
   ①块级元素：h1~h6、p、div 、ul 、ol、li，div最为常见，
   块级元素独占一行;高度、宽度、外边距以及内边距都可以控制;宽度默认是容器（父级宽度）100%;div是一个容器，里面可以放行内元素或块级元素；
   段落里面尽量不要放块级元素，文本类块级p 、h、dt内不能嵌套div或者自身。
   ②行内元素：a、strong、span，span最为常见
   行内元素在一行上，一行可以显示多个；高度、宽度直接设置是无效的；行内元素宽度默认是它自身内容的宽度；是一个容器，不能嵌套块级元素，只能容纳文本或其他行内元素。
   注意:链接里面不能放链接；特殊情况a里面可以放块级元素，但是给a转换一下模式最为安全。
   ③行内块元素（inline-block）：img、input、td等
   和相邻行内元素（行内块）在一行上，但是之间会有空白间隙（代码换行造成的），一行可以显示多个；默认宽度是其本身内容的宽度；高、宽等都可以控制。
知识点14：标签显示模式转换---display
   块转行内：display：inline;
   块转行内块：display：inline-block；
   行内转块级：display：block；
知识点15：行高---line-height
   行高和高度的三种关系
   行高等于高度：文字是垂直居中；
   行高大于高度：文字是垂直偏下；
   行高小于高度：文字是垂直偏上；
   文字水平居中：text-align：center；
知识点16：背景颜色和样式---background
   ①background-color：背景颜色；
   ②background-image：url（图片地址路径）；建议括号内不加引号；
   ③背景平铺:background-repeat：repeat；不平铺：no-repeat；X水平方向平铺：repeat-x；Y垂直方向平铺：repeat-y；
   ④背景位置：background-position：length||length（有浮点数和单位标识符组成的长度值）；background-position：position||position；（top，center、left、right、bottom方位名词）
   背景位置的精确单位：坐标系：X方向向右为正，Y方向向下为正；   例如：background-position：100px 100px; 图片在坐标 x向右为100px，y向下为100px的位置；当然也可以混用，10px center；这样也行。
   ⑤背景固定：背景附着就是解释背景是滚动的还是固定的，background-attachment：fixed；设置背景图片固定，scroll：背景图像随对象内容滚动；
   ⑥背景简写：background：背景颜色背景图片地址背景平铺背景滚动背景位置；
   ⑦背景透明：background：rgba（0,0,0,0.5）背景图片地址背景平铺背景滚动背景位置；透明度a取值0~1。

CSS快速记忆笔记（二）

猜你喜欢