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 样式文件的体积也会相应的减小,从而进一步缩短页面加载的时间。

目录
相关文章
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
1006 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
928 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1286 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
329 34
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
420 2
|
JSON 前端开发 JavaScript
使用html,css,js 实现一个龙年春节祝福卡片效果
使用html,css,js 实现一个龙年春节祝福卡片效果
655 123
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
455 3
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
768 1
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
631 6

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    589
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    448
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    452
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    297
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    575
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    749
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1473
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    325
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1188
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    528