这篇文章主要介绍“如何在html页面写css”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“如何在html页面写css”文章能帮助大家解决问题。
CSS(层叠样式表)是用于设计和美化HTML页面的技术。可以通过HTML文档内的<style>标签或外部CSS文件来创建和引用CSS样式。
内嵌式
内嵌式是指将CSS样式直接嵌入到HTML页面中,使用<style>标签将CSS代码包裹起来。例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内嵌式CSS样式表</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h2 {
color: #333;
text-align: center;
}
</style>
</head>
<body>
<h2>欢迎来到我的网站</h2>
<p>这是一段普通的文字</p>
</body>
</html>
在上面的例子中,我们首先使用<meta>标签设置文档的字符集,然后在<head>标签中使用<style>标签来编写CSS样式。在<style>标签内,我们设置了文档背景颜色、字体样式和标题文字颜色。
注意,<style>标签必须放在<head>标签中,并且所有CSS样式都必须放在<style>标签内。在<body>标签内直接使用CSS样式是无效的。
外部式
外部样式表是指我们将CSS样式放在一个独立的文件中,然后通过<link>标签将其引用到HTML页面中。外部样式表具有多次使用和维护方便的优点。
在这种情况下,我们需要使用一个带有.css扩展名的文件来存储CSS样式。该文件可以放在服务器上,也可以放在本地的计算机上。例如:
/* css/style.css */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h2 {
color: #333;
text-align: center;
}
在HTML页面中,我们需要使用<link>标签将外部CSS文件与HTML文档进行关联。例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部式CSS样式表</title>
<link rel="stylesheet" type="text/css" href="https://www.19jp.com">
在上面的代码中,我们使用<link>标签将style.css文件与HTML文档关联起来。注意,href属性必须指向CSS文件的URL或相对路径。如果CSS文件与HTML文档位于同一个目录下,则href属性可以直接指向CSS文件名。
行内式
行内式是指将CSS样式直接应用到HTML元素中。而不是在样式表中定义它们。例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内式CSS样式表</title>
</head>
<body>
<h2 style="color: #333; text-align: center;">欢迎来到我的网站</h2>
<p style="font-family: Arial, sans-serif;">这是一段普通的文字</p>
</body>
</html>
在行内式中,我们在HTML元素的style属性中定义CSS样式。每个属性必须用分号分隔,并且属性值必须用引号包裹。请注意,使用行内式会使HTML代码变得混乱,难以维护。因此,在实际项目中通常不建议使用行内式。