【JavaEE初阶】 CSS的引入方式和选择器
warning:
这篇文章距离上次修改已过187天，其中的内容可能已经有所变动。
CSS（层叠样式表）是一种用来描述网页和其他HTML文档样式的语言。CSS可以通过多种方式引入HTML文档中，主要有以下几种方式：
- 内联样式：直接在HTML元素的
style属性中书写CSS代码。 - 内部样式表：在HTML文档的
<head>部分使用<style>标签包含CSS代码。 - 外部样式表：创建一个单独的CSS文件，并通过HTML文档的
<link>标签引入。
CSS选择器是用来选择HTML元素并应用样式的。主要有以下几种类型：
- 类选择器：以
.开头，用于选择具有指定类的HTML元素。 - ID选择器：以
#开头，用于选择具有指定ID的单个HTML元素。 - 元素选择器：直接使用HTML标签名选择元素。
- 后代选择器：用于选择指定父元素下的指定子元素。
- 子选择器：用于选择指定父元素的直接子元素。
- 通配选择器：用
*表示，可以选择所有元素。
下面是引入CSS的实例代码：
<!-- 内联样式 -->
<p style="color: blue;">这是一个蓝色的文本。</p>
<!-- 内部样式表 -->
<head>
<style>
p { color: red; }
</style>
</head>
<!-- 外部样式表 -->
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>styles.css 文件内容：
/* 类选择器 */
.my-class {
font-size: 16px;
}
/* ID选择器 */
#my-id {
color: green;
}
/* 元素选择器 */
p {
margin: 0;
}
/* 后代选择器 */
div p {
font-style: italic;
}
/* 子选择器 */
div > p {
font-weight: bold;
}
/* 通配选择器 */
* {
padding: 5px;
}以上代码展示了CSS的三种引入方式，并给出了几种常见的CSS选择器示例。
评论已关闭