前言
用户通过选择器对不同的 html 标签进行控制,并赋予各种样式声明,即可实现各种效果。
style 标记
style 标记用于为 HTML 文档定义样式信息。在 style 中,你可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/CSS"。style 元素位于 head 部分中。
标记选择器
一个 HTML 页面由很多不同的标记组成,而 CSS 标记选择器就是声明哪些标记采用哪种 CSS 样式。例如 p 选择器,用于声明页面中所有 p 标记的样式。
HTML 代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>
- 无标题文档
- </title>
- <style type="text/css">
- p{ color:#CC0033; font-size:25px; text-align:center; } h1{ color:#0099CC;
- font-size:36px; text-align:center; }
- </style>
- </head>
- <body>
- <h1>
- 姓名
- </h1>
- <p>
- 琚建飞
- </p>
- <p>
- 倪妮
- </p>
- <p>
- 斯嘉丽
- </p>
- </body>
- </html>
效果图
在后期维护中,如果希望所有 h1 标记换成另一种颜色(或大小),这时仅仅需要将属性 color 的值修改为 blue 即可全部生效。
类别选择器
标记选择器中,p 标记被声明后,页面中所有 p 标记都将是一个样式。如果希望其中的某一个 p 标记不是红色,而是绿色,这时仅仅依靠标记选择器是远远不够的,还需要引入类别(class)选择器。类别选择器的名称可以由用户自定义,格式如下图所示。
html 代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>
- 无标题文档
- </title>
- <style type="text/css">
- .one{ color:green; font-size:30px; } p{ color:#CC0033; font-size:25px;
- text-align:center; } h1{ color:#0099CC; font-size:36px; text-align:center;
- }
- </style>
- </head>
- <body>
- <h1>
- 姓名
- </h1>
- <p>
- 琚建飞
- </p>
- <p class="one">
- 倪妮
- </p>
- <p>
- 斯嘉丽
- </p>
- </body>
- </html>
效果图
由图可知,如果类别选择器中的属性声明和标记选择器中属性声明重复的话,那么以类别选择器中的属性声明为准。其中. one 也可以写成 p.one,如 p.one{color:green;}。
在 HTML 的标记中,还可以同时给一个标记运用多个 class 类别选择器,从而将两个类别的样式风格同时运行到一个标记中。这在实际制作网站时很有用,可以适当减少代码的长度。
HTML 代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>
- 无标题文档
- </title>
- <style type="text/css">
- .one{ color:green; } .two{ font-size:30px; } p{ color:#CC0033; font-size:25px;
- text-align:center; } h1{ color:#0099CC; font-size:36px; text-align:center;
- }
- </style>
- </head>
- <body>
- <h1>
- 姓名
- </h1>
- <p class="one two">
- 琚建飞
- </p>
- <p class="one">
- 倪妮
- </p>
- <p class="two">
- 斯嘉丽
- </p>
- </body>
- </html>
效果图
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: