css基础知识


基本语法

1.选择符
任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如,

P { text-indent: 3em }
当中的选择符是P。

2.类选择符
单一个选择符能有不同的CLASS(类),因而允许同一元素有不同样式。例如,

code.html { color: #191970 }
code.css { color: #4b0082 }
以上的例子建立了两个类,css和html,供HTML的CODE元素使用。CLASS属性是用于在HTML中以指明元素的类,例如,

<P CLASS=warning>
每个选择符只允许有一个类。
例如,code.html.proprietary是无效的。</p>
类的声明也可以无须相关的元素:

.note { font-size: small }
在这个例子,名为note的类可以被用于任何元素。

最好根据功能命名类.
3.ID 选择符
ID 选择符个别地定义每个元素的成分。尽量少用,因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如,

#svp94O { text-indent: 3em }
<P ID=svp94O>文本缩进3em</P>

4.span 关联选择符
关联选择符是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性,而且因为层叠顺序的规则,它们的优先权比单一的选择符大。例如,

P EM { background: yellow }
是P EM 这个值表示段落中的强调文本会是黄色背景;而标题的强调文本则不受影响。

属性
一个属性被指定到选择符是为了使用它的样式。属性的例子包括颜色、边界和字体。


声明的值是一个属性接受的指定。例如,属性颜色能接受值red。

组合
为了减少样式表的重复声明,组合的选择符声明是允许的。例如,文档中所有的标题可以通过组合给出相同的声明:

H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif }

继承
实际上,所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值,除非另外更改。例如,一个BODY定义了的颜色值也会应用到段落的文本中。

有些情况是内部选择符不继承周围的选择符的值,但理论上这些都是特殊的。例如,上边界属性是不会继承的;直觉上,一个段落不会有同文档BODY一样的上边界值。

注解
样式表里面的注解使用C语言编程中一样的约定方法去指定。CSS1注解的例子如以下格式:

/* COMMENTS CANNOT BE NESTED */

伪类和伪元素
伪类和伪元素是特殊的类和元素,能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如,visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分,例如段落的第一个字母。

伪类或伪元素规则的形式如

选择符:伪类 { 属性: 值 }

选择符:伪元素 { 属性: 值 }

伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用,如下:

选择符.类: 伪类 { 属性: 值 }

选择符.类: 伪元素 { 属性: 值 }

定位锚伪类
伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示,甚至不同字体大小和风格。

A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }

首行伪元素
首行伪元素可以用于任何块级元素(例如P、H1等等)。例如,

P:first-line {
         font-variant: small-caps;
         font-weight: bold }

首个字母伪元素
首个字母伪元素用于加大(drop caps)和其他效果。含有已指定值选择符的文本的首个字母会按照指定的值展示。一个首个字母伪元素可以用于任何块级元素。例如,

P:first-letter { font-size: 300%; float: left }
会比普通字体加大三倍。

层叠顺序

当使用了多个样式表,样式表需要争夺特定选择符的控制权。在这些情况下,总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。

DIV元素
是一个块级元素,它可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类,如章节、摘要或备注。例如:

<DIV CLASS=note>
<H1>Divisions/部分</H1>
<P>DIV元素在HTML 3.2中有定义,但HTML 3.2中只有ALIGN属性能兼容。HTML 4.0在属性中加入CLASS、STYLE、和ID属性。</P>
<P>因为DIV可以包含其他块级集成,在用于建立文档的大型章节例如本备注是很有用的。</P>
<P>要求关闭标记。</P>
</DIV>

SPAN元素
SPAN元素被加入到HTML中以允许网页制作者给出样式但无须附加在一个HTML的结构元素上。SPAN在样式表中作为一个选择符使用,而且它也能接受STYLE、CLASS和ID属性。

SPAN是一个内联元素,它纯粹是应用样式,而当样式表失效时它就没有任何的作用。

例如,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>SPAN的例子</TITLE>
<STYLE TYPE="text/css" MEDIA="screen, print, projection">
<!--
.firstwords { font-variant: small-caps }
-->
</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS=firstwords>The first few words</SPAN>前面是
段落中少数的文字,会是小型大写字母。样式也可以内联,如改变文
字的样式为<SPAN STYLE="font-family: Arial">Arial</SPAN>.</P>

ID属性
ID属性用于定义一个元素的独特的样式,如,

#wdg97 { font-size: larger }

可以通过ID属性应用到HTML中:

<P ID=wdg97>欢迎访问Web Design Group及TV water 168!</P>

整个文档当中的每个ID属性的值都必须是唯一的。其值必须是一个以字母开头紧接字母、识字或连字符。字母限于A-Z和a-z。

CSS1不允许在ID选择符中有句号

当一个样式只需要在任何文档中应用一次时,使用ID是很适合的。 ID与STYLE属性相比,在于ID允许指定媒体的样式,而且也可以被应用于多个文档(虽然每个文档只用一次)。

CLASS属性
CLASS属性用于指定元素属于何种样式的类。例如,样式表可以加入punk和warning类:

.punk { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color:            red; background: white }
这些类可以使用CLASS属性在HTML中引用:

<H1 CLASS=punk>属性扩展</H1>
<P CLASS=warning>一些属性扩展会有负值的边效果</p>

在这个例子中,punk类可以用于任何BODY元素因为它在样式表中没有HTML元素关联。而在这个例子的样式表,warning类只能用于P元素。

显示
语法: display: <值>

block (在元素的前和后都会有换行)
inline (在元素的前和后都不会有换行)
list-item (与block相同, 但增加了目录项标记)
none (没有显示)

漂浮 将文本环绕在一个元素的周围.
语法: float: <值>

允许值: left | right | none

清除 指定一个元素是否允许有元素漂浮在它的旁边.
语法: clear: <值>

允许值: none | left | right | both

值left移动元素到在其左边的漂浮的元素的下面;同样的值right移动到其右边的漂浮的元素下面。其他的还有缺省的none值,和移动元素到其两边的漂浮的元素的下面的none值。

pear   2008-06-01 21:21:53 评论:0   阅读:124   引用:0

发表评论>>

署名发表(评论可管理,不必输入下面的姓名)

姓名:

主题:

内容: 最少15个,最长1000个字符

验证码: (如不清楚,请刷新)

Wo.yao︵你罒baぺ我放在訫里メyi辈子ヤ╲o`輕聲鋯訴伱┈wǒ愛dē★﹌~只有伱`⌒这辈子也只是你一个★﹌~⊕