CSS入门经典

来源：互联网发布：油画棒知乎编辑：程序博客网时间：2024/06/05 09:05

CSS入门经典第一章理解CSS

级联样式表：一种简单语言的名称，运用它声明Web浏览器如何显示文档。应用CSS,可以改变如何显示Web页面的许多方面，字体，颜色，图形，链接等。级联是指一种特殊的方法，浏览器用这种方法

决定哪些样式应用到页面的指定部分。

超文本标记语言HTML。

可扩展标记语言XML。

可扩展样式表语言XSL.

可伸缩矢量图形SVG。

在CSS中，样式表表示由许多CSS规则组成的文件，规则是最小的CSS单位。它定义一种或多种样式效果。

CSS与HTML或CSS与XML一起使用，运用样式表能自如的改变HTML页面的外观。CSS可用来改变从文本样式到页面布局的一切。并且CSS能够与JavaScript结合产生动态显示效果。

AJAX：表示异步JavaScript与XML。

DHTML：表示动态HTML。

第二章 CSS起步

所有样式表的基础就是组成它的CSS规则。每一条规则都是一条单独的语句。它确定如何设计样式以及如何应用这些样式。CSS规则组成的两部分为：选择符与声明。

声明由属性和属性的值组成。简单的CSS规则：选择符｛属性：值；｝

CSS忽略附加的空格，与HTML一样。

规则的选择符部分表明规则说明文档的哪个部分。选择符最简单的类型是类型选择符。它指出明确的标签元素，只要给出没有尖括号的元素名字，用户就可以编写类型选择符。如：p{属性：值}；

用户通过在大括号内列出声明，可以联合两条共享相同选择符的CSS规则。

如果用户具有相同的声明和不同的选择符，也可以联合，通过使用逗号。

CSS的注释以字符/*开始，以*/字符结束。CSS忽略注释开始和结束之间的所有内容。

文本格式的简单CSS属性：

有些CSS属性可以用来设置文本颜色，字体大小和字族---color,font-size,font-family。

Color属性用于设置元素的前景颜色，background-color属性用设置背景颜色，颜色值可以取颜色名或RGB值。Font-size属性能够指定显示给用户的文本大小。指定字体大小较为简单的方法之一是给出相对于用户默认文本大小的值。默认文本大小有一个normal值。较大的文本约以20%的增量增加到large,x-large,xx-large.较小的文本以20%减小到small,x-small,xx-small.如：em{font-size:large;}

Font-family属性可以设置文本字体，CSS也使用泛型字体族，它们是sans-serif,serif,monospace,cursive,和fatasy.

用户可以通过在特定字体后列出泛型字体，并用逗号分隔，来指定泛型字体。Body{font-family:Arial,sans-serif;}

第三节将样式表链接到HTML

使用<link>元素标签，<link>元素标签只能出现在HTML页面的head部分，在<head>部分添加如下行。

<link type=text/css rel=”stylesheet” href=”basic-2.1.css”>

对颜色RGB的解释：RGB代表红，绿，蓝。一定量的红加上一定量的蓝加上一定量的绿。可以使用rgb函数来指定颜色。H1{color:rgb(100%,50%k,25%)}

可以将font-size设为特定值写成12pt,这是绝对字体大小的情况。

第三章 支持CSS的浏览器

Firefox支持最好。

第四章在HTML中使用CSS

XHTML是将HTML作为ＸＭＬ而编写的一个版本，这说明它遵循XML文档所具有的特定规则和结构。标签全部与HTML中的标签相同，但XHTML中标签全部是小写字母，所有属性值必须加引号，并完全依赖CSS来实现。

XHTML代表向基于XML的Web而跨出的一步。出现了三个变种strict,Transitional,Frameset.Strict完全依赖于CSS。

HTML中的样式表：

嵌入式样式表：另一种将CSS应用于HTML的方法是在带有<style>标签的HTML文件内直接嵌入CSS。

对于嵌入式样式表，请使用<style>标签，只能在网页中的head内使用。

<style type=”text/css” media=”media-type”>

CSS内容]

</style>

在较老的浏览器中隐藏CSS代码：<!-- -- >

内联样式属性：通过使用style属性，用户可以在HTML标签上设置内联样式。在几乎任何一个HTML标签上都可以设置style属性。例：

<table style=”font-family:Arial;font-size:large”>

在文档内部使用CSS的全部三种方法相当正确，例如，外部样工表用与link标签一起应用的整个网站，<style>标签内的内嵌入样式表用于该网页特定的规则；用内联样式设置各个元素的style属性。

第三节：类和ID

除了设置基于HTML元素的样式之外，CSS考虑了基于HTML的两种可选属性，class与id.它们都可以做为CSS规则的选择符部分使用，并可以设置于任何可见的HTML标签之上。

<div><span>元素随着class与id选择符才能真正发挥作用。能过这两个选择符的使用，div,span几乎可以产生任何的效果与表达。Class属性用于定义页面上的相关HTML元素组，它们可能具有相同的功能，在CSS中，表示它们具有适用于它们的相同样式规则。类选择符由类名前加句点指示。如：

.qz{color:blue;}

可以将元素选择符与类选择符结合起来如：p.r3{color:green;}

HTML中的ID属性与Class属性类似，但有很多的限制，只有在页面上的标签才能具有给定的ID，在页面上它必须是唯一的，并且只用于指示该元素。ID选择符由ID值前面的#号指示。类选择符更灵活，所有Id可以完成的类选择符都可以很出色的完成，Id值必须是文档里唯一的，页面上只有一个元素具有该值。Xml中使用ID会更多一些。

HTML的下一个版本将会是XHTML。

第二部分 CSS核心

第五章选择符

5.1简单选择符

前面介绍过最简单的选择符类型：类型选择符，class选择符，id选择符，到目前为止，读者学习了如何使用简单选择符创建CSS规则：基于HTML标签的类型选择符和基于HTML属性的class或id选择符。

如何使用class选择符：

<!—5.1.html -- >

<html>

<head>

<title>image accessibility</title>

<body>

<a href=”http://kynn.com”>kynn.com</a>·

Images;

</div>

<h1>image accessibility</h1>

<h2>making your graphics accessible</h2>

</div>

<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>

</ul>

</div>

</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;}如下面的例子：

<html>

<head>

<title>babe:best movie ever</title>

/*add style rules here*/

</style>

</head>

<body>

<h1>Movie Review:<cite>Babe</cite></h1>

<p>A mini-review by joe h.moviefan</p>

</div>

<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>

<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 块元素的第一行

关于伪元素和伪类的使用如下所示：

<html>

<head>

<title>fortune of reversal</title>

<style>

</style>

</head>

<body>

<h1 id="storytitle">fortune of reversal</h1>

<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”;

第八章高级选择符

暂且空过。

0 0