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

HTML学习(6)使用样式

2010-07-27 14:39 417 查看

1.关于样式

1.1使用样式的优点

    假设有一个FAQ的页面，需要将所有的question都设置为绿色，可以在每个问题前加上<font>标签将color属性设置为绿色。但是如果我们需要将页面中所有问题改为蓝色，就会变得非常麻烦。所以需要样式，样式类似于C++中的宏定义，只需在开头声明，当需要改动时，只改变定义的值就都改了。

    示例：

<style>p.question{color:green}</style>

    该代码建立了一个特定的<p>标签累，其名称为question。每当使用<p>标签，且其class属性设置为question时，段落文本都将用绿色显示。

2样式的基本要素

  示例：

<head>

<title>style</title>

<style>h1{font-weight:bold;font-size:14pt;color:orange}</style>

</head>

  在该示例中，样式是为<h1>标签创建的，它设置了标题的字体高度、字号及颜色。Web页的样式必须被包括在页面标题中。当然，页面也可以直接应用于一段html代码。

示例：

<h1 style = "font-weight:bold;font-size:14pt;color:orange">.....</h1>

第一种方式是创建作为样式页的一部分，并且将要应用于所有<h1>标签的样式；而第二种方式创建的是只应用于<h1>标签指定实例的样式。

3.样式的应用

3.1内部样式

    在Web页面的标题中创建一个或一组样式并用<style>括住时，表示将该样式应用于整个页面。这种包含在Web页中的样式集合被称为“内部样式页”。

    示例：

<head>

<title>FAQ</title>

<style>

    h3{background:green;color:white}

    p.question{color:green;font-style:italic}

</style>

</head>

3.2外部样式

    外部样式页被包含在一个独立于将要应用该样式的Web页文件中。使用外部样式页的优点是，可以将样式应用于多个Web页。

    示例：

h3{background:green}

p.question{color:green;font-weight:bold}

    该代码必须以一个带有.css（这是用于级联样式的标准扩展名）扩展名的文件形式出现。假设该代码被放在一个名为"st.css"的文件中，然后使用下面代码来应用该样式：

<link rel = "stylesheet" type = "text/css" href = "st.css">

    <link>标签用来引用.css样式页并将该样式页与Web页关联起来。rel属性只是说链接引用的是一个将要应用于文档的样式页。type属性指定的是链接内容的类型，在该示例中为级联样式页。同内部样式页，外部样式页的引用必须放在标题中。

3.3样式类

    除了将样式应用于页面中指定标签的所有实例之外，还可以建立应用于一类标签的“样式类”。

    示例：

p.question{color:green;font-style:italic}

    该代码表明，样式类是通过将样式指定为标签名后跟一个句点（.），然后跟类名称（question）的形式来创建的。

3.4局部样式

    将样式应用于个别标签，这就是所谓的“局部样式”。

    示例：

<h3 style = "background:green;color:white">Rel</h3>

    该样式只应用于该标签，局部样式将覆盖应用于同一个标签的样式页中的所有样式。

3.5链接样式

    链接样式专门应用于Web页中的超链接文本方式。下面是一些超链接状态：

    link          还没有被访问过的链接

    visited     已经被访问过的链接

    active      刚刚被单击的链接

    hover      鼠标指针停留在链接上

    通过在标签a后跟一个冒号，然后跟超链接的状态名可以为超链接创建样式。

    示例：

a:hover{background:green;color:white}

4.样式和自定义样式标签

HTML标签有两种：块级标签和内置标签。块级标签通常会在Web页中开始新的一行，并且常常会包含其他标签。常用的有<p>、<body>、<table>、<h1>等等。内置标签通常不会再Web页中开始新的一行，并且只能包含文本或其他内置标签。常用的有<b>、<i>、<font>和<img>等。

<div>标签被用来创建自定义的块级标签；<span>标签被用来创建自定义的内置标签。

4.1创建自定义的样式标签

div.question{color:green;font-style:italic}

    该代码为自定义问题创建了一个样式。该样式是通过使用div标签名后跟一个句点，然后跟自定义样式标签的名称来指定的。然而这并不意味着您已经创建了一个名为“<question>”的自定义样式标签；相反，创建了一个名为“question"的div标签的自定义类别。

span.qna{font-size:150%}

    该代码自定义内置标签。创建了一个具有qna类名的自定义样式标签。

4.2使用自定义的样式标签

    示例：

<div class = "question">

<span class = "qna">Q</span>:What is your name?</div>

<p>

<span class = "qna">A</span>:Tom</p>

    在该示例中，自定义的question样式类被用于<div>标签，以标记问题段落。在解答段落使用仍是传统的<p>标签。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html stylesheet web class div 扩展

相关文章推荐

新的分享

章节导航