[TOC] >[info]CSS (Cascading Style Sheet)，中文翻译为层叠样式表， 是用于控制网页样式并允许将样式信息与网页内容分离的一 种标记性语言。 * 样式定义如何显示 HTML 元素 * 样式通常存储在样式表中 * 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 * 外部样式表可以极大提高工作效率 * 外部样式表通常存储在 CSS 文件中 * 多个样式定义可层叠为一 ## 一、CSS的写法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 ~~~ selector {declaration1; declaration2; ... declarationN } ~~~ 下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。 在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。 ~~~ h1 {color:red; font-size:14px;} ~~~ **下面的示意图为您展示了上面这段代码的结构：**  >[danger] 提示：请使用花括号来包围声明。 ## 二、如何创建 CSS ### 1、外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部： ~~~ <link rel="stylesheet" type="text/css" href="mystyle.css" /> ~~~ ### 2、内部样式表 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表，就像这样: ~~~ <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> ~~~ ### 3、内联样式 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。 要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距： ~~~ <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> ~~~ ### 4、导入样式 导入外部样式表文件 ~~~ @import url("global.css"); ~~~ ## 三、css注释 任何语言都有注释，当然CSS也不例外 ~~~ <style type="text/css"> h1{ /*background: red*/ } </style> ~~~ >[danger]**作业：**分别练习四种写样式的方法，给不同的标签加上颜色或者字体大小。