19号CSS学习
一、CSS的复合选择器
- 更高效的选择目标元素。
- 后代选择器、子选择器、并集选择器、伪类选择器等。
1.后代选择器
- 可以选择父元素里的子元素。
- 又称包含选择器。
- 必须是空格，必须是后代，ul li {color: red;}。
- 儿子、孙子都可以，只要是后代就行。ol li a {color: red;}。
- 可以是任意基础选择器。
2.子元素选择器
- 选择亲儿子元素。
- >分隔div>p {color: red;}。
3.并集选择器
- 可以选择多组标签，同时为他们定义相同的样式。
- .隔开。
- 任何选择器都可以作为并集选择器的一部分。
- 喜欢竖着写。
4.伪类选择器
- 用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或者选择第1个，第n个元素。
- 用冒号表示，如：hover。
- 有链接伪类、结构伪类等。
- 链接伪类选择器：
-
a:link /*选择所有未被访问的链接*/ a:visited /*选择所有已被访问的链接*/ a:hover /*选择鼠标指针位于其上的链接*/ a:active /*选择活动链接（鼠标按下未弹起的链接）*/
- 注意事项：必须按顺序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>的出发范围。
- 转换为块元素：display:block；。
- 转换为行内元素：display: inline；。
- 转换为行内块元素：display: inline-block；。
5.小工具 snipaste
- 截图工具，可以贴到屏幕上。
三、CSS的背景
- 给页面元素添加背景样式。
- 背景颜色：teansparent/color。
- 背景图片：非常便于控制位置，background-image: none/url。
- 背景平铺：background-repeat：repeat/no-repeat/repear-x/repeat-y。
- 背景图片位置：background-position: x y;可以使用方位名词或精准单位。（1）都是方位名词。（2）只写一个另一个默认居中。（3）参数值是精确坐标，则必定先x后y。如果只指定一个数值，那该数值一定是x坐标，另一个默认居中对齐。（4）混合使用时，第一个必是x第二个必是y。
- 背景图像固定：background-attachment: scroll/fixed。
- 背景复合写法：将这些属性简写再同一个属性bacjground中，没有特定的顺序。background:背景颜色 背景图片 背景平铺 背景图像滚动 背景图像位置。
- 背景色半透明：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 重要的 ∞无穷大
