CSS 实用笔记(代码详解)

转载 2007年09月25日 12:40:00

●为什么用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注释

/* 定义段落样式表 */ 

{
 
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是颜色的值,此例的效果是使页面中的文字为黑色。 


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

         如果属性的值是多个单词组成,必须在值上加引号,比如字体的名称经常是几个单词的组合:
 
{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选择符要在ID名称前加上一个“#”号。和类选择符相同,定义ID选择符的属性也有两种方法。下面这个例子,ID属性将匹配所有id="intro"的元素:

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

 

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

 

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

 



●定义链接的样式
         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”。


         (字体尺寸为默认尺寸的110%;粗体;蓝色;背景颜色透明) 
         下面这个例子,ID属性只匹配id="intro"的段落元素:
         注意:ID选择符局限性很大,只能单独定义某个元素的样式,一般只在特殊情况下使用。

 
 

相关文章推荐

html+css+jquery倒计时、拖拽div、滚动条固定在低端、div自动换行、输入框不可写等免费小代码实用学习版.txt

1.倒计时 请等待3秒 function run(){ var s = document.getElementById("dd"); if(s.innerHTML == 1)...
  • A_post
  • A_post
  • 2012年05月22日 11:55
  • 1610

实用的60个CSS代码片段[转]

1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ posi...

实用的60个CSS代码片段[转] 博客链接:http://blog.poetries.top

1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ po...

Web开发30段超实用CSS代码

Web开发者的福利30段超实用CSS代码。上周,发表了一篇《Web开发者不容错过的20段CSS代码》,大家一致觉得很实用。   1.花式连字符(&)   这个类应该在s...
  • a125138
  • a125138
  • 2013年05月30日 12:47
  • 1491

30段超实用CSS代码

上周,研发频道发表了一篇“ Web开发者不容错过的20段CSS代码”,大家一致觉得很实用。该文是笔者对后30个的翻译,希望对大家有帮助。 1.花式连字符(&) 这个类应该在span元素里使...

分享30个你需要知道的实用CSS代码片断

CSS是大家在web开发中常用的语言,但是有时候使用非常不爽。某一个CSS可能应用在不同的浏览器中行为不全一样。所以大家得花很多时间来进行调试。 。 幸运的是,网络上大家可以找到很多不错的CSS代码...
  • Tizian
  • Tizian
  • 2012年09月26日 11:01
  • 488

30段超实用CSS代码(1)

Web开发者的福利30段超实用CSS代码。上周,发表了一篇《Web开发者不容错过的20段CSS代码》,大家一致觉得很实用。该文是笔者对后30个的翻译,希望对大家有帮助。   1.花式...

实用的60个CSS代码片段

欢迎来到我的博客阅读 1、垂直对齐如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑:.verticalcenter{ ...

html5 ,css3, js 一些要很实用的代码片

禁止input控件输入空格,input输入身份证号码,input输入电话号码input只能输入数字和点 text-align:right在Android4.4(或某些浏览器下)以下,placehold...

30段超实用CSS代码 (2)

16.气泡引用效果   这种效果常出现在论坛、创建公告牌或者是文本引用上。你只需把下面这段代码拷贝到样式表文件即可。这里(需翻墙)提供了许多关于语音泡泡的代码片段和使用技巧,欢迎去围观。 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS 实用笔记(代码详解)
举报原因:
原因补充:

(最多只允许输入30个字)