html导入css代码
在HTML中导入CSS代码可以通过<link>标签或者<style>标签来实现。
使用<link>标签：
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Your HTML content goes here -->
</body>
</html>
在上面的例子中，<link>标签被用来将名为styles.css的外部CSS文件导入到HTML文档中。这个CSS文件应该与HTML文件位于同一目录中。
使用<style>标签：
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* Your CSS styles go here */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<!-- Your HTML content goes here -->
<h1>Hello, World!</h1>
</body>
</html>
在这个例子中，<style>标签被用来定义HTML文档的内部样式。在<style>标签中，你可以编写你的CSS代码，它会应用到当前HTML文档中的所有元素。
设置文本颜色和字体：
cssbody {
color: #333; /* 设置文本颜色为深灰色 */
font-family: Arial, sans-serif; /* 设置字体为Arial或者系统默认的sans-serif字体 */
}
设置背景颜色和背景图像：
cssbody {
background-color: #f0f0f0; /* 设置背景颜色为浅灰色 */
background-image: url('background.jpg'); /* 设置背景图像为background.jpg */
background-repeat: no-repeat; /* 防止背景图像重复 */
background-size: cover; /* 让背景图像铺满整个背景 */
}
调整元素布局和盒子模型：
css.container {
width: 80%; /* 设置容器宽度为页面宽度的80% */
margin: 0 auto; /* 让容器水平居中 */
padding: 20px; /* 设置容器内边距为20像素 */
border: 1px solid #ccc; /* 设置容器边框为1像素的灰色实线边框 */
box-sizing: border-box; /* 让padding和border算入元素宽度和高度 */
}
设置链接样式：
cssa {
color: blue; /* 设置链接文本颜色为蓝色 */
text-decoration: none; /* 去除链接的下划线 */
}
a:hover {
text-decoration: underline; /* 鼠标悬停在链接上时显示下划线 */
}
