HTML学习(6)使用样式
来源:互联网 发布:java中变量的定义方法 编辑:程序博客网 时间:2024/05/01 07:41
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学习(6)使用样式
- html样式选择器学习
- 【HTML学习】样式
- html--6(CSS样式的使用)
- HTML样式使用
- HTML样式以及使用
- HTML&CSS基础学习笔记1.29-灵活地使用样式
- html学习——样式
- HTML学习笔记(4)--HTML样式
- HTML初学---如何使用样式
- (转)Html的样式使用
- android textview 使用html样式
- HTML 6 样式
- HTML基础学习-10-CSS样式学习
- html/css学习零星笔记(一)——如何使用样式
- html系统学习之二 <样式,锚>
- HTML学习(3)样式和链接
- HTML学习笔记(二)样式
- ASC码
- 数据库优化
- jquery运用b
- MT6253平台启动流程
- 用jquery使用ajax例子
- HTML学习(6)使用样式
- 笔记本电脑忘记开机密码怎么办?
- 学习日志—序
- 使用jquery点击换图片
- 使用jquery的ajax取xml
- MFC画坐标曲线图(转)
- jquery的ajax中的几种状态
- copy constructor
- 轻松实现asp.net中遍历cookies,session,application,小总结