CSS基础学习（2）

最新推荐文章于 2024-11-12 22:56:44 发布

努力码字的辣椒油

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量216

点赞数 2

本文链接：https://blog.csdn.net/mdyLjyCN/article/details/124646088

版权

选择器分类：

选择器分为基础选择器和复合选择器两个大类

基础选择器：

基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器。

标签选择器：

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

基本语法：

标签名 {

属性1: 属性值1;

属性2: 属性值2;

属性3: 属性值3;

}

优点：能快速为页面中同类型的标签统一设置样式。

缺点：不能设计差异化样式，只能选择全部的当前标签。

类选择器：

类选择器可以自定义类名，并对相同类名的标签统一做出修改。

使用示例：

<head>
    <style>
        .red {
            width: 100px;
            height: 100px;
            /* 背景颜色 background-color */
            background-color: red;
        }
        .green {
            width: 100px;
            height: 100px;
            /* 背景颜色 background-color */
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>

多类名：我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。

<!-- 同时调用red类和font20类 -->
<div class="red font20"></div>

注意：各类名中间需要用空格隔开。

id选择器：

id选择器可以为标有特定id的HTML元素指定样式。

HTML元素以id属性来设置id选择器，CSS中通过id选择器以“#”来定义。

基本语法：

#id名 {

属性1：属性值1

}

示例：

<head>
    <style>
        #man {
            color: red
        }
    </style>
</head>
<body>
    <div id="man"></div>
</body>

注意：id属性只能在每个HTML文档中调用一次。

通配符选择器：

在CSS中，通配符选择器使用"*"定义，它表示选取页面中的所有元素（标签）。

基本语法：

* {

属性1: 属性值1;

}

注意：

1）通配符选择器不需要电泳欧冠，自动给所有元素使用。

2）只有特殊情况下使用，例如清除所有元素标签的内外边距：

* {
    margin: 0;
    padding: 0;
}