css-基础-应用方式
2019-01-01 本文已影响10人
缺月楼
什么是css
指层叠样式表 (Cascading Style Sheets),是用来为网页添加样式的代码。例如：
p {
color: red;
width: 500px;
}
上面的代码就为HTML文档中的p元素增加了 样式 颜色为红色，高度为500px。
选中多种元素
p, li, h1 {
color: red;
}
上面的代码就为HTML文档中的p元素,li元素，和标题h1增加了 样式 颜色为红色
css应用方式
外部样式表
- 通过 <link> 引入 CSS。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS</title>
<link rel="stylesheet" href="index.css">
<--注释！！注意应用的文件引用路径 href="index.css" -->
</head>
<body>
<h1>Hello CSS!</h1>
</body>
</html>
- 通过 @import 引入样式，放入 css 中
<style>
@import url("index.css");
@import url('index.css');
@import url(index.css);
@import 'custom.css';
@import "common.css";
@import url('landscape.css') screen and (orientation:landscape);
</style>
内部样式表
- 把
css放在<style>元素中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS</title>
<style>
h1 { color: red; }
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
内联样式
- 将css写在元素中，在某些情况下使用（不推荐）
<p style="color: red; font-size: 24px;">你好 CSS<p>
