在HTML中编写CSS(层叠样式表)是一种常见的技术，它可以帮助我们为网页添加样式和布局，CSS可以将样式与内容分离，使得网页的设计更加灵活和易于维护，本文将详细介绍如何在HTML中编写CSS,并提供一些相关的技术介绍和小标题。
CSS的基本语法
1、1 选择器
选择器是用来选中HTML元素的规则，常见的选择器有标签选择器、类选择器、ID选择器、属性选择器等。
/* 类选择器 */
.class-name {
/* 样式规则 */
}
/* ID选择器 */
id-name {
/* 样式规则 */
}
/* 标签选择器 */
tag-name {
/* 样式规则 */
}
/* 属性选择器 */
[attribute=value] {
/* 样式规则 */
}
1、2 声明块
声明块是用来定义CSS样式规则的代码块，通常使用大括号{}将一组样式规则包围起来。
body {
font-family: Arial, sans-serif;
font-size: 14px;
color: 333;
}
内联样式和内部样式表
2、1 内联样式
内联样式是直接在HTML元素的style属性中编写CSS样式。
<p style="color: red; font-size: 16px;">这是一个红色字体的段落。</p>
2、2 内部样式表
内部样式表是在HTML文档的<head>标签内使用<style>标签编写的CSS样式。
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: "微软雅黑", sans-serif;
font-size: 18px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>这是一个居中的标题</h1>
<p>这是一个段落。</p>
</body>
</html>
外部样式表和引入方式
3、1 外部样式表
外部样式表是将CSS代码单独保存在一个.css文件中，然后在HTML文档中使用<link>标签引入。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <!-HTML内容 --> </body> </html>
在styles.css文件中编写CSS样式：
body {
font-family: Arial, sans-serif;
font-size: 14px;
color: 333;
}
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/268949.html
微信扫一扫 