JavaWeb基础之CSS复合选择器、元素显示模式、背景、综合案例

CSS复合选择器

复合选择器就是基础选择器结合而成的
包括：后代选择器，子选择器，并集选择器，伪类选择器

1、后代选择器

又称包含选择器，可以选择父元素里的子元素
例如：选择所有ol标签里的li都更改属性

ol li {
    color: red;
    /* 选择ol里的所有li元素 */
}

中间用空格隔开 更改的是后代的样式(只要是后代都可以被选中，无论几代)

对同名标签的区分

1. 对一个标签添加class属性
2. class属性+后代名

注：中间的过程标签可以省略

"nav">
  
pink


  

2、子选择器

选择离得最近的子元素
元素1>元素2 {样式声明}

    
"#">会变粉
    
"#">不会变粉

• 元素1是父元素，元素2是子元素
• 只能选择离得最近的子元素(不包括几代之后的元素)

3、并集选择器

可以选择多组标签，样式相同，来集体声明

会变粉
会变粉

• 用逗号隔开，逗号可以理解为和的意思
• 任何样式选择器都可以作为并集选择器的一部分 语法规范：并集选择器的标签要竖着写

4、伪类选择器

给选择器添加特殊效果
语法 : + 元素

链接伪类选择器

a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标经过链接
a:active	鼠标按下未抬起的链接

小知识：未选择链接经常使用的颜色#333

链接伪类的注意事项

1. 为了确保生效，要按照 link->visited->hover->active 的顺序声明
2. 链接和标题标签一样，都要单独指定样式

开发中经常的写法：

先给a写一个样式，然后在给hover(经过的时候)写一个样式(蓝色+下划线)

focus伪类选择器
选取获得焦点 (光标) 的表单元素

"text">
"text">

元素显示模式

分类：

• 块元素
• 行内元素
• 行内块元素

块元素
包括：h1, p, div, ul, ol, li,其中 div 是最典型的块元素
特点：

1. 自己独占一行
2. 可以设置高度宽度及内外边距
3. 宽度默认和容器(父级宽度)一样宽
4. 是一个容器及盒子，里面可以放其他元素

注意：文字类的块元素不允许放其他元素,例如 p 和 h1

行内元素(内联元素)
包括：a, strong, body, em, span
特点：

1. 一行可以有多个行内块元素，但中间有空白缝隙
2. 默认宽度是内容的宽度
3. 高度，行高，外边距以及内边距都可以控制

元素显示模式总结
块元素：可以指定宽高和内外边距，独占一行
行内元素：不能指定宽高和内外边距，一行可以放多个
行内块元素：可以指定大小，一行可以放多个，大小由内容来决定

元素显示模式的转换

一种元素需要另外一种元素的特性。例如增加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结构语法：

1. 生成多个相同标签，标签名*3 (注，中间不要有空格)
2. 父子级标签 例：ul和li 可以写 ul>li
3. 兄弟关系用+
4. 可以直接 .nav ，生成
5. 可以换# 生成id标签
6. 可以更换其他标签，例：p.one 生成

7. 生成类名有顺序 .demo$\ast 5注：$从1开始排序
   生成标签内容带默认文字 例：div{默认文字}

.demo${默认文字}*5

综合案例：五彩导航栏

代码：

    
    
    
    


    
"nav">
        "#" class="bg1">五彩导航栏
        "#" class="bg2">五彩导航栏
        "#" class="bg3">五彩导航栏
        "#" class="bg4">五彩导航栏
        "#" class="bg5">五彩导航栏