大家好，又见面了，我是你们的朋友全栈君。
1 CSS样式表简介
- 定义： CSS是Cascading Style Sheets的简称，中文名称为层叠样式表、级联样式表或样式表。
- 作用：实现内容与样式相分离，提高代码的可重用性和可维护性。
- CSS与HTML：
- 对比关系：HTML好比好比定义了一个房间的内容，而CSS就是定义这些内容的样式。
- 使用原则：尽可能使用CSS属性取代HTML属性。
2 CSS与HTML的三种组合方式
2.1 内联样式
- 形式：把样式表写在标签内部，作为标签的 style 属性的属性值出现。
- 适用性：当特殊的样式需要应用到个别元素时，就可以使用内联样式。
- 语法例子：显示结果为白底黑字的666。
<html>
<head>
<title>CSS</title>
</head>
<body>
<span style = "color:#ffffff; background-color:#000000; font-size:30px;">
666
</span>
</body>
</html>
2.2 内部样式表
- 形式：把样式表写在head中，通过元素选择器、类选择器、ID选择器为不同元素指定样式，三种选择器优先级依次增大。
- 适用性：当单个文件需要特别样式时，就可以使用内部样式表。
- 语法例子：注意CSS的注释语句和HTML不一样。
<html>
<head>
<title>CSS</title>
<style type = "text/css"> /*定义元素选择器*/ span {
color:#ffffff; background-color:#000000; font-size:30px;} /*定义类选择器*/ .big {
color:#ffffff; background-color:#000000; font-size:60px;} /*定义ID选择器*/ #no1 {
color:#000000; background-color:#ffffff; font-size:30px;} </style>
</head>
<body>
<span>
123<span class = "big">456</span><span id = "no1">789</span>10
</span>
</body>
</html>
运行结果如下：
2.3 外部引用
- 形式：将样式表单独存放，后缀名为.css，在head中指定外部样式表。
- 适用性：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
- 首页与外部CSS样式表语法：
<!--首页-->
<html>
<head>
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<span>
123<span class = "big">456</span><span id = "no1">789</span>10
</span>
</body>
</html>
<!--mystyle.css-->
/*定义元素选择器*/
span {
color:#ffffff; background-color:#000000; font-size:30px;}
/*定义类选择器*/
.big {
color:#ffffff; background-color:#000000; font-size:60px;}
/*定义ID选择器*/
#no1 {
color:#000000; background-color:#ffffff; font-size:30px;}
运行结果如下：
3 总结
- 理解HTML与CSS各自的功能及配合原则；
- 掌握HTML与CSS的三种组合方式。
参考文献
- 《CSS菜鸟教程》
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/158957.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...