CSS HTML页面中的（大部分）元素，用于样式化

在本文中，我们将介绍如何使用CSS样式化HTML页面中的各种元素。CSS是一种用于控制网页外观的样式表语言，它能够改变文本、图片、背景、边框、尺寸等元素的样式。

阅读更多：CSS 教程

使用CSS选择器选择元素

要样式化一个HTML页面，我们首先需要选择要样式化的元素。CSS使用选择器来选择特定的HTML元素。最常用的选择器有：

元素选择器：通过元素名称选择元素。
类选择器：通过元素的类名选择元素。
ID选择器：通过元素的ID选择元素。
属性选择器：通过元素的属性选择元素。

下面是一些使用不同类型选择器的示例：

/* 元素选择器 */
p {
    color: blue;
}

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

/* ID选择器 */
#my-element {
    font-size: 20px;
}

/* 属性选择器 */
input[type="text"] {
    border: 1px solid gray;
}

更改文本样式

CSS可以用来改变文本的样式，包括字体、大小、颜色、对齐方式等。

/* 字体样式 */
h1 {
    font-family: Arial, sans-serif;
}

/* 字体大小 */
p {
    font-size: 16px;
}

/* 字体颜色 */
strong {
    color: red;
}

/* 文本对齐方式 */
p {
    text-align: center;
}

美化背景

CSS可以让我们改变元素的背景颜色、图片和透明度。

/* 背景颜色 */
body {
    background-color: lightgray;
}

/* 背景图片 */
body {
    background-image: url("background.jpg");
}

/* 背景透明度 */
div {
    background-color: rgba(0, 0, 0, 0.5);
}

边框和尺寸

CSS可以控制元素的边框样式、颜色和尺寸。

/* 边框样式 */
div {
    border-style: solid;
}

/* 边框颜色 */
div {
    border-color: red;
}

/* 边框尺寸 */
div {
    border-width: 2px;
}

/* 尺寸 */
img {
    width: 200px;
    height: 200px;
}

对表格进行样式化

我们可以使用CSS对表格进行样式化，包括改变表格的颜色、边框、宽度和对齐方式。

/* 表格颜色 */
table {
    background-color: lightblue;
}

/* 表格边框 */
td {
    border: 1px solid gray;
}

/* 表格宽度 */
table {
    width: 100%;
}

/* 表格对齐方式 */
th {
    text-align: center;
}

创建动画效果

CSS可以通过关键帧动画（keyframes）创建各种动画效果。

/* 关键帧动画 */
@keyframes rotating {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 应用动画效果 */
div {
    animation-name: rotating;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}