CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括SVG、MathML等各种XML方言)文档样式的样式表语言。通过CSS,可以控制网页的布局、字体、颜色等视觉效果。
<link>
标签引入,适用于多个页面共享同一样式。<head>
部分使用<style>
标签定义,适用于单个页面的样式。style
属性定义样式,适用于特定元素的样式。假设我们要将整个网站的字体设置为“微软雅黑”,可以通过以下几种方式实现:
/* styles.css */
body {
font-family: 'Microsoft YaHei', sans-serif;
}
<!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>
<h1>Hello, World!</h1>
</body>
</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>
body {
font-family: 'Microsoft YaHei', sans-serif;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</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>
</head>
<body style="font-family: 'Microsoft YaHei', sans-serif;">
<h1>Hello, World!</h1>
</body>
</html>
原因:
解决方法:
@font-face
规则引入自定义字体。@font-face {
font-family: 'Microsoft YaHei';
src: url('MicrosoftYaHei.ttf') format('truetype');
}
原因:
解决方法:
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
}
领取专属 10元无门槛券
手把手带您无忧上云