黑马程序员_CSS篇
------- Windows Phone 7手机开发、.Net培训、期待与您交流！ -------
一、CSS认识
1.CSS作用：决定网页内容的Layout
2.CSS优点：制作和管理网页方便、更加精细控制网页的内容形式、样式丰富多彩、样式灵活多样
3.CSS按其位置分为三种：
(1)内嵌样式，写在Tag里面，只对所在的Tag有效
例：<p style="text-align:center"> </tag>
(2)内部样式表，写在<head></head>里面，只对所在网页有效
例：<style type="text/css">
p{ext-align:center;font-size:20px} 增加了p的表现形式
p.center{text-align:center} 应用于单个标签
.right{text-align:right} 应用于多个标签
……
</style>
(3)外部样式表，把样式写在一个以.css为后缀的文件里，然后在<head></head>里面引用这个CSS文件
例：<link rel=stylesheet type=text/css href=slstyle.css>
4.样式优先级是顺序为（从高到低）：内嵌样式表、内部样式表、外部样式表、浏览器缺省
二、语法与用法
1.CSS结构：selector
{
[property1: value1;]
[property2: value2;]
Property3: value3
}
2.基本选择器
（1）标签选择器
p{text-align:center;font-size:20px}
使用： <head>
<style type="text/css">
p{text-align:center;font-size:20px}
</style>
</head>
<body>
<p>标签选择器</p>
</body>
（2）类选择器
p.center{text-align:center} 应用于单个标签
.right{text-align:right} 应用于多个标签
使用： <head>
<style type="text/css">
p.center{text-align:center}
.right{text-align:right}
</style>
</head>
<body>
<p class="center">居中显示</p>
<h1 class="right">居右显示</h1>
</body>
（3）ID选择器
#one{text-align:center} 只能在HTML中使用一次，主要针对某一块，针对性强
使用： <head>
<style type="text/css">
#one{text-align:center}
</style>
</head>
<body>
<p id="one">ID选择器，居中</p>
</body>
三、CSS设置文本样式
例：.s1{font-family:Arial} 字体类型
| 属性 |
值例子 |
说明 |
| font-family: |
"宋体" |
字体 |
| font-size: |
18px |
字号 |
| font-tyle: |
italic |
文字倾斜效果 |
| font-weight: |
bold |
文字加粗 |
| font-variant: |
small-caps |
字体变体 |
| letter-spacing: |
10px |
调整字母间距 |
| word-spacing: |
3px |
调整单词间距 |
| text-decoration: |
underline |
添加文字修饰 |
| text-align: |
left |
设置文本排列方式 |
| text-indent |
4px |
设置段落缩进 |
| line-height |
250% |
调整行高 |
| text-transform |
lowercase |
转换英文大小写 |
| vertical-align |
sub |
垂直对齐属性 |
四、CSS+DIV布局方法
1.基本理念：<div id="left">container</div>
div设置这个container为一种整体块，id控制这个整体的表现形式
#left
{
background-color:#FF99FF
border:2px solid #003399
……
}
例：<div id="container">container
<div id="banner">banner</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="footer">footer</div>
</div>
通过id的属性来控制这个div所在的位置和样式等，达到布局、美化等的目的