day52 html进阶
一、分组与嵌套
# 选择器之间用逗号隔开表示并列
.c3,#d2,span{}
二、伪类选择器
鼠标对待a标签链接的4种状态
- 未访问态：link
- a:link{}
- 鼠标悬浮态：hover
- a:hover{}
- 鼠标点击不松开，激活态：active
- a:active{}
- 访问后的状态：visted
- a:visted{}
注意：其他文本标签可能也有悬浮态，这里需要记住的是悬浮态的使用
三、伪元素选择器
- 对p标签的第一个字符修改
- p:first-letter{}
- 把abc加在p标签的段落前
- p：before｛conten：“abc”｝
- 把abc加载p标签的段落后
- p：after｛conten：“abc”｝
注意：before和after通常都是用来清除浮动带来的影响：父标签塌陷的问题
四、选择器优先级
主要区分四种选择器：id选择器，类选择器，标签选择器，行内式
如果是相同选择器，id1,id2,id3谁写的离标签更近就听谁的
如果是不同选择器：行内>id>类>标签选择器（越精确越优先）
五、css属性相关
注意：只有块状标签有长宽，行内标签即使设置了也不会生效
注意：有相同前缀的属性值可以写在一起，且不区分先后
1 字体属性
p{
font-family ： '字体选择'
font-size ： 24px '文字大小'
font-weight ：inherit'继承父标签样式'或者 bolder'加粗'或者 lighter'变细'
color：red
color:#ee762e
color：rgb（127，234，234）
color：rgba（127，234，234，0.5） # 第四个参数是透明度0-1
}
2 文字属性
p{
text-align:center('居中')/right/left/justify('两端对齐')
text-decoration:underline('下划线')/overline('上划线')/line-through('删除线')/none
text-indent：2em #首行空两格
}
3 背景图片
#d2
{
height: 300px;
background-image: url("timg.png"); # 设置图片为该div的背景
background-attachment: fixed; # 是图片置于底层，不会随页面的移动而移动
}
4 边框
#d1
{
border: 3px solid red;
#给该标签设置3px的红色实线边框，三者位置可随便写
#也可以通过border-top-width等去修改特定参数
border-radius：50%
# 给边框设置弧度
}
5 display属性
.c1{
display:
none # 隐藏标签，也不占位置
inline # 将标签设置为行内标签
block # 将标签设置成块级标签
inline-block # 将标签同时具备行内块级标签特点：能在同一行且能设置长宽
visibility：hidden # 单纯的隐藏，位置还在
}
6 盒子模型
所有的块级标签都可以看做是盒子
- 盒子与盒子之间的距离（没有关联的两个）：外边距margin
- 盒子自己的厚度：border
- 盒子里的东西到盒子的距离：内边距padding
- 物体的大小：content
ps：body会再带8px的margin，一般情况下会先把body的margin去除
body{
margin:10px,20px # 第一个是上下，第二个是左右
margin:10px,20px,30px # 第一个是上，第二个是左右，第三个是下
margin:10px,20px,30px,40px # 上右下左，顺时针
# 也可以设置特定位置的margin,适用于padding
margin
left,top,right,bottom
}
7 浮动
浮动的元素没有块级一说，本身多大就占多大，但是不会超出页面最大范围，多出的部分会被拆分
#d1
{
height: 200px;
width: 200px;
background-color: red;
float: left; # 浮在页面的左边
}
