初识 CSS

最新推荐文章于 2024-05-26 12:07:30 发布

前端小目标

最新推荐文章于 2024-05-26 12:07:30 发布

阅读量552

点赞数 19

分类专栏： # CSS 文章标签：前端 css

本文链接：https://blog.csdn.net/qq_30094821/article/details/136467808

版权

CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

每个网站都希望能在用户面前呈现最佳状态，CSS 正是那个让网页从平淡无奇到个性十足大变身的魔法。

1. 基础知识

什么是 CSS

CSS 全称 Cascading Style Sheets，即层叠样式表。

它是一种用来表现 HTML（标准通用标记语言下的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

简单来说，CSS 可以设定网页中元素的字体、颜色、间距、布局及许多其他外观方面的属性。

CSS 与 HTML 结合，能够让网页的结构和表现分离，提高内容的可访问性，同时减少重复的结构内容。

为何要使用 CSS

首先，它能提升网页的美观度，一个好的设计可以吸引用户的眼球，提升用户体验。

其次，CSS 可以提高网页的可维护性，通过将样式信息存储在单独的 .css 文件中，我们可以轻松地更改网站的整体风格而不必逐个修改每个页面。

此外，CSS 优化了加载时间，因为样式信息仅需加载一次就可以在多个页面中使用。

如何使用 CSS

使用 CSS 的基本方法是在 HTML 文档中引入样式表。可以通过以下3种方式实现。

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

内部样式表：在HTML文档的 head 标签中使用 style 标签定义样式。

外部样式表：创建一个单独的 CSS 文件，并通过HTML的 link 标签引入。

2. 示例演示

以下是一个简单的 HTML 和 CSS 结合的示例，展示了如何使用外部样式表来美化一个简单的个人介绍页面。

<!DOCTYPE html>
<html lang="en">
<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="profile">
        <h1>小白的个人介绍</h1>
        <p>你好！我是小白，一名热爱前端开发的设计师。</p>
        <p>欢迎访问我的个人网站。</p>
    </div>
</body>
</html>

在 styles.css 文件中定义样式：

body {
  background-color: #f0f0f2;
  margin: 0;
  padding: 0;
}
.profile {
  margin: 50px auto;
  width: 80%;
  max-width: 600px;
  background: #fff;
  padding: 20px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);
}
.profile h1 {
  color: #f00;
  font-size: 24px;
}
.profile p {
  color: #666;
  line-height: 1.6;
}

在这个例子中，创建了一个简单的个人介绍页面，并通过外部样式 styles.css 添加了字体、背景色、边距、内边距和盒阴影等样式。

这样的分离使得 HTML 结构清晰，而 CSS 则负责所有的表现部分，使得页面简洁而又美观。