前端基础_css_02.css应用.md

<markdown>
 
[\<\< 返回CSS教程](:document/css)
 
# CSS 应用
 
## 简单示例
index.html
 
```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello CSS!</h1>
    <p>CSS 很 666666……</p>
  </body>
</html>
```
 
style.css 
 
```css
h1 {
  padding: 10px;
  background-color: orange;
  border: 1px solid black;
}
 
p {
  color: purple;
}
```
查看运行结果 https://codepen.io/twhy/pen/MoWOeW
 
## CSS 工作原理
 
 
![](:wiki:课程-html.png)
 
 
## CSS 应用方式
### 外部样式表（推荐）
1.通过 `<link>` 引入 CSS。
 
```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />

<title>CSS</title> <link rel="stylesheet" href="index.css"> </head> <body> <h1>Hello CSS!</h1> </body> </html>

2.通过 `@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 { background: orange; }

</style> </head> <body> <h1>Hello CSS!</h1> </body> </html>

### 内联样式
不推荐，但在某些情况下很有用。

<p style="background: orange; font-size: 24px;">CSS 很 👍<p>
```
### 属性样式
废弃
 
```html
<img src="a.png" width=100 height=200 >
```
 
 
 
## 参考链接
* https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works
 
 
 
 
 
 
</markdown>