目录

  • 1 CSS样式表简介
  • 2 CSS与HTML的三种组合方式
    • 2.1 内联样式
    • 2.2 内部样式表
    • 2.3 外部引用
  • 3 总结
  • 参考文献

1 CSS样式表简介

  1. 定义： CSS是Cascading Style Sheets的简称，中文名称为层叠样式表、级联样式表或样式表。
  2. 作用：实现内容与样式相分离，提高代码的可重用性和可维护性。
  3. CSS与HTML：
    1. 对比关系：HTML好比好比定义了一个房间的内容，而CSS就是定义这些内容的样式。
    2. 使用原则：尽可能使用CSS属性取代HTML属性。

2 CSS与HTML的三种组合方式

2.1 内联样式

  1. 形式：把样式表写在标签内部，作为标签的 style 属性的属性值出现。
  2. 适用性：当特殊的样式需要应用到个别元素时，就可以使用内联样式。
  3. 语法例子：显示结果为白底黑字的666。
<html>
	<head>
		<title>CSS</title>
 	</head>
 	<body>
		<span style = "color:#ffffff; background-color:#000000; font-size:30px;">
		666
		</span>
	</body>
</html>

2.2 内部样式表

  1. 形式：把样式表写在head中，通过元素选择器、类选择器、ID选择器为不同元素指定样式，三种选择器优先级依次增大。
  2. 适用性：当单个文件需要特别样式时，就可以使用内部样式表。
  3. 语法例子：注意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 外部引用

  1. 形式：将样式表单独存放，后缀名为.css，在head中指定外部样式表。
  2. 适用性：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
  3. 首页与外部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 总结

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

参考文献

  1. 《CSS菜鸟教程》

更多推荐

【HTML基础】CSS样式表