本文介绍了CSS的基础知识，包括层叠样式表的定义、语法结构以及如何在HTML中通过内嵌式、内部式和外部式引入CSS。此外，还详细讲解了CSS选择器的类型，如标签选择器、类选择器、ID选择器等，并通过实例展示了它们的用法。最后，提到了CSS注释和选择器的组合使用，以增强代码可读性和灵活性。
一、CSS 简介
（1）、CSS 是 Cascading Style Sheets 的缩写，即：层叠样式表单；
（2）、CSS 是 HTML 语言的一种扩展，其主要作用为：定义 Web 页面布局以及页面中元素的显示方式 和利用 CSS 样式实现 HTML 内容(结构)与表现(格式)的分离。
二、CSS 语法
CSS语法结构：h1 { color:blue; font-size:35px; }
三：CSS 语法应用
<html>
<meta charset="UTF-8">
<title>CSS入门</title>
<style type="text/css">
h1 { color: blue; font-size: 35px; }
</style>
<body>
<h1>CSS快速入门</h1>
</body>
</html>
四、CSS 注释（/* xxx */）
以 /* 开始，以 */ 结束，中间为注释内容，注释不会被浏览器解释和执行 良好注释可以极大的提高代码可读性。
五、CSS 引入方式（内嵌式/内部式/外部式）
HTML 中引入(使用) CSS 的 3 种方法：
（1）、内嵌式：又称行内式，在HTML标签上编写样式，如：<p style="color:red">
（2）、内部式：包含在HTML的<head></head>中，只对当前页面有效，如:<style>...</style>
（3）、外部式：链接引入外部样式表文件，如：<link href="style.css" ...>
CSS 引入方式-内嵌式（直接编写在HTML标签上 style）
<html> <meta charset="UTF-8">
<title>CSS</title>
<body>
<p style="color:red;font-size: 30px">Hello CSS!</p>
</body>
</html>
CSS 引入方式-内部式（在HTML中的 style 代码块中编写样式）
<html> <meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
p {color: blue; font-size: 30px; }
</style> <body> <p>Hello CSS!</p>
</body>
</html>
CSS 引入方式-外部式（在HTML中引入外部 CSS 文件）
<html> <meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<p>Hello CSS!</p>
</body>
</html>
六、CSS 选择器（标签选择器/类选择器/ID选择器…）
选择器用于定位(选择)需要添加样式的网页元素
（1）、标签选择器（HTML标签名(元素)作为选择器名称，如：div 、h1 、p …）
<html> … <style type="text/css">
div { color: blue; /* 蓝色 */ font-size: 30px; }
</style>
<body>
<div>CSS</div>
<div>快速入门</div>
<h5>CSS选择器</h5>
</body>
</html>
（2）、类选择器（类(class)用于描述一组标签的样式，class 可以用在多个标签中）
<html> … <style type="text/css">
.title { color: red; /* 红色 */ font-size: 30px; }
/style>
<body>
<div class=“title”>CSS</div>
<div class=“title” >快速入门</div>
<div>CSS选择器！</div>
</body>
</html>
（3）、 ID选择器（ID选择器用于为标有特定ID的HTML标签设置样式）
<html> … <style type="text/css">
#title { color: green; /* 绿色 */ font-size: 30px; }
</style>
body>
<div id=“title”>CSS</div>
<div id=“subtitle” >快速入门</div>
<div>CSS选择器</div>
</body>
</html>
（4）、通配选择器（利用 * 为指定范围内的所有标签设置样式）
<html> … <style type="text/css">
* { color: purple; /* 紫色 */font-size: 30px; }
</style>
<body>
<div id=“title”>CSS</div>
<div id=“subtitle” >快速入门</div>
<div>CSS选择器</div>
</body>
</html>
（5）、包含选择器（HTML中为父元素(标签)下的子元素设置样式）
<html> … <style type="text/css">
div p { color: gold; /* 金色 */ font-size: 30px; }
</style>
<body>
<div><p>CSS</p> </div> <div>快速入门</div>
</body>
</html>
（6）、选择器分组（为一组元素设置相同样式，利用逗号分割多个选择器）
<html> … <style type="text/css">
#title , .logo { color: brown; /* 棕色 */ font-size: 30px; }
</style>
<body>
<div id=“title”>CSS</div>
<div class=“logo”>CSS快速入门</div>
</body>
</html>
扫一扫
478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
