第二部分 CSS核心
第五章 选择符
5.1简单选择符
前面介绍过最简单的选择符类型：类型选择符，class选择符，id选择符，到目前为止，读者学习了如何使用简单选择符创建CSS规则：基于HTML标签的类型选择符和基于HTML属性的class或id选择符。
如何使用class选择符：
<!—5.1.html -- >
<html>
<head>
<title>image accessibility</title>
<link type=”text/css” rel=”typesheet” href=”5.1.css”></head>
<body>
<div id=”breadcrumb”>
<a href=”http://kynn.com”>kynn.com</a>·
<a href=”http://kynn.com”>kynn.com</a>·
<a href=”http://kynn.com”>kynn.com</a>·
Images;
</div>
<div id=”header”>
<h1>image accessibility</h1>
<h2>making your graphics accessible</h2>
</div>
<div class=”tips”>
<p here are some helpful tips on making your graphical content accessible to users who cannot see images</p>
<ul>
<li>always include an<tt>alt</tt>attribute on your graphical content accessible to users who cannot see images:</li>
<li>the<tt>alt</tt>attribute should contain a short replacement for the graphics ,in text; if the image itself has text,list that in <tt>alt</tt>.</li>
<li></li>
<li></li>
</ul>
</div>
<div id=”footer”>
<address>copyright©2006 by kynn Bartlett</address>
</div>
</body>
</html>
/*5.1.CSS*/
Body{color:black; background-color: white;}
#breadcumb{font-family:Verdana,sars-serif; color:black; background-color:silver;}
#header{color:white;background-color:maroon;font-family:Arial,sans-sefrif;}
#footer{color:silver;background-color:black; font-family:Times new roman,serif;}
.tips{color:white; background-color:gray; font-family:Arial,sans-serif;}
通用选择符
除了类型，class，，id选择符之外，CSS也定义了一个通用选择符，适用于页面内所有的规则和内容。由星号表示：*｛color:blue;｝
组合简单选择符：用逗号将选择符分开，可以联合规则。
子选择符：组合选择符最有效的方法这一是使用子代选择符，在HTML和XML中，子代是完全包括于另一个元素之内的元素。
例如：p cite{color:white;background-color:black;}这是一条用来改变包含在段落内所有cite标签颜色的规则。通过组合简单选择符，并用空格分开。
子选择符意味着所有的子代，不仅仅是直接子代。用户也可以将部分样式和基于元素的类型选择符组合起来。如：
.header p{font-family:verdana,sans-serif; color:white; background-color:black;}如下面的例 子：
<!--5.3.html-->
<html>
<head>
<title>babe:best movie ever</title>
<style type="text/css">
/*add style rules here*/
</style>
<link style="text/css" rel="stylesheet" href="5.3.css">
</head>
<body>
<div class="header">
<h1>Movie Review:<cite>Babe</cite></h1>
<p>A mini-review by joe h.moviefan</p>
</div>
<div class="opinion">
<h2>The Best Movie <em>ever</em></h2>
<p>the movie <cite>base</cite> was the best family movie ever prodeucd! this great movid featured talkiing animals,a cantankerous old man ,and subtle-yet winning special effects--who could ask for more?the clever writing and humorous touches make this all-ages movie great for children whilie still very enjoyable by adults.what a great movie!</p>
</div>
<div class="footer">
<p>what did you think?Mail me at <a href="mailto:joe@example.com">joe h.moviefan.com!</p>
</div>
</body>
</html>
/*5.3.css*/
body{font-family:"Courier New",monospace;
color:silver;
background-color:white;
}
.header h1{
font-family:Arial,sans-serif;
color:white;
background-color:black;
}
.header cite{
font-family:Verdana,sans-serif;
background-color:silver;
color:black;
}
.header p{
font-family:Arial,monospace;
color:black;
font-size:x-large;
}
.opinion h2{
color:white;
background-color:navy;
font-family:Arial,sans-serif;
}
em{font-size:larger;}
p cite{
color:white;
background-color:black;
}
.footer{
font-family:"Timews New Roman",serif;
font-size:small;
color:white;
background-color:gray;
}
.footer a{
color:white;
background-color:black;
}
5.3伪类和伪元素
除了类型选择符，id选择符，class选择符之外，CSS也支持伪类和伪元素选择符，伪类选择符是基于一组预定义性质的选择符，HTML可以占有这些预定义性质，实际上这些性质与class属性的功能是相同的，因此在CSS中叫做伪类。伪选择符标识虚拟元素，即在标记中不存在，但是浏览器可以推理并应用样式的元素。
简单的伪类：
：first-child 元素的第一个子元素
:lang() 特定语言的样式
:link 未被访问过的链接
:visited 以前已经访问过的链接
伪类可以作为类型选择符与元素一起使用如：
a:link{color:red;}
用户通过把伪类和真正的类甚至其它的伪类结合在一起，中间不留空格，只有点和冒号提示符，将它们联和。
a. offsite:link{color:green;}
class和伪类的顺序并不重要 。
:link,:visited与body属性相同，提供了对链接颜色的改变，不单改变颜色，CSS允许用户几乎可以将所有样式应用于未被访问过或访问过的链接。
:lang(en-uk){background-color:#ccccff;}以上的作用是：用亮蓝背景显示用英语书写的所有内容。浏览器怎么知道什么是用英语写的呢？
<span lang=”en-uk”>he is for the fjords;</span>
CSS中的伪元素：
:before 插入元素前的内容
:after: 插入元素后的内容
:first-litter 块元素的第一个字母
:first-line 块元素的第一行
关于伪元素和伪类的使用如下所示：
<!--5.5.html-->
<html>
<head>
<title>fortune of reversal</title>
<link style="text/css" rel="stylesheet" href="5.5.css">
<style>
</style>
</head>
<body>
<h1 id="storytitle">fortune of reversal</h1>
<div class="storybody">
<p>they dined on heaping platters of szechuan chicken,of spicy beef,of shrimp and vegetables in some exotic dish without a name.bits of food were passed from were passed from chopsticks to chopsticks,violating all known laws of chinese cuisine etiquteee.the tea flowed hot and fast that night,until the meal finally confcluded itselt.</p>
<p>thank you for dining here tonight,said the badgeless,anonymous waitress.she placed asmall tray containing the check and two wrapped fortune cookies on the edge of the table ,and hefted the eempty plates one by one,forming a stack on the croon of her elbow.</p>
<p>absolutely delicious,declared olover as he pulled card from his wallet and flicked it onto the bill.he picked up the two cookies,an afterthought."fortune cookie,my love?"he asked amanda;,/p>
</div>
</body></html>
/*5.5.css*/
#storytitle{
font-family:Verdana,sans-serif;
}
.storybody p{
font-family:Arial,sans-serif;
}
.storybody p:first-line{
background-color:lightgreen;}
.storybody p:first-letter{
font-size:xx-large;
color:white;
background-color:black;
font-family:Verdana,sans-serif;
}
第六章 CSS盒子模型
本章研究级联样式表的核心，它是规范的一部分，定义网页部分如何显示：像堆起来的盒子，CSS的可视化显示方式定义为一系列基于原始文档的盒子。
内容的显示方式不由HTML规定，相反，它由CSS规定。CSS浏览器处理HTML元素的方法，尽管不是所有的元素都显示在屏幕上，但是每个HTML元素对应一个显示盒子，显示盒子是屏幕上的一个矩形。该矩形包含文本内容。图像，表单控件或其它显示盒子。
HTML元素显示为CSS显示盒子的真正方法被称“可视格式化方式”。可视化方式告诉浏览器应该如何在屏幕上显示HTML内容。
在可视格式化模式中，标记元素分为两个基本类型：块元素和内联元素。
块元素是作为内容的独特块而显示的元素，它以新行开始和结束，包括<p>,<div><table><blockquote><br><ol><h1><h6>。
内联元素没有开始行和结束行，它包含于文本流之内，如<em><span><b><img><input><a>
内联元素在某一行中逐个出现，没有换行，水平放置在页面中，直到现有空间用尽。然后再下一行中继续。
Display属性：
使用display属性，可以改变元素类型，本章主要关注block,inline。即块和内联。Display属性的另一个值为none.将它设为none后的内容根本不会显示。也不会显示它内部的内容。
将display设置为block或inline,将针对元素类型改变为指定的类型。
每个网页实际上是标签的内容的树。
在HTML中，head标签定义为display:none,这就是用户为什么看不见head标签中内容的原因。
盒子显示属性：
在某种程度中，所有CSS属性都是盒子显示属性，它们控制盒子如何显示，三个属性定义盒子的边缘，边距margin。边框：border.填充:padding.
边距是围绕所有CSS盒子的不可见属性，它指示盒子与另外盒子隔多远，很多默认边距为0个像素，边距的单位最长用的是像素和行长（em）.像素是屏幕上单点的宽度，像素值可以写成数字后面加px,行长是度量单位，它参考当前字体的大小，如果字长是12px,那个么个行长是度量等于12像素的一个单位。块元素垂直方向的边距可以重叠，取两个元素间边距 的最大值。
Border属性：边框大小，边框样式，边框颜色。边框样式包括 solid,dashed,dotted.
如:h1{border:0.25em solid navy;}
Padding属性：填充，内容周围的空间就是填充，填充总是与内容本身的背景颜色相同，如：i{padding:3px;}
第七章 级联和继承
级联是级联样式表中的一个关键概念，级联用于解决CSS样式规则的冲突，如：
级联的顺序：
内联样式属性是最特殊的规则类型。
Id选择符是第二特殊的规则，如果规则有多个id选择符，具有id选择符最大数的规则胜出。
类或伪类的数量，有最多类或伪类的规则具有较高的优先权。
比较元素的数量，元素数量越多，特殊性越高。
就近原则，如：对于链接的样式表与嵌入的样式表。哪一个最近声明，采用哪个。
HTML属性总是被CSS规则覆盖。
如果有必要：样式表的作者可以指定一条规则比其他规则更重要。添加!important .
如：em{color:blue !emportant;}
导入CSS：用户可以认为导入的样式表更疏远，意思是说，如果有冲突，它具有较低的优先权，如果设计大型网站，一些CSS规则应用于整个网站，而其它规则只应用于网站的某些部分，那么用户就可以编写一个适用与整个网站的样式表。然后将它导入到网站各个部分所写的样式表。
要导入CSS文件：
@import”filename.css”;
第八章 高级选择符
暂且空过。
第五章 选择符
5.1简单选择符
前面介绍过最简单的选择符类型：类型选择符，class选择符，id选择符，到目前为止，读者学习了如何使用简单选择符创建CSS规则：基于HTML标签的类型选择符和基于HTML属性的class或id选择符。
如何使用class选择符：
<!—5.1.html -- >
<html>
<head>
<title>image accessibility</title>
<link type=”text/css” rel=”typesheet” href=”5.1.css”></head>
<body>
<div id=”breadcrumb”>
<a href=”http://kynn.com”>kynn.com</a>·
<a href=”http://kynn.com”>kynn.com</a>·
<a href=”http://kynn.com”>kynn.com</a>·
Images;
</div>
<div id=”header”>
<h1>image accessibility</h1>
<h2>making your graphics accessible</h2>
</div>
<div class=”tips”>
<p here are some helpful tips on making your graphical content accessible to users who cannot see images</p>
<ul>
<li>always include an<tt>alt</tt>attribute on your graphical content accessible to users who cannot see images:</li>
<li>the<tt>alt</tt>attribute should contain a short replacement for the graphics ,in text; if the image itself has text,list that in <tt>alt</tt>.</li>
<li></li>
<li></li>
</ul>
</div>
<div id=”footer”>
<address>copyright©2006 by kynn Bartlett</address>
</div>
</body>
</html>
/*5.1.CSS*/
Body{color:black; background-color: white;}
#breadcumb{font-family:Verdana,sars-serif; color:black; background-color:silver;}
#header{color:white;background-color:maroon;font-family:Arial,sans-sefrif;}
#footer{color:silver;background-color:black; font-family:Times new roman,serif;}
.tips{color:white; background-color:gray; font-family:Arial,sans-serif;}
通用选择符
除了类型，class，，id选择符之外，CSS也定义了一个通用选择符，适用于页面内所有的规则和内容。由星号表示：*｛color:blue;｝
组合简单选择符：用逗号将选择符分开，可以联合规则。
子选择符：组合选择符最有效的方法这一是使用子代选择符，在HTML和XML中，子代是完全包括于另一个元素之内的元素。
例如：p cite{color:white;background-color:black;}这是一条用来改变包含在段落内所有cite标签颜色的规则。通过组合简单选择符，并用空格分开。
子选择符意味着所有的子代，不仅仅是直接子代。用户也可以将部分样式和基于元素的类型选择符组合起来。如：
.header p{font-family:verdana,sans-serif; color:white; background-color:black;}如下面的例 子：
<!--5.3.html-->
<html>
<head>
<title>babe:best movie ever</title>
<style type="text/css">
/*add style rules here*/
</style>
<link style="text/css" rel="stylesheet" href="5.3.css">
</head>
<body>
<div class="header">
<h1>Movie Review:<cite>Babe</cite></h1>
<p>A mini-review by joe h.moviefan</p>
</div>
<div class="opinion">
<h2>The Best Movie <em>ever</em></h2>
<p>the movie <cite>base</cite> was the best family movie ever prodeucd! this great movid featured talkiing animals,a cantankerous old man ,and subtle-yet winning special effects--who could ask for more?the clever writing and humorous touches make this all-ages movie great for children whilie still very enjoyable by adults.what a great movie!</p>
</div>
<div class="footer">
<p>what did you think?Mail me at <a href="mailto:joe@example.com">joe h.moviefan.com!</p>
</div>
</body>
</html>
/*5.3.css*/
body{font-family:"Courier New",monospace;
color:silver;
background-color:white;
}
.header h1{
font-family:Arial,sans-serif;
color:white;
background-color:black;
}
.header cite{
font-family:Verdana,sans-serif;
background-color:silver;
color:black;
}
.header p{
font-family:Arial,monospace;
color:black;
font-size:x-large;
}
.opinion h2{
color:white;
background-color:navy;
font-family:Arial,sans-serif;
}
em{font-size:larger;}
p cite{
color:white;
background-color:black;
}
.footer{
font-family:"Timews New Roman",serif;
font-size:small;
color:white;
background-color:gray;
}
.footer a{
color:white;
background-color:black;
}
5.3伪类和伪元素
除了类型选择符，id选择符，class选择符之外，CSS也支持伪类和伪元素选择符，伪类选择符是基于一组预定义性质的选择符，HTML可以占有这些预定义性质，实际上这些性质与class属性的功能是相同的，因此在CSS中叫做伪类。伪选择符标识虚拟元素，即在标记中不存在，但是浏览器可以推理并应用样式的元素。
简单的伪类：
：first-child 元素的第一个子元素
:lang() 特定语言的样式
:link 未被访问过的链接
:visited 以前已经访问过的链接
伪类可以作为类型选择符与元素一起使用如：
a:link{color:red;}
用户通过把伪类和真正的类甚至其它的伪类结合在一起，中间不留空格，只有点和冒号提示符，将它们联和。
a. offsite:link{color:green;}
class和伪类的顺序并不重要 。
:link,:visited与body属性相同，提供了对链接颜色的改变，不单改变颜色，CSS允许用户几乎可以将所有样式应用于未被访问过或访问过的链接。
:lang(en-uk){background-color:#ccccff;}以上的作用是：用亮蓝背景显示用英语书写的所有内容。浏览器怎么知道什么是用英语写的呢？
<span lang=”en-uk”>he is for the fjords;</span>
CSS中的伪元素：
:before 插入元素前的内容
:after: 插入元素后的内容
:first-litter 块元素的第一个字母
:first-line 块元素的第一行
关于伪元素和伪类的使用如下所示：
<!--5.5.html-->
<html>
<head>
<title>fortune of reversal</title>
<link style="text/css" rel="stylesheet" href="5.5.css">
<style>
</style>
</head>
<body>
<h1 id="storytitle">fortune of reversal</h1>
<div class="storybody">
<p>they dined on heaping platters of szechuan chicken,of spicy beef,of shrimp and vegetables in some exotic dish without a name.bits of food were passed from were passed from chopsticks to chopsticks,violating all known laws of chinese cuisine etiquteee.the tea flowed hot and fast that night,until the meal finally confcluded itselt.</p>
<p>thank you for dining here tonight,said the badgeless,anonymous waitress.she placed asmall tray containing the check and two wrapped fortune cookies on the edge of the table ,and hefted the eempty plates one by one,forming a stack on the croon of her elbow.</p>
<p>absolutely delicious,declared olover as he pulled card from his wallet and flicked it onto the bill.he picked up the two cookies,an afterthought."fortune cookie,my love?"he asked amanda;,/p>
</div>
</body></html>
/*5.5.css*/
#storytitle{
font-family:Verdana,sans-serif;
}
.storybody p{
font-family:Arial,sans-serif;
}
.storybody p:first-line{
background-color:lightgreen;}
.storybody p:first-letter{
font-size:xx-large;
color:white;
background-color:black;
font-family:Verdana,sans-serif;
}
第六章 CSS盒子模型
本章研究级联样式表的核心，它是规范的一部分，定义网页部分如何显示：像堆起来的盒子，CSS的可视化显示方式定义为一系列基于原始文档的盒子。
内容的显示方式不由HTML规定，相反，它由CSS规定。CSS浏览器处理HTML元素的方法，尽管不是所有的元素都显示在屏幕上，但是每个HTML元素对应一个显示盒子，显示盒子是屏幕上的一个矩形。该矩形包含文本内容。图像，表单控件或其它显示盒子。
HTML元素显示为CSS显示盒子的真正方法被称“可视格式化方式”。可视化方式告诉浏览器应该如何在屏幕上显示HTML内容。
在可视格式化模式中，标记元素分为两个基本类型：块元素和内联元素。
块元素是作为内容的独特块而显示的元素，它以新行开始和结束，包括<p>,<div><table><blockquote><br><ol><h1><h6>。
内联元素没有开始行和结束行，它包含于文本流之内，如<em><span><b><img><input><a>
内联元素在某一行中逐个出现，没有换行，水平放置在页面中，直到现有空间用尽。然后再下一行中继续。
Display属性：
使用display属性，可以改变元素类型，本章主要关注block,inline。即块和内联。Display属性的另一个值为none.将它设为none后的内容根本不会显示。也不会显示它内部的内容。
将display设置为block或inline,将针对元素类型改变为指定的类型。
每个网页实际上是标签的内容的树。
在HTML中，head标签定义为display:none,这就是用户为什么看不见head标签中内容的原因。
盒子显示属性：
在某种程度中，所有CSS属性都是盒子显示属性，它们控制盒子如何显示，三个属性定义盒子的边缘，边距margin。边框：border.填充:padding.
边距是围绕所有CSS盒子的不可见属性，它指示盒子与另外盒子隔多远，很多默认边距为0个像素，边距的单位最长用的是像素和行长（em）.像素是屏幕上单点的宽度，像素值可以写成数字后面加px,行长是度量单位，它参考当前字体的大小，如果字长是12px,那个么个行长是度量等于12像素的一个单位。块元素垂直方向的边距可以重叠，取两个元素间边距 的最大值。
Border属性：边框大小，边框样式，边框颜色。边框样式包括 solid,dashed,dotted.
如:h1{border:0.25em solid navy;}
Padding属性：填充，内容周围的空间就是填充，填充总是与内容本身的背景颜色相同，如：i{padding:3px;}
第七章 级联和继承
级联是级联样式表中的一个关键概念，级联用于解决CSS样式规则的冲突，如：
级联的顺序：
内联样式属性是最特殊的规则类型。
Id选择符是第二特殊的规则，如果规则有多个id选择符，具有id选择符最大数的规则胜出。
类或伪类的数量，有最多类或伪类的规则具有较高的优先权。
比较元素的数量，元素数量越多，特殊性越高。
就近原则，如：对于链接的样式表与嵌入的样式表。哪一个最近声明，采用哪个。
HTML属性总是被CSS规则覆盖。
如果有必要：样式表的作者可以指定一条规则比其他规则更重要。添加!important .
如：em{color:blue !emportant;}
导入CSS：用户可以认为导入的样式表更疏远，意思是说，如果有冲突，它具有较低的优先权，如果设计大型网站，一些CSS规则应用于整个网站，而其它规则只应用于网站的某些部分，那么用户就可以编写一个适用与整个网站的样式表。然后将它导入到网站各个部分所写的样式表。
要导入CSS文件：
@import”filename.css”;
第八章 高级选择符
暂且空过。
扫一扫
2826
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
