优秀的编程知识分享平台

网站首页 > 技术文章 正文

CSS入门:样式规则与选择器（css样式规则定义8种类别）

nanyue 2025-06-15 18:14:06 技术文章 2 ℃

一、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选择器的使用。

Tags：

猜你喜欢

最近发表
标签列表