[网页基础]DIV+CSS学习笔记(一)CSS的引入及选择器基础
DIV+CSS学习笔记(一)
标记是内容，CSS是内容的表现形式。
一、XHTML标记基础
1、标记名称和属性必须小写
2、标记必须严格嵌套
3、标记必须封闭，包括空元素标记，例：
换行<br/>
水平线<hr/>
图象<img src="happy.gif" alt="Happy face"/>
4、结构标记中可放内容标记，反之则错，例：
<p>是内容标记，<table>是结构标记，
二、在XHTML中引入CSS的方法：
1、行内式
即在标记的style属性中设定CSS样式，体现不出优势；
<h1 style="color:white;background-color:blue">This is a line of Text.</h>
2、嵌入式
集中放置在<head></head>中，对于单一网页很方便；
<head>
<style type="text/css">
h1{
color:white;
background-color:blue
}
</style>
</head>
<body>
<h1>This is a line of Text.</h1>
</body>
3、导入式和链接式
将CSS文件置为独立文件，然后导入或键接。
链接式：<link href="mystyle.css" rel="stylesheet" type="text/css" />
链接式是用HTML的标记入引外部CSS文件，优点：会在装载页主体前装载CSS，网页从一开始就带样式效果显示；
导入式： <style type="text/css">
@import"mystyle.css";
</style>
链接式是使用CSS的规则引入外部CSS，优点：会装载整个页面后加载格式，缺点，屏幕会闪一下。
建议：多CSS文件时，先用键接方式引入一个“目录”，这个“目录”CSS文件中再使用导入式引入其它CSS文件，如果通过JavaScript来动态决定引入哪个CSS文件，则必须使用链接方式才能实现。
三、基本CSS选择器
1、标记选择器
h1 { color : red; font-size : 25px; }
选择器 属性 值 属性 值
2、类别选择器
.class { color : red; font-size : 25px; }
选择器 属性 值 属性 值
3、ID选择器
#id { color : red; font-size : 25px; }
注意：ID选择器只能在HTML页面中使用一次。
4、复合选择器之：“交集”选择器
h3.class { color : red; font-size : 25px; }
标记.类别选择器 属性 值 属性 值
例：
p{color:blue;}
p.special{color:red;}
.specail{color:green;}
<body>
<p>普通段落文本</p> 注：默认为兰色
<h3>普通标题文本</h3>
<p class=”special”>指定了.special类别的段落文本</p> 注：将成红色（交集）
<h3 class=”special”>指定了.special类别的标题文本</p> 注：将成绿色（不受影响）
5、复合选择器之：“并集”选择器，多个选择器通过逗号连接而成。
例：
h1, h2, h3, h4, h5, p{color:purple;font-size:15px;}/*并集选择器*/
h2.special, .special, #one{text-decoration:underline;}/*集体声明下划线*/
<h1>示例文字</h1> 注：紫色，字号15
<h2 class=”special”>示例文字</h2> 注：紫色，字号15，下划线
<h3>示例文字</h3> 注：紫色，字号15
<h4>示例文字</h4> 注：紫色，字号15
<h5>示例文字</h5> 注：紫色，字号15
<p>示例文字p1</p> 注：紫色，字号15
<p class=”special”>示例文字p2</p> 注：紫色，字号15，下划线
<p id=”one”>示例文字p3</p> 注：紫色，字号15，下划线
6、全局选择器“*”
例：
*{color:purple;font-size:15px;}/*全局选择器*/
h2.special, .special, #one{text-decoration:underline;}/*集体声明下划线*/
然后在<bordy>里写上例的内容，则结果完全相同。
7、后代选择器
p span{color:red; }/* 嵌套声明 */
span{ color:blue; }/* 颜色 */
<body>
<p>嵌套使<span>用CSS</span>标记的方法</p> 注：“用CSS”红色
嵌套之外的<span>标记</span>不生效 注：“标记” 兰色，即嵌套之外不生效
</body>
7-1、后代选择器（应用比较广）
上例实际就是后代选择器，它产生的影响直到“各级后代”
例：
p span{color:blue;}
<p>最外层<span>中间〈b〉内层〈/b〉</span></p>
说明：“最外层”默认黑色，“中间”和“内层”都会设为兰色。
7-2、子选择器
只对“直接的后代”起作用，对“孙代”不起作用。
例：
p>span{color:blue;}
<p>最外层<span>中间〈b〉内层〈/b〉</span></p>
说明：“最外层”默认黑色，“中间”兰色，“内层”默认黑色。
7-3、
后代选择器应用比较广，因为它将会贯穿在所有的设计中，所以它的继承性是值得研究一下的:
在HTML是由标记构成的语言，标记可以看作是一个个容器，其中被包含的容器会继承它的父容器风格样式，从而就会有很多的继承关系。
例：
<html>
<head>
<title>继承关系</title>
</head>
<body>
<h1><em>前沿</em>教室</h1>
<p>欢迎来到前沿教室，这里为您提供丰富学习内容。</p>
<ul>
<li>在这里，你可以学习到：
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>CSS初级</li>
<li>CSS中级</li>
<li>CSS高级</li>
</ul>
</li>
<li>Javascript</li>
</ul>
</li>
<li>你还可以学习到：
<ol>
<li>Flash</li>
<li>Dreamweaver</li>
<li>Photoshop</li>
</ol>
</li>
</ul>
<p>如果您有任何问题，欢迎联系我们</p>
</body>
</html>
以上例子是〈h1〉对<em>的嵌套，以及<ul>和<li>的三层嵌套形成三级列表，现在来作几个分析：
（1）加入CSS代码如下：
h1{ color:blue; text-decoration:underline; }/* 下划线 */
em{ color:red; }/* 颜色 */
父标记有下划线，子标记也继承了下划线，以上说明，父标记的设置也对子标记产生效果了。
（2）加入CSS代码如下：
li{color:green ; font-weight:bold;}
以上效果很清楚，都继承了li父标记。
（3）如果只想让最深层的3个项目显示绿色，这就要用到“后代选择器了”：
ul li ul li ul li{color:green ; font-weight:bold;}
练习一下：如果
li li{color:green ; font-weight:bold;}
会是什么效果呢？因为li嵌套li才会出现绿色，那么ul嵌套li就不会有绿色，li嵌套ul也不会有绿色，效果如下：
欢迎访问http://www.cnblogs.com/dooroo
小结：CSS会对许许多的标记产生作用，当一个标记同时有几个CSS产生作用（层叠样式表）时，要区分一个优先原则：
行内样式 > ID样式 > 类别样式 > 标记样式
总之，特殊性越高的元素，优先级别越高。
