整个页面的背景色为hsl(120,5%,98%),页眉导航和页脚最大宽度以外的区域背景色为hsl(120,5%,95%),字体为微软雅黑,用CSS外联样式表怎么做?
时间: 2024-10-20 21:19:46 浏览: 16
RGB和HSL色彩空间转换
要使用CSS外联样式表设置页面的背景颜色、导航栏和页脚的特殊背景以及字体样式,你可以按照以下步骤创建一个`style.css`文件:
```css
/* 设置整个页面的背景色 */
body {
background-color: hsl(120, 5%, 98%);
font-family: '微软雅黑'; /* 设置全局字体 */
}
/* 选择除了导航栏和页脚之外的最大宽度区域的背景色 */
main, article {
background-color: hsl(120, 5%, 95%);
margin: 0 auto; /* 如果需要居中内容 */
}
/* 独立设定页眉导航和页脚的样式 */
header, footer {
max-width: 1200px; /* 可自定义最大宽度 */
margin: 0 auto;
background-color: hsl(120, 5%, 98%); /* 保持一致的高亮效果 */
}
/* 如果有独立的导航和页脚样式,可以分别添加在这里 */
nav {
/* 导航栏样式 */
}
footer {
/* 页脚样式 */
}
```
然后,在HTML文档的`<head>`部分链接这个外部样式表:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
<link rel="stylesheet" href="style.css"> <!-- 引入样式表 -->
</head>
<body>
<!-- 页面内容 -->
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
</html>
```
阅读全文