CSS层叠样式表
分类：
按其位置可分为三种：
1.内嵌样式
在标记内，且只对改标记有效
eg:<P style="font-size:20pt; color:red">
2.内部样式
在<head>内
eg:<STYLE type="text/css">
......
</STYLE>
3.外部样式
当很多网页需要用到同样的样式时使用
写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。
eg:一个名为home.css的文件，
引用方法：<link href="${pageContext.request.contextPath}/css/home.css"
rel="stylesheet" type="text/css">
注意：H1.mylayout {border-width: 1; border: solid; text-align: center;color:red}
此处H1.mylayout指的是<H1 class=".mylayout"><H1>这样的标记
使用外部(Extenal)样式表，相对于内嵌(Inline)和内部式 (Internal)的，有以下优点：
1.样式代码可以复用。
一个外部CSS文件，可以被很多网页共用。
2.便于修改。
如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。
3.显示示例。有以下优点：
提高网页显示的速度。
如果样式写在网页里，会降低网页显示的速度，
如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区(其它网页早已经引用过它)，网页显示的速度就比较快。
层叠的优先级：
浏览器缺省(browser default)(优先级最低)
外部样式表(Extenal Style Sheet)
内部样式表 (Internal Style Sheet)
内嵌样式表 (Inline Style)(优先级最高)
CSS的组成：
Selector(选择器)，属性(Property)，属性值 (Value)。
selector {property: value}
注意：1.多个属性要用分号分隔开
2.相同的属性和属性值赋予多个Selector。Selector之间用逗号分隔。
3.注释：/* .............*/
选择器的种类：
1.类选择器
2.标签选择器
3.ID选择器
CSS字体属性:
字体名称属性(font-family),例句如下： .s1 {font-family:Arial}
字体大小属性(font-size),字体大小的设置可以有多种方式，最常用的就是pt和px(pixel)。例句如下： .s2 {font-size:16pt}
字体颜色用CSS中的color属性来表示。
字体风格属性(font-style) ,可选：normal(缺省值), italic, oblique(italic, oblique都是斜体显示)例句如下： .s1 {font-sytle:italic}
字体浓淡属性(font-weight),这个属性常用值是normal(缺省值)和bold。例句如下： <p style = "font-weight:bold">
字体变量属性(font-variant),这个属性有两个值，normal和small-caps(小的大写字体)。例句如下： .s1 {font-variant:small-caps}
字体属性(font),一种快捷的综合写法:.s1 {font:italic normal bold 11pt arial}
文本对齐属性(text-align):left,right,center,justify (两端对齐)
文本修饰属性(text-decoration):none (无，缺省值) underline (下划线) overline (上划线) line-through (当中划线) 这个属性设定每行之间的距离。
示例代码如下： .p2 {text-decoration: underline}
文本缩进属性(text-indent) 示例代码如下： .p1 {text-indent: 8px}
行高属性(line-height) 示例代码如下： .p1 {line-height:10px}
1.背景颜色属性(background-color),示例：body {background-color:#99FF00;}
2.背景图片属性(background-image)，示例：<body style="background-image:url(../images/css_tutorials/background.jpg)">
3.背景重复属性(background-repeat) 这个属性和background-image属性连在一起使用，决定背景图片是否重复。
如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。
repeat-x 背景图片横向重复 repeat-y 背景图片竖向重复 no-repeat 背景图片不重复
示例：body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y}
4.背景附着属性(background-attachment)，这个属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。
这个属性有两个值，一个是scroll，一个是fixed。缺省值是scroll。
示例：body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}
5.背景位置属性(background-position)，这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。
示例：body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。
综合写法：body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}
边框风格属性(border-style)：none (没有边框，无论边框宽度设为多大) dotted (点线式边框) dashed (破折线式边框) solid (直线式边框) double (双线式边框) groove (槽线式边框) ridge(脊线式边框) inset (内嵌效果的边框) outset (突起效果的边框)
边框宽度属性(border-width)，这个属性用来设定上下左右边框的宽度，它的值如下： medium (是缺省值) thin (比medium细) thick (比medium粗) 上下左右四个边框不但可以统一设定，也可以分开设定。
边框颜色属性(border-color) 这个属性用来设定上下左右边框的颜色。例句如下： .d5 {border-color:gray;border-style:solid;}
边框属性(border) 综合写法。例句如下： .d1 {border:5px solid gray;}
上下左右四个边框不但可以统一设定，也可以分开设定。例如：border-top, border-top-width, border-top-style, border-top-color。
边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。
左边距属性(margin-left) ，示例如下： .d1{margin-left:1px} 右边距属性(margin-right)
左边距属性(margin-left) 右边距属性(margin-right) 这个属性用来设定右边距的宽度。示例如下： .d1 {margin-right:1px}
综合写法：示例1：上下左右边距设置相同的宽度。eg: .d1 {margin:1px}
示例2：分别设置边距，顺序是上，右，下，左。eg： .d1 {margin:1px 2px 3px 4px}
间隙属性(padding)是用来设置元素内容到元素边界的距离。
左间隙属性(padding-left) 这个属性用来设定左间隙的宽度。示例如下： .d1{padding-left:1px}
右间隙属性(padding-right) 间隙属性(padding-top) 下间隙属性(margin-bottom)
综合写法:
示例1：上下左右间隙设置相同的宽度,eg:.d1 {padding:1px}
示例2：分别设置间隙，顺序是上，右，下，左。示例如下： .d1 {padding:1px 2px 3px 4px}
CSS盒子模型(Box Model)
盒子里由外至里依次是： margin 边距 border 边框 padding 间隙 (也有人称做补丁或填充) content (内容，比如文本，图片等)
CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
CSS 边框属性 (border) 用来设定一个元素的边线。
CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。
CSS 背景属性指的是 content 和 padding 区域。
CSS 属性中的 width 和 height 指的是 content 区域的宽和高。
列表样式类型属性(list-style-type)
这个属性用来设定列表项标记(list-item marker)的类型。
有以下值： disc (缺省值，黑圆点) circle (空心圆点) square (小黑方块) decimal (数字排序) lower-roman (小写罗马字排序) upper-roman (大写罗马字排序) lower-alpha (小写字母排序) upper-alpha (大写字母排序) none (无列表项标记)
列表样式位置属性(list-style-position),有两个值： outside (以列表项内容为准对齐) inside (以列表项标记为准对齐)
列表样式图片属性(list-style-image) 列表项标记可以用图片来表示，用列表样式图片属性(list-style-image)来设定图片。
示例代码如下： ul {list-style-image: url(../images/css_tutorials/dot02.gif)}
列表样式属性(list-style) 综合写法。用这个属性可以同时设值列表样式类型属性(list-style-type)，列表样式位置属性(list-style-position)和列表样式图片属性(list-style-image)。
示例代码如下： ul {list-style:circle inside url(../images/css_tutorials/dot02.gif)}
CSS伪类(pseudo-class)
和一般的CSS语法不同，CSS伪类的语法有两种。
第一种： selector:pseudo-class {property: value} 和一般的CSS语法不同！
例句： a:link {color:red}
Html代码：<a href=“system.html”>系统消息</a>
第二种： selector.class:pseudo-class {property: value}
伪类是最常用的伪类。
例句： a.c1:link {color:red}
Html代码：<a class=“c1” href=“system.html”>系统消息</a>
锚(a)伪类
锚(a)伪类是最常用的伪类。
例句如下： a:link {color: #FF0000} /* 未被访问的链接 红色 */
a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
使用时，将会直接影响到页面超链接标记。
使用HTML的class属性来设定伪类。
例句如下： a.c1:link {color: #FF0000} /* 未被访问的链接 红色 */
a.c1:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a.c1:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
使用时，直接在A标记里面使用class属性引入即可，上例中就使用class=“c1”的方式调用。
第二种：CSS伪类的语法有两种。 注：由于CSS优先级的关系(后面比前面的优先级高)，在写a的CSS时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。