CSS基础教程：从入门到精通

最新推荐文章于 2024-06-23 00:15:21 发布

nihaonihhao2223

最新推荐文章于 2024-06-23 00:15:21 发布

阅读量905

点赞数 20

文章标签： css 前端

本文链接：https://blog.csdn.net/nihaonihhao2223/article/details/139664719

版权

CSS基础教程：从入门到精通

在HTML诞生之初，样式以各种形式存在，不同的浏览器通过各自的样式语言来控制页面效果。最初的HTML包含很少的显示属性。随着HTML的发展，为了满足页面设计者的需求，增加了很多显示功能。然而，这些功能使得HTML变得杂乱，页面越来越臃肿。于是，CSS应运而生。那么如何实现结构和样式的完全分离呢？

1. 什么是CSS

CSS，即层叠样式表（Cascading Style Sheets），是一种专门用于控制网页外观的语言。主要用于设置HTML页面中的文本样式（如字体、大小、对齐方式等）、图片样式（如宽高、边框样式、边距等）以及页面布局等。CSS建立在HTML之上，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，还可以针对不同的浏览器设置不同的样式。

2. CSS发展历史

1996年：CSS 1.0规范发布，包含字体、颜色等基本属性。
1998年：CSS 2.0规范推出，这是最为广泛应用的一个版本。
2004年：CSS 2.1规范发布，对CSS 2.0进行了一些调整，删除了一些浏览器不支持的属性。
2010年：CSS 3.0规范推出，将CSS3分为多个模块，如盒子模型、背景和边框、文字特效等。

3. CSS使用方式

3.1 行内样式

行内样式直接在HTML标签的 style 属性中定义。例如：

<p style="font-size: 16px; color: red;">Hello, World!</p>

3.2 内部样式表

内部样式表在HTML文档的<style>标签中定义。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
    <style>
        p {
            font-size: 16px;
            color: red;
        }
    </style>
</head>
<body>
    <p>Hello, World!</p>
</body>
</html>

3.3 外部样式表

将样式写入一个独立的CSS文件中，然后在HTML文档中通过<link>标签引入。例如，在 styles.css 文件中：

<p style="font-size: 16px; color: red;">Hello, World!</p>

然后在HTML文档中引入该文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
    <style>
        p {
            font-size: 16px;
            color: red;
        }
    </style>
</head>
<body>
    <p>Hello, World!</p>
</body>
</html>

3.4 总结

外部样式表：推荐在开发中使用，便于维护和管理。
内部样式表：适用于单个页面的样式定义。
行内样式：通常用于测试或特定情况下的快速样式定义，不推荐用于生产环境。

4. CSS基本语法

CSS由一系列规则集组成，每个规则集包含一个选择器和一条或多条声明。声明由属性和属性值组成，属性和值之间用冒号（:）分隔，每条声明以分号（;）结束。

selector {
    property: value;
}

5. CSS字体样式属性

5.1 font-size: 字号大小

font-size 属性用于设置文本的字号。可以使用相对单位（如em、rem）或绝对单位（如px）。推荐使用相对单位，以便更好地适应不同的设备和屏幕分辨率。

5.1.1 px

px（像素）是固定大小的单位，常用于屏幕显示。一个像素等于屏幕上的一个点，网页设计中常使用像素单位来保证在各种设备上有一致的显示效果。

5.1.2 em

em 是相对单位，相对于父元素的字体大小。例如，如果父元素的字体大小是16px，那么1em等于16px。em单位会继承父元素的字体大小。

5.2 font-family: 字体

font-family 属性用于指定文本的字体。可以列出多个字体名称，用逗号分隔。如果浏览器不支持第一个字体，会尝试使用后续字体。

p {
    font-family: "Arial", "Helvetica", sans-serif;
}

5.3 font-weight: 字体粗细

font-weight 属性用于设置字体的粗细。可选值有：normal、bold、bolder、lighter，以及从100到900的数值。

p {
    font-weight: bold;
}

5.4 font-style: 字体风格

font-style 属性用于设置字体的样式，如斜体、倾斜或正常字体。可选值有：normal、italic、oblique。

p {
    font-style: italic;
}

5.5 font: 综合设置字体样式

font 属性用于一次性设置字体的多个样式。语法格式如下：

selector {
    font: font-style font-variant font-weight font-size/line-height font-family;
}

例如：

p {
    font: italic small-caps bold 16px/1.5 "Arial", sans-serif;
}

以上是CSS基础的简要介绍，希望对您有所帮助。了解更多CSS相关知识，您可以继续关注我们的博客，我们会持续更新更多CSS高级技巧和应用。

感谢阅读这篇关于CSS基础的教程！如果你觉得这篇文章对你有帮助，请分享给更多的人。如果有任何疑问或建议，欢迎在评论区留言。

nihaonihhao2223

关注

20
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS基础教程：从入门到精通

CSS，即层叠样式表（Cascading Style Sheets），是一种专门用于控制网页外观的语言。主要用于设置HTML页面中的文本样式（如字体、大小、对齐方式等）、图片样式（如宽高、边框样式、边距等）以及页面布局等。CSS建立在HTML之上，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，还可以针对不同的浏览器设置不同的样式。外部样式表：推荐在开发中使用，便于维护和管理。内部样式表：适用于单个页面的样式定义。行内样式：通常用于测试或特定情况下的快速样式定义，不推荐用于生产环境。
复制链接

扫一扫