### 代码风格

样式格式书写

- 紧凑型
- 展开型（推荐）

样式大小写

小写风格

空格规范

```html
<style>
        /* 选择器 {样式} */
        /* 属性: 属性值; */
        p {
            color: red; 
            font-size: 20px;
        }
</style>
```

### 基础选择器

#### 标签选择器

用标签名作为选择器。全部选择修改样式，不能给某一个差异化。

```html
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
```

#### 类选择器

单独选择一个或多个，实际开发最常用。长名称可以用-，不要使用汉字和数字。

```html
.类名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}

<div class='类名'>
    ...
</div>
```

多类名

一个标签可以指定多个类名，相同样式放入一个类名，方便修改。

```html
<div class='类名1 类名2'>
    ...
</div>
```

#### id选择器

```html
#id名 {
...
}
```

id选择器，样式通过#定义，用id调用，只能调用一次，不可调用多次，id选择器是一次性的。

#### 通配符选择器

选择页面中所有的标签，不需要调用，特殊情况下使用。

```html
* {
...
}
```

### 字体属性

#### 字体系列

```html
p {
font-family: '微软雅黑';
}
div {
font-family: Arial, 'Microsoft Yahei', '微软雅黑';
}
```

#### 字体大小

```html
p {
font-size: 20px;
}
```

谷歌浏览器默认16px，可以给body指定，标题标签特殊，需要单独指定。

#### 字体粗细

```html
font-weight: bold;
400px = normal;
700px = bold;
```

实际开发提倡用数字。

#### 文字样式

```html
font-style: normal;
```

#### 字体复合属性

```html
font: font-style font-weight font-size/line-height font-family;
顺序固定，空格隔开。font-size font-family不能省略。
```

### 文本属性

#### 文本颜色

```html
color: red;

color: #ff000; 实际开发最常用。

color: rgb(255, 0, 0);
```

#### 对齐文本

```html
text-align: center; 水平居中
```

#### 装饰文本

```html
text-decoration: none;

a 删除下划线

text-decoration: underline;
```

#### 文本缩进

```html
text-indent: 20px;

text-indent: 2em; 当前文本两个文本的缩进。
```

#### 行间距

```html
line-height: 26px;
text-indent: 1.5em; 
```

### 引入方式-三种样式表

#### 内部样式表

```html
<style>
...
</style>
```

一般放在head标签中。方便控制整个页面的样式。未完全分离，嵌入式样式表。

#### 行内样式表

```html
<p style="color: red; font: ...;">...</p>
```

适合修改个例，简单修改，控制当前标签的样式，结构与样式混合。

#### 外部样式表

```html
建立文件style.css
写入样式
<link rel="stylesheet" href="style.css">
```

适合开发使用。结构与样式完全分离。

### Chrome调试工具

F12

### 复合选择器

#### 后代选择器（重要）

包含选择器即后代选择器。

```html
<style>
    ol li {
        color: rgb(205, 165, 90);
    }
    .nav li a {
        color: #ff0000;
    }
</style>
```

#### 子元素选择器（重要）

只选择最近的元素，只选儿子，不选孙子。

```html
.nav>a {
            color: red;
        }
```

#### 并集选择器（重要）

选择多组标签，集体声明，逗号分割，竖着写，最后一个不用加逗号。

```html
div, 
p {
color: red;
}
```

#### 伪类选择器

冒号，添加特殊的效果，链接伪类，表单伪类。

链接伪类

```html
a:link 未访问的
a:visited 访问过的
a:hover 鼠标经过
a:active 点下未弹起

<!--按顺序写，a需要单独指定样式-->
a:link {
color: #333;
text-decoration: none;
}
a:visited {
color: red;
}
a:hover {
color: skyblue;
}
a:active {
color: green;
}

实际开发a:link {} a:hover {} 足够
```

：focus伪类

```html
光标选择器
input:focus {
            background-color: pink;
            color: red;
}
```

### CSS元素显示模式

标签以什么方式显示。

块元素，独占一行，可以设置宽度和高度。

行内元素宽和高设置是无效的，默认是内容本身的宽度，不能放块元素。a不能放a了，但a内可以放块元素。

行内块元素

```html
<img />
<input />
<td>
```

| 元素模式   | 元素排列                 | 设置样式         | 默认宽度           | 包含                   |
| ---------- | ------------------------ | ---------------- | ------------------ | ---------------------- |
| 块元素     | 一行只能放一个块元素     | 可以设置宽度高度 | 容器的100%         | 容器可包含任何标签     |
| 行内元素   | 一行放多个行内元素       | 不可设置宽度高度 | 等于本身内容的宽度 | 容纳文本或其他行内元素 |
| 行内块元素 | 一行可以放多个行内块元素 | 可以设置宽度高度 | 等于本身内容的宽度 |                        |

显示模式的转换，a链接，增加元素点击范围。把一个行内元素转换为块元素。

行转块：display: block

块转行：display: inline

转换行内块：display: inline-block

### CSS背景

```css
背景颜色 
background-color: ...;

背景图片 
小的装饰型图片，超大的图片，精灵图，便于控制位置。
background-image: url();

背景平铺 
background-repeat: repeat; 默认平铺

背景图片位置 
background-position: x y; [top; center; bottom; left; right; ]

背景图片固定滚动 
background-attachment: scroll; fixed;

背景图片复合简写
background: 背景颜色 背景图片 背景平铺 背景滚动 背景位置;

CSS3背景色半透明
background: rgba(0, 0, 0, 0.3);
```

### CSS三大特性

#### 层叠性

相同的选择器设置相同的样式，此时样式冲突，遵循就近原则。只存在样式冲突才会被覆盖，其他仍然可以有效。

#### 继承性

子承父业，简化代码，降低复杂性，主要继承文字相关样式适合。行高的继承。

```css
font: 12px/1.5 'Microsoft yahei';

当前元素文字大小的1.5倍
```

#### 优先级

| 选择器               | 权重       |
| -------------------- | ---------- |
| 继承或者*            | 0，0，0，0 |
| 元素选择器           | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| ID选择器             | 0，1，0，0 |
| 行类样式 style=“”    | 1，0，0，0 |
| !important 重要的    | 最高权重   |

a链接具有单独的样式，浏览器指定了默认样式。

继承的权重为0。

复合选择器具有权重叠加的原则。

### CSS盒子模型

网页布局：盒子模型，浮动，定位。

#### 组成

```css
border 边框
content 内容
padding 内边距
margin 外边距


border: border-width border-style border-color;
border-collapse: collapse;

padding: 5px;
padding: top left right bottom;
padding-top, padding-bottom, padding-left, padding-right;
padding会影响盒子大小
如果盒子没有指定width或者height则不会改变

margin: 10px;
margin: top left right bottom;
margin: 0 auto;
居中写法
margin-top, margin-bottom, margin-left, margin-right;
嵌套子父元素存在塌陷
boder-top
padding: 5px;
overflow: hidden;

默认内外边距，可清除内外边距，一般做CSS第一行。
* {
    margin: 0;
    padding: 0;
}

行内元素只设置左右内外边距。
```

#### 圆角边框（CSS3新增样式）

```css
boder-redius: 10px;

圆形
width: 200px;
height: 200px
boder-redius: 100px;(50%)

圆矩形
width: 600px;
height: 200px;
boder-redius: 100px;(50%)
```

#### 盒子阴影（CSS3新增样式）

```css
box-shadow: h-shadow v-shadow blur spread color inset

h-shadow 水平阴影 必须
v-shadow 垂直阴影 必须
blur 模糊距离
spread 阴影尺寸
color 阴影颜色
inset 内阴影还是外阴影

div
div: hover 
```

#### 文字阴影（CSS3新增样式）

```css
text-shadow: h-shadow v-shadow blur color
```

### 浮动

#### 三种布局方式

标准流、浮动、定位

浮动最广泛应用为同一行显示多个块元素。

**网页布局第一准则：多个快元素纵向排列用标准流，多个快元素横向排列用浮动。**

```css
float: left; right; none;
```

浮动的盒子会脱离原来的位置。上沿对齐。具有行内块元素相似的特性。

浮动经常与标准流搭配使用。标准流上下布局，浮动水平布局。

#### 清除浮动

父盒子在很多情况下不能确定高度。清楚浮动造成的影响。

```css
div {
    clear: both;
}
闭合浮动
```

- 额外标签法，隔墙法，堵住，不常用

  ```css
  .clear {
      clear: both;
  }
  
  <div>...</div>
  <div class="clear"></div> 格外标签块元素
  ```

- 父盒子添加overflow

  ```css
  .box {
      overflow: hidden;
  }
  
  <div class="box">
  ...
  </div>
  ```

- 父元素添加:after ，高级，推荐。

  ```css
  .clearfix::after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
  }
  
  .clearfix {
      *zoom: 1;
  }
  
  <div class="box clearfix"></div>
  ```

- 父元素用双伪元素，高级，推荐。

  ```css
  .clearfix::before,
  .clearfix::after {
      content: "";
      display: table;
  }
  .clearfix:after {
      clear: both;
  }
  .clearfix {
      *zoom: 1;
  }
  
  <div class="box clearfix"></div>
  ```

  

### 书写顺序

1 布局样式

2 自身属性

3 文本属性

4 自他属性

### 定位

自由确定盒子位置，应用于布局。

#### 定位模式

| position值 | 效果                                                         |
| ---------- | ------------------------------------------------------------ |
| static     | 静态定位，无定位，默认定位，标准流，不使用。                 |
| relative   | 相对定位，相对于自身坐标边偏移，不脱标，保留原来位置，应用于绝对定位的父元素 |
| absolute   | 绝对定位，没有父元素、或者父元素无定位以浏览器为准，以最近一级带有定位的位置为参考系。脱标，不再占有原位置。**子绝父相**。 |
| fixed      | 固定定位，固定到浏览器的固定位置，首栏。以浏览器的可视窗口作为参照系。脱标。<br />返回顶部盒子：position: fixed; left: 50%; margin-left: 52%; |
| sticky     | 粘性定位，position: sticky; top: 10px; 使用少。              |

#### 边偏移

| 属性   | 偏移位置 |
| ------ | -------- |
| top    |          |
| bottom |          |
| left   |          |
| right  |          |

### 元素的显示和隐藏

#### display

- display: none; 隐藏元素，不在占有原位置。
- display: block; 显示元素，占位置。

搭配js，应用广泛。

#### visibility

- visibility: visible; 继续占有位置
- visibility: hidden;  

#### overflow

- overflow: visible; 默认显示
- overflow: hidden; 不显示溢出部分
- overflow: auto; 需要的时候添加滚动条，显示更好
- overflow: scroll; 滚动条显示


<!-- markdown for nginx, see https://phus.lu -->
<script>
!function(){
	var dom = {
		element: null,
		get: function (o) {
			var obj = Object.create(this)
			obj.element = (typeof o == "object") ? o : document.createElement(o)
			return obj
		},
		add: function (o) {
			var obj = dom.get(o)
			this.element.appendChild(obj.element)
			return obj
		},
		text: function (t) {
			this.element.appendChild(document.createTextNode(t))
			return this
		},
		attr: function (k, v) {
			this.element.setAttribute(k, v)
			return this
		}
	}

	if (!document.head) return
	head = dom.get(document.head)
	head.add('meta').attr('charset', 'utf-8')
	head.add('meta').attr('name', 'viewport').attr('content', 'width=device-width,initial-scale=1')

	if (!document.body) {
		document.write(["<div class=\"container\">",
		"<h3>nginx.conf</h3>",
		"<textarea rows=6 cols=50>",
		"# download markdown.html to /wwwroot",
		"location ~ \\.md$ {",
		"    default_type text/html;",
		"    add_after_body /markdown.html;",
		"}",
		"</textarea>",
		"</div>"].join("\n"))
		return
	}

	var bodytext = document.body.innerHTML
	document.body.innerHTML = ''

	div = dom.get('div').attr('class', 'container')

	div.add('script').attr('src', 'https://cdnjs.cloudflare.com/ajax/libs/marked/0.5.2/marked.min.js').attr('integrity', 'sha256-zFUosuESzULu5P+SZdjRRtBZR8+1u5RZDlbt3Q5KL8U=').attr('crossorigin', 'anonymous')
	div.add('link').attr('rel', 'stylesheet').attr('href', 'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown-light.min.css').attr('integrity', 'sha256-WQx0Y6LLZeGv3V3NVVge+YIL5MIOt45RPuFdkyNodls=').attr('crossorigin', 'anonymous')

	title = decodeURIComponent(document.location.pathname.replace(/.*\//, '').replace(/\.html$/, ''))
	document.title = '《' + title.replace(/\.md$/, '') + '》'
	tbody = div.add('table').add('tbody')
	tbody.add('tr').add('th').text(title).attr('class', 'octicon-book')
	tbody.add('tr').add('td').add('div').attr('id', 'readme').attr('class', 'markdown-body')

	wait = function (name, callback) {
		var interval = 10; // ms
		window.setTimeout(function() {
			if (window[name]) {
				callback(window[name])
			} else {
				window.setTimeout(arguments.callee, interval)
			}
		}, interval)
	}
	wait('marked', function() {
		document.getElementById("readme").innerHTML = marked.parse(bodytext)
	})

	document.body.appendChild(div.element)
}()
</script>

<style>
body {
	margin: 0;
	font-family: "ubuntu", "Tahoma", "Microsoft YaHei", Arial, Serif;
}
.markdown-body {
	float: left;
	font-family: "ubuntu", "Tahoma", "Microsoft YaHei", Arial, Serif;
}
.container {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}
@media (min-width: 768px) {
	.container {
		max-width: 80%;
	}
}
@media (min-width: 992px) {
	.container {
		max-width: 70%;
	}
}
@media (min-width: 1200px) {
	.container {
		max-width: 60%;
	}
}
table {
	width: 100%;
	max-width: 100%;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	padding: 0;
	border-collapse: collapse;
}
table th {
	font-size: 14px;
}
table tr {
	border: 1px solid #ddd;
	padding: 5px;
}
table th, table td {
	border: 1px solid #ddd;
	font-size: 14px;
	line-height: 20px;
	padding: 3px;
	text-align: left;
}
.octicon-book {
	background-position: center left;
	background-repeat: no-repeat;
	padding-left: 20px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3,5 L7,5 L7,6 L3,6 L3,5 L3,5 Z M3,8 L7,8 L7,7 L3,7 L3,8 L3,8 Z M3,10 L7,10 L7,9 L3,9 L3,10 L3,10 Z M14,5 L10,5 L10,6 L14,6 L14,5 L14,5 Z M14,7 L10,7 L10,8 L14,8 L14,7 L14,7 Z M14,9 L10,9 L10,10 L14,10 L14,9 L14,9 Z M16,3 L16,12 C16,12.55 15.55,13 15,13 L9.5,13 L8.5,14 L7.5,13 L2,13 C1.45,13 1,12.55 1,12 L1,3 C1,2.45 1.45,2 2,2 L7.5,2 L8.5,3 L9.5,2 L15,2 C15.55,2 16,2.45 16,3 L16,3 Z M8,3.5 L7.5,3 L2,3 L2,12 L8,12 L8,3.5 L8,3.5 Z M15,3 L9.5,3 L9,3.5 L9,12 L15,12 L15,3 L15,3 Z' /%3E%3C/svg%3E");
}
</style>