CSS(二)

一、CSS复合选择器

1什么是复合选择器

1.1在CSS中，可以根据选择器的类型选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上的，对基本选择器进行组合形成的。

复合选择器包括 后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器

  /* 我想要把ol里面的小li选出来改为pink */

        ol li {
            color: pink;
        }

        /* 中国 山东 济南 蓝翔 */
        ol li a {
            color: red;
        }

        .nav li a {
            color: yellow;
        }

子选择器（）重要

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，理解就是选亲儿子，孙子不行

并集选择器   div，p{color: pink ,是和的意思}

伪类选择器

a：link 选择未访问的链接

a:visited 选择所有已被访问的链接

a: hover 选择鼠标指针位于上的链接

a: active 选择活动链接(鼠标按下去,但未松开的链接 

特殊:focus伪类选择器

focus伪类选择器用于获取得焦点的表单元素

焦点是光标,一般情况<input>类表单元素才能获取,因此这个选择器也是主要针对于表单元素来说

input:focus {

background=color:yellow;

}

CSS元素显示模式

1.什么是元素显示模式

2.2块元素

h1  p div ul ol li

块元素特点

独占一行

高度 宽度 外边距都可以调节

宽度默认是父容器的100%

里面可嵌套其他元素

注意

文字类元素内不能使用块元素

p标签只要用于存放文字,因此p里面不能放块元素,特别是div

2.3行内元素

a strong b em i s del  ins span

相邻行内元素在一行上,一行可显示多个

宽高高度设置无效

默认宽度就是它本身的宽度

行内元素只能容纳文本或其他行内元素

注意

链接里面不能再放链接了 a不能嵌套a

特殊情况链接a里面可以放块级元素,但是要给a转换一下块级模式最安全

2.3行内块元素

img input td 同时具有块元素和行内元素的特点

特点

和相邻的行内元素(行内块)在一行上,但是之间会空白间隙.一行可以显示多个(行内元素特点)

默认宽度就是他本身的宽度(行内元素特点)

高度 行高 外边距及内边距都可以控制(块元素特点)

2.4元素显示的转换

常见情况下要把a转换为块元素或者行内块元素,增加触发范围

display(显示) block 块 inlink 行内 

2.5 文字垂直居中

用行高 text-height等于盒子的高度

三、CSS的背景 只能在内嵌式CSS里面写 style

背景属性可以设置背景颜色、背景图片、背景平铺，位置，图像固定

背景颜色 background-color transparent（透明）默认

1.背景图片

背景图片 实际开发常见的logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图是一种运用场景）background-image：url（图片地址）背景图片会盖住背景颜色

2.背景平铺 background-repeat

background-repeat：no-repeat repeat-x（x轴平铺）repeat-y（y轴平铺）默认平铺

3.背景图片位置

background-position：x y 参数代表意思是：x坐标和y坐标，可以使用方位名词或精确单位 

方位名词：top center left right bottom 精确单位px

两个方位名词，无关顺序 一个方位名词，第二个居中对齐

精确单位

第一个x轴,第二个y轴(x轴向右,y轴向下)

如果只指定一个数值,该数值一定是x坐标,另外一个默认是垂直居中

混合单位

20px center

背景图像固定(背景附着)background-attachment

background-attachment.属性设置背景图像是否固定或者随着页面的其余部分滚动

background-attachment.后期可以制作视差滚动的效果 QQ官网(视差滚动)

background-attachment: sroll(滚动 默认) fixed(固定)

背景复合写法(没有顺序)

background: 背景颜色 背景图片地址 背景平铺 背景图片滚动 背景位置

背景颜色半透明

background:rgba(0,0,0,0.3) 0.3透明程度(可以把0省略) 1是不透明

CSS有三个重要的特性:层叠性 继承性 优先级

层叠性 

相同选择器 相同样式 会覆盖(层叠) 就近原则

样式不冲突 不层叠

继承性

子标签会继承父标签的某些样式,如文本颜色和字号

子元素可以继承父元素的样式(font line text 这些元素的可以继承,以及color属性)

行高可以不跟单位

font12px/1.5  行高是12*1.5

优先级

选择器相同,层叠性

选择器不同,权重

通配符 0 元素 1 类选择、伪类 10 ID选择器100 行内式style 1000 important无穷大

权重会叠加但是不会进位

继承的权重是0 

a链接是由浏览器指定样式 蓝色的有下划线 不会继承

.