【HTML基础

百科大全

更新时间：2025-10-05 17:56:3437

admin管理员组
文章数量:1794759

【HTML基础

1 CSSHTML style="color:#2aa0ea" target=_blank class=infotextkey>样式概述
2 CSS与HTML的三种组合方式
- 2.1 内联样式
- 2.2 内部样式表
- 2.3 外部引用
3 总结
参考文章

1 CSS样式概述

定义： CSS是Cascading Style Sheets的简称，中文名称为层叠样式表、级联样式表或样式表。作用：实现内容与样式相分离，提高代码的可重用性和可维护性。 CSS样式：①元素内容的颜色color；元素内容的背景色background-color；③字体大小font-size等等。

CSS与HTML：

对比关系：HTML好比好比定义了一个文章的内容，而CSS就是定义这些内容的样式。
使用原则：尽可能使用CSS属性取代HTML属性，即提倡HTML与CSS分离。

2 CSS与HTML的三种组合方式 2.1 内联样式

形式：把样式表写在标签内部，作为标签的 style 属性的属性值出现。适用性：当特殊的样式需要应用到个别元素时，就可以使用内联样式。示例：

<html> <head> <meta charset="utf-8"> <title> testCSS1 </title> </head> <body> <h1>格言 </h1> <div style="background-color:#000000;color: #ffffff;">没有对比</div>,<br/> <span style="color:red;font-size:30px;background-color: yellow;">就没有伤害</span> </body> </html>

运行结果如下：

tips: 颜色除了用英文表示外，还可以采用RGBB编码X X X（X为0~255）。例如，白色为255 255 255（用16进制表示，为#ffffff）。；黑色为0 0 0。其中颜色越浅，数字越大。

2.2 内部样式表

形式：把样式表写在head中，通过选择器为不同标签指定样式。选择器：有很多种，比较常用的有三种：①元素/标签选择器②类选择器、③ID选择器。这三种选择器优先级依次增大。适用性：当单个文件需要特别样式时，就可以使用内部样式表。示例：注意CSS的注释语句和HTML不一样。

<html> <head> <meta charset="utf-8"> <title> testCSS2 </title> <style type="text/css"> /*定义元素选择器*/ span {background-color: pink;} /*定义类选择器*/ .shanghai{color: black;background-color: red;font-size: 20px;} /*定义ID选择器*/ #db{color: white;background-color:green;font-size: 20px;} </style> </head> <body> <h1>格言 </h1> <span >没有<span id="db">对比</span>,</span> <span >就没有<span class="shanghai">伤害</span></span> </body> </html>

运行结果如下：

2.3 外部引用

形式：将样式表单独存放，后缀名为.css，在head中指定外部样式表。适用性：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。示例：

<html> <head> <meta charset="utf-8"> <title> testCSS2 </title> <link rel="stylesheet" type="text/css" href="./myCSS.css">  </head> <body> <h1>格言 </h1> <span >没有<span id="db">对比</span>,</span> <span >就没有<span class="shanghai">伤害</span></span> </body> </html>  /*定义元素选择器*/ span {background-color: pink;} /*定义类选择器*/ .shanghai{color: black;background-color: red;font-size: 20px;} /*定义ID选择器*/ #db{color: white;background-color:green;font-size: 20px;}

运行结果如下：

3 总结

（1）理解HTML与CSS各自的功能及配合原则；（2）掌握HTML与CSS的三种组合方式。

参考文章

[1] 《CSS菜鸟教程》 [2] 《【HTML基础】CSS样式表》

本文标签：基础 html

版权声明：本文标题：【HTML基础内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686972013a123997.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。