CSS 指层叠样式表 (Cascading Style Sheets) 和选择器

Vincent_Vang

已于 2023-12-16 14:42:56 修改

阅读量77

点赞数 1

文章标签： css html 前端 java css3

于 2023-05-02 16:09:12 首次发布

本文链接：https://blog.csdn.net/vincent_vang/article/details/130464258

版权

CSS 指层叠样式表 (Cascading Style Sheets)

内联样式（行内样式）

在开始标记中通过style属性(attribute)来设置元素的样式。注意，这里的 property 指的是 CSS 属性(property)

<table align="center" 
    style="background-color: aquamarine; width: 300px;height: 200ox;">
        <caption>
            <b>购物清单</b>
        </caption>
        <tr>
            <th>商品名</th>
            <th>数量</th>
            <th>价格（元）</th>
        </tr>
        <tr>
            <td>牙刷</td>
            <td>2</td>
            <td>10.5</td>
        </tr>
        <tr>
            <td>毛巾</td>
            <td>4</td>
            <td>24</td>
        </tr>
        <tr>
            <td>衣架</td>
            <td>20</td>
            <td>16.8</td>
        </tr>
        <tr>
            <td>牙刷</td>
            <td>2</td>
            <td>10.5</td>
        </tr>
    </table>

在这里插入图片描述

内嵌样式（内部样式）

在 HTML 文档中通过 style 元素插入CSS样式。通常将内嵌样式(内部样式) 添加到 head 区域内。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        caption{
            font-size: 20px;
            color: darkblue;
        }
        th{
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <table align="center">
        <caption>
            <b>购物清单</b>
        </caption>
        <tr>
            <th>商品名</th>
            <th>数量</th>
            <th>价格（元）</th>
        </tr>
        <tr>
            <td>牙刷</td>
            <td>2</td>
            <td>10.5</td>
        </tr>
        <tr>
            <td>毛巾</td>
            <td>4</td>
            <td>24</td>
        </tr>
        <tr>
            <td>衣架</td>
            <td>20</td>
            <td>16.8</td>
        </tr>
        <tr>
            <td>牙刷</td>
            <td>2</td>
            <td>10.5</td>
        </tr>
    </table>
</body>
</html>

其中内嵌样式的 style元素实在head元素中的。

 <style type="text/css">
        caption{
            font-size: 20px;
            color: darkblue;
        }
        th{
            background-color: cornflowerblue;
        }
    </style>

在这里插入图片描述

选择器

Type Selector

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

    <style type="text/css">
        html{
            color: rgb(191, 121, 248);
        }
        caption{
            font-size: 20px;
            color: darkblue;
        }
        th{
            background-color: cornflowerblue;
        }
    </style>

在这里插入图片描述
Type Selector也称作 tag name selector，国内资料上通常称作标签选择器 <p>Type Selector是根据元素类型(即标签名称)来选择页面上的元素。

type selector

在 W3C 标准中，元素选择器又称为类型选择器（type selector）。

“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”

h1 {font-family: sans-serif;}

class selector

class selector允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用，也可以与其他元素结合使用。所有元素的 calss 属性值中都可以包含多个 class-name （它们之间使用空格隔开即可）

<style type="text/css">
            /* 选择页面上显式书写了class属性(attribute)且该属性值中包含`odd`一词的元素 */
            /*[class~=odd] { */
            .odd{
                background-color: #dfdfdf;
            }

            /* 选择页面上显式书写了class属性(attribute)且该属性值中包含`even`一词的元素 */
            .even {
                background-color: #ffff00;
            }

            .yuan-fang {
                border: 1px solid blue;
            }
        </style>

ID selector

首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

 #seventh {
                border: 1px solid green;
            }

并且要保证元素中的 id属性是唯一的。

 <div id="first" class="odd afang yuan-fang di-pang lao-wang">第一个</div>
        <p id="second" class="even yuan-fang">老二</p>
        <div id="third" class="odd di-pang">小三</div>
        <section id="fourth" class="even lao-wang">老四</section>
        <div id="fifth" class="odd laowu">小五</div>
        <div class="even xiaoliu">小六汤包</div>
        <div id="seventh">每一天</div>

Attribute Selector

Attribute Selector被翻译为属性选择器。[attribute]用于选择显式定义了指定属性的元素。

[attribute~=word]用于选择显式定义了指定属性并且该属性值中包含指定单词的元素。[attrivute=value]用于选择显式定义了指定属性并且该属性值等于给定值的元素。

            [id] {
                color: blue;
                border: 1px solid green;
            }
            /* 选择页面上显式书写了 class 属性(attribute)的元素 */
            [class] {
                text-align: right;
                border: 1px solid green;
            }

            /* 选择页面上显式书写了class属性(attribute)且该属性值中包含`odd`一词的元素 */
            [class~=odd] {
                background-color: #dfdfdf;
            }

            /* 选择页面上显式书写了id属性(attribute)且该属性值等于给定值的元素 */
            [id=seventh] {
                background-color: #ff0;
            }

structural pseudo-classes

超链接

本例演示如何向文档中的超链接添加不同的颜色。
超链接 2

本例演示如何向超链接添加其他样式。
超链接 - :focus 的使用

本例演示如何对超链接应用 :focus 伪类（无法在 IE 中工作）。
:first-child（首个子对象）

本例演示 :first-child 伪类的用法。
: lang（语言）

本例演示 : lang 伪类的用法。

            /* Universal Selector */
            * {
                margin: 50px;
                border: 1px solid blue;
            }
            /* structural pseudo-classes */
            :root {
                border-color: red;
            }
            :empty {
                height: 20px;
                background-color: #dfdfdf;
            }