CSS中注释为：/*...*/
第一课 CSS引入方式
将CSS引入到HTML中可通过四种方式：
1 使用内敛样式（行内样式）：将CSS定义具体HTML元素上，用于精确某个HTML元素表现，较少使用。
例： <html><head><title>xxx</title></head><body>
<p style="xxx：xxx；yyy：yyy；">内容</p>
</body></html>
2 使用内部样式定义（内嵌样式）：在某一HTML文档头部定义样式单来实现，用于控制这一份HTML文档，较多使用。
例： <html><head><title>xxx</title>
<style type="text/css"> #此为固定样式。
p { xxx：xxx； yyy：yyy }
</head><body>
<p>内容1</p>
<p>内容2</p>
</body></html>
3 链接外部样式文件（LINK）：将CSS样式文件单独创建，HTML需要将该样式引入，可控制多分HTML文档，最常使用。
例：
一、创建 x.css 文件
h2 { xxx：xxx； yyy：yyy }
p { xxx：xxx； yyy：yyy }
二、HTML文件引入.css文件
<html><head><title>xxx</title>
<link href="x.css" type="text/css" rel="stylesheet"> #引用标签 没有"/"
</head><body>
<h2>标题...</h2><p>内容...</p>
</body></html>
4 导入外部样式文件（import）：与第三种类似，使用@import引入外部样式文件。
例：
一、创建 x.css 文件
h2 { xxx：xxx； yyy：yyy }
p { xxx：xxx； yyy：yyy }
二、HTML文件引入.css文件
<html><head><title>xxx</title>
<style type="text/css">
@import url("x.css"); #或直接用 @import "x.css"
</style>
</head><body>
<h2>标题...</h2><p>内容...</p>
</body></html>
注释：四种CSS引入方式的优先级问题： 【 内联 > 内嵌 > import > link 】
第二课 CSS常用选择器
语法
Selector { # 选择器，决定该样式定义作用在哪些元素上（如p,h1,div等）。
property:value1; #属性定义 决定该样式起何种作用（如颜色，字体等）
property:value2;
}
标记选择器（元素选择器）
E{……} #E代表有效的HTML元素。该标记选择器需要在<head><style>中。
类选择器
[E].classvalue{……} #同上
例：
<html><head><title>abc</title><style>
.one{ xxx：xxx；yyy：yyy；} #未指定类型，可作用于任何元素。
div.two{ xxx：xxx；yyy：yyy；} #指定div类型，故只可以在div标签中使用。
</style><head><body>
<p class="one">正文内容...</p>
<div class="one two">正文内容...</div> #该标签中one，two功能叠加。
</body></html>
ID选择器
[E]#idvalue{……} #value为该选择器命名。
例：（与class雷同，但选择性唯一，不支持功能叠加。）
<html><head><title>abc</title><style>
#one{ xxx：xxx；yyy：yyy；} #未指定类型，可作用于任何元素。
div#two{ xxx：xxx；yyy：yyy；} #指定div类型，故只可以在div标签中使用。
</style><head><body>
<p id="one">正文内容...</p>
<div id="two">正文内容...</div>
</body></html>
选择器组合
Selector1，Selector2 {……} #其中Selector都是有效选择器。
例：
h1，h2，h3，p { xxx：xxx；yyy：yyy；} #前述标签共享该效果。
h2.abc，.abc，#one { xxx：xxx；yyy：yyy；} #类选择器，ID选择器，均可组合共享该效果。
<body>
<h1>标题...</h1> #效果直接被第一个集合定义。
<h2 class="abc">标题...</h2> #引用第二个集合中的类选择器。
<p id="one">正文...</p> #引用第二个集合中的ID选择器。
选择器嵌套（用于某个标签中的另一个标签，类选择器和ID选择器均可使用）
Selector1 Selector2 {……} #其中Selector都是有效选择器。选择器组合用“，”隔开，嵌套用“空格”。
例：
p b { xxx：yyy；}
<body><p><b>嵌套选择器</b>使用方法</p> #此元素“嵌套选择器”会应用选择器效果。
<b>嵌套之外不生效</b> #此标签未在嵌套的<p>标签内，故不会有选择器效果。
第三课 CSS字体和文本相关属性
常用字体属性：
· font-family #规定文本字体系列，如黑体，宋体等（多个字体可用“，”隔开，如浏览器查不到第一个会用第二个）。
· font-size #规定文本字体尺寸。
· font-style #规定文本字体样式，主要有noraml（正常），italic（斜体部分不支持），oblique（斜体）。
· font-weight #规定文本字体粗细，主要有normal，bold等。
常用文本属性：
· color #字体颜色
· letter-spacing #字符间距（px像素）
· line-height #文本行高
· text-align #文本对其方式，有leift、right、center。
· text-decoration #文本装饰效果，主要有overline（上划线）、underline（下划线）、line-through（删除线）。
` text-indent #是文本块首行缩进（px像素）
· text-transform #文本大小写，主要有uppercase（大写）、lowercase（小写）、capitalize（首字大写）。
· word-spacing #单词间距（px像素）
第四课 CSS边框和背景相关属性
常用边框属性：
· border #设置所有边框
· border-width #设置四条边框宽度
· border-style #设置四条边框样式，主要有dotted（点划线）、solid（实心线）、double（双划线）、dashed（虚线）。
· border-color #设置四条边框颜色
· border-left（right、top、bottom） #设置所有左边框（右边框、上边框、下边框）属性
· border-left-color（style、width） #设置左边框颜色、样式、宽度。
例：
<style>
img.test1 { border : 5px double #FF00FF; } #简化代码量的写法也可实现边框宽度，样式，颜色的设置。
img.test2 { border-left : 5px double #FF00FF; } #其他边框亦如此。
</style>
常用背景属性：
· background #设置全部背景属性。
· background-attachment #设置背景头像是否固定或随页面其余部分滚动。两个值fixed（固定），scroll（滚动）。
· background-color #设置元素背景颜色。
· background-image #设置元素背景图像。主要有url（xx.jpg）和none两个属性。
· background-position #设置背景图像开始位置。可指定top、left等，也可指定具体像素100px 25px或百分比号20% 50%。
· background-repeat #设置是否及如何重复背景图像。主要有repeat（平铺该图片）、repeat-x（平铺水平方向）、repeat-y（平铺垂直方向）、no-repeat（不重复平铺）。
例：
<style>
body { background：url（xxx.jpg） no-repeat 200px 25px } #亦可像常用边框简化代码量。
body.text { background-position：30% 50% } #正常代码输入类型。
</style>
第五课 CSS列表和表格相关属性
列表常用属性：
· list-style #在一个声明中设置所有列表属性。
· list-style-image #将图像设置为列表项标记。主要有URL值：list-style-image：url("xxx.jpg")。
· list-style-position #设置列表项标记放置位置，主要有outside和inside。
· list-style-type #设置列表项标记类型，主要有disc、circle、square、decimal、decimal-leading-zero、
lower-roman、upper-roman、lower-greek、lower-latin、upper-latin、armenian、
georgian、none等。不能和list-style-image同时出现。
例：
list-style：url( "xxx.jpg" outside ) #可讲属性合并显示，减少代码量。
表格相关属性：
· border-collapse #设置是否吧表格边框合并为单一边框，值为collapse。
· border-spacing #设置分隔单元格边框距离。
· caption-side #设置表格标题位置。可选上下，top、bottom。
· empty-cells #设置是否显示报各种的空单元格，值为hide。
第六课 CSS常用 伪类别属性
对<a>标签提供相关克制动态效果的CSS伪类别属性常用属性：
· a:link #普通超链接样式
· a:visited #被点击过的超链接样式
· a:hover #鼠标指针经过超链接样式
· a:active #在超链接上单击时样式，既"当前 激活"（单击不放开时的样式）。
第七课 盒子模型
盒子就是一个块级标签的描述，其中有content（内容）、padding（内边距）、border（边框）和margin（外边距）组成。分别设定四条边各自的border、padding、margin即可实现各种样式的排版效果。
border属性：
主要有三个属性进行配合从而达到良好的效果，分别是border-color（颜色）、border-width（边框宽度）、border-style（类型）。
padding属性：
padding用于控制content与border之间的距离，四个方向为padding-top（bottom、left、right）。
padding也可以用组合写法如：
padding：10px 10px 10px 10px （数值为顺时针方向，既上右下左）
padding：10px （指4个方向都为此数值）
margin属性：
margin指元素与元素的距离。四方向为margin-top（bottom、left、right）。
margin两个行级标签的距离为中间的和，而两个块级标签之间距离为两者间较大的一个值。
margin可以设置为负数，会使得块向反方向移动，甚至覆盖另外的标签上，当存在父子关系，可设置负数使得子块“分离”出父块。
元素定位
可使用CSS的float、position和z-index属性来进行块元素定位。
float属性：
float定位是CSS排版中重要手段。属性可设置为left、right或默认值none，当设置元素左右浮动时，会向父元素左右侧靠近。
clear属性
设定此属性清除float的影响，主要设置以下三个值：left、right、both。
position属性：
此为定制块的位置，既定制其在父块中的位置。
当设置为absolute时，子块将不在属于父块，其位置会相对于<body>标签设定，而非父块。
例：
position：absolute；left：30px；top：50px；（30和50是相对于<body>的边距）
当设置为relative时，子块将相对于在父块原位置进行定位。
z-index属性：
当块设置了position属性后，该属性便可设置各块之间重叠关系，默认值为0。
第八课 DIV+CSS布局实战
CSS排版是一种流行的排版理念，将页面进行<div>标记分块，然后对各块进行CSS定位，最后在块中添加响应内容。这样排版页面更新容易，甚至页面拓扑结构，都可通过修改CSS属性来重新定位。
408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
