教育改变生活

标题: CSS教程-1 简介 [打印本页]
作者: 却尘    时间: 2023-9-15 16:24
标题: CSS教程-1 简介
本帖最后由 却尘 于 2023-10-9 11:12 编辑

· CSS 简介
CSS 是一种描述 HTML 文档样式的语言。
CSS 描述应该如何显示 HTML 元素。
本教程将从零起点的基础教程开始，一直到 CSS3 高级教程，为您提供全面系统地讲解。

CSS 实例
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>我的第一个 CSS 实例</h1>
<p>这是一个段落。</p>

</body>
</html>
效果：
我的第一个 CSS 实例
这是一个段落。
什么是 CSS？
· CSS 指的是层叠样式表* (Cascading Style Sheets)
· CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
· CSS 节省了大量工作。它可以同时控制多张网页的布局
· 外部样式表存储在 CSS 文件中
*：也称级联样式表。
为何使用 CSS？
CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。
CSS 实例
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}
p {
  font-family: verdana;
  font-size: 20px;
}
CSS 解决了一个大问题
HTML 从未打算包含用于格式化网页的标签！
创建 HTML 的目的是描述网页的内容，例如：
<h1>这是一个标题。</h1>
<p>这是一个段落。</p>
将 <font> 之类的标签和 color 属性添加到 HTML 3.2 规范后，Web 开发人员的噩梦开始了。大型网站的开发将字体和颜色信息添加到每个页面中，这演变为一个漫长而昂贵的过程。
为了解决这个问题，万维网联盟（W3C）创建了 CSS。
CSS 从 HTML 页面中删除了样式格式！
CSS 节省了大量工作！
样式定义通常保存在外部 .css 文件中。
通过使用外部样式表文件，您只需更改一个文件即可更改整个网站的外观！





欢迎光临 教育改变生活 (http://bbs.goldoar.com/) Powered by Discuz! X3.2