CSS选择器和常用属性

最新推荐文章于 2023-08-28 14:14:15 发布

刘某人...

最新推荐文章于 2023-08-28 14:14:15 发布

阅读量875

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/Battles2/article/details/127055997

版权

想要将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一样式任务部分被称为选择器。

下面简单介绍CSS选择器：

1.标签选择器

标签选择器是指用HTML标签名作为选择器，按照标签名称分类，为页面中某一类标签指定统一的样式。标签选择器的基本语法格式如下：

标签名{

属性1：属性值1；

属性2：属性值2；

属性3：属性值3；

}

在上述语法中，所有的HTML标签都可以作为标签选择器的标签名，例如<body>标签、<h1>标签、<p>标签等。用标签选择器定义的样式对页面中该类型的所有标签都有效，这是它的优点，但同时也是缺点，因为这样不能设计差异化样式。

2.类选择器

类选择器使用 “.” （英文点号）进行标识，后面紧跟类名，其语法基本格式如下：

.类名{

属性1：属性值1；

属性2：属性值2；

属性3：属性值3；

}

3.id选择器

id选择器使用 “#” 进行标识，后面也是跟类名，基本语法格式如下：

#类名{

属性1：属性值1；

属性2：属性值2；

属性3：属性值3；

}

上述语法中，id名就是HTML页面里元素的id属性值，大多数HTML元素都可以定义id属性。元素的 id 值是唯一的，只能对应文档中某一个具体的元素。

4.通配符选择器

通配符选择器用 “ * ”（星号）表示，它是所有选择器中作用范围最广的，能匹配页面中所有元素。通配符选择器的基本语法格式如下：

*类名{

属性1：属性值1；

属性2：属性值2；

属性3：属性值3；

}

例如下面使用通配符选择器定义的样式能够清除所有HTML标签的默认边距。通配符选择器用法的示例代码如下：

*{

margin：0；/* 定义外边距 */

padding：0；/* 定义内边距 */

}

在实际网页开发中，不建议使用通配符选择器，因为它设置的样式对所有的HTML标签都生效，这是优点也是缺点，因为这样也不能设计差异化样式。

了解这几种选择器的语法结构之后，下面通过一个案例学习熟悉一下这几种选择器的使用。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>刘某人...的选择器练习网站</title>
    <style type="text/css" >
        /*1.类选择器的定义*/
        .red {
            color: red;
        }
        .green {
            color: green;
            background: yellow;
        }
        .font20 {
            font-size: 20px;
        }
        /*2.ID选择器的定义*/
        #bold {
            font-weight: bold;
        }
        #font24 {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <!--  类选择器的使用  -->
    <h1 class="red">标题一:刘某人... class="red" 设置文本为红色</h1>
    <p class="green font20">
        段落1 class=“绿色”，设置文本为绿色
    </p>

    <p class="red font20">
        段落2 class=“红色”，设置文本为红色
    </p>

    <!--  id选择器的使用  -->
    <p id="bold">段落1 id="bold",设置粗体文字</p>
    <p id="font20">段落2 id="font20",设置字号为20px</p>
    <p id="font24">段落3 id="font24",设置字号为24px</p>
    <p id="bold font20">段落4 id="bold font20",同时设置粗体和字号20px</p>
    <p id="bold font24">段落5 id="bold font24",同时设置粗体和字号24px</p>
</body>
</html>

上述代码中 6~25 行代码在<style>标签内分别定义了类选择器和id选择器。 8~17 行代码使用了3个类选择器，第 8~10 行代码用“ .red ” 选择器将页面中class属性值为red的文字颜色设置为红色，第11~14行和第15~17行分别将class属性值为green的文字颜色设置为绿色和font20的文本自豪设置为20像素.（那个背景颜色是我自己练习的时候加上去的......）。

第 19~24 行代码使用了2个id选择器，第 19~21 行选择器将页面中 id 属性值为 bold 的文本字体变为粗体文字，第 22~24 行代码使用 “ #font24 ” 选择器将页面中 id 属性值为 font24 的文本字号设置为24像素。

结果如下：

在上图中，“标题一......” 和 “段落二......” 的文本内容均为红色，这是因为他们都调用了名为 red 的类选择器，所以，同一个类选择器可以被多个标签引用。（类似Java中的方法调用）。

“ 段落2 ” 和 “ 段落3 ” 的字号均为24像素，这是由于他们都引用了相同的 id 选择器，虽然浏览器没有报错，但是这种做法不被允许，因为Javascript等脚本语言中 id 值是唯一的。

“ 段落4 ” 没有显示任何CSS样式，这意味着同一个标签对象不能同时引用多个 id 选择器，例如 id = “bold font24” 的引用方式是无效的，HTML标签不会显示任何样式。如果一个标签想要使用多个样式，可以使用类选择器。

除了选择器，CSS还提供了很多属性来丰富HTML标签的样式。CSS常用属性如下表：

属性名称	功能描述
margin	用于指定对象的边外距，即为对象和对象之间的距离。该属性可以指定 1~4 个属性值，个属性值以空格分隔。
padding	用于指定对象的内边距，即为对象内容和对象边框之间的距离。该属性可指定 1~4 个属性值，各属性值以空格分隔。
background	用于设置背景颜色、背景图片、背景图片的排列方式、是否固定背景图片和背景图片的位置。该属性可指定多个属性值，各属性值以空格分隔，没有先后顺序。
font-family	规定元素的字体系列。
border	用于设置边框的宽度、边框的样式和边框的颜色。该属性可以指定多个属性值，各属性值以空格分隔没有先后顺序。
font	用于设置字体样式、小型的大写字体、字体粗细、文字的大小、行高和文字的字体。
height	用于指定对象高度。
line-height	用于设置行间距。所谓行间距，就是行与行之间的距离，即为字符的垂直间距，一般称为行高。
color	用于指定文本的颜色
text-align	用于指定文本的对齐方式
text-decoration	用于指定文本的显示样式，其属性值包括line-through（删除线）、overline（上画线）、underline（下画线）、blink（闪烁效果，Firefox浏览器和Opera浏览器可以看到效果）和none（无效果）等
vertical-align	用于设置元素的垂直对齐方式
display	用于指定对象的显示形式