免费下载:https://developer.aliyun.com/topic/download?id=8268
学习 CSS 是离不开 HTML,HTML 是 CSS 的基础。但是,我们也要了解CSS和HTML之间的区别。HTML 用来描述网页的内容,而 CSS 用于给内容添加样式。
如果把网页设计比作房屋装修,HTML 内容就是房子里有哪些家具——沙发、茶几、床、餐桌,都是内容。而 CSS 是对内容的进一步描述——沙发是几座的?茶几的大小?床的颜色?餐桌的高度?沙发和茶几的距离?也就是说,网页上有什么东西,是 HTML 决定的,但是这些东西的外观样式,是 CSS 决定的。
那么,我们该如何学习CSS呢?陈文阳老师撰写的这本书为广大开发者提供了一个很好的思路。
精彩内容抢先看
零基础 CSS 入门教程(2)--第一段CSS 代码
1. 前言
上一篇介绍了 CSS 的作用,就是用来设置网页的样式的。本篇就用一个最基础的入门实例,来展示 下CSS 是如何将样式设置给网页的。
2. 样式的应用对象
首先明白第一点,CSS 样式的应用对象是什么。
CSS 是用来设置网页样式的,它是给内容添加装饰的,所以 CSS 样式需要设置到网页内容——也就 是要设置到 HTML 元素上的。
一个网页可能有很多元素,例如有 table、form、div、span、img 等等,我们在设置样式的时候, 需要选择设置到具体哪个元素上。
例如下面一段代码,我们希望修改春晓 作者:孟浩然的文本颜色为绿色,那么我们就需要将样式应用到第一个p标签。
<!DOCTYPE html>
<html>
<head>
<title>CSS第一个实例</title>
<meta charset="utf-8">
</head>
<body>
<p>
春晓 作者:孟浩然
</p>
<p>
春苗不觉晓
</p>
<p>
处处闻啼鸟
</p>
<p>
夜来风雨声
</p>
<p>
花落知多少
</p>
</body>
</html>
3. 样式的应用方式
好的,现在我们想将绿色这个样式应用到上面的第一个标签,也就是下面这段代码上。
<p>
春晓 作者:孟浩然
</p>
那么如何应用呢,其实可以通过 HTML 的 style 属性来实现。也就是说,style 属性的值就是我们要编写的 CSS 代码部分。
通过 style 属性,我们可以将 CSS 样式代码应用到指定的标签上。
看下面的代码,我们给 p 标签设置了 style 样式,style 属性的值color:green;就是 CSS 代码。
<p style="color:green;">
春晓 作者:孟浩然
</p>
4. CSS 代码解析
我们已经对 HTML 很熟悉了,HTML 是标签式的语言,它的格式如下代码,其中labelName 为标签名,content为标签内容,propertyName 为属性名,propertyValue 为属性值。
<labelName propertyName="propertyValue">content</labelName>
那么 CSS 的格式时怎么样的呢,我们分析下,如下代码中,color 表示样式名,:用于区分前面名和后面的值,green 表示值,;表示结束符号。
color:green;
这一段代码解释一下,就是将标签内文本颜色(color)设置为绿色(green)。
技术人在线图书馆,开发者必读资料库。汇集阿里工程师技术实战精华,点击即可获得海量免费技术精品资料、电子手册、试读图书等。