Html教程

Appearance

HTML CSS ​

什么是 CSS ​

CSS（Cascading Style Sheets，层叠样式表）是用来描述HTML文档样式和布局的语言。它控制网页的外观，包括颜色、字体、间距、布局等视觉效果。

为什么需要 CSS ​

HTML vs HTML + CSS ​

纯HTML（无样式）：

html
<h1>欢迎来到我的网站</h1>
<p>这是一个段落文本。</p>
<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>

HTML + CSS（有样式）：

html
<style>
h1 {
    color: #007acc;
    font-size: 2.5em;
    text-align: center;
}

p {
    font-size: 1.1em;
    line-height: 1.6;
    color: #333;
}

ul {
    background-color: #f0f8ff;
    padding: 20px;
    border-radius: 8px;
}

li {
    margin-bottom: 8px;
    color: #666;
}
</style>

<h1>欢迎来到我的网站</h1>
<p>这是一个段落文本。</p>
<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>

CSS 的三种使用方式 ​

1. 内联样式（Inline CSS） ​

直接在HTML元素上使用 style 属性：

html
<h1 style="color: red; font-size: 24px;">红色标题</h1>
<p style="background-color: yellow; padding: 10px;">黄色背景段落</p>
<div style="border: 2px solid blue; width: 200px; height: 100px;">蓝色边框盒子</div>

优点：

  • 优先级最高
  • 针对特定元素的快速样式

缺点：

  • 不利于维护
  • 代码重复
  • HTML和CSS混合

2. 内部样式表（Internal CSS） ​

在HTML文档的 <head> 部分使用 <style> 标签：

html
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        h1 {
            color: #333;
            border-bottom: 2px solid #007acc;
            padding-bottom: 10px;
        }
        
        p {
            line-height: 1.6;
            color: #666;
        }
        
        .highlight {
            background-color: #ffeb3b;
            padding: 2px 4px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>我的文章标题</h1>
        <p>这是文章的内容，包含一些<span class="highlight">重要信息</span>。</p>
    </div>
</body>
</html>

优点：

  • 样式集中管理
  • 适合单页面应用
  • 无需额外文件

缺点：

  • 不能跨页面共享
  • 增加HTML文件大小

3. 外部样式表（External CSS） ​

将CSS代码保存在独立的 .css 文件中，通过 <link> 标签引入：

styles.css 文件：

css
/* 全局样式 */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #333;
}

/* 容器样式 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 标题样式 */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    color: #2c3e50;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2rem;
    margin-bottom: 0.8rem;
}

/* 段落样式 */
p {
    margin-bottom: 1rem;
}

/* 链接样式 */
a {
    color: #007acc;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #005fa3;
    text-decoration: underline;
}

/* 按钮样式 */
.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #007acc;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #005fa3;
}

/* 卡片样式 */
.card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 0 10px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.6rem;
    }
}

HTML 文件：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>欢迎来到我的网站</h1>
        
        <div class="card">
            <h2>关于我们</h2>
            <p>我们是一家专业的web开发公司，致力于为客户提供高质量的网站解决方案。</p>
            <a href="contact.html" class="btn">联系我们</a>
        </div>
        
        <div class="card">
            <h2>我们的服务</h2>
            <p>提供网站设计、开发、维护等全方位服务。</p>
            <a href="services.html" class="btn">了解更多</a>
        </div>
    </div>
</body>
</html>

优点：

  • 多页面共享样式
  • 代码分离，便于维护
  • 缓存机制提升性能
  • 团队协作友好

缺点：

  • 需要额外的HTTP请求
  • 初学者理解成本稍高

CSS 基本语法 ​

语法结构 ​

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

基本示例 ​

css
/* 元素选择器 */
h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

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

/* ID选择器 */
#header {
    width: 100%;
    height: 60px;
    background-color: #333;
}

/* 多个选择器 */
h1, h2, h3 {
    font-family: Arial, sans-serif;
    color: #333;
}

/* 后代选择器 */
.container p {
    line-height: 1.6;
    margin-bottom: 1em;
}

常用 CSS 选择器 ​

1. 基本选择器 ​

html
<style>
/* 元素选择器 */
p {
    color: #333;
}

/* 类选择器 */
.warning {
    color: red;
    font-weight: bold;
}

/* ID选择器 */
#main-title {
    font-size: 2em;
    text-align: center;
}

/* 通用选择器 */
* {
    margin: 0;
    padding: 0;
}
</style>

<h1 id="main-title">主标题</h1>
<p>普通段落</p>
<p class="warning">警告信息</p>

2. 组合选择器 ​

html
<style>
/* 后代选择器 */
.article p {
    text-indent: 2em;
}

/* 子选择器 */
.menu > li {
    display: inline-block;
}

/* 相邻兄弟选择器 */
h2 + p {
    font-weight: bold;
}

/* 通用兄弟选择器 */
h2 ~ p {
    margin-left: 20px;
}
</style>

<article class="article">
    <h2>文章标题</h2>
    <p>第一段（相邻兄弟）</p>
    <p>第二段（通用兄弟）</p>
    <div>
        <p>嵌套段落（后代）</p>
    </div>
</article>

<ul class="menu">
    <li>菜单项1</li>
    <li>菜单项2</li>
</ul>

3. 伪类选择器 ​

html
<style>
/* 链接状态 */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }

/* 表单状态 */
input:focus {
    border: 2px solid #007acc;
    outline: none;
}

input:disabled {
    background-color: #f0f0f0;
    cursor: not-allowed;
}

/* 结构伪类 */
li:first-child {
    font-weight: bold;
}

li:last-child {
    border-bottom: none;
}

li:nth-child(odd) {
    background-color: #f9f9f9;
}

li:nth-child(even) {
    background-color: #ffffff;
}
</style>

<a href="https://example.com">测试链接</a>

<form>
    <input type="text" placeholder="正常输入框">
    <input type="text" disabled placeholder="禁用输入框">
</form>

<ul>
    <li>第一项（加粗）</li>
    <li>第二项（白色背景）</li>
    <li>第三项（灰色背景）</li>
    <li>第四项（白色背景，无下边框）</li>
</ul>

常用 CSS 属性 ​

1. 文本属性 ​

html
<style>
.text-demo {
    color: #333;                    /* 文字颜色 */
    font-size: 16px;               /* 字体大小 */
    font-family: Arial, sans-serif; /* 字体族 */
    font-weight: bold;             /* 字体粗细 */
    font-style: italic;            /* 字体样式 */
    text-align: center;            /* 文字对齐 */
    text-decoration: underline;    /* 文字装饰 */
    line-height: 1.6;             /* 行高 */
    letter-spacing: 1px;          /* 字母间距 */
    word-spacing: 2px;            /* 单词间距 */
    text-transform: uppercase;     /* 文字转换 */
    text-indent: 2em;             /* 首行缩进 */
}
</style>

<p class="text-demo">这是一个文本样式示例</p>

2. 背景属性 ​

html
<style>
.bg-demo1 {
    background-color: #f0f8ff;
    padding: 20px;
    margin-bottom: 10px;
}

.bg-demo2 {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 200px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-demo3 {
    background: linear-gradient(45deg, #007acc, #00d4ff);
    padding: 20px;
    color: white;
    text-align: center;
}
</style>

<div class="bg-demo1">纯色背景</div>
<div class="bg-demo2">图片背景</div>
<div class="bg-demo3">渐变背景</div>

3. 边框属性 ​

html
<style>
.border-demo1 {
    border: 2px solid #007acc;
    padding: 15px;
    margin-bottom: 10px;
}

.border-demo2 {
    border-top: 3px dashed red;
    border-right: 2px dotted green;
    border-bottom: 1px solid blue;
    border-left: 4px double orange;
    padding: 15px;
    margin-bottom: 10px;
}

.border-demo3 {
    border: 2px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
}

.border-demo4 {
    border: none;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background-color: #007acc;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

<div class="border-demo1">统一边框</div>
<div class="border-demo2">不同边框</div>
<div class="border-demo3">圆角边框</div>
<div class="border-demo4">圆形</div>

4. 盒子模型属性 ​

html
<style>
.box-demo {
    width: 200px;
    height: 100px;
    padding: 20px;        /* 内边距 */
    margin: 20px;         /* 外边距 */
    border: 2px solid #007acc;
    background-color: #f0f8ff;
}

.box-sizing-demo {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid #ff6b6b;
    background-color: #ffe0e0;
    box-sizing: border-box;  /* 边框盒模型 */
    margin-top: 20px;
}
</style>

<div class="box-demo">标准盒模型</div>
<div class="box-sizing-demo">边框盒模型</div>

布局相关 ​

1. display 属性 ​

html
<style>
.display-demo {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f0f8ff;
    border: 1px solid #007acc;
}

.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; width: 150px; }
.none { display: none; }
</style>

<div class="display-demo block">块级元素 (block)</div>
<span class="display-demo inline">行内元素 (inline)</span>
<span class="display-demo inline">行内元素 (inline)</span>
<div class="display-demo inline-block">行内块元素 (inline-block)</div>
<div class="display-demo inline-block">行内块元素 (inline-block)</div>
<div class="display-demo none">隐藏元素 (none)</div>

2. position 属性 ​

html
<style>
.position-container {
    position: relative;
    height: 200px;
    border: 2px solid #ddd;
    margin-bottom: 20px;
}

.static {
    position: static;
    background-color: #e3f2fd;
    padding: 10px;
}

.relative {
    position: relative;
    top: 10px;
    left: 20px;
    background-color: #f3e5f5;
    padding: 10px;
}

.absolute {
    position: absolute;
    top: 50px;
    right: 20px;
    background-color: #e8f5e8;
    padding: 10px;
}

.fixed {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: #fff3e0;
    padding: 10px;
    border: 1px solid #ff9800;
}
</style>

<div class="position-container">
    <div class="static">静态定位 (static)</div>
    <div class="relative">相对定位 (relative)</div>
    <div class="absolute">绝对定位 (absolute)</div>
</div>

<div class="fixed">固定定位 (fixed)</div>

3. Flexbox 布局 ​

html
<style>
.flex-container {
    display: flex;
    height: 100px;
    border: 2px solid #007acc;
    margin-bottom: 20px;
    padding: 10px;
}

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.flex-direction-column { flex-direction: column; height: 150px; }

.flex-item {
    background-color: #f0f8ff;
    border: 1px solid #007acc;
    padding: 10px;
    margin: 5px;
    text-align: center;
}

.flex-grow { flex: 1; }
</style>

<div class="flex-container justify-center align-center">
    <div class="flex-item">居中对齐</div>
    <div class="flex-item">项目2</div>
</div>

<div class="flex-container justify-between align-center">
    <div class="flex-item">左侧</div>
    <div class="flex-item">中间</div>
    <div class="flex-item">右侧</div>
</div>

<div class="flex-container">
    <div class="flex-item">固定宽度</div>
    <div class="flex-item flex-grow">自适应宽度</div>
    <div class="flex-item">固定宽度</div>
</div>

响应式设计 ​

媒体查询 ​

html
<style>
.responsive-demo {
    background-color: #f0f8ff;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

/* 桌面端样式 */
@media screen and (min-width: 1024px) {
    .responsive-demo {
        background-color: #e8f5e8;
        font-size: 24px;
    }
    .responsive-demo::before {
        content: "桌面端 - ";
    }
}

/* 平板端样式 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .responsive-demo {
        background-color: #fff3e0;
        font-size: 20px;
    }
    .responsive-demo::before {
        content: "平板端 - ";
    }
}

/* 移动端样式 */
@media screen and (max-width: 767px) {
    .responsive-demo {
        background-color: #fce4ec;
        font-size: 16px;
    }
    .responsive-demo::before {
        content: "移动端 - ";
    }
}
</style>

<div class="responsive-demo">
    调整浏览器窗口大小查看效果
</div>

实际应用示例 ​

完整的网页样式 ​

html
<!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>
        /* 全局重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
        }
        
        /* 头部样式 */
        header {
            background: linear-gradient(135deg, #007acc, #00d4ff);
            color: white;
            padding: 2rem 0;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        header h1 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
            font-weight: 700;
        }
        
        header p {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        /* 导航样式 */
        nav {
            background-color: white;
            padding: 1rem 0;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        
        .nav-menu {
            display: flex;
            justify-content: center;
            list-style: none;
            gap: 2rem;
        }
        
        .nav-menu a {
            color: #333;
            text-decoration: none;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: 5px;
            transition: all 0.3s ease;
        }
        
        .nav-menu a:hover {
            background-color: #007acc;
            color: white;
        }
        
        /* 主要内容 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }
        
        .content-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 2rem;
            margin-top: 2rem;
        }
        
        /* 文章样式 */
        .article {
            background: white;
            border-radius: 10px;
            padding: 2rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            margin-bottom: 2rem;
        }
        
        .article h2 {
            color: #007acc;
            margin-bottom: 1rem;
            font-size: 1.8rem;
        }
        
        .article p {
            margin-bottom: 1rem;
            line-height: 1.8;
        }
        
        /* 侧边栏样式 */
        .sidebar {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        .widget {
            background: white;
            border-radius: 10px;
            padding: 1.5rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .widget h3 {
            color: #333;
            margin-bottom: 1rem;
            font-size: 1.3rem;
            border-bottom: 2px solid #007acc;
            padding-bottom: 0.5rem;
        }
        
        .widget ul {
            list-style: none;
        }
        
        .widget li {
            padding: 0.5rem 0;
            border-bottom: 1px solid #eee;
        }
        
        .widget li:last-child {
            border-bottom: none;
        }
        
        .widget a {
            color: #666;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .widget a:hover {
            color: #007acc;
        }
        
        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            background-color: #007acc;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-weight: 500;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }
        
        .btn:hover {
            background-color: #005fa3;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .btn-secondary {
            background-color: #6c757d;
        }
        
        .btn-secondary:hover {
            background-color: #545b62;
        }
        
        /* 脚部样式 */
        footer {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 2rem 0;
            margin-top: 4rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .content-grid {
                grid-template-columns: 1fr;
            }
            
            .nav-menu {
                flex-direction: column;
                gap: 0;
            }
            
            .nav-menu a {
                display: block;
                text-align: center;
                padding: 1rem;
                border-bottom: 1px solid #eee;
            }
            
            header h1 {
                font-size: 2rem;
            }
            
            .container {
                padding: 1rem;
            }
            
            .article {
                padding: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>我的个人网站</h1>
        <p>欢迎来到我的数字世界</p>
    </header>
    
    <nav>
        <div class="nav-container">
            <ul class="nav-menu">
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#services">服务</a></li>
                <li><a href="#portfolio">作品</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </div>
    </nav>
    
    <div class="container">
        <div class="content-grid">
            <main>
                <article class="article">
                    <h2>欢迎来到我的博客</h2>
                    <p>这里是主要内容区域。我会在这里分享关于web开发、设计和技术的文章。通过CSS，我们可以让这个页面变得美观和易于使用。</p>
                    <p>CSS是web开发中不可或缺的技术，它让我们能够控制网页的外观和布局。从简单的颜色改变到复杂的动画效果，CSS都能胜任。</p>
                    <a href="#" class="btn">阅读更多</a>
                </article>
                
                <article class="article">
                    <h2>CSS的重要性</h2>
                    <p>在现代web开发中，CSS扮演着至关重要的角色。它不仅仅是让网页变得漂亮，更是提升用户体验的关键工具。</p>
                    <p>通过合理的CSS设计，我们可以创建响应式布局，确保网站在各种设备上都能完美显示。</p>
                    <a href="#" class="btn btn-secondary">了解更多</a>
                </article>
            </main>
            
            <aside class="sidebar">
                <div class="widget">
                    <h3>最新文章</h3>
                    <ul>
                        <li><a href="#">HTML基础教程</a></li>
                        <li><a href="#">CSS布局技巧</a></li>
                        <li><a href="#">JavaScript入门</a></li>
                        <li><a href="#">响应式设计原理</a></li>
                        <li><a href="#">前端性能优化</a></li>
                    </ul>
                </div>
                
                <div class="widget">
                    <h3>标签云</h3>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">JavaScript</a></li>
                        <li><a href="#">React</a></li>
                        <li><a href="#">Vue.js</a></li>
                    </ul>
                </div>
                
                <div class="widget">
                    <h3>关于作者</h3>
                    <p>我是一名前端开发者，专注于创建美观且功能强大的web应用。欢迎通过下面的方式联系我。</p>
                    <a href="#" class="btn">联系我</a>
                </div>
            </aside>
        </div>
    </div>
    
    <footer>
        <p>&copy; 2024 我的个人网站. 所有权利保留.</p>
    </footer>
</body>
</html>

常见错误和最佳实践 ​

1. 选择器使用错误 ​

css
/* 错误：过度使用ID选择器 */
#header #nav #menu #item1 {
    color: red;
}

/* 正确：使用类选择器 */
.main-nav .menu-item {
    color: red;
}

2. 样式优先级问题 ​

css
/* 错误：滥用 !important */
.text {
    color: red !important;
}

/* 正确：通过合理的选择器优先级 */
.container .text {
    color: red;
}

3. 响应式设计遗漏 ​

css
/* 错误：没有考虑移动端 */
.container {
    width: 1200px;
}

/* 正确：响应式设计 */
.container {
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 10px;
    }
}

小结 ​

  • CSS用于控制HTML的样式和布局
  • 三种使用方式：内联、内部、外部样式表
  • 外部样式表是最推荐的方式
  • 掌握基本选择器和常用属性
  • 了解盒子模型和布局原理
  • 使用媒体查询实现响应式设计
  • 保持代码整洁和语义化
  • 考虑性能和维护性

下一章我们将学习如何在HTML中使用图像。

Copyright © 2025-2026 京公网安备 11010102000001号 京ICP备2024078128号-1