# css 與 html 文檔
[toc]
## 1. css 是什么
| 序號 | 術語 | 描述 |
| ---- | ---- | ---------------------------------------- |
| 1 | css | `Cascading Style Sheets`縮寫(層疊樣式表) |
| 2 | 樣式 | css 可以影響一個或一組"文檔"的表現樣式 |
| 3 | 文檔 | 包括但不限于 html,也包括 xml(暫不討論) |
---
## 2. 元素與元素框
- 頁面中顯示的內容稱為**元素**, 元素顯示在瀏覽器為期生成的**元素框**中
- 查看頁面中所有元素生成的"框": `* {outline: 1px dashed red}`
- 根據元素框中的內容提供者, 可將元素分為二大類:
| 序號 | 術語 | 描述 |
| ---- | ---------- | ------------------------------------------------------------ |
| 1 | 置換元素 | 元素框內容由外部資源提供,元素框就是占位符`<img>`,`<input>`.. |
| 2 | 非置換元素 | 元素框內容用戶提供,瀏覽器生成,如`<p>`,`<span>`... |
---
## 3. 元素的顯示方式
### 3.1 元素類型
| 序號 | 類型 | 描述 |
| ---- | -------- | -------------------------------------------------------------------------- |
| 1 | 塊級元素 | 默認生成一個填滿父級內容區的元素框,且二側不能有其它元素,如`<div>`,`<p>`... |
| 2 | 行內元素 | 默認在一行文本內生成元素框,不打斷所在行,如`<a>`,`<span>`... |
| 3 | 行內塊元素 | 默認在一行文本內生成元素框,不打斷所在行,但支持寬高,如``... |
> 瀏覽器根據元素類型生成不同的元素框: "塊級元素框" 和 "行內元素框"
### 3.2 display 屬性
- 每個元素都可以通過`style="display:type`控制它的顯示類型,即生成什么樣的"元素框"
- `display`屬性常用值
| 序號 | 屬性值 | 描述 |
| ---- | ------------ | ------------------------ |
| 1 | `inline`默認 | 行內元素,`<span>`, `<a>` |
| 2 | `block` | 塊級元素,`<div>`,`<p>` |
| 3 | `inline-block` | 行內塊級元素,`` |
| 3 | `list-item` | 塊級: 列表元素,`<li>` |
| 4 | `table` | 塊級: 表格元素,`<table>` |
| 5 | `flex` | 彈性元素 |
| 6 | `grid` | 網格元素 |
---
## 4. css 應用到 html 上
| 序號 | 屬性值 | 描述 | 備注 |
| ---- | -------------- | -------------------------------------- | -------- |
| 1 | `link`標簽 | `<link rel="stylesheet" href="..." />` | 外部樣式 |
| 3 | `@import`指令 | `@import url(...) | @import '...'` | 外部樣式 |
| 2 | `<style>`元素 | `<style>...</style>` | 內部樣式 |
| 4 | `style=""`屬性 | `<tag style="...">` | 行同樣式 |
> 外部 css 樣式表文檔,默認擴展名為: `.css`
- `demo1.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css應用到html文檔</title>
<link rel="stylesheet" href="style/style1.css" />
<style>
/* 可以使用@import url()指令 */
@import "style/style3.css";
strong {
color: green;
}
</style>
</head>
<body>
<h2>PHP中文網第11期培訓班</h2>
<ul>
<li><strong style="color: coral;">前端基礎:</strong><a href=""> html5/css3 + flex/grid</a></li>
<li><strong>PHP開發:</strong><a href=""> php + pdo + mvc + composer</a></li>
<li><strong>前端進階:</strong><a href="">javascript + jquery + layui</a></li>
<li><strong style="color:violet">Laravel開發:</strong><a href="">laravel基礎與項目實戰</a></li>
</ul>
</body>
</html>
```
- `style/style1.css`
```css
/*@import指令必須寫在第一行*/
/* 語法1: */
/* @import url(style2.css); */
/* 語法2: */
@import "style2.css";
h2 {
color: green;
}
```
- `style/style2.css`
```css
ul {
border: 1px solid #ccc;
background-color: #efefef;
padding: 15px 30px 15px;
}
ul > li {
margin: 10px;
}
```
- `style/style3.css`
```css
a {
color: green;
text-decoration: none;
}
a:hover {
color: coral;
}
```
---
## 5. css 文檔的內容
### 5.1 樣式規則
- css 文檔中必不可少的內容就是: 樣式規則
- css 語法:`selector {property: value;...}`
| 組成 | 描述 |
| ----------------------- | ---------------------------------------------- |
| `selector` | 選擇符,或者稱"選擇器",決定文檔中哪部分受到影響 |
| `{property: value;...}` | 聲明塊,由 "屬性" 與 "屬性值" 二部分組成 |
### 5.2 廠商前綴
- 廠商前綴: 各瀏覽器廠商用來測試專屬規則的,具有實驗性和先進性
- 得到用戶廣泛認可的廠商前綴規則, 是有可能進入 W3C 標準的
- 隨著瀏覽器之間的差異逐漸消失, 廠商前綴最終會走向消亡
常用廠商前綴:
| 序號 | 前綴 | 描述 |
| ---- | ---------- | -------------------------------------------- |
| 1 | `-moz-` | 基于`Mozilla`的瀏覽器,如`FireFox`(火狐) |
| 2 | `-ms-` | 基于微軟`Internet Explorer`的瀏覽器 |
| 3 | `-o-` | 基于`Opera`(歐朋)的瀏覽器 |
| 4 | `-webkit-` | 基于`WebKit`內核的瀏覽器,如`Chrome`,`Safari` |
| 5 | `-epub-` | 基于國際數字出版論壇制定的格式 |
### 5.3 處理空白
- 與 html 文檔類似, css 也支持使用空白符來格式化文檔,增強可讀性
- css 中的多個空白符, 會全部合并成一個空白符顯示
- 空白符,可以由空格, 制表符, 換行符生成
- 當屬性值可有多個關鍵字時, 必須使用空白符分開
### 5.4 css 注釋
- 單行/多行: `/* 注釋內容 */`
- 注釋可以寫到樣式規則外部,也可以寫到內部
- 注釋不允許嵌套
---
## 6. 媒體查詢
- 媒體查詢: 設置瀏覽器使用指定的樣式表的媒體
### 6.1 使用場景
| 序號 | 場景 | 描述 |
| ---- | --------- | -------------------------------- |
| 1 | `<link>` | `<link media="screen,print">` |
| 1 | `<style>` | `<style media="screen,print">` |
| 1 | `@import` | `@import url(...) screen,print;` |
| 1 | `@media` | `@media screen,print {...}` |
### 6.2 聲明中的語法
一個樣式表中,可以有多個`@media`
```css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>媒體查詢</title>
<style>
h1 {
color: green;
}
body {
background-color: cyan;
}
/* 該樣式在媒體寬度大小于500px時有效 */
@media screen and (min-width: 500px) {
h1 {
color: red;
}
body {
background-color: wheat;
}
}
</style>
</head>
<body>
<h1>Hello, 歡迎來學習我的課程</h1>
</body>
</html>
```
> 根據這個規則, 其實在任何一個 css 文檔內容都可以放在`@media all {...}`內
### 6.3 媒體類型
媒體類型是不同媒體的標識符
| 序號 | 類型 | 描述 |
| ---- | ------------ | ----------------------- |
| 1 | `all` | 所有媒體類型,即不限制 |
| 2 | `print` | 打印機,預打印預覽使用 |
| 3 | `screen` | 屏幕,如瀏覽器等用戶代理 |
| 4 | `projection` | 幻燈片 |
> 多種媒體類型之間使用逗號分隔: `@media screen, print`
### 6.4 媒體描述符
- 媒體類型通常會添加"媒體描述符"進行精準限制,例如設置媒體尺寸,分辨率等
- 媒體描述符的語法與 css 樣式聲明非常類似,如`min-width: 500px`
- 與 css 聲明的不同之處在于,媒體描述符允許沒有值,如`print and (color)`
- 多個 "媒體描述符" 之間使用 "邏輯關鍵字" 連接, 如 `and` 和 `not`
- `and`表示多個"媒體描述符"必須同時滿足, `not`則是整個查詢取反,且必須寫在`and`前面
常用 "媒體描述符"(顯示區域相關)
| 序號 | 媒體描述符 | 描述 |
| ---- | ------------------- | -------------------- |
| 1 | `width` | 顯示區域寬度 |
| 2 | `min-width` | 顯示區域最小寬度 |
| 3 | `max-width` | 顯示區域最大寬度 |
| 4 | `device-width` | 設備顯示區域寬度 |
| 5 | `min-device-width` | 設備顯示區域最小寬度 |
| 6 | `max-device-width` | 設備顯示區域最大寬度 |
| 7 | `height` | 顯示區域高度 |
| 8 | `min-height` | 顯示區域最小高度 |
| 9 | `max-height` | 顯示區域最大高度 |
| 10 | `device-height` | 設備顯示區域高度 |
| 11 | `min-device-height` | 設備顯示區域最小高度 |
| 12 | `max-device-height` | 設備顯示區域最大高度 |
`max-width`與`max-device-width`區別:
- `max-width`: 瀏覽器顯示區域寬度,與設備無關,通常用于 PC 端
- `max-device-width`: 設備分辨率的最大寬度,通常用于移動端
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>媒體查詢描述符</title>
<style>
.nav {
height: 50px;
background-color: #eee;
display: flex;
align-items: center;
}
.nav ul {
display: flex;
list-style: none;
}
.nav ul a {
color: #666;
text-decoration: none;
padding: 0 15px;
}
/* 局部使用媒體查詢: 當屏幕寬度小于400px就不要顯示菜單了 */
@media screen and (max-width: 400px) {
.nav ul {
display: none;
}
}
</style>
</head>
<body>
<div class="nav">
<div class="log">LOGO</div>
<ul>
<li><a href="">首頁</a></li>
<li><a href="">視頻</a></li>
<li><a href="">問答</a></li>
<li><a href="">下載</a></li>
</ul>
</div>
</body>
</html>
```
- 教學大綱
- HTML5基礎
- 1-html基礎知識
- 2-語義化結構元素
- 3-語義化文本元素
- 4-鏈接/列表/圖像元素
- 5-表格元素
- 6-表單與控件元素[重點]
- CSS3基礎
- 1-css與html文檔
- 2-css選擇器
- 3-細說盒模型
- Flex布局[精簡版]
- 1-Flex概論
- 2-Flex布局是什么
- 3-Flex基本概念
- 4-Flex容器屬性
- 5-Flex項目屬性
- Flex布局[細說版]
- 1-flex 布局概述
- 2-flex 容器與項目
- 3-flex 容器主軸方向
- 4-flex 容器主軸項目換行
- 5-flex 容器主軸與項目換行簡寫
- 6-flex 容器主軸項目對齊
- 7-flex 容器交叉軸項目對齊
- 8-flex 多行容器交叉軸項目對齊
- 9-flex 項目主軸排列順序
- 10-flex 項目交叉軸單獨對齊
- 11-flex 項目放大因子
- 12-flex 項目收縮因子
- 13-flex 項目計算尺寸
- 14-flex 項目縮放的簡寫
- Flex布局[案例版]
- 1-調整項目順序
- Grid布局[精簡版]
- 1. 常用術語
- 2. 容器屬性
- 3. 項目屬性
- 4. 布局實例
- 1. 經典三列布局
- 2. 媒體查詢
- Grid布局[細說版]
- 1-必知術語
- 2-容器創建與行列劃分
- 3-單元格常用單位
- 4-項目填充到單元格
- 5-項目填充到網格區域
- 6-對齊容器中的所有項目
- 7-對齊單元格中所有項目
- 8-對齊單元格中某個項目
- 9-容器中行與列之間的間距