CSS是一个描述HTML文档的样式语言。
CSS描述HTML元素的显示方式。
本教程将教你CSS从基础到网页布局，学完本教程，可以设计出漂亮的网站。
本教程需要HTML知识为基础，学习HTML前往《HTML 教程》
CSS是什么？
层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、阶层式样式表，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。
CSS的作用
HTML解决了网页结构化问题，并未解决网页美化的问题。CSS解决了美化的问题，CSS确定以何种外观(大小、粗细、颜色、对齐和位置)展现这些元素。
CSS 将文件的内容与它的显示分隔开来。
CSS 节省了大量的工作，它可以控制多个网页的布局。
原理
CSS 的原理是设想每个HTML元素周围都有一个看不见的盒子。
下图是基本的HTML页面。
下图为元素加了边框，这样更容易理解这个设想：元素周围有一个盒子。
<body>元素创建了第一个盒子，然后<h1><h2><p>元素分别创建了自己的盒子。
实现代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>第一个CSS程序</
title
>
<
style
>
*{ margin:8px;
padding:8px;
border:1px solid #E3722E;
}
</
style
>
</
head
>
<
body
>
<
h1
>利永贞网</
h1
>
<
h2
>学编程，上利永贞网</
h2
>
<
p
>study hard, improve every day</
p
>
</
body
>
</
html
>
|
块级元素：块元素换行显示，它的实例包括<h1>~<h6>、<p>和<div>元素等。
内联元素：内联元素流动于文本中并且不会换行，它的实例包括<b>、<i>、<img>、<em>和<span>
块元素内联元素示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>第二个CSS程序</
title
>
<
style
>
*{ margin:8px;
padding:8px;
border:1px solid #E3722E;
}
</
style
>
</
head
>
<
body
>
<
h1
>利永贞网</
h1
>
<
h2
>学编程，上利永贞网</
h2
>
<
p
>study hard, improve every day</
p
>
<
p
>世界上没有一样东西可以取代<
span
>毅力<
span
></
p
>
</
body
>
</
html
>
|