对于初学者的CSS 教程

铝小幕

于 2021-09-07 08:57:12 发布

阅读量1w

点赞数

分类专栏： CSS Web开发 HTML 文章标签： css html html5

本文链接：https://blog.csdn.net/tylvdanban/article/details/120150320

版权

Web开发同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

CSS（层叠样式表）是一种用于设计网页以使其具有吸引力的样式表语言。使用 CSS 的原因是为了简化网页呈现的过程。CSS 允许您将样式应用于网页。更重要的是，CSS 使您能够独立于构成每个网页的 HTML 执行此操作。

在这里插入图片描述
下面给出了三种类型的 CSS：

内联 CSS
内部或嵌入式 CSS
外部 CSS

我们为什么要学习 CSS？

几十年来，样式一直是任何网站的基本属性。它提高了网站的标准和整体外观，使用户更容易与之交互。一个网站不能没有 CSS，因为样式是必须的，因为没有用户会想与一个沉闷破旧的网站进行交互。所以要了解 Web 开发，学习 CSS 是必须的。

Web 开发的基础： HTML 和 CSS 是每个 Web 开发人员都应该知道的基本技能。这是建立网站所需的基本技能。
使您的网站看起来有吸引力：一个枯燥乏味的网站很可能不会吸引用户，因此添加一些样式肯定会使您的网站对用户更具吸引力。
使设计成为现实： Web 开发人员负责将提供给他的设计作为实时产品。CSS 用于样式化以开发网站的设计。
增加网站的用户体验：一个简单而漂亮的用户界面的网站将帮助用户轻松浏览网站。CSS 用于使用户界面更好。
更多的就业机会：由于CSS是学习Web开发的基本要求，因此有丰富的就业机会。作为一名自由职业者，您也可以参与许多项目。

基本格式：它是HTML网页的基本结构，我们在网页内部使用CSS样式。在网页中，我们使用内部CSS（即在HTML 代码的标签内添加CSS 代码）。

<!DOCTYPE html>
<html>
  
<head>
    <!-- 网页的头部部分 -->
    <title></title>
  
    <!-- 网页样式表 -->
    <style></style>
</head>
  
<body>
    <!-- 网页的正文部分 -->
</body>
  
</html>

示例：让我们看一个带有 CSS 样式的 HTML 网页的小示例。在这里，我们使用 CSS 样式来设置网页中的对齐方式和文本颜色。

<!DOCTYPE html>
<html>
 
<head>
    <title>
        具有 CSS 样式的简单 HTML 网页
    </title>
 
    <!-- 网页样式表 -->
    <style>
        body {
            text-align: center;
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>欢迎来到腾亚</h1>
 
    <p>全栈计算机科学</p>
</body>
 
</html>

在这里插入图片描述