CSS =款式和颜色
造型与HTML CSS
CSS表示层叠样式表
造型可以添加到HTML元素有3种方式：
- 在线-使用HTML元素的样式属性
- 内部-使用<style>在HTML 元素 <head>节
- 外部-使用一个或多个外部CSS文件
添加造型最常见的方式，是保持风格在不同的CSS文件。 但是，在本教程中，我们使用内部的造型，因为它更容易证明，并更容易为你自己尝试一下。
您可以了解更多关于CSS在我们的CSS教程 。
内联样式(Inline CSS)
内联样式是用来独特的风格适用于单个的HTML元素：
内联样式使用style属性。
本实施例中改变了的文本颜色<h1>元素为蓝色：
内部样式(Internal CSS)
内部造型被用来定义一个HTML页面的样式。
内部造型在定义<head> HTML页面的区段，内<style>元素：
例
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> 试一试» 外部造型(External CSS)
外部样式表被用来定义样式多页。
随着外部样式表 ，您可以通过更改一个文件来改变整个网站的外观！
要使用一个外部的样式表，在添加到它的链接<head> HTML页的部分：
例
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> 试一试» 外部样式表可以用任何文本编辑器。 该文件不应包含任何HTML标记。 样式表文件必须保存为.css扩展。
这里是“如何styles.css ”样子：
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}CSS字体
CSS的color属性定义了用于HTML元素的文本颜色。
的CSS font-family属性定义要用于HTML元素的字体。
CSS的font-size属性定义要用于HTML元素的文本大小。
例
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> 试一试» CSS框模型
每一个HTML元素周围有一个框，即使你看不到它。
CSS的border属性定义围绕HTML元素可见的边框：
该CSS padding属性定义的填充(space)的边界内：
CSS的margin属性定义的余量(space)境外：
以上使用实施例的CSS px以像素为单位来定义的大小。
该id属性
上述所有使用CSS的例子风格的一般方式的HTML元素。
要定义一个特殊元素的特殊风格，首先一个id属性添加到元素：
<p id="p01">I am different</p>然后定义为与特定元素设置样式id ：
在class属性
要定义一种特殊类型的样式( class )的元素，添加一个class属性的元素：
<p class="error">I am different</p>现在，您可以定义不同的样式与特定类的元素：
使用id ，以解决single元素。 使用class来处理groups元素。
章节总结
- 使用HTML style的联样式属性
- 使用HTML <style>元素来定义内部CSS
- 使用HTML <link>元素来引用外部CSS文件
- 使用HTML <head>元素来存储<style>和<link>元素
- 使用CSS color文本颜色属性
- 使用CSS font-family为文本字体属性
- 使用CSS font-size属性的文本大小
- 使用CSS border的可见元素边框属性
- 使用CSS padding属性空间的边界内的
- 使用CSS margin财产太空境外
测试自己与练习！
HTML样式标记
| 标签 | 描述 |
|---|---|
| <style> | 定义样式信息的HTML文档 |
| <link> | 定义文档与外部资源之间的联系 |