什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
Style
Style要写在HTML的头部
<head>
........
<style>
/* 诗歌的样式 */
.poem
{
color: #0f0;
font-family: "微软雅黑";
font-size: 16px;
line-height: 180%;
}
</style>
</head>规则：
- 样式写在 里
- .poem 是样式的名字
- 每一项都是 name:value 格式，注意冒号和分号
样式的使用
可以给元素添加样式
<p class="poem">其中，class属性就是样式的名字
CSS 实例
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
如何插入样式表
插入样式表的方法有三种:
外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style="color:sienna;margin-left:20px">这是一个段落。</p>常用样式
背景 background
background-color: 背景颜色
background-image:
颜色表示: rgb 如 #F00 表示红色 #FFF 白色 #000 黑色
rgba 如 #F008 最后一个8表示透明度
rrggbb 如 #FF9309
rrggbbaa 如 #FF930988 其中 88表示透明度
边距与填充margin / padding
例：margin: 10px
margin: 20px auto auto auto ; 按 上 右 下 左 顺序
padding: 8px
上右下左都可以分别设置，如padding-left: 8px
边框 border
例 border : 1px solid #ff0900;
其中，1px是宽度，solid是线型， #ff0900 是颜色
上下左右的边框可以分别设置
border-top / border-right / border-bottom / border-left
边框圆角 border-radius
border-radius: 4px;
上下左右4个角可以分别设置
宽度 width / min-width / max-width
例：width: auto
width: 800px
width: 90%
百分比表示占父元素宽度的百分比
高度 height / min-height / max-height
例：height: 400px
min-height: 300px;
文字样式
color: #444 ; 文字颜色
font: italic bold 14px “微软雅黑” ;
font-size: 字高
font-family : 字体名称
text-align : 段落对齐
