HTML利用CSS选择器实现表格美化

简介: HTML利用CSS选择器实现表格美化

根据相应的DMO树结构,尝试对使用不同的选择器设置字体、背景、颜色等样式,验证和理解CSS的选择器。尝试对各元素设置不同的CSS样式,验证和理解CSS的继承、层叠特性及冲突处理。

CSS部分:

1. <style>
2. h1,p {
3. color: red;
4. font-family: 楷体;
5.         }
6. li{
7. color:aqua;
8.         }
9. ul.parent {
10. font-size: 20px;
11. color: deeppink;
12.         }
13. ul.parent>li {
14. font-size: 15px;
15. color: darkorange;
16.         }
17. ol.parent>li{
18. font-size: 20px;
19. color: red;
20.         }
21. ol.parent li {
22. font-size: 15px;
23. color: greenyellow;
24.         }
25. #myLI {
26. font-family: 楷体;
27. background-color: greenyellow;
28.         }
29. </style>

HTML部分:

1. <body>
2. <table width="50%" border="2" background="云空.jpg">
3. <col class="col1" >
4. <colgroup span="2" align="center">
5. <thead>
6. <tr height="20px"></tr>
7. <td colspan="2"><h1>CSS的继承特性</h1></td></tr>
8. <tr><td colspan="2"><p>欢迎学习,这里为您提供丰富的学习内容。</p></td></tr>
9. <tr height="10px">
10. <ul class="parent">
11. <tr><td colspan="2"><li>在这里,你可以学到:</li></td></tr>
12. <ul>
13. <td colspan="2"><li>HTLM</li></td>
14. <tr><td rowspan="4"><li>CSS</li></td>
15. <ul>
16. <tr><td><li>CSS初级</li></td></tr>
17. <tr><td><li>CSS中级</li></td></tr>
18. <tr><td><li>CSS高级</li></td></tr>
19. </ul>
20. <td colspan="2"><li>JavaScript</li></td>
21. </ul>
22. <tr><td colspan="2"><li>你还可以学到:</li></td></tr>
23. <ol class="parent">
24. <tr><td colspan="2"><li>Flash</li></td></tr>
25. <tr><td colspan="2"><li>Dreamweaver</li></td></tr>
26. <tr><td colspan="2"><li>PhotoShop</li></td></tr>
27. </ol></ul>
28. <tr><td colspan="2"><p>如果您有任何问题,欢迎联系我们。</p></td></tr>
29. </body>

效果图:

CSS发展历程:      

       20 世纪 90 年代初 HTML 语言诞生,这时的 HTML 只包含很少的属性来控制网页的显示效果。伴随着 HTML 的成长,各式各样的样式语言也随之出现,不同的浏览器结合它们各自的样式语言来控制页面的显示效果。

       经过不断的发展,HTML 中添加了越来越多的属性来满足页面设计者的需求,随着这些属性的增加,HTML 变的越来越杂乱,而且 HTML 页面也越来越臃肿,于是 CSS 便诞生了。

       1994 年,哈坤·利提出了 CSS 的最初建议,并决定与正在设计 Argo 浏览器的伯特·波斯(Bert Bos)合作,共同开发 CSS。1994 年底,哈坤·利在芝加哥的一次会议上第一次正式提出了 CSS 的建议,之后又在 1995 年的 WWW 网络会议上再次提出了 CSS,在会议上伯特·波斯展示了支持 CSS 的 Argo 浏览器,哈坤·利也展示了支持 CSS 的 Arena 浏览器。

       同年,W3C 组织(World WideWeb Consortium)成立,该组织对 CSS 的发展很感兴趣,为此还专门组织了一次讨论会。最终 CSS 的全部开发成员都加入了 W3C 组织,并负责 CSS 标准的制定,至此 CSS 的发展走上正轨。

       W3C,中文名为“万维网联盟”,也称为“W3C理事会”,由万维网的发明者 蒂姆·伯纳斯·李 于 1994 年 10 月在麻省理工学院计算机科学实验室成立,是 Web 技术领域最具权威和影响力的国际中立性技术标准机构。

CSS所具特点:

       CSS 是 Web 领域的一个突破,它为 HTML 提供了一种描述元素样式的方式,使用 CSS 和 HTML 可以制作出外形优美的网页。总体来说 CSS 具有以下特点:

1) 丰富的样式定义

       CSS 提供了丰富的外观属性,可以在网页中实现各式各样的效果,例如:

为任何元素设置不同的边框,以及边框与元素之间的内外间距;

改变文字的大小、颜色、字体,为文字添加修饰(例如下划线、删除线);

为网页设置背景颜色或者背景图片等等。

2) 易于使用和修改

       CSS 的样式信息不仅可以定义在 HTML 元素的 style 属性中,也可以定义在 HTML 文档 <head> 标签内的 <style> 标签中,还可以定义在专门的 .css 格式的文件中,之后再将其引用到 HTML 文档。推荐使用最后一种定义方式(定义单独的 .css 格式文件),这样可以将 CSS 样式统一存放,方便后期维护。

3) 多页面应用

       前面说了可以将 CSS 样式单独存放在一个 .css 格式的文件中,这个文件不属于任何页面,我们可以在不同的页面引用这个 .css 格式的文件,这样就可以统一不同页面的风格。

4) 层叠

       层叠就是指可以对同一个 HTML 元素多次定义 CSS 样式,后面定义的样式会覆盖前面定义的样式。例如整个站点引用了同样的 CSS 样式文件,但想要调整其中某个页面的某些元素,这时就可以针对想要调整的元素单独定义一份样式文件并引用到页面中。这样后来单独定义的样式就会覆盖前面的样式,在浏览器同样只会看到最后设置的效果。

5) 页面压缩

       一个网页其中通常包含大量的 HTML 元素,为了实现某些效果我们往往还需要为这些元素定义样式文件,如果将它们放到一起就会使得我们的 HTML 文档过于臃肿。而将 CSS 样式定义在单独的样式文件中,把 CSS 样式与 HTML 文档分开的话就可以大大减小 HTML 文档的体积,这样浏览器加载 HTML 文档所用的时间也会减少。

       另外,CSS 样式可以重复使用,不同的元素可以使用相同的 CSS 样式,这样可以避免定义重复的样式,CSS 样式文件的体积也会相应的减小,从而进一步缩短页面加载的时间。

目录
相关文章
|
2天前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
33 19
|
2天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
12天前
|
移动开发 JavaScript 前端开发
揭秘!如何用Web2py+HTML5/CSS3/jQuery打造超炫响应式网站?你的设计梦想即将照进现实!
【8月更文挑战第31天】本文详细介绍如何利用Web2py框架及HTML5、CSS3与jQuery构建响应式网站。首先需安装Python和Web2py,并启动服务器。接着,在Web2py中创建新应用,例如命名为“ResponsiveSite”。随后,编写HTML5基本结构,包括头部、导航栏等元素。在`styles.css`文件中添加CSS3样式代码,实现响应式布局。最后,通过在`scripts.js`中加入jQuery脚本提升页面交互性,如点击导航项时平滑滚动至目标区域。此教程为你打下响应式网站设计的基础,便于进一步扩展和优化。
8 1
|
15天前
|
移动开发 前端开发 JavaScript
HTML与CSS二三事
HTML与CSS二三事
|
11天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML、CSS与JavaScript之旅
在这个数字时代,拥有一个个性化的网络空间已成为许多人的梦想。本文将引导你了解如何从零开始,使用HTML、CSS和JavaScript创建属于自己的博客网站。我们将探索这些技术的基础概念,并通过实际代码示例展示如何将静态页面转变为动态交互式网站。无论你是编程新手还是希望扩展技能的开发者,这篇文章都将为你提供一条清晰的学习路径。【8月更文挑战第31天】
|
11天前
|
Java 数据安全/隐私保护 安全
掌握Struts 2动态方法调用,让你的Web开发如虎添翼,轻松应对复杂业务需求!
【8月更文挑战第31天】在Web应用开发中,Struts 2框架因强大功能和灵活性而广受青睐。其动态方法调用(DMI)特性允许在不修改配置文件的情况下动态调用Action类中的方法,相比传统方法调用(需在`struts.xml`中为每个方法创建单独的`&lt;action&gt;`),DMI简化了配置并提升了灵活性、可维护性和扩展性。本文通过对比DMI与传统方法调用,展示如何利用DMI简化开发流程,并强调了在使用DMI时需注意的安全性和访问控制问题。
10 0
|
4月前
|
前端开发
web前端开发---CSS基础选择器
web前端开发---CSS基础选择器
40 1
|
2月前
|
前端开发
前端 CSS 经典:好用的 CSS 选择器
前端 CSS 经典:好用的 CSS 选择器
24 0
|
4月前
|
前端开发
前端 css 经典:选择器速记
前端 css 经典:选择器速记
37 0
|
4月前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性