CSS学习实用笔记
一.Css:Cascading Style Sheets 串联式样式表
二.按其位置
1. 内嵌样式（在需要的地方直接嵌套）
<p style="color: sienna;margin-left:20px">一个段落</p>
2. 内部样式（典型声明方式）：把样式表放到页面的<head>里
<head>
......
<style type="text/css">
<!--
hr{color:sienna}
p{margin-left:20px}
body{backgroup-image:url("images/back.gif")}
--!>
</style>
......
</head>
注意：有些底版本的浏览器不能识别style标记，会忽略style标记内容，并以文本形式直接显示在页面，为了避免这样的情况发生，我们用加HTML注释的方式（<!-- 注释 -->）隐藏内容而不让它显示。
3. 外部样式：存在一个样式表文件，在页面中用<link>(必须放在<head>标记内)连接此样式表文件。
<head>
......
<link href="mystyle.css" rel="stylesheet" type="text/css" media="all">
......
<head>
mystyle.css :已经存在的样式表，
rel="stylesheet" : 确定在页面中使用这个外部样式表，
type="text/css" ：此连接的文件类型是样式表文本，
href=”mystyle.css”是文件所在的位置，
media :选择媒体类型
一个外部样式表文件可以应用于多个页面，当你改变这个样式表文件时，所有页面的样式都随之而改变。
三. CSS注释
1. /*开头，*/结束
2.
/* 定义段落样式表*/
p
{
text-align:center; /*文本居中排列*/
color:black; /*文字为黑色*/
font-family:"sans serif" /*字体为sans serif，注意此处属性值有多个单词组成，需要引号*/
}
四.几种不同css定义方法
1.集体声明：
1> h1,h2,h3,h4,h4,h5,h6{color:green}
2> p,table{font-size:9pt}
等效(分项声明)：p{font-size:9pt}
table{font-size:9pt}
2.类选择符声明：
1〉 定义两个不同的段落，向右对齐，另一个居中对齐
p.right{text-align: right}
p.center{text-align: center}
2〉分别适用段落的类
<p class="right">这是段落向右对齐</p>
<p class="center">这是段落居中排列</p>
3> 不用html标记，直接定义类选择符，则所有html标记都可以直接调用这个类选择符
定义： .center{text-align:center}
调用：
<h1 class="center">此标题居中排列</h1>
<p class="center">此段落也是居中排列</p>
3. ID选择符： 对这个单一元素定义单独的样式表(局限性较大)
定义ID选择符要在ID名称前加 "#" 号
ID选择符的应用和类选择符类似，只要把class换成ID即可。将上例中类用ID替代：
1〉 定义：（ /* 下例格式与上面的.center一样调用，匹配所有 id="intro" 元素 */ ）
#intro
{
font-size: 110%;
font-weight: bold;
color:#0000ff；
background-color:transparent
}
2> 调用上述定义： <p id="intro">段落可以调用</p>
<table id="intro">表格也可以调用</table>
3> 定义后只能单独调用：
定义： p#intro
{
font-size: 110%;
font-weight: bold;
color:#0000ff；
background-color:transparent
}
调用：<p id="intro">只有我才能调用</p>
五.定义链接样式
1. a:link{font-size : 18pt ;text-decoration : none ;color : blue ;}
a:visited {font-size : 18pt;text-decoration : none ;color : brown ;}
a:hover {font-size : 24pt ;text-decoration : underline ;color : red;}
a:active {font-size : 24pt ;text-decoration : none ;color : green ;}
2.顺序lvha
六．待续......
