html--css

 

CSS全称Cascading Style Sheet。层叠式样式表。
一、CSS的四种实现方式:
1.内嵌式:

2.外链式:

3.导入式

4.属性式:

二.CSS的定义:
选择对象{属性1:值1;属性2:值2;属性3:值3;属性n:值n……}
如:
td{font-size:12px;color:#FFFF00}
.myname{font-size:12px;color:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-decoration: underline;}

三.四种选择对象
1.HTML selector (TagName)
2.class selector (.NAME)
3.ID selector (#IDname)
4.特殊对象 (a:hover a:link a:visited a:active)

1.HTML selector
HTML selector就是HTML的置标符,如:DIV、TD、H1。HTML selector的作用范围是应用了该样式的所有页面中的所有该置标符。
例:
td
{
color: #FF0000;
}
-->
注意:代码的作用是使表格单元格内文字自动变红色。

2.class selector
定义class selector需要往其名称其加一个点“.”。如“.classname”。class selector的作用范围是所有包含“class="classname"”的置标符。
例:
.fontRed
{
color: #FF0000;
}
-->
注意:在第二个中没有“class="fontRed"”,所以文字没有变红色。

3.ID selector
定义ID selector需要往其名称其加一个点“#”。如“#IDname”。ID selector的作用范围是所有包含“ID="classname"”的置标符。
例:

#fontRed
{
color: #FF0000;
}
-->  
注意:在第二个中没有“ID="fontRed"”,所以文字没有变红色。

4.特殊对象
特殊对象包括四种,是针对链接对象设置的:
a:hover 鼠标移上时的超链接
a:link 常规,非访问超链接
a:visited 访问过的超链接
a:active 鼠标点击时的超链接
特殊对象的作用范围是所有置标符(这句话有待商榷,因为下面很快就有一种方法可以把“所有”两个字推翻)。
例:
a:hover
{
color: #0000FF;
text-decoration: underline;
}
-->
注意下面,很有用!!!
a.classname:hover
a#IDname:hover
这两种写法,是分别配合.classname与#IDname使用的。它的作用范围变成了所有包含“class="classname"”或“ID="IDname"”的置标符。这种写法,可以帮助你在同一页面中实现多种a:hover效果,可以看一下艺网的主页上导航栏文字与普通文章标题在鼠标时的区别。

四.应用:
1.置标符 自动应用
2.特制类 class="NAME"
3.ID   ID="IDname"
4.特殊对象 自动应用
五.CSS属性
CSS的属性有很多,像上文中用到最多的color,表示文字的颜色。background-color表示背景色。这个是最主要的,但是因为没有什么难度,参考一下相关手册就可以了。

CSS 标签属性/属性参考
这里列出了目前支持的样式表(CSS)标签属性。

CSS 标签属性/属性

行为属性 behavior

字体和文本属性 direction
direction
font
font-family
font-size
font-style
font-variant
font-weight
ime-mode
layout-grid
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
letter-spacing
line-break
line-height
min-height
ruby-align
ruby-overhang
ruby-position
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-transform
text-underline-position
unicode-bidi
vertical-align
white-space
word-break
word-wrap
writing-mode

posted on 2007-11-06 09:28 青蛙學堂 阅读(551) 评论(1)  编辑 收藏 引用 所属分类: 軟件布袋網站

评论

# re: html--css 2007-11-06 09:39 yick

Cascading Style Sheets(简称CSS),翻译为“层叠样式单”或“级联样式单”,又简称“样式表”。

CSS的引入是用来扩展HTML的,而不是用来替代HTML的。也就是说CSS离不开HTML,它只是一项辅助工具,是对HTML功能的一种补充。

CSS的优势

在CSS标准里,不仅重新定义了HTML原有的样式,如文字的大小、颜色等;更加入了重叠文字、区块变化及任意位置放置等多项新属性。通过CSS可以使用更丰富、更灵活的样式,更简单地设计出更美观的网页。同时,也让网页的设计与维护更有效率。

减少图像文件的使用:很多网页为求设计效果,而大量使用图像,以致网页的下载速度变慢。CSS提供了很多文字样式的设定,且再加上IE内建的滤镜特效,因此可轻松取代原来图像才能表现的视觉效果。这样的设计方式让修改网页内容变得更方便,也大大提高了下载速度;

集中管理样式信息:CSS的基本概念在于可将网页要展示的内容与其表现的样式设定分开,也就是将网页的外观设定信息从网页的内容中独立出来,并集中管理。这样,当要改变网页外观时,只需更改样式设定的部分,HTML文件本身并不需要任何的更改;

共享样式设定:网页的样式设定和内容分离的好处,除了可集中管理外,如果进一步将CSS样式的信息存储成独立的文件,还可让多个网页文件共同使用它。这样,可省却在每一个网页文件中都要重复设定样式的麻烦;

将样式分类使用:相对于多份HTML文件可套用同一个CSS样式文件,也可以在一份HTML网页文件上套用多个CSS样式文件。

CSS的规则

CSS的样式规则由两部分组成:选择器和声明。

选择器就是样式的名称,包括自定义的类,HTML标签和CSS选择器样式。比如“.mycss”为自定义的类,“td”为标准HTML标签,而“a:link”则是CSS选择器样式;

声明则是用于定义样式元素的。声明由分两部分:属性(如font-size)和值(如12px)。对于一个选择器而言,可以有多个声明。比如一个声明是表示颜色,一个声明是表示大小等。

以下为CSS样式的代码片段:


td {
font-size: 12px;
color: #666666;
}
.cnbruce {
background-color: #000033;
}


其中“td”和“.cnbruce”都属于选择器,“font-size”、“color”以及“background-color”都属于声明中的属性,而“12px”、“#666666”及“#000033”即为属性对应的值。每个选择器的声明都采用{…}包含。

CSS的形式

从CSS代码的标签形式来看,分如下3种CSS样式:

1,自定义CSS样式,又称类样式。可应用于任何标签,名称必须带有句点“.”,比如“.cnbruce”;

2,HTML标签样式。虽说自定义CSS样式可应用任何标签,但对于HTML固有的标签,每次都要选用自定义的样式就显得比较麻烦。所以HTML标签样式的出现就是为了扩展HTML标签的;

3,CSS选择器样式。此为高级选项,可用来定义标签的组合,比如“a”表示对超级链接样式的选择,“td”表示对单元格样式的选择,而如果对单元格中超级链接样式的选择则使用“td a”。

a {
color: #3366CC;
}
td a{
color: #FF0000;
}


如上代码的定义,对于普通插入的超级链接的颜色,和在单元格中使用的超级链接的颜色,将进行不同的显示。

CSS的应用范围

CSS无处不在,它可以分为以下两种。

外部CSS样式表:以扩展名为.css的文件而存在,文件中内容即是所有样式的选择和声明。该文件可做为共享文件,让多个文档共同引用并应用,达到站点文件样式的一致性。同时,如果修改该样式表文件,所有引用的文档都将改变其样式,达到网站迅速改版的目的。

内部CSS样式表:只存在于当前文档中,并只针对当前页进行样式应用的方法。一般存在于文档head部分的style标签内。

外部CSS样式表和内部CSS样式表可同时作用于一个页面,但当两种样式表出现对同一选择对象进行样式修饰时,浏览器将按照如下规则来应用样式效果:

若两者所声明的属性不相冲突,则显示为该两种样式的全部属性;
若两者所声明的属性直接相冲突,则采用内部样式表的样式。
所谓“求同存异,内部优先”。

  回复  更多评论   

只有注册用户登录后才能发表评论。
<2024年4月>
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

导航

统计

常用链接

留言簿(8)

随笔分类

随笔档案

收藏夹

青蛙学堂

最新评论

阅读排行榜

评论排行榜