初学Web笔记 css day02

一.选择器
1.后代选择器
选中某个标签的子孙后代
.box span{ } 选择box类下表所有的后代span
注意事项：空格就是后代选择器
练习：创建一组无序列表，每个列表的文字是链接形式，给无序列表添加类选择器，通过这个类选择器查找后代所有的a标签，设置悬停效果。
2.直接子代选择器
在标签中直接找儿子
.box2>span{ }
.box2>p>span{ }
3.兄弟选择器
往后找兄弟标签
h1~p{ } 查找h1标签后，兄弟标签为p的
4.相邻兄弟选择器
往后找紧邻的第一个兄弟
h4+p{ } 查找h4标签后紧邻的p标签
注意事项：紧邻选择器后边不能有其它的标签
5.并列选择器
标签同时被多个选择器查找到
p.c1{ } 同时满足被选择器p和选择器.c1找到
注意事项：选择器之间不能有空格
6.伪元素
是附加在标签中的一种选择器，会生成一个行内分区
标签::before{ } 在标签开始的位置插入内容
标签::after{ } 在标签结束的位置插入内容
content 表示要生成的行内分区的内容(必须添加)
可以设置生成内容的样式

二.CSS样式优先级
1.不同选择器样式不同
当多个选择器选中同一个元素，不同的样式都会生效，它们之间不会产生冲突，样式会叠加。
2.不同选择器样式相同
权重相同的情况下，后边的把前边的给覆盖
CSS中有一些样式可以继承的，父元素的样式会传递给子元素
3.选择器权重计算
选择器 权重
继承样式 无 上课时间15:18
通用选择器 0
标签选择器 1
类(伪类)选择器 10
ID选择器 100
行内样式 style=”” 1000
!important 优先级最高 10000
总结：选择器权重会叠加，但注意权重叠加不会越级
例如：11个类选择器不会超过一个id选择器
常用的选择器：标签选择器、类选择器、后代选择器、直接子代选择器、群组选择器、伪类选择器、伪元素选择器…

三.CSS中的值和单位
1.颜色值(写法)
颜色 单词 rgb rgba 16进制 16进制简写
红色 red rgb(255,0,0) rgba(255,0,0,1) #FF0000 #F00
rgba 分别表示 红色，绿色，蓝色，透明度
颜色值范围0~255 透明度范围0~1
2.尺寸写法
像素(px)，电脑屏幕上的一个发光点
百分比(%)，占父元素的尺寸的比例
em 倍率：相对于父元素字体大小的倍率
3.CSS属性
font-size 字体大小
text-indent: 2em; 文本缩进，缩进两个文字是2em

四.流和文档(标准)流
流：标签的有序排列
文档流，网页中每个元素都会按照各自的特征进行排列
例如：每个div会独占一行
1.所有的标签分为三种显示形态
块级元素：会独占一行，有宽高属性 div h1~h6 p ul ol li dl dt dd
行内元素：会和其它的行内共处一行，没有宽高属性 span b u I s a…
行内块元素：会和其它的行内共处一行，有宽度属性 input select textarea
img 图片标签是一种特殊的，行内替换元素。
2.改变显示模式
display: inline; 转为行内元素
display: block; 转为块状元素
display: inline-block; 转为行内块元素
练习：将div转为行内元素；将span和a转为行内块元素；将文本输入框转为块状元素
小技巧：去除图片底部空隙
给图片添加 display：block

五.盒子模型
内边距 padding-top/right/bottom/left
上 右 下 左
边框 border-top/right/bottom/left

外边距 margin
课后任务
(1) 复习今天内容，整理思维导图
(2) 完成以下练习
(3)