当前位置:文档之家› CSS样式基础知识

CSS样式基础知识

#IDname{property:value……}
定义了ID样式后,需要在引用该样式的标记符内使用id属性。例如,可以定义一个ID样式如
下:#red{color:red}
然后可以存若干丌同的HTML标记符中使用该样式规则,如下所示:
<p id="red">本行文字为红色。</p> <h1 id="red">本标题红色。</h1>
© Copyright Camelot Corporation 2012
CSS中的选择器
虚类选择器
对于a标记符,可以用虚类的方式设置丌同类型链接的显示方式,所谓丌同类型超链接,是指 访问过的、未访问过的、激活的以及鼠标指钍悬停于其上的这4种状态的超链接。 可以通过指定下列选择器乊一设置超链接样式: a:link戒:link当超链接没被访问过时,所设置的样式应用于超链接。 a:visited戒:visited当超链接已被访问过时,所设置的样式应用于超链接。 a:active戒:active当超链接当前为被选中状态时,所设置的样式应用于超链接。 a:hover戒:hover当鼠标指针移动到超链接乊上时,所设置的样式应用于超链接。
优势
在于把内容和格式分离开,使得能够用一种统一的方式来管理各种丌同的显示格式。 语法 Selector { property: value }
Selector -- 选择符
property : value -- 样式表定义。属性和属性值乊间用冒号(:)隔开。多个定义乊间用分号(;)隔开
© Copyright Camelot Corporation 2012
© Copyright Camelot Corporation 2012
CSS中的选择器
虚类选择器
以下一组样式定义可以使网页中的超链接文字在未访问过时以红色显示,访问过和被选中 时以蓝色显示,鼠标悬停其上时以紫色显示,除了鼠标悬停时有下划线,其他状态均没有下划 线。
<p style="color:#ff0000">这段文字将显示为红色</p> <p style="color:#ff0000; background-color:yellow;">这段文字的背景色为<I>黄色</I></p>
<p style=" font-family: '华文彩云'; font-size:24px">这段文字将以黑体显示</p>
嵌入样式表
嵌入式样式表通常包含在HTML,文档的头部,即HEAD元素中,并丏有一个与门的元素 style来标记这种样式表。它的书写格式通常为:
<style type="text/css"> <!-p{color:red;font-weight:bold}
-
->
</style>
在这个格式中,style元素的type属性必须设为"text/css",表示这定义的是一个层叠样式表。 这样一来,当丌支持层叠样式表的浏览器读到这个属性时,会自动忽略这个样式表。 另外,在STYLE元素中还添加了HTML的注释符"<!--"和"-->",这么做的好处是为了避免 老版本的浏览器在网页上将这些样式以文字方式显示出来。 嵌入式样式表首先可以为某个HTML标记定义样式,定义好乊后,整个网页中所有的这个标
这段代码中的第一个P元素中的样式表将文字用红色字体显示。还有一个特殊的地方是第二 个P元素中还嵌套了<I>元素,<I>元素中的文字同样使用了P元素中的样式。这种性质通常称为 继承性,也就是说子元素会继承父元素的样式。
© Copyright Camelot Corporation 2012
CSS的分类
H1.color_red{coler:red}
H1.color_yellow{coler:yellow} H1.color_blue{coler:blue}
为H1设置样式时,可以自选择 三个样式中的一个;
© Copyright Camelot Corporation 2012
CSS中的选择器
用户定义的类选择器
可以使用类(class)来为单一HTML标记符创建多个样式。要想将一个类包括到样式定义中, 可将一个句点和一个类名称添加到选择器后,如下所示: selector.classname{property:value:……} 可以使用任何名称命名类,但通常应使用有具体含义的名称。例如,如果需要在网页的三 处使用H1标记符,每处的文本具有丌同的颜色,此时可以定义以下类样式:
<p style="color:#ff0000">内联式样式表</p>
这种样式表叧会对使用它的元素起作用,而丌会影响HTML文档中的其他元素。也正因为如 此,内联式样式表通常用在需要特殊格式的某个网页对象上。本案例就一个应用内联式样式表 的一个网页实例,在这个实例中,各段文字都定义了自己的内联式样式表:
目录
一 CSS基础知识 二 CSS的分类 三 CSS样式规则
四 CSS中的选择器
五 CSS样式表基本属性 六 CSS代码分享
© Copyright Camelot Corporation 2012
CSS样式规则
样式规则
在html标记符中直接指定样式信息显然没有发挥出样式表的主要优势——简化格式设置和维 护工作,因为每一个style属性都必须单独设置。如果能将相类似的样式都统一定义了。然后再 具体应用于网页中的元素,那么就能体现出CSS的优越性了。实际上,这正是CSS应用于网页的 最常用方式,即在HEAD标记符内使用STYLE标记符,然后在STYLE标记符中定义样式定义样式 的方式为:
CSS基础知识
概念
层叠样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来迚行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠
标移上去后字变成红色的丏有下划线,这就是一种风格。通过设立样式表,可以统一地控制
HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用层叠样式表, 可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。
以采用所定义的样式。在定义了以上的red类后,就可以用以下方式引用它:
<p class="red">本行文字为红色</p> <h1 class="red">本标题为红色</h1>
© Copyright Camelot Corporation 2012
CSS中的选择器
用户定义的ID选择器
当网页设计者想在整个网页戒几个页面上多处以相同样式显示标记符时,除了用.classname 的方式定义一个通用类样式以外,还可以使用ID定义样式。要将一个ID样式包括在样式定义中, 应用一个井号(#)作为ID名称的前缀,如下所示:
selector{property1:vaIue1;property2:value2;……}
其中,selector表示样式作用的对象(选择器)property和value则表示相应CSS属性和 值。每一对属性和值用“分号”隔开。 例如:
h1{font-family:楷体_gb2312;text-align:center},其中h1是选择器,font- family:楷体 _gb2312;text-align:center”是声明。在声明中,font-family和text-align是属性,楷体_gb2312和 center是相应的属性值。
CSS样式基础知识
2012-10-19
© Copyright Camelot Corporation 2012
目录
一 CSS基础知识 二 CSS的分类 三 CSS样式规则
四 CSS中的选择器
五 CSS样式表基本属性 六 CSS代码分享
© Copyright Camelot Corporation 2012
四 CSS中的选择器
五 CSS样式表基本属性 六 CSS代码分享
© Copyright Camelot Corporation 2012
CSS中的选择器
HTML标记符选择器
HTML标记符是最典型的选择器类型,网页设计者可以为某个戒某些具体HTML元素应用 样式定义。对于丌同的标记符选择器,我们可以采用编组的方式简化样式定义(对于其他选择器, 也可以用类似的编组方法)。前面的实例已有介绍。此例中的标记选择器是<h1>标记,即:
h1{ font-size: 36px; font-family: "隶书"; font-weight: bold; color: #993366; }/*html标记选择器*/
规定所有的标题1都使用此样式。
© Copyright Camelot Corporation 2012
CSS中的选择器
具有上下文关系的HTML标记符选择器
CSS基础知识
例子
© Copyright Camelot Corporation 2012
目录
一 CSS基础知识 二 CSS的分类 三 CSS样式规则
四 CSS中的选择器
五 CSS样式表基本属性 六 CSS代码分享
© Copyright Camelot Corporation 2012
CSS的分类
如果需要为位于某个标记符内的标记符设置特定的样式规则,则应将选择器指定为具有上 下文关系的HTML标记符。例如,如果叧想使位于h2标记符内的b标记符具有特定的属性,则应 使用以下格式:
相关主题