HTML中的标签、CSS中选择器以及定位
一、HTML中的标签
注释:一般的标签均是成对出现的,如:<div> </div>等等,但是还有以一些自结束标签如:<img>、<iuput>等。
1.meta标签:用于设置网页中的元数据(非用户看的数据)
属性值:
- charset:网页中的字符集
- name:指定的数据名称
- content:指定的的数据内容
- keywords:表示网站的关键字(可以同时指定多个关键字)
- description:用于网页的描述
2.title标签:其内容会作为搜索结果的超链接上的文字显示
3.标题标签:
h1至h6(共六级标题,重要性依次递减,在一般的网页的中h1只出现一次,而h4到h5一般不用)
4.p标签:用于段落
5.布局(结构化)标签
<header>:用于表示网页的头部(可以有多个)
<main>:用于表示网页的主题部分(一般只有一个)
<footer>:表示网页的页脚
<nav>:表示网页中的导航
<aside>:侧边栏
<ariticle>:表示独立的文章
<section>:独立的区块
<div>:独立的区块
<span>:一般用于在网页中选中文
6.图片标签:img(自结束标签)
其余标签不一一列举,可查看W3school⽂档
总结:
HTML中标签分为:
- 文本标签:p、span、a、b、i、u、em
- 容器级标签:div、h系列、li、dt、dd
CSS中标签分为:
- 行内标签:除p标签以外的所有文本标签
- 块级标签:P标签以及所有的容器级标签
图解:
二、CSS中选择器以及定位
1.内敛样式
如<p style=" color : red ;font-size :60px">xxxx</p>
2.外敛样式:常用选择器
元素选择器:
作用:根据标签名来选定的元素
语法:标签名 {}
例子:p{}、 h1{}、div{}
id选择器
作用:根据元素的id属性值选中一个元素
语法:#id属性值{}
例子:<head>
<style>
#box{}
</style>
</head>
<body>
<div id="box"></div>
</body>
类选择器
作用:根据元素的class属性值选中一组元素
语法:.class属性值{}
例子:<head>
<style>
.box{}
</style>
</head>
<body>
<div class="box"></div>
</body>
通配选择器
作用:选择页面的所有元素
语法:*{}
复合选择器
交集选择器
作用:选中同时复合多个条件的元素
语法:选择器1 选择器2 ...选择器n{}
注意:*交集选择器中如果有元素选择器,必须使用元素选择器开头*
并集选择器
作用:同时选择多个选择器对应的元素
语法:选择器1,选择器2,...,选择器n{}
关系选择器
子元素选择器
作用:选中指定父元素的指定子元素
语法:父元素>子元素
后代选择器
作用:选中指定元素內的指定后代元素(范围大)
语法:祖先(空格)后代
选择下一个兄弟
语法:前一个 + 后一个
选择(下面)所有的兄弟
语法:兄 ~ 弟
属性选择器
【属性名】选择含有指定属性的元素(title)
【属性名=属性值】选择含有指定属性和属性值的元素
【属性名^=属性值】选择属性值以指定值开头的元素
【属性值¥/$=属性值】选择属性值以指定值结尾的元素
【属性名*=属性值】选择属性值中含有某值的元素的元素
伪类(不存在的类、特殊的类)
一般情况下都是:开头
:frist-child 第一个子元素
:last-child 最后一个子元素
:nth-child()第n个子元素
:frist-of-type
:last-of-type
:nth-of-type()
----这几个伪类的功能和上述的类似,不同在于在同类型元素中进行排序
:not() 否定伪类---将符合的条件的元素从选择器中去除
::frist-letter表示第一个字母
::frist-line 表示第一行
::selection 表示选中的内容(鼠标选中)
::before 元素的开始
::after 元素的结尾
-----before 和 after 必须结合content属性来使用
超链接的伪类
:link 用来表示没访问过的连接(正常的链接)
:visited 用来表示访问过的链接
由于隐私原因:所以visited这个伪类只能修改链接的颜色
:hover 用来表示鼠标移入的状态
:active 用来鼠标点击
选择器的权重
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级
注意:比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级越高,则越优先显示(分组选择器如div、p、span单独计算)选择器对的累加不会超过其最大的数量级,若优先级相同,优先使用靠下的样式。
3.定位(position)
一种更加高级的布局手段
通过定位可以将元素摆到任意位置
可选值:
static:默认值 静止
相对定位 relative
---当元素的position属性设置为relative时则开启了元素的相对定位
特点:1.开启相对定位以后,不设置偏移量时元素不会发生任何变化
2.相对定位参照与元素在文档流中的位置进行定位的
3.相对定位会提高元素的层级
4.元素不会脱离文档流
5.元素的性质不改变
注释:偏移量
当元素开启了定位以后,可以通过偏移量来设置元素的位置
top 定位元素与定位位置上边的距离
bottom 定位元素与定位位置下边的距离
left 定位元素与定位位置左边的距离
right 定位元素与定位位置右边的距离
绝对定位 absolute
---当元素的position属性设置为absolute时则开启了元素的绝对定位
特点:1.开启相对定位以后,不设置偏移量时元素位置不会发生任何变化
2.相对于包含块进行定位的
3.会提高元素的层级
4.元素会脱离文档流
5.元素的性质发生改变(行内元素会变为块级元素)
注释:包含块
---正常情况下:包含块就是距离当前元素最近的祖先元素
---绝定定位下: 距离当前元素最近的开启了定位的祖先元素
若祖先元素均未开启定位,则包含块就是根元素
固定定位 fixed
---当元素的position属性设置为fixed时则开启了元素的固定定位
特点:大部分与绝定定位一样
不同:1.固定定位永远参照与浏览器的视口进行定位
2.固定定位的元素不会随网页的滚动条滚动
粘滞定位 sticky
---当元素的position属性设置为sticky时则开启了元素的粘滞定位
特点:大部分与相对定位一样
不同:使元素达到某位置时将其固定