CSS《精通CSS.DIV网页样式与布局》视频前5课总结：
地对地导弹
第一课：
使用CSS控制页面：
1，行内样式
<p style="color:#0000FF; font-size:20px; text-decoration:underline;">正文内容</p>
2，内嵌式
<style type="text/css">
p{
color:#0000FF; /*紫色*/
text-decoration:underline; /*有下划线*/
font-weight:bold; /*粗体*/
font-size:25px; /*字体大小*/
}
</style>
<body>
<p>紫色、粗体、下划线、25px的效果1</p>
<p>紫色、粗体、下划线、25px的效果2</p>
<p>紫色、粗体、下划线、25px的效果2</p>
</body>
3，链接式
<link href="1.css" type="text/css" rel="stylesheet">
<body>
<h2>CSS标题1</h2>
<p>紫色、粗体、下划线、25px的效果1</p>
<h2>CSS标题2</h2>
<p>紫色、粗体、下划线、25px的效果2</p>
1.css文件:
H2{
color:#0000FF;
}
p{
color:#FF00FF;
text-decoration:underline;
font-weigth:bold;
font-size:20px;
}
</body>
(注：
rel：relationship的英文缩写.
REL属性用于定义连接的文件和HTML文档之间的关系。StyleSheet，的意思就是样式调用，REL=StyleSheet指定一个固定或首选的样式而REL="Alternate StyleSheet"定义一个交互样式。
)
4，导入样式
<style type="text/css">
@import ur1(1.css);
</style>
第二课：CSS基本语法
CSS选择器：
分类：
1，标记选择器
<style>
h1{
color:red;
font-size:25px;
}
</style>
2，类别选择器
<style type="text/css">
.one{
color:red; /*红色*/
font-size:18px; /*文字大小*/
}
.two{
color:green;
font-size:20px;
}
</style>
<body>
<p class="one">class选择器1</p>
<p class="two">class选择器2</p>
<h3 class="two">h3同样适用</p>
</body>
3，ID选择器
<style>
#one{
font-weigth:bold; /*粗体*/
}
#two{
font-size:30px; /*字体30px*/
}
</style>
<body>
<p id="one">ID选择器1</p>
<p id="two">ID选择器2</p>
</body>
(注：ID可以用在CSS中，也可以用在JavaScript中，当在JS中用ID对html进行寻找时，如果同一个ID用在两个标记中，将导致JS的语法混乱)
声明：
1，集体声明
<style type="text/css">
h1,h2,h3,h4,h5,p{
color:purple; /*文字颜色*/
font-size:15px; /*字体大小*/
}
h2.special, .special,#one{
text-decoration:underline; /*下划线*/
}
</style>
<body>
<h1>集体声明h1</h1>
<h2 class="special">集体声明h2</h2>
<h3>集体声明h3</h3>
<h4>集体声明h4</h4>
<h5>集体声明h5</h5>
<p>集体声明p1</p1>
<p class="special">集体声明p2
<p id="one">集体声明p3</p>
</body>
2，选择器的嵌套
<style type="text/css">
p b{ /*p标记中的b标记的样式*/
color:maroon;
text-decoration:underline;
}
</style>
<body>
<p>嵌套使<b>用CSS</b>标记的方法</p>
嵌套之外的<b>标记</b>不生效
<body>
显示效果：
CSS的继承
如果一个标记被包含在另一个标记中，则他会继承前一个标记的样式；
第三课：CSS文字效果
文字样式
字体：font-family
<style>
h2{
font-family:黑体,幼圆;
}
p{
font-family:Arial,Helvetion,sans-serif;
}
</style>
<body>
<h2>立春</h2>
<p>韩学敏，你好！</p>
</body>
(注：解释p{font=family:Arial,Helvetica,sans- serif;}——浏览器对字体进行检测，如果有第一个字体Arial，则采用Arial，如果没有则检测是否有第二个字体Helvetica….如果这 些字体都没有，则采用浏览器默认字体)
文字大小：font-size
<style>
p.inch{font-size:0.5in;}
p.cm{font-size:0.5cm;}
p.mm{font-size:4mm;}
p.pt{font-size:12pt;}
p.pc{font-size:2pc;}
</style>
<body>
<p class="inch">文字大小，0.5in</p>
<p class="cm">文字大小，0.5cm</p>
<p class="mm">文字大小，4mm</p>
<p class="pt">文字大小，12pt</p>
<p class="pc">文字大小，2pc</p>
</body>
文字颜色：color
颜色的表示方法有很多中：
（1）RGB：红蓝绿
（2）16进制表示
（3）英文单词
<style>
h2{ color:rgb(0%,0%80%;)}
p{
color:#333333;
font-size:13px;
}
p span{ color:blue;}
</style>
<body>
<h2>冬至的由来</h2>
<p><span>冬至</span>过节源于汉代，盛于唐宋，相沿至今。《清嘉录》甚至有“<span>冬至</span>大如年”之说</p>
</body>
（注：<span>标记：在CSS定义中属于一个行内元素，在行内定义一个区域，也就是一行可以被<span>划分好几个区域，从而实现某种特定效果。<span>本身没有任何属性。
<div>在CSS定义中属于一个块级元素。<div>可以包含段落、标题、表格甚至其他部分。这使DIV便于建立不同集成德 类，如章节、 或备注。在页面效果上，使用<div>会自动换行，使用<span>就会保持同行）
文字粗细：font-weigth
(注：1，可以采用数字，也可以采用英文单词；
2，bold:粗体；lighter：正常；
)
文字斜体：font-style
(斜体：italic；正常：normal)
下划线、顶划线、删除线
(注：下划线：text-decoration:underline;
顶划线：text-decoration:overline;
删除线：text-decoration:line-through;
闪烁：text-decoration:blink;)
(注：IE浏览器不支持“闪烁”的效果，只有firefox支持)
英文字母大小写
(注：单词首字母大写：text-transform:capitalize;
全部大写：text-transform:uppercase;
全部小写：text-transform:lowercase; )
例子：模拟Google公司logo
<style>
p{
font-size:80px;
letter-spacing:-2px; /*字母间距*/
font-family：Arial，Helvetica，sans-serif;
}
.g1,g2{ color:#184dc6;}
.o1,e{ color:#c61800;}
.o2{color:#efba00;}
.l{color:42c34a;}
</style>
<body>
<p><span class="g1">g</span><span class="o1">o</span><span class="o2">o</span>
<span class="g2">g</span><span class="l">l</span><span>e</span></p>
</body>
段落文字
段落间水平对齐方式:
text-align:left(左对齐)/right(右对齐)/center(居中对齐)/justify(两端对齐)
段落间垂直对齐方式：
vertical-align:top(顶端对齐)/bottom(底端对齐)/middle(中间对齐)
行间距、字间距：
line-height:1.5em;/*行间距，相对数值*/
line-height:8pt; /* 行间距，绝对数值,行间距小于字体大小*/
letter-spacing:-2px; /*字间距*/
首字放大：float：left; /*首字下沉*/
第四课 CSS图片效果
图片样式
1，图片边框
(border-**)
<style>
img.test1{
border-style:dotted; /*点画线*/
border-color:#FF9900; /*边框颜色*/
border-weigth:5px; /*边框粗细*/
}
img.test2{
border-style:dashed; /*虚线*/
border-color:blue;
border-width:2px;
/*或者使用一句：border:dashed 2px blue;*/
}
</style>
<body>
<img src="banana.jpg" class="test1">
<img src="banana.jpg" class="test2">
</body>
(注：还可以对边框的上下左右分别设置：
img.test2{
border-left:dashed 2px blue;
border-right:dotted 5px red;
}
)
2,图片缩放
<style>
img.test1{
width:50%; /*相对宽度*/
}
</style>
<body>
<img src="pear.jpg" class="test1">
</body>
(注：1，width:50%——相对宽度，宽度始终为浏览器的50%；
width:80px——绝对宽度，不会随着浏览器大小的变化而变化；
2，
如果宽度为绝对值，高度为相对值，则浏览器的宽高度发生变化时，宽度不变，高度随着浏览器的变化而变化，实现缩放
)
图片对齐
1，横向对齐：text-align:left/center/right;
2，纵向对齐:vertical-align:baseline/bottom/middle/sub/super/text-bottom/text-top/top;
横向对齐left、center、right的效果图：
图文混排
1，文字环绕
显示效果：
2，设置图片与文字的间距
第五课：CSS页面背景
第六课：CSS设置表格和表单样式
给出如下一个表格，分别设置表格的颜色、表格的边框
<body>
<table class="datalist">
<caption>年度收入 2004 - 2007</caption>
<tr>
<th></th>
<th scope="col">2004</th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
</tr>
<tr>
<th scope="row">拨款</th>
<td>11,980</td>
<td>12,650</td>
<td>9,700</td>
<td>10,600</td>
</tr>
<tr>
<th scope="row">捐款</th>
<td>4,780</td>
<td>4,989</td>
<td>6,700</td>
<td>6,590</td>
</tr>
<tr>
<th scope="row">投资</th>
<td>8,000</td>
<td>8,100</td>
<td>8,760</td>
<td>8,490</td>
</tr>
<tr>
<th scope="row">募捐</th>
<td>3,200</td>
<td>3,120</td>
<td>3,700</td>
<td>4,210</td>
</tr>
<tr>
<th scope="row">销售</th>
<td>28,400</td>
<td>27,100</td>
<td>27,950</td>
<td>29,050</td>
</tr>
<tr>
<th scope="row">杂费</th>
<td>2,100</td>
<td>1,900</td>
<td>1,300</td>
<td>1,760</td>
</tr>
<tr>
<th scope="row">总计</th>
<td>58,460</td>
<td>57,859</td>
<td>58,110</td>
<td>60,700</td>
</tr>
</table>
</body>
显示效果：
1，表格颜色
显示效果：
2，表格边框：border
显示效果：
