day52 html进阶

目录

• 一、分组与嵌套
• 二、伪类选择器
• 三、伪元素选择器
• 四、选择器优先级
• 五、css属性相关
  • 1 字体属性
  • 2 文字属性
  • 3 背景图片
  • 4 边框
  • 5 display属性
  • 6 盒子模型
  • 7 浮动

一、分组与嵌套

# 选择器之间用逗号隔开表示并列
.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; # 浮在页面的左边
}