[网页基础]DIV+CSS学习笔记(一)CSS的引入及选择器基础
2012-10-27 14:56
190 查看
DIV+CSS学习笔记(一)
标记是内容，CSS是内容的表现形式。
一、XHTML标记基础
1、标记名称和属性必须小写
2、标记必须严格嵌套
3、标记必须封闭，包括空元素标记，例：
换行<br/>
水平线<hr/>
图象<imgsrc="happy.gif"alt="Happyface"/>
4、结构标记中可放内容标记，反之则错，例：
<p>是内容标记，<table>是结构标记，
二、在XHTML中引入CSS的方法：
1、行内式
即在标记的style属性中设定CSS样式，体现不出优势；
<h1style="color:white;background-color:blue">ThisisalineofText.</h>
2、嵌入式
集中放置在<head></head>中，对于单一网页很方便；
<head>
<styletype="text/css">
h1{
color:white;
background-color:blue
}
</style>
</head>
<body>
<h1>ThisisalineofText.</h1>
</body>
3、导入式和链接式
将CSS文件置为独立文件，然后导入或键接。
链接式：<linkhref="mystyle.css"rel="stylesheet"type="text/css"/>
链接式是用HTML的标记入引外部CSS文件，优点：会在装载页主体前装载CSS，网页从一开始就带样式效果显示；
导入式：<styletype="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>
<pclass=”special”>指定了.special类别的段落文本</p>注：将成红色（交集）
<h3class=”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
<h2class=”special”>示例文字</h2>注：紫色，字号15，下划线
<h3>示例文字</h3>注：紫色，字号15
<h4>示例文字</h4>注：紫色，字号15
<h5>示例文字</h5>注：紫色，字号15
<p>示例文字p1</p>注：紫色，字号15
<pclass=”special”>示例文字p2</p>注：紫色，字号15，下划线
<pid=”one”>示例文字p3</p>注：紫色，字号15，下划线
6、全局选择器“*”
例：
*{color:purple;font-size:15px;}/*全局选择器*/
h2.special,.special,#one{text-decoration:underline;}/*集体声明下划线*/
然后在<bordy>里写上例的内容，则结果完全相同。
7、后代选择器
pspan{color:red;}/*嵌套声明*/
span{color:blue;}/*颜色*/
<body>
<p>嵌套使<span>用CSS</span>标记的方法</p>注：“用CSS”红色
嵌套之外的<span>标记</span>不生效注：“标记”兰色，即嵌套之外不生效
</body>
7-1、后代选择器（应用比较广）
上例实际就是后代选择器，它产生的影响直到“各级后代”
例：
pspan{color:blue;}
<p>最外层<span>中间〈b〉内层〈/b〉</span></p>
说明：“最外层”默认黑色，“中间”和“内层”都会设为兰色。
7-2、子选择器
只对“直接的后代”起作用，对“孙代”不起作用。
例：
p>span{color:blue;}
<p>最外层<span>中间〈b〉内层〈/b〉</span></p>
说明：“最外层”默认黑色，“中间”兰色，“内层”默认黑色。
7-3、
后代选择器应用比较广，因为它将会贯穿在所有的设计中，所以它的继承性是值得研究一下的:
在HTML是由标记构成的语言，标记可以看作是一个个容器，其中被包含的容器会继承它的父容器风格样式，从而就会有很多的继承关系。
例：
以上例子是〈h1〉对<em>的嵌套，以及<ul>和<li>的三层嵌套形成三级列表，现在来作几个分析：
（1）加入CSS代码如下：
标记是内容，CSS是内容的表现形式。
一、XHTML标记基础
1、标记名称和属性必须小写
2、标记必须严格嵌套
3、标记必须封闭，包括空元素标记，例：
换行<br/>
水平线<hr/>
图象<imgsrc="happy.gif"alt="Happyface"/>
4、结构标记中可放内容标记，反之则错，例：
<p>是内容标记，<table>是结构标记，
二、在XHTML中引入CSS的方法：
1、行内式
即在标记的style属性中设定CSS样式，体现不出优势；
<h1style="color:white;background-color:blue">ThisisalineofText.</h>
2、嵌入式
集中放置在<head></head>中，对于单一网页很方便；
<head>
<styletype="text/css">
h1{
color:white;
background-color:blue
}
</style>
</head>
<body>
<h1>ThisisalineofText.</h1>
</body>
3、导入式和链接式
将CSS文件置为独立文件，然后导入或键接。
链接式：<linkhref="mystyle.css"rel="stylesheet"type="text/css"/>
链接式是用HTML的标记入引外部CSS文件，优点：会在装载页主体前装载CSS，网页从一开始就带样式效果显示；
导入式：<styletype="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>
<pclass=”special”>指定了.special类别的段落文本</p>注：将成红色（交集）
<h3class=”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
<h2class=”special”>示例文字</h2>注：紫色，字号15，下划线
<h3>示例文字</h3>注：紫色，字号15
<h4>示例文字</h4>注：紫色，字号15
<h5>示例文字</h5>注：紫色，字号15
<p>示例文字p1</p>注：紫色，字号15
<pclass=”special”>示例文字p2</p>注：紫色，字号15，下划线
<pid=”one”>示例文字p3</p>注：紫色，字号15，下划线
6、全局选择器“*”
例：
*{color:purple;font-size:15px;}/*全局选择器*/
h2.special,.special,#one{text-decoration:underline;}/*集体声明下划线*/
然后在<bordy>里写上例的内容，则结果完全相同。
7、后代选择器
pspan{color:red;}/*嵌套声明*/
span{color:blue;}/*颜色*/
<body>
<p>嵌套使<span>用CSS</span>标记的方法</p>注：“用CSS”红色
嵌套之外的<span>标记</span>不生效注：“标记”兰色，即嵌套之外不生效
</body>
7-1、后代选择器（应用比较广）
上例实际就是后代选择器，它产生的影响直到“各级后代”
例：
pspan{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个项目显示绿色，这就要用到“后代选择器了”：
ulliulliulli{color:green;font-weight:bold;}练习一下：如果
lili{color:green;font-weight:bold;}会是什么效果呢？因为li嵌套li才会出现绿色，那么ul嵌套li就不会有绿色，li嵌套ul也不会有绿色，效果如下：
欢迎访问http://www.cnblogs.com/dooroo 小结：CSS会对许许多的标记产生作用，当一个标记同时有几个CSS产生作用（层叠样式表）时，要区分一个优先原则：
行内样式>ID样式>类别样式>标记样式
总之，特殊性越高的元素，优先级别越高。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS布局模型/网页布局基础
- css基础 a:link/visited... 链接伪类选择器 简单示例
- CSS 基础教程 在网页中使用CSS
- css基础 选择器-通配符* 给所有的标记设置属性(兼容性不好)
- （清华大学HTML+CSS+JavaScript入门到精通学习笔记）第一章 网页设计基础
- CSS基础之选择器
- HTML_04_css_的引入方式_基本选择器
- CSS基础（三）：选择器
- CSS基础（三）：选择器
- [网页基础]CSS+DIV布局,简单布局例子
- css基础 选择器-通配符* 给所有的标记设置属性(兼容性不好)
- 网页设计html+css基础知识汇总
- [网页基础]DIV+CSS学习笔记(三)盒子的定位与浮动
- css 3 基础选择器。
- CSS基础-引入方法，选择器，继承
- css基础选择器
- java基础57 css样式、选择器和css定位（网页知识）
- CSS学习笔记2：CSS基础选择器
- CSS——基础选择器