CSS 实用笔记(代码详解)


转载 http://www.cnblogs.com/yoyebina/archive/2006/12/25/603188.html

●为什么用CSS:

  ·一组样式可以调用在多个对象上
·语法易学易懂(比HTML的语法还容易学,学了HTML之后,学CSS将非常容易)
·丰富的样式效果
·是 DHTML 的基础
·用css布局的一个好处是可以批量对页面进行修改,它能将文档结构和表现层分离开来,
    减轻工作量和服务器的负荷,增加站点的扩展能力和应用。
 
 ●什么是CSS
CSS的英文是Cascading Style Sheets,中文可以翻译成串联式样式表。


●CSS分类:按其位置可以分成三种


1、内嵌样式:

         内嵌样式是混合在HTML标记里使用的,用这种方法,可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值,如下例:
 
< style ="color: sienna;margin-left: 20px;" >  
这是一个段落 
</ p >  
<!-- 这个段落颜色为土黄,左边距为20象素 -->  

         在style参数后面的引号里的内容相当于在样式表大括号里的内容。 
         注意:style参数可以应用于任意BODY内的元素(包括BODY本身),除了BASEFONT、PARAM和SCRIPT。
 
2、内部样式表这是

         这是最典型的CSS的声明方式,但我 个人 认为:,影响页面的外观;
         内部样式表是把样式表放到页面的<head>区里,这些定义的样式就应用到页面中了,样式表是用<style>标记插入的,从下例中可以看出<style>标记的用法:

<head> 
…… 
<style type="text/css"> 
<!-- 
hr 
{color: sienna}
 
{margin-left: 20px}
 
body 
{background-image: url("images/back40.gif")}
 
--> 
</style> 
…… 
</head> 

         注意:有些低版本的浏览器不能识别style标记,这意味着低版本的浏览器会忽略style标记里的内容,并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生,我们用加HTML注释的方式(<!-- 注释 -->)隐藏内容而不让它显示:


3、外部样式表:

         调用外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head>区内,如下:
 
<head> 
…… 
<link href="mystyle.css" rel="stylesheet" type="text/css" media="all"> 
…… 
</head> 

         上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=”stylesheet”是指在页面中使用这个外部的样式表。type=”text/css”是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。media是选择媒体类型,这些媒体包括:屏幕,纸张,语音合成设备,盲文阅读设备等。 

         一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时,所有页面的样式都随之而改变。在制作大量相同样式页面的网站时,非常有用,不仅减少了重复的工作量,而且有利于以后的修改、编辑,浏览时也减少了重复下载代码。


●CSS注释


          为了方便你自己或者他人日后更好地理解你的CSS代码,你可以写CSS代码注释。CSS代码注释以/*开头,以*/结束。

/* 定义段落样式表 */  

{
 
text-align
: center; /* 文本居中排列 */
 
color
: black; /* 文字为黑色 */
 
font-family
: arial /* 字体为arial */
 
} 




1. 基本语法
 

         CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。 
         基本格式如下:

selector {property: value}       /*(选择符 {属性:值}) */

         选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY、P、TABLE……,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开:

body {color: black} 

         选择符body是指页面主体部分,color是控制文字颜色的属性,black是颜色的值,此例的效果是使页面中的文字为黑色。 
         如果属性的值是多个单词组成,必须在值上加引号,比如字体的名称经常是几个单词的组合:
 
{font-family: "sans serif"}    /*(定义段落字体为sans serif)*/

         为了使你定义的样式表方便阅读,你可以采用分行的书写格式:


{
 
text-align
: center;
 
color
: black;
 
font-family
:
 arial 
}
 

/*(段落排列居中,段落中文字为黑色,字体是arial)*/

2. 选择符组 (集体声明 和 分项声明方式)

         你可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义:
 
h1, h2, h3, h4, h5, h6 { color: green }  

/*(这个组里包括所有的标题元素,每个标题元素的文字都为绿色)*/
 

p, table
{ font-size: 9pt }
 

/*(段落和表格里的文字尺寸为9号字)*/
 

/*效果完全等效于:*/
 

{ font-size: 9pt }
 
table 
{ font-size: 9pt } 

3. 类选择符 

         用类选择符你能够把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。假如你想要两个不同的段落,一个段落向右对齐,一个段落居中,你可以先定义两个类:

p.right {text-align: right}  
p.center 
{text-align: center} 

         然后用不在不同的段落里,只要在HTML标记里加入你定义的class参数:
 
<class="right">  这个段落向右对齐的 
</p>
 

<class="center">
 
这个段落是居中排列的 
</p>
 

<class="right">
 这个段落向右对齐的 
</p>
 

<class="center">
 
这个段落是居中排列的 
</p> 

         注意:类的名称可以是任意英文单词或以英文开头与数字的组合,一般以其功能和效果简要命名。 

         类选择符还有一种用法,在选择符中省略HTML标记名,这样可以把几个不同的元素定义成相同的样式:
 
.center {text-align: center} 

         (定义.center的类选择符为文字居中排列) 
         这样的类可以被应用到任何元素上。下面我们使h1元素(标题1)和p元素(段落)都归为“center”类,这使两个元素的样式都跟随“.center”这个类选择符:

<h1 class="center">  
这个标题是居中排列的 
</h1>
 
<class="center">
 
这个段落也是居中排列的 
</p> 

         注意:这种省略HTML标记的类选择符是我们经后最常用的CSS方法,使用这种方法,我们可以很方便的在任意元素上套用预先定义好的类样式。
 
4. ID选择符

         在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式。 
         ID选择符的应用和类选择符类似,只要把CLASS换成ID即可。将上例中类用ID替代:

< id ="intro" >  
这个段落向右对齐 
</ p >  

         定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同,定义ID选择符的属性也有两种方法。下面这个例子,ID属性将匹配所有id="intro"的元素:

#intro 
{  
font-size
: 110% ;  
font-weight
: bold ;  
color
: #0000ff ;  
background-color
: transparent 
}  

         (字体尺寸为默认尺寸的110%;粗体;蓝色;背景颜色透明) 
         下面这个例子,ID属性只匹配id="intro"的段落元素:

p#intro 
{  
font-size
: 110% ;  
font-weight
: bold ;  
color
: #0000ff ;  
background-color
: transparent 
}  

         注意:ID选择符局限性很大,只能单独定义某个元素的样式,一般只在特殊情况下使用。



●定义链接的样式


         CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
a:link{font-size : 18pt ;text-decoration : none ;color : blue ;}
a:visited 
{font-size : 18pt;text-decoration : none ;color : brown ;}
a:hover 
{font-size : 24pt ;text-decoration : underline ;color : red;}
a:active 
{font-size : 24pt ;text-decoration : none ;color : green ;}

         以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。

你可能感兴趣的:(css)