web前端之CSS快速入门学习教程，前端初学者看这一篇就够了

最新推荐文章于 2025-02-14 21:24:47 发布

Java编程_yyds

最新推荐文章于 2025-02-14 21:24:47 发布

阅读量820

点赞数

分类专栏：前端阶段文章标签： css html css3 html5 javascript

本文链接：https://blog.youkuaiyun.com/DDDYSz/article/details/121083996

版权

前端阶段专栏收录该内容

7 篇文章

订阅专栏

这篇博客全面介绍了CSS的基础知识，包括其定义、作用、引进方式和优势。适合前端初学者，通过学习可以掌握CSS的使用，实现网页样式精确控制和布局优化。内容涵盖CSS的3种导入方式和其在网页设计中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS定义

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

它的作用可以达到：

(1) 在几乎所有的浏览器上都可以使用。

(2) 以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

(3) 使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。

(4) 你可以轻松地控制页面的布局。

(5) 你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

css 在哪里?

CSS快速入门

(1) 创建规范

(2) 引进 CSS 方式一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范：在<style>中填写css代码-->
    <style>
        h1{
            color: red;
        }
    </style>
    <!--以上的一段代码是通过选择器（后面会讲）将标题变成了红色-->
</head>
<body>
    <h1>我是标题1</h1>    
</body>
</html>

运行结果：

通过以上的例子，总结出语法：

<!--规范，<style> 可以编写css的代码 ，设一个声明，最好使用分号结尾
    语法：
        选择器 {
            声明1;
            声明2;
            声明3;
        }
-->

(3) 引进 CSS 方式二

在CSS目录下创建一个.css文件，通过在.html文件中创建link来进行链接!

推荐使用该方式：

(4) css 的3种导入方式

内部样式

<!--内部样式-->
<style>
    h1{
        color: green;
    }
</style>

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可 -->
<h1 style="color:red;">我是标题</h1>

外部样式

链接式

<!--外部样式-->
<link rel="stylesheet" href="CSS/css.css">

导入式

@import 是CSS 2.1 特有的!

<style>
   @import url("CSS/css.css");
</style>

(5) css 的优势

1)内容和表现分离;

2)网页结构表现统一，可以实现复用;

3)样式十分的丰富;

4)建议使用独立于html的css文件;

5)利用SEO，容易被搜索引擎收录!

CSS视频教程

视频教程内容：

详细讲解了什么是css 。层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。