19号CSS学习

一、CSS的复合选择器

• 更高效的选择目标元素。
• 后代选择器、子选择器、并集选择器、伪类选择器等。

1.后代选择器

• 可以选择父元素里的子元素。
• 又称包含选择器。
• 必须是空格，必须是后代，ul li {color: red;}。
• 儿子、孙子都可以，只要是后代就行。ol li a {color: red;}。
• 可以是任意基础选择器。

2.子元素选择器

• 选择亲儿子元素。
• >分隔div>p {color: red;}。

3.并集选择器

• 可以选择多组标签，同时为他们定义相同的样式。
• .隔开。
• 任何选择器都可以作为并集选择器的一部分。
• 喜欢竖着写。

4.伪类选择器

• 用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或者选择第1个，第n个元素。
• 用冒号表示，如：hover。
• 有链接伪类、结构伪类等。
• 链接伪类选择器：

1. a:link             /*选择所有未被访问的链接*/
   a:visited          /*选择所有已被访问的链接*/
   a:hover            /*选择鼠标指针位于其上的链接*/
   a:active           /*选择活动链接（鼠标按下未弹起的链接）*/ 　

2. 注意事项：必须按顺序LVHA；必须给链接单独指定样式。

   /*   一般开发中的写法    */
   a {
     color: gray;
   }
   
   a:hover {
     color: red;
   }　　

5.:focus伪类选择器

• 用于获得焦点得表单元素。

二、CSS的元素显示模式

• 了解不同类型的标签更好地布局网页。
• 就是以什么方式进行显示。
• 分为块元素和行内元素。

1.块元素

• 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中div是最典型的块元素。
• 自己独占一行。
• 可设置宽高，默认宽为父级的。
• 里面可以方行内或者块级元素（文字类的元素内不能放块级元素）。

2.行内元素

• 常见的<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，典型的是span。
• 一行可以多个。
• 高宽设置无效。
• 只能容纳文本或其他行内元素。
• 链接里面不能再放链接。
• 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。

3.行内块元素

• 特殊的标签<img>、<input>、<td>，它们同时具有块元素和行元素的特点。有些资料称它们未行内块元素。
• 一行可以有多个，中间有空白缝隙。（行内元素特点）
• 本身的宽度是内容的宽度。（行内元素特点）
• 可以设置宽度高度。（块级元素特点）

4.元素显示模式转换

• 简单理解：一个模式的元素需要另一种模式的特性。
• 比如想要增加链接<a>的出发范围。

1. 转换为块元素：display:block；。
2. 转换为行内元素：display: inline；。
3. 转换为行内块元素：display: inline-block；。

5.小工具 snipaste

• 截图工具，可以贴到屏幕上。

三、CSS的背景

• 给页面元素添加背景样式。

1. 背景颜色：teansparent/color。
2. 背景图片：非常便于控制位置，background-image: none/url。
3. 背景平铺：background-repeat：repeat/no-repeat/repear-x/repeat-y。
4. 背景图片位置：background-position: x y;可以使用方位名词或精准单位。（1）都是方位名词。（2）只写一个另一个默认居中。（3）参数值是精确坐标，则必定先x后y。如果只指定一个数值，那该数值一定是x坐标，另一个默认居中对齐。（4）混合使用时，第一个必是x第二个必是y。
5. 背景图像固定：background-attachment: scroll/fixed。
6. 背景复合写法：将这些属性简写再同一个属性bacjground中，没有特定的顺序。background:背景颜色 背景图片 背景平铺 背景图像滚动 背景图像位置。
7. 背景色半透明：background: rgba(0,0,0,0.3)；alpha取值0~1。（可以写成.3）

• 参数值	说明
  length	百分数、由浮点数字和单位标识符组成的长度值
  position	top|center|bottom|left|center|right 方位名词

四、CSS三大特性

• 层叠行、继承性、优先级。

1.层叠性

• 一个样式会覆盖另一个冲突的样式。
• 冲突时，就近原则，哪个离结构近就执行哪个样式。

2.继承性

• 子标签继承父标签的某些样式。
• 行高的继承性：font: 12px/1.5 "Microsoft YaHei";(1.5表示行高为当前元素大小的1.5倍)。优势是里面的元素可以根据自己文字大小自动调整行高。

3.优先级

• 选择器相同，则执行层叠性。
• 选择器不同，则根据选择器权重执行。

• 选择器	选择器权重
  继承或者*	0，0，0，0
  元素选择器	0，0，0，1
  类选择器，伪类选择器	0，0，1，0
  ID选择器	0，1，0，0
  行内样式style=""	1，0，0，0
  !important 重要的	∞无穷大