HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02
2020-12-13 04:37
CSS 概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
样式解决了一个普遍的问题
HTML 标签原本被设计为用于定义文档内容。通过使用
、
、
这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。
参考：CSS 简介
是不是还有点懵？好吧！让我们改写一下上例，也许，代码更能表达我的想法。
例 4：接下来，我们要做的事，就是使用 CSS 将标签和属性分离开来（先分离一点，看看效果再说）。
1 DOCTYPE html> 2 html> 3 head> 4 meta charset="utf-8"> 5 title>颜色表（引入 CSS）title> 6 style type="text/css"> 7 th { 8 background-color: #3F3F3F; 9 } 10 style> 11 head> 12 body> 13 table border="1" width="600" align="center"> 14 thead> 15 tr> 16 th style="width: 50%;">颜色th> 17 th style="width: 25%;">颜色 HEXth> 18 th style="width: 25%;">颜色 RGBth> 19 tr> 20 thead> 21 tbody> 22 tr> 23 td style="background-color: #000000;">td> 24 td>#000000td> 25 td>rgb(0,0,0)td> 26 tr> 27 tr> 28 td style="background-color: #FF0000">td> 29 td>#FF0000td> 30 td>rgb(255,0,0)td> 31 tr> 32 tr> 33 td style="background-color: #00FF00">td> 34 td>#00FF00td> 35 td>rgb(0,255,0)td> 36 tr> 37 tr> 38 td style="background-color: #0000FF">td> 39 td>#0000FFtd> 40 td>rgb(0,0,255)td> 41 tr> 42 tr> 43 td style="background-color: #FFFF00">td> 44 td>#FFFF00td> 45 td>rgb(255,255,0)td> 46 tr> 47 tr> 48 td style="background-color: #00FFFF">td> 49 td>#00FFFFtd> 50 td>rgb(0,255,255)td> 51 tr> 52 tr> 53 td style="background-color: #FF00FF">td> 54 td>#FF00FFtd> 55 td>rgb(255,0,255)td> 56 tr> 57 tr> 58 td style="background-color: #C0C0C0">td> 59 td>#C0C0C0td> 60 td>rgb(192,192,192)td> 61 tr> 62 tr> 63 td style="background-color: #FFFFFF">td> 64 td>#FFFFFFtd> 65 td>rgb(255,255,255)td> 66 tr> 67 tbody> 68 table> 69 body> 70 html>
可能现在还无法让你体会到使用 CSS 的好处，但是，随着 HTML 文档的内容逐渐变多、变复杂，CSS 的优势就能显现出来。
在火狐浏览器中打开该 HTML 文档：
内部样式表（位于
标签内部） 6 style type="text/css">
10 style>
关于 HTML
定义和用法：
在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。
style 元素位于 head 部分中。
行内样式（也称内联样式）
16 th style="width: 50%;">颜色th>
23 td style="background-color: #000000;">td>
关于 HTML style 属性：
定义和用法：
style 属性规定元素的行内样式（inline style）
style 属性将覆盖任何全局的样式设定，例如在
语法：
属性值：
style_definition 一个或多个由分号分隔的 CSS 属性和值。
内联样式：当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。参考：HTML CSS
CSS 元素选择器
7 th { 8 background-color: #3F3F3F; 9 }
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。
参考：CSS 元素选择器
element 选择器用于指定元素名称的所有元素。
参考：CSS element 选择器
例 5：改写上例，使用 CSS 将标签和属性分离开来。
1 DOCTYPE html> 2 html> 3 head> 4 meta charset="utf-8"> 5 title>颜色表（引入 CSS）title> 6 style type="text/css"> 7 table { 8 width: 600px; /* 设置表格的宽度 */ 9 border-width: 1px; /* 设置表格的四条边框的宽度 */ 10 border-style: solid; /* 设置表格的四条边框的样式 */ 11 border-color: gray; /* 设置表格的四条边框的颜色 */ 12 border-collapse: collapse; /* 规定是否合并表格边框。 */ 13 /* 使表格居中对齐 */ 14 margin-left: auto; 15 margin-right: auto; 16 } 17 th { 18 color: white; /* 设置表头单元格的文本的颜色 */ 19 background-color: #3F3F3F; /* 设置表头单元格的背景颜色 */ 20 } 21 th, td { 22 /* 设置表格中的单元格的外边框风格 */ 23 border-width: 1px; 24 border-style: solid; 25 border-color: gray; 26 text-align: left; /* 规定表格中的单元格的文本的水平对齐方式 */ 27 font-family: "courier new", 新宋体; /* 规定表格中的单元格的文本的字体系列 */ 28 padding: 4px; /* 在一个声明中设置所有内边距属性。 */ 29 } 30 style> 31 head> 32 body> 33 table> 34 thead> 35 tr> 36 th style="width: 40%;">颜色th> 37 th style="width: 30%;">颜色 HEXth> 38 th style="width: 30%;">颜色 RGBth> 39 tr> 40 thead> 41 tbody> 42 tr> 43 td style="background-color: #000000;">td> 44 td>#000000td> 45 td>rgb(0,0,0)td> 46 tr> 47 tr> 48 td style="background-color: #FF0000">td> 49 td>#FF0000td> 50 td>rgb(255,0,0)td> 51 tr> 52 tr> 53 td style="background-color: #00FF00">td> 54 td>#00FF00td> 55 td>rgb(0,255,0)td> 56 tr> 57 tr> 58 td style="background-color: #0000FF">td> 59 td>#0000FFtd> 60 td>rgb(0,0,255)td> 61 tr> 62 tr> 63 td style="background-color: #FFFF00">td> 64 td>#FFFF00td> 65 td>rgb(255,255,0)td> 66 tr> 67 tr> 68 td style="background-color: #00FFFF">td> 69 td>#00FFFFtd> 70 td>rgb(0,255,255)td> 71 tr> 72 tr> 73 td style="background-color: #FF00FF">td> 74 td>#FF00FFtd> 75 td>rgb(255,0,255)td> 76 tr> 77 tr> 78 td style="background-color: #C0C0C0">td> 79 td>#C0C0C0td> 80 td>rgb(192,192,192)td> 81 tr> 82 tr> 83 td style="background-color: #FFFFFF">td> 84 td>#FFFFFFtd> 85 td>rgb(255,255,255)td> 86 tr> 87 tbody> 88 table> 89 body> 90 html>
在火狐浏览器中打开该 HTML 文档：
选择器分组
21 th, td {
28 }
element,element 选择器用于用于同时选取多个元素。
如需为不同的元素设置相同的样式，请用逗号来分隔每个元素。
参考：CSS element,element 选择器
参考：CSS 分组
位于 中的 CSS 属性。请参考：CSS 参考手册
下一节：HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03
文章标题：HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02
文章链接：http://soscw.com/essay/29692.html