JavaWeb基础之CSS复合选择器、元素显示模式、背景、综合案例
CSS复合选择器
复合选择器就是基础选择器结合而成的
包括：后代选择器，子选择器，并集选择器，伪类选择器
1、后代选择器
又称包含选择器，可以选择父元素里的子元素
例如：选择所有ol标签里的li都更改属性
ol li {
color: red;
/* 选择ol里的所有li元素 */
}
中间用空格隔开 更改的是后代的样式(只要是后代都可以被选中，无论几代)
对同名标签的区分
- 对一个标签添加class属性
- class属性+后代名
注：中间的过程标签可以省略
"nav"
>
pink
2、子选择器
选择离得最近的子元素
元素1>元素2 {样式声明}
- 元素1是父元素，元素2是子元素
- 只能选择离得最近的子元素(不包括几代之后的元素)
3、并集选择器
可以选择多组标签，样式相同，来集体声明
会变粉
会变粉
- 用逗号隔开，逗号可以理解为和的意思
- 任何样式选择器都可以作为并集选择器的一部分 语法规范：并集选择器的标签要竖着写
4、伪类选择器
给选择器添加特殊效果
语法 : + 元素
链接伪类选择器
| a:link | 选择所有未被访问的链接 |
|---|---|
| a:visited | 选择所有已被访问的链接 |
| a:hover | 选择鼠标经过链接 |
| a:active | 鼠标按下未抬起的链接 |
小知识：未选择链接经常使用的颜色#333
链接伪类的注意事项
- 为了确保生效，要按照 link->visited->hover->active 的顺序声明
- 链接和标题标签一样，都要单独指定样式
开发中经常的写法：
先给a写一个样式，然后在给hover(经过的时候)写一个样式(蓝色+下划线)
focus伪类选择器
选取获得焦点 (光标) 的表单元素
"text">
"text">
元素显示模式
分类：
- 块元素
- 行内元素
- 行内块元素
块元素
包括：h1, p, div, ul, ol, li,其中 div 是最典型的块元素
特点：
- 自己独占一行
- 可以设置高度宽度及内外边距
- 宽度默认和容器(父级宽度)一样宽
- 是一个容器及盒子，里面可以放其他元素
注意：文字类的块元素不允许放其他元素,例如 p 和 h1
行内元素(内联元素)
包括：a, strong, body, em, span
特点：
- 一行可以有多个行内块元素，但中间有空白缝隙
- 默认宽度是内容的宽度
- 高度，行高，外边距以及内边距都可以控制
元素显示模式总结
块元素：可以指定宽高和内外边距，独占一行
行内元素：不能指定宽高和内外边距，一行可以放多个
行内块元素：可以指定大小，一行可以放多个，大小由内容来决定
元素显示模式的转换
一种元素需要另外一种元素的特性。例如增加a的触发范围 (使一个行内元素有块元素的性质)
在CSS里面添加display: block转化块元素：
"#">我是块元素
在CSS里面添加display: inline转化为行内元素：
我是行内元素
在CSS里添加display: inline-block转化为行内块元素：
我既可以指定大小，又可以一行放多个
CSS背景
背景颜色，背景图片
背景颜色
定义背景颜色：
background-color: transparent | color;
- transparent：背景色透明(默认值)
- color：颜色
背景图片
定义背景图片场景：logo，装饰性小图片，超大图片
优点：便于控制位置
background-image: none | url();
background-image: url();
/* 不要忘记url() */
- none：无背景图 (默认值)
- url()：使用绝对地址或相对地址指定图片
背景图片位置(重要)
背景图片位置属性：
background-position: x y;
/* 一共两个参数x和y*/
- length(精确位置) 百分数 | 由浮点数值和单位标识符(px)组成的长度值
- position(方位名词) top | center | bottom | left |center | right
背景图片精确位置
第一个参数为x坐标，第二个为y坐标
background-position: 20px 20px;
- 只指定一个值，另一个值默认垂直居中
- 精确单位(数值)和文字单位可以混合使用，但一定要注意参数顺序
背景图像固定
把图片固定在网页上，用来做视差滚动
background-attachment: scroll | fixed;
scroll：背景图像滚动 (默认值)
fixed：背景图像固定
背景图片复合写法
和字体一样有复合写法，但是背景图片参数没有顺序
下面是推荐书写的顺序：
注意:背景图片地址为url( )
background: 背景颜色 | 背景图片地址 | 背景平铺 | 背景图片滚动 | 背景图片位置 ;
背景色半透明
代码示例：
background-color: rgba(0,0,0,0.3);
- a为透明度，取值范围[0,1]
- 可以省略透明度前面的0，例0.3 -> .3
CSS三大特性
1.层叠性
对同一个选择器选择相同样式不同的参数：遵循就近原则，谁离标签近就执行哪个样式 (后来者居上)，但是不冲突的部分不会被覆盖
2.继承性
子标签会继承父标签的某些样式(可以继承的样式text- ,font- ,line- ,color- )
在F12中可以看到inherited from xxx
行高的继承:
body {
font: 12px/1.5 "Microsoft YaHei";
/* 字体大小/行高 字体 */
}
行高可以没有单位
没有单位的意思是当前元素文字大小的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重要的 | 无穷大 |
!important使用方法 (优先级无穷大)：
div {
color: blue!important;
}
a链接浏览器默认指定了一个样式，所以优先级和元素选择器一样(0,0,0,1)
权重叠加
复合选择器会出现权重叠加的问题
"nav">
- 我是粉色
扩展：Emmet语法(快捷键)
快速生成HTML结构语法：
- 生成多个相同标签，标签名*3 (注，中间不要有空格)
- 父子级标签 例：ul和li 可以写 ul>li
- 兄弟关系用+
- 可以直接 .nav ，生成
- 可以换# 生成id标签
- 可以更换其他标签，例：p.one 生成
- 生成类名有顺序 .demo ∗ 5 注 ： *5 注： ∗5注：从1开始排序
生成标签内容带默认文字 例：div{默认文字}
.demo${默认文字}*5
综合案例：五彩导航栏
代码：
五彩导航栏