第7节课：CSS基础与选择器——打造网页视觉魅力

学问小小谢

已于 2024-07-29 14:07:31 修改

阅读量680

点赞数 7

分类专栏： HTML学习文章标签： css html 学习

于 2024-07-29 14:06:56 首次发布

本文链接：https://blog.csdn.net/XWXXX666/article/details/140769827

版权

HTML学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS（层叠样式表）是网页设计中的核心语言之一，它负责网页的布局和视觉表现。通过CSS，我们可以控制元素的字体、颜色、间距、布局等属性，使网页更加美观和专业。本节课将介绍CSS的基本作用、语法以及常用的选择器，帮助你迈出成为网页设计师的第一步。

CSS的作用

CSS的主要作用是将网页的内容（HTML）与表现分离，使得网页的维护和更新变得更加容易。它提供了丰富的属性来设置元素的样式，包括但不限于：

字体样式（如字体大小、颜色、粗细）
背景和颜色
边框和轮廓
布局（如盒模型、Flexbox、Grid）
响应式设计
动画和过渡效果

CSS的基本语法

CSS规则由两个主要部分组成：选择器和声明块。选择器用于选择要样式化的HTML元素，而声明块包含了一系列的属性和值。

/* 元素选择器 */
p {
    color: blue;
    font-size: 16px;
}

/* 类选择器 */
.highlight {
    background-color: yellow;
}

/* ID选择器 */
#main-header {
    font-weight: bold;
}

选择器详解

元素选择器

元素选择器是最基本的选择器，它直接通过HTML元素的标签名来选择元素。

h1 {
    color: red;
}

上述CSS规则将所有<h1>标签的文本颜色设置为红色。

类选择器

类选择器允许我们为元素指定一个类名，并通过这个类名来应用样式。类名通过class属性在HTML中指定。

/* CSS */
.button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
}

/* HTML */
<button class="button">点击我</button>

ID选择器

ID选择器通过元素的ID来选择一个唯一的元素。ID通过id属性在HTML中指定，一个页面中每个ID应该是唯一的。

/* CSS */
#main-content {
    margin: 0 auto;
    width: 80%;
}

/* HTML */
<div id="main-content">
    <!-- 内容 -->
</div>

实践：使用CSS美化一个简单的网页

让我们通过一个示例来展示如何使用CSS来美化一个包含标题、段落和按钮的简单网页。

<!DOCTYPE html>
<html>
<head>
    <title>CSS示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        header {
            background: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        #main-title {
            font-size: 2.5em;
        }
        .content {
            margin: 20px;
        }
        .button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <header>
        <h1 id="main-title">欢迎来到学问小小谢的网站</h1>
    </header>
    <div class="content">
        <p>这是一个段落，展示了CSS如何改变文本的样式。</p>
        <button class="button">点击我</button>
    </div>
</body>
</html>