当前位置：网站首页 > 文章教程 > 正文

CSS入门:样式规则与选择器

yund56 2025-04-22 08:30 21 浏览

一、CSS简介

1.1 什么是CSS？

定义：CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML（包括如SVG, MathML之类的XML语言）文档外观和格式的样式语言。
作用：分离内容与表现，使网页内容更加丰富和美观。

1.2 CSS如何工作？

层叠性：多个样式表可以应用于一个HTML文档，CSS样式按照优先级和来源（如内联、内部、外部）进行层叠。
继承性：某些CSS属性可以从父元素继承到子元素。

二、CSS样式规则

2.1 基本结构

css代码：

selector {
    property: value;
}

selector：选择器，用于指定应用样式的HTML元素。
property：属性，定义要改变的样式特性。
value：属性值，为所选属性赋予的具体样式值。

2.2 示例

p {
    color: blue;
    font-size: 16px;
}

上述规则将所有<p>元素的文本颜色设置为蓝色，字体大小设置为16像素。

三、CSS选择器

3.1 类型选择器

定义：根据HTML元素的类型选择元素。
示例：p选择所有段落元素。

3.2 类选择器

定义：使用HTML元素的class属性选择元素，类选择器前有一个点（.）。
示例：.myClass选择所有class属性为myClass的元素。

3.3 ID选择器

定义：使用HTML元素的id属性选择元素，ID选择器前有一个井号（#），且ID在页面中唯一。
示例：#myId选择ID为myId的元素。

3.4 属性选择器

定义：根据元素的属性及属性值选择元素。
示例：[type="text"]选择所有type属性值为text的input元素。

3.5 后代选择器

定义：选择某元素内部的所有指定后代元素。
示例：div p选择所有位于<div>元素内的<p>元素。

3.6 伪类选择器

定义：选择元素的特定状态，如鼠标悬停、点击等。
示例：a:hover改变鼠标悬停在链接上的样式。

3.7 伪元素选择器

定义：选择元素的一部分内容，如首字母、首行等。
示例：p::first-line改变段落首行的样式。

四、实践应用

4.1 编写一个简单的CSS示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器示例</title>
    <style>
        /* 类型选择器 */
        p {
            color: green;
        }
        /* 类选择器 */
        .highlight {
            background-color: yellow;
        }
        /* ID选择器 */
        #unique {
            font-weight: bold;
        }
        /* 后代选择器 */
        div p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>这是一个普通的段落。</p>
    <p class="highlight">这是一个高亮显示的段落。</p>
    <div>
        <p id="unique">这是一个加粗显示的段落，位于一个div内。</p>
    </div>
</body>
</html>

五、总结

CSS是网页设计中不可或缺的一部分，用于控制网页的外观和布局。
样式规则由选择器、属性和属性值组成。
选择器类型多样，包括类型选择器、类选择器、ID选择器、属性选择器、后代选择器、伪类选择器和伪元素选择器。
通过实践应用，可以更好地理解和掌握CSS选择器的使用。

创建css样式表的三种方法

上一篇：Wordpress建站教程:给图片添加CSS样式
下一篇：asp.net动态添加css样式表文件

CSS入门:样式规则与选择器

一、CSS简介

1.1 什么是CSS？

1.2 CSS如何工作？

二、CSS样式规则

2.1 基本结构

2.2 示例

三、CSS选择器

3.1 类型选择器

3.2 类选择器

3.3 ID选择器

3.4 属性选择器

3.5 后代选择器

3.6 伪类选择器

3.7 伪元素选择器

四、实践应用

4.1 编写一个简单的CSS示例

五、总结

相关推荐

django留言板_留言板html好看的模板

你还在手动筛选吗?filter函数才是多条件筛选的yyds!

一次分享给你29个PHP基础常用类助力你快速提升

一篇文章轻松掌握VLookup、XLookup与Filter函数

软件工程培训，选择线上还是线下呢?

连南举办2024年软件正版化工作联席会议暨正版软件培训班

初学ThinkPHP(一):用TP6+LayUI实现数据表格

新函数FILTER函数_filter函数的作用

营商在上海_营商上海数字科技有限公司

Excel筛选也智能?一个FILTER函数就搞定!