在"入门级 如何编写第一个网页"中,增加了css样式使网页不再单调。
接下来学习css如何编写。
一、语法规则
选择器 { 属性名: 属性值 }
二、书写位置
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*这里写css*/
</style>
</head>
一般会在后面加入
<style type="text/css">
三、css引入方式
引入方式 | 书写位置 | 作用范围 | 使用场景 |
---|---|---|---|
内嵌式 | style标签 | 当前页面 | 小案例 |
外链接 | link标签引入单独css文件 | 多个页面 | 项目中 |
行内式 | 标签style属性中 | 当前标签 | 配合js使用 |
(1)内嵌式
- CSS 写在 style 标签中
- style 标签可以写在页面任意位置,一般放在 head 标签中
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
/* 这里是注释,快捷键ctrl + / */
/* 文字颜色设置为红色 */
color: red;
/* 字体大小设置为30像素 */
font-size: 30px;
/* 背景颜色 */
background-color: green;
/* 设置宽度和高度 */
width: 600px;
height: 100px;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<p>这是一段设置了css样式的文字</p>
</body>
</html>
(2)外链式
- CSS 写在单独的
.css
文件中 - 通过 link 标签引入到网页中
/* css-2.css */ p { color: red; }
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="./css-2.css"> </head> <body> <p>这是一段设置了css样式的文字</p> </body> </html>
显示效果
(3)行内式
- CSS 写在标签 style 属性中
<div style="color: green; background-color: #f1f1f1;"> 这是一段设置了css样式的文字 </div>
显示效果
有问题欢迎提出。