|
一、今日学习内容： CSS的复合选择器 1、是建立在基础选择器之上，对基础选择器进行组合形成的 2、可以更加准确、高效的选择目标元素 3、常用的复合选择器 ①后代选择器：选择父元素里面的子元素 语法：1、元素1元素2{样式声明}；2、元素1是父级，元素2是子级 3、元素2是元素1的后代 4、元素1和元素2可以是任意的基础选择器 ②子选择器：只能选择某元素最近的一级子元素 语法：1、元素1>元素2{样式声明}；2、元素1和元素2之间要用大于号>隔开 3、元素2只能是元素1的亲儿子 ③并集选择器：可以选择多组标签，同时为他们制定相同的样式，通常用于集体声明 ④伪类选择器 1）链接伪类选择器 :link选择未被访问过的链接 :visited选择所有已经被访问的链接 :hover选择所有链接鼠标悬停时候 :active选择所有鼠标点击时的状态 2）焦点伪类选择器 :focus 语法：input:focus{样式声明} 一般焦点伪类选择器都是和input标签来联合使用 二、CSS元素显示模式 1、是元素在网页的显示状态 2、分类 ①块元素 独占一行 宽度默认的是父级宽度的100% 本身可以是容器或者是盒子，里面可以放其他的行内或者块级元素 高度和宽度都可以设置，内外边距也可以控制 常见的块元素： h1-h6 div p ul ol li等 文字类的元素内不能使用块级元素 ②行内元素 相邻的行内元素会在一行上显示 宽高设置都是无效 默认的宽高是本身内容的宽高 行内元素只能容纳文本或者其他行内元素 相邻的行内元素之间会有一点空隙 常见的行内元素： a strong em span ins等 链接里面不可以再放链接；如果a标签内要放一个块级元素，要将a标签的显示模式转化为块级更安全 ③行内块元素 相邻的行内块元素在一行上显示，并且有空白缝隙 默认宽度是它本身内容的宽度 高度和宽度都可以设置 常见的行内块元素：input img td 3、元素显示模式的转换 转换为块级元素：display:block; 转换为行内元素：display:line; 转换为行内块元素：display:inline-block; 三、CSS的背景属性 1、背景颜色：background-color 属性值：颜色单词/十六进制/rgb，默认值是transparent（透明色） 2、背景图片：background-image 属性值：url(图片路径) 3、背景平铺：background-repeat repeat默认值，代表背景图片在横向和纵向都平铺 no-repeat不平铺 repeat-x在横向上平铺 repeat-y在纵向上平铺 4、背景图片定位：background-position 精确的像素单位 方位名词：没有先后顺序top center bottom left right 5、背景图片滚动：background-attachment scroll默认值，图片随着屏幕滚动 fixed图片不跟随屏幕滚动 6、背景的复合写法 background:background-color background-image background-repeat background-attachment background-position 7、背景半透明 语法：background:rgba(0,0,0,0.3) a是alph的缩写，代表透明度，取值范围0-1；习惯将0.3写为.3,0可以省略； 四CSS的三大特性 1、层叠性 相同的选择器设置相同的样式，此时新的样式会覆盖掉旧样式 原则：样式冲突的时候遵循就近原则；样式不冲突的时候不会层叠 2、继承性 在css中，子标签会继承父标签的某些样式 可以被继承的属性：text fout- line 以及color 3、优先级（权重） ①如果选择器相同，执行层叠性；如果选择器不同，执行优先级（根据选择器的权重来执行） ②选择器及权重 继承或者*（0,0,0,0） 元素（标签）选择器（0,0,0,1） 类选择器、伪类选择器（0,0,1,0） ID选择器（0,1,0,0） 行内样式（1,0,0,0） !important（∞） 二、今日问题：无 三、解决方案：无
| 
