一 css基本知识

1.1 CSS介绍

CSS 指的是层叠样式表* (Cascading Style Sheets)，它描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素。它可以外部样式表存储在 CSS 文件中，同时控制多张网页的布局，节省了大量工作。
CSS 规则集（rule-set）由选择器和声明块组成，选择器指向您需要设置样式的 HTML 元素。声明块包含一条或多条用分号分隔的声明。

通常我们在单独的css文件中写css，不推荐在html文档中书写css代码。在html中使用css可以使用link标签引入。

<link rel="stylesheet" type="text/css" href="mystyle.css">

1.2 CSS选择器

1.2.1 元素选择器
元素选择器根据元素名称来选择 HTML 元素。

p {
  text-align: center;
  color: red;
}

1.2.2 id选择器
id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
css文件中的#para1选择器可以修饰html文件中id="para1"的元素。

#para1 {
  text-align: center;
  color: red;
}
<p id="para1">Hello World!</p>

1.2.3 类选择器
类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
下面.center可以修饰html文件中所有类名为center的元素。

.center {
  text-align: center;
  color: red;
}
<h1 class="center">居中的红色标题</h1>

下例中，只有具有 class=“center” 的

元素会居中对齐

p.center {
  text-align: center;
  color: red;
}

注意：HTML 元素也可以引用多个类，多个类以空格隔开。
1.2.4 通用选择器
通用选择器（*）选择页面上的所有的 HTML 元素。

* {
  text-align: center;
  color: blue;
}

1.2.5 分组选择器
分组选择器选取所有具有相同样式定义的 HTML 元素。

h1, h2, p {
  text-align: center;
  color: red;
}

二 CSS常用样式

2.1 CSS背景

背景颜色

background-color: DodgerBlue;   颜色名称方式
background-color: rgb(255, 0, 0)   RGB方式
background-color: #ff0000;     十六进制方式
background-color: hsl(0, 100%, 50%);   hsla(hue, saturation,  lightness)色相、饱和度、亮度背景图片与图片阵列方式

background-image: url("bg.png");      设置背景图片
background-repeat: repeat-x;       沿x方向阵列

下面的图片其实挺窄的，但是因为采用了水平阵列，所以可以布满整个屏幕。

background-position: right top;   设置背景图片初始位置
background-attachment: fixed;    背景图片是否随网页滑动

简写背景设置，可以用background设置背景多个属性

background: #ffffff url("tree.png") no-repeat right top; 

CSS背景设置总结

2.2 CSS框模型

所有 HTML 元素都可以视为方框。CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。

内容 - 框的内容，其中显示文本和图像。
内边距 - 清除内容周围的区域。内边距是透明的。
边框 - 围绕内边距和内容的边框。
外边距 - 清除边界外的区域。外边距是透明的。
下面是一个div的css框模型例子，实际开发中我们比较常用div框。

div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

height: 200px;  设置内容的高度
width: 50%;  设置内容的宽度

2.3 CSS边框

border-style: dotted;  边框样式为虚线
border-width: medium;   边框宽度中等
border-width: 25px 10px 4px 35px;   指定上右下左边框
border-color: red;    边框颜色，可以用颜色名、16进制、RGB、HSL来指定
border-top-style: dotted;    指定上边框
   简写边框属性
border: 5px solid red;
border-bottom: 6px solid red;  
   圆角边框
border: 2px solid red;  需要同时给出圆角半径
border-radius: 12px;

2.4 CSS边距

外边距

margin-top: 100px;  上边距
margin: 25px 50px 75px 100px;  简写边距，分别是上右下左

内边距

padding-top: 50px;  内上边距
padding: 25px 50px 75px 100px;  上右下左内边距

2.5 CSS轮廓

轮廓(outline-style)：轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

<style>
p {outline-color:red;}  轮廓颜色
p.dotted {outline-style: dotted;}  轮廓样式
p.dotted {border-style: dotted;}  边框样式，用于下图中边框与轮廓的比较
</style>

outline-width: thin;  轮廓宽度
outline: 5px solid yellow;   简写轮廓属性

轮廓偏移：在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

outline-offset: 25px;

2.6 CSS文本

text-align: center;  文本对齐

文本装饰：用于设置文本下划线一类的

text-decoration: none; 无装饰
text-decoration: overline;   上划线
text-decoration: line-through;  中划线
text-decoration: underline;  下划线

文本转换

text-transform: uppercase;  都用大写字母

文字间距

text-indent: 50px;   首行缩进
letter-spacing: 3px;   字母间距
word-spacing: 10px;  单词间距
line-height: 0.8;    行间距

换行

white-space: nowrap;  禁用html框中文字编辑时的换行符（不必懂）

文本阴影

text-shadow: 2px 2px 5px red; 分别是文本的水平、垂直阴影以及阴影的模糊效果、阴影颜色

2.7 CSS字体

定义字体

font-family: "Times New Roman", Times, serif;  

该属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束。字体名称应以逗号分隔。如果字体名称不止一个单词，则必须用引号引起来，例如：“Times New Roman”。
是否倾斜

font-style: italic;

字体粗细

font-weight: normal;

字体大小

font-size: 40px;   以像素设置
font-size: 2.5em;  以em单位设置

引入谷歌字体库

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
font: italic small-caps bold 12px/30px Georgia, serif;  简写字体属性

2.8 CSS图标

图标可以点击，触发事件，向 HTML 页面添加图标的最简单方法是使用图标库，比如bootstrap提供了很多组件。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

通常会把图标放到标签内

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

2.9 链接样式

链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。此外，可以根据链接的状态来设置链接的不同样式。

a:link { color: red; }  /* 未被访问的链接 */
a:visited { color: green;}  /* 已被访问的链接 */
a:hover { color: hotpink;}  /* 将鼠标悬停在链接上 */
a:active { color: blue;}  /* 被选择的链接 */

text-decoration: underline;    设置链接的下划线
background-color: lightgreen;   链接背景色

2.10 列表样式

列表标记

list-style-image: url('sqpurple.gif');   以图像作为列表标记
list-style-type: circle;   以圆作列表标记

List-style: square inside url('/i/arrow.gif');   一行设置列表属性

2.11 表格样式

表格样式非常常用，必须掌握

<head>
<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;    字体
  border-collapse: collapse;      折叠表格边框
  width: 100%;         表格宽度
}
#customers td, #customers th {
  border: 1px solid #ddd;       表格内部边框
  padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}     //鼠标悬浮效果
#customers th {
  padding-top: 12px;    单元格内边距
  padding-bottom: 12px;  
  text-align: left;        文字左对齐
  background-color: #4CAF50;    表头背景颜色
  color: white;   表头文字颜色
}
</style>
</head>
<body>
<table id="customers">
	<tr>
		<th>Company</th>
		<th>Contact</th>
		<th>Address</th>
		<th>City</th>
	</tr>
	<tr>
		<td>Alibaba</td>
		<td>Ma Yun</td>
		<td>No. 699, Wangshang Road, Binjiang District</td>
		<td>Hangzhou</td>
	</tr>
	<tr>
		<td>APPLE</td>
		<td>Tim Cook</td>
		<td>1 Infinite Loop Cupertino, CA 95014</td>
		<td>Cupertino</td>
	</tr>
</table>
</body>

2.12 鼠标样式

cursor: pointer;   鼠标呈现为指示链接的指针（一只手）

参考文献：W3school官网