CSS

CSS 概述

CSS 是 Cascading Style Sheets 的缩写，中文名称为“层叠样式表”。CSS 用于控制 HTML 元素的外观和布局，例如字体、颜色、边框、间距、背景及元素位置等。

HTML 负责组织页面结构，CSS 负责设置页面样式。将结构与样式分离，可以提高代码的可读性和复用性。

在 HTML 中使用 CSS

CSS 有三种常见使用方式。

行内样式

通过元素的 style 属性直接编写样式：

<input type="text" style="color: red;" />

行内样式只作用于当前元素，适合少量、临时的样式设置，不利于大规模复用。

内部样式表

在 HTML 页面的 <head> 中使用 <style> 标签：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>内部样式表示例</title>
    <style>
        input {
            color: red;
        }
    </style>
</head>
<body>
    <input type="text" />
</body>
</html>

内部样式表通常只作用于当前 HTML 页面。

外部样式表

将 CSS 代码保存到独立文件中，再通过 <link> 标签引入：

<link rel="stylesheet" type="text/css" href="css 文件地址" />

外部样式表可以被多个页面复用，是实际开发中最常见的方式。

CSS 基本语法

CSS 规则由选择器和声明块组成：

选择器 {
    属性名: 属性值;
    属性名: 属性值;
}

选择器用于定位需要设置样式的元素，声明块用于描述具体样式。多条声明之间使用分号分隔。

CSS 选择器

标签选择器

标签选择器会选中页面中所有同名标签：

input {
    color: red;
}

ID 选择器

每个 HTML 元素都可以设置 id 属性。ID 选择器使用 # 开头：

#box {
    width: 300px;
    height: 300px;
}

同一页面中的 id 应保持唯一。

类选择器

类选择器通过元素的 class 属性匹配元素，使用 . 开头：

.btn {
    width: 200px;
    height: 40px;
}

同一个类可以应用于多个元素，一个元素也可以同时使用多个类。

后代选择器

后代选择器用于选中某个元素内部符合条件的后代元素：

.box input {
    border-radius: 5px;
}

这段样式会选中类名为 box 的元素内部所有 input 元素。

分组选择器

当多个选择器使用相同样式时，可以使用逗号合并：

h1,
h2,
h3 {
    color: blue;
}

伪类选择器

伪类用于描述元素的特定状态。超链接常用的伪类如下：

:link：尚未访问的链接。
:visited：已经访问的链接。
:hover：鼠标指针悬停在元素上。
:active：元素被激活，例如鼠标按下但尚未松开。

a:link {
    color: red;
}

a:visited {
    color: gray;
}

a:hover {
    color: green;
}

a:active {
    color: blue;
}

这些写法属于伪类选择器，而不是伪元素选择器。伪元素通常使用 ::before、::after 等形式。

常用样式属性

尺寸与间距

width：元素宽度。
height：元素高度。
margin：外边距。
padding：内边距。

颜色与背景

color：文字颜色。
background-color：背景颜色。
background-image：背景图片。
background-size：背景图片尺寸。
background-repeat：背景图片是否重复。

字体与文本

font-size：字体大小。
font-family：字体系列。
font-weight：字体粗细。
text-align：文本水平对齐方式。

边框与效果

border：边框。
border-radius：圆角。
box-shadow：阴影。
cursor：鼠标指针样式。

案例一：按钮面板

CSS 文件

body {
    /* 设置页面背景图片 */
    background-image: url(img/fish.jpg);
    background-size: 1000px;
    background-repeat: no-repeat;
}

#box {
    width: 300px;
    height: 300px;
    margin: 50px auto;
    background-color: #cccccc80;
    border-radius: 10px;
    text-align: center;
}

.btn {
    width: 200px;
    height: 40px;
    margin-top: 20px;
    border: 0;
    border-radius: 5px;
    background-color: #cc33cc;
    color: white;
    font-family: 华文行楷;
    font-size: 30px;
    font-weight: bold;
}

.btn:hover {
    background-color: #cc66cc;
    cursor: pointer;
}

.btn:active {
    background-color: #cc99cc;
}

HTML 文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>按钮面板</title>
    <link rel="stylesheet" type="text/css" href="css2.css" />
</head>
<body>
    <div id="box">
        <img src="img/dog.png" width="100" height="150" alt="小狗" />
        <button class="btn">按钮1</button>
        <button class="btn">按钮2</button>
    </div>
</body>
</html>

案例二：登录界面

CSS 文件

.box {
    width: 400px;
    height: 300px;
    margin: 100px auto;
    padding-top: 50px;
    border-radius: 10px;
    background-color: #6699ff;
    box-shadow: 3px 3px 10px #006666;
    text-align: center;
}

.title {
    color: #9900cc;
    font-size: 20px;
    font-weight: bold;
}

.inp {
    margin-top: 20px;
}

input {
    width: 300px;
    height: 35px;
    border: 0;
    border-radius: 5px;
}

.btn {
    margin-top: 20px;
    background-color: #cc99cc;
    color: white;
}

.btn:hover {
    background-color: #cc33cc;
    cursor: pointer;
}

.name {
    width: 250px;
    padding-left: 42px;
    background-image: url("img/name.jpg");
    background-size: 40px;
    background-repeat: no-repeat;
}

.pwd {
    width: 250px;
    padding-left: 42px;
    background-image: url("img/pwd.jpg");
    background-size: 40px;
    background-repeat: no-repeat;
}

HTML 文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>登录界面</title>
    <link rel="stylesheet" type="text/css" href="css3.css" />
</head>
<body>
    <div class="box">
        <div class="title">登&nbsp;&nbsp;录&nbsp;&nbsp;界&nbsp;&nbsp;面</div>
        <div class="inp">
            <input type="text" class="name" placeholder="请输入用户名" />
        </div>
        <div class="inp">
            <input type="password" class="pwd" placeholder="请输入密码" />
        </div>
        <div class="inp">
            <input type="submit" class="btn" value="提交" />
        </div>
    </div>
</body>
</html>