您的位置：首页 > Web前端 > HTML

网页制作html的基本解释与操作（三）

2012-11-22 17:49 357 查看

1.1HTMLCSS

CSS选择器

不同的样式定义有不同的应用方式，与之对应的样式名也有区别，所以样式名称为选择器应该容易理解不同应用方式的样式。

1.类选择器：

名称是以点“.”开始的一串字符组合，这类样式必须通过标签中的class属性使用。这种样式必须通过标签中的class属性应用。

例：.wenzi{font-size:20px;}

<pclass=”wenzi”>类选择器样式</p>

2.标签选择器：

名称与html标签名一致，在页面中所有定义样式的标签，在标签中若无类选择器样式应用，此标签内容将按标签选择器样式显示。这种样式只要定义同名标签就会自动应用。

例：p{font-color:#6ec;}

则页面中<p>标签将以#6ec这个颜色显示。

ID选择器：

名称是以“#”与一串字符组合，这儿“#”是ID选择器的标志，当某一个标签中ID属性的值与“#”后边的字符一致时，则此标签应用这个样式。这种样式应用于ID属性值与#后字符中相同的标签。

例：#idname{font-size:26px;}

<pid=”idname”>ID样式</p>

不建议同一个页面文档中的任意两个标签具有相同的ID属性值，所以在符合web标准的网页文档中，ID样式仅仅对应一个标签。如果有多个标签将使用的样式与这个样式相同的话，那么定义样式时选用类选择器而不用ID选择器定义样式。

3.级别选择器：

（这个在教材上被称之为派生选择器，级别选择器是我自己的叫法）

这种样式相应的标签会自动应用。

命名方式查看后边的例子。

为了更容易理解把以下标签的嵌套用以下的形式写出：

<p>

<img/>

<span>

a

<strong>

b

</strong>

c

</span>

</p>

这些标签是嵌套在一起的，p标签中嵌入了img和span标签，在span标签中又嵌入了strong标签，其中img标签、span标签、strong标签可以称作为p标签的下级标签，img标签、span标签可以称之为p标签的子标签，strong标签是span标签的子标签，反之是上级标签或父标签。注意strong标签不是p的子标签，但是p标签的下级标签。

然后再来看两个例子来说明这种选择器：

例1:<p><img><span>a<strong>b</strong>c</span></p>

pspan{font-color:#038;}

这样的选择器是指嵌在p标签的下级标签span标签的样式。

pstrong{font-color:#865;}

这样的选择器是指嵌在p标签的下级标签strong标签的样式

pspanstrong{font-color:#921;}

这样是指标签p的下级标签span标签的下级标签strong的样式。

注：只要是下级标签都可以用这种方式定义。如此例所示，如果文档中还有其它的span标签，但并不是p标签的下级标签则不会应用此样式。下同。

例2：<pclass=”abc”><img><span>a<strong>b</strong>c</span></p>

还可以这样来定义：

.abcspan{font-color:#038;}

.abcstrong{font-color:#865;}

.abcspanstrong{font-color:#921;}

这是指应用了样式abc的标签的下级标签的样式。

例3：#abc{}

<pid=”abc”><img><span>a<strong>b</strong>c</span></p>

如果定义了id样式，并且有标签id使用了这个属性值，还可以这样定义：

#abcspan{font-color:#038;}

#abcstrong{font-color:#865;}

#abcspanstrong{font-color:#921;}

伪类：只介绍超级链接的几种状态伪属性的样式定义方法。

这种样式会自动应用于伪属性之前的标签a。

a:link{}超级链接未访问时的样式。

a:active{}鼠标左键在超级链接上按下未松开时的样式。

a:hover{}鼠标经过超级链接上方时的样式。

a:visited{}超级链接访问过后的样式。

*选择器：

这种选择器样式定义的名称只是一个通配符“*”，指所有的标签，换句话即所有的标签都会自动应用这个样式。

*{}

如何使用样式

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
[code]<linkrel="stylesheet"type="text/css"href="mystyle.css">

</head>[/code]

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在head部分通过<style>标签定义内部样式表。

<head>
[code]<styletype="text/css">
body{background-color:red}
p{margin-left:20px}
</style>

</head>[/code]

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。以下实例显示出如何改变段落的颜色和左外边距。

<p[code]style="color:red;margin-left:20px"
>
Thisisaparagraph
</p>[/code]

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航