CSS中选择器和伪类的概述

最新推荐文章于 2022-11-21 19:20:49 发布

橙栎

最新推荐文章于 2022-11-21 19:20:49 发布

阅读量115

点赞数

本文链接：https://blog.csdn.net/lml_0916/article/details/117400735

版权

1.CSS的介绍：

CSS：CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表，是一种用来表现HTML或XML等文件式样的计算机语言，是一种标准的样式表语言，用于描述网页的表示，即布局和格式。

四种方式的优先级考虑：一般情况下：行内标签>内嵌标签>外链式>导入式【考虑离段落的就近原则，与修饰标签越近，就显示哪个样式。】

由选择器和声明块组成

h1{
color:red;
font-size:14px;
}

color属性，red：属性值

h1：选择器

基本选择器：CSS中应用最广泛的。

标签选择器：根据标签名获取，通过标签名直接使用。

<html>
<style>
p{
    color:red;
}
</style>
<body>
<p>标签选择器</p>
</body>
</html>

ID选择器：根据id属性进行获取，通过"#"加上id的名字。

<html>
<style>
#first{
color:blue;
}
</style>
<body>
<p id="first">ID选择器</p>
</body>
</html>

类选择器：根据class属性来获取，通过"."加上class的值。

<html>
<style>
.second{
color:yellow;
}
</style>
<body>
<p  class="second">类选择器</p>
</body>
</html>

通用选择器：通过通配符”*”来获取，不建议使用。

<html>
<style>
*{
color:green;
}
</style>
<body>
<p>通配符选择器</p>
</body>
</html>

基本选择器的四种优先级：ID>类>标签>通配符

包含选择器：

属性选择器：指的是通过“元素的属性”来选择元素的一种基础选择器。

伪类选择器：同一个标签，不同的状态，有不同的样式。伪类使用"："表示

:link -----------------链接点击之前的样子。

:visted---------------链接被访问过后。

:hover---------------悬停，鼠标放到标签上的一个样式。

:focus----------------某个标签获得焦点时候的样子。

这四种状态的顺序不可以改变，在CSS中，这四种状态的固定顺序是：link>visitd>hover>active

伪元素选择器：

*有两个：的必须写count属性，content的取值就是要表现的内容。

CSS的语法结构：

选择器{

属性1：属性值；

属性2：属性值；

}

控制字体：

设置字号:font-size：

设置字色：color：

设置字体：font-family：【取值：中英文都可，但中文要加引号】

设施行高：line-height：【取值：百分比，或者em单位】

设置字体粗细：font-weight：【取值：normal（正常）bold（粗体）】

样式特点：

1.继承：子元素继承父元素的样式

2.层叠：子元素定义了与父元素的样式相同，子元素会覆盖父元素的样式

后面定义的样式会覆盖掉前面定义的样式。

橙栎

关注