Web知识库

3.1 CSS简介

CSS的作用

CSS（Cascading Style Sheets，层叠样式表）是一种用来表现HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的计算机语言。CSS描述了如何将结构化文档（例如HTML文档或XML应用）呈现为屏幕、纸质、语音或其他媒体。简单来说，CSS负责网页的美观和布局设计，它可以让网页元素的样式（如字体、颜色、间距等）与内容分离，使得网页的外观更加美观、一致，并且易于维护和更新。

引入CSS的方式

CSS可以通过多种方式引入到HTML文档中，主要包括以下几种：

内联样式（Inline Styles）：直接在HTML元素中使用style属性来定义样式。

<p style="color: blue; font-size: 16px;">这是一个内联样式的段落。</p>

内部样式表（Internal Style Sheet）：在HTML文档的<head>部分使用<style>标签来定义样式。

<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>这是一个内部样式表的段落。</p>
</body>

外部样式表（External Style Sheet）：使用<link>标签链接到外部CSS文件。

<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>这是一个外部样式表的段落。</p>
</body>

在styles.css文件中：

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

导入样式表（Imported Style Sheet）：在CSS文件中使用@import规则来导入其他CSS文件。

@import url("styles.css");

这些方法可以根据项目需求和设计复杂度来选择使用。通常，推荐使用外部样式表，因为它可以将样式与HTML内容完全分离，便于维护和重用。

3.2 CSS选择器

基本选择器

CSS选择器用于选择需要样式化的HTML元素。基本选择器包括：

类型选择器（Type Selector）：根据元素类型选择元素，如h1、p等。
类选择器（Class Selector）：根据元素的class属性值选择元素，使用.前缀，如.classname。
ID选择器（ID Selector）：根据元素的id属性值选择元素，使用#前缀，如#idname。
通用选择器（Universal Selector）：选择文档中的所有元素，使用*。
分组选择器（Grouping Selector）：同时选择多个选择器匹配的元素，使用,分隔，如h1, h2, h3。属性选择器和伪类属性选择器可以根据元素的属性和属性值来选择元素，如[attribute="value"]。伪类用于选择特定状态的元素，如链接的悬停状态或元素的第一个子元素，使用:前缀，如:hover、:first-child等。

/* 属性选择器 */
input[type="text"] {
    border: 1px solid black;
}
/* 伪类选择器 */
a:hover {
    color: red;
}
/* 属性选择器和伪类的组合 */
a[href^="http"]:hover {
    text-decoration: underline;
}

3.3 字体和文本样式

字体设置

CSS提供了多种字体属性，可以用来设置文本的字体样式。常用的字体属性包括：

font-family：定义文本的字体族。
font-size：定义文本的字体大小。
font-weight：定义文本的字体粗细。
font-style：定义文本的字体风格，如斜体。

p {
    font-family: "Arial", sans-serif;
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
}

文本对齐和修饰

文本样式还包括对齐和修饰等属性：

text-align：设置文本的水平对齐方式。
line-height：设置文本的行高。
text-decoration：设置文本的装饰，如下划线、删除线等。
text-transform：控制文本的大小写。

h1 {
    text-align: center;
    line-height: 1.5;
}
a {
    text-decoration: none;
}
.title {
    text-transform: uppercase;
}

这些属性可以帮助您控制文本的外观，使其更加符合设计要求。

3.4 盒模型和布局

盒模型基础

在CSS中，每个元素都被视为一个矩形盒子，这个盒子由以下几个部分组成：

内容（Content）：盒子的实际内容，包括文本和图像。
内边距（Padding）：内容与边框之间的空间。
边框（Border）：围绕内容和内边距的边界。
外边距（Margin）：盒子与其他元素之间的空间。 CSS盒模型对于布局和定位元素至关重要。可以通过padding、border和margin属性来控制盒模型的各个部分。

.box {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

常用布局方法

CSS提供了多种布局方法，包括传统的基于浮动的布局和现代的Flexbox和Grid布局。

浮动布局（Float Layout）：使用float属性和clear属性来控制元素的浮动和清除浮动。
定位布局（Positioning Layout）：使用position属性（如absolute、relative、fixed等）来定位元素。
Flexbox布局（Flexible Box Layout）：使用display: flex;来创建弹性盒子，可以轻松实现垂直居中、水平居中等复杂布局。
Grid布局（CSS Grid Layout）：使用display: grid;来创建网格容器，可以更高效地控制行和列的布局。

/* Flexbox 布局 */
.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Grid 布局 */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
}

3.5 CSS3新特性

圆角和阴影

CSS3引入了border-radius属性，用于创建圆角边框。box-shadow属性用于给元素添加阴影效果。

.rounded-box {
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

过渡和动画

CSS3的transition属性允许元素在状态改变时平滑过渡，而animation属性则可以创建更复杂的动画效果。

.transition-box {
    transition: transform 0.5s ease-in-out;
}
.animated-box {
    animation: rotate 2s infinite linear;
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

3.6 小结

本章介绍了CSS的基础知识，包括选择器、字体和文本样式、盒模型和布局，以及CSS3的新特性。通过本章的学习，您应该能够理解如何使用CSS来美化HTML页面，包括设置字体、文本样式、布局和添加动画效果。下一章将介绍JavaScript基础，让您能够为网页添加交互性。