哔哩哔哩：https://www.bilibili.com/video/BV1sGfGY8Ep2
HTML+CSS课程概述 –
1、什么是HTML、CSS，能做什么？
- 什么是HTML
- 什么是CSS
- 网页、漂亮的网页、H5网页、WebApp页面、小程序
2、HTML、HTML5、H5的区别
- HTML：指的是超文本标记语言 (Hyper Text Markup Language)
- HTML5：HTML的升级
- H5：移动端网页
3、HTML+CSS全览
- 什么是前端
- 什么是后端
- 什么是前台页面
- 什么是后台页面
- HTML+CSS在全局中的位置
4、HTML、CSS的学习路径和学习方法
- 看懂别人的代码，简单修改
- 开发自己想要的网页 layui bootstrap
- web前端 Vue、React、Angular
- 学习概念 属性 标签 事件 样式
- 学习英语单词 英语量小
- 学会调试
- 学会代码格式
- 建立自己的代码库
– HTML+CSS开发环境搭建 –
1、谷歌浏览器的安装和简单使用
2、SublimeText编辑器的安装和使用
3、课前准备
- 简单的网页开发
- 了解属性概念一切万物都有属性
- 了解简单的调试方法element
补充1、谷歌浏览器的安装和简单使用
补充2、谷歌应用商店的访问和插件安装
补充3、SublimeText3的安装
补充4、SublimeText3插件的安装
– HTML基础知识 –
1、HTML简介
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言(markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档 = 网页
2、什么是标签
- 是由一对尖括号包裹的单词构成 例如: <html> 所有标签中的单词不可能以数字开头.
- 标签不区分大小写<html> 和 <HTML>. 推荐使用小写.
- 标签分为两部分: 开始标签 和 结束标签，两个标签之间的部分 我们叫做标签体.
- 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <hr/> <input /> <img />
- 标签可以嵌套.但是不能交叉嵌套. <b></b>
3、什么是属性
- HTML 标签可以拥有属性
- 属性总是以名称/值对的形式出现，比如：name=”value”。
- 属性值应该始终被包括在引号内，双引号是最常用的，不过使用单引号也没有问题。
- 属性总是在 HTML 元素的开始标签中规定。
<a href="http://www.baidu.com">这是一个链接</a>
<p class='p1' id='p1'>这是一段文本</p>
<hr color="">
| 属性 | 值 | 描述 |
|---|---|---|
| class | classname | 规定元素的类名（classname） |
| id | id | 规定元素的唯一 id |
| style | style_definition | 规定元素的行内样式（inline style） |
| title | text | 规定元素的额外信息（可在工具提示中显示） |
4、什么是元素
- HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| <p> | This is a paragraph | </p> |
| <a href=”default.htm” > | This is a link | </a> |
//body元素
<body>
<p>这是一段文本</p>
</body>
5、html文档头部信息
//文档声明
<!DOCTYPE html>
//告知浏览器其自身是一个 HTML 文档。
<html lang="zh">
//用于定义文档的头部，它是所有头部元素的容器
<head>
<meta charset="UTF-8">
<meta name="keywords" content="阿涛，立体空间，编程">
<meta name="description" content="一个野生程序员的博客">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<title>Document</title>
</head>
<body>
<p>this is a page</p>
</body>
</html>
下面这些标签可用在 head 部分：
<base>, <link>, <meta>, <script>, <style>, 以及 <title>
title 定义文档的标题，它是 head 部分中唯一必需的元素。
6、常用标签：标题、段落
<h1> - <h6>
<p></p>
7、常用标签：链接
<a href="url">Link text</a>
- href属性
- name属性
- target属性
属性值
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
8、常用标签：图像
<img src="url" />
- src属性
- alt属性
- height属性
- width属性
9、常用标签：列表
//无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
//有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
//自定义列表
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
10、常用标签：表格
表格由 <table> 标签来定义。每个表格均有若干行（由<tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
- border属性
- 表格的表头使用
<th>标签进行定义。 - colspan (column)
- rowspan (row)
11、常用标签：div标签
<div> 可定义文档中的分区
12、HTML块元素
- 总是从新的一行开始（独占一行）
- 高度、宽度都是可设置的
- 宽度没有设置时，默认为100%（和父元素的宽度一致）
- 块级元素中可以包含块级元素和行内元素
<h1> ~ <h6> 标题
<hr/> 水平分割线
<p>...</p> 段落
<pre>...</pre> 预格式化
<blockquote>...</blockquote> 段落缩进 前后5个字符
<marquee>...</marquee> 滚动文本
<ul>...</ul> 无序列表
<ol>...</ol> 有序列表
<dl>...</dl> 定义列表
<table>...</table> 表格及以下所有子元素
<section>...</section> 定义 section
<form>...</form> 表单
<div>...</div>
13、HTML内联元素
- 和其他元素都在一行
- 高度、宽度都是不可控的
- 宽高就是内容的高度，不可以改变
- 行内元素只能包含行内元素，不能包含块级元素
<a>...</a> 超级链接
<b>...</b> 定义粗体字
<i>...</i> 斜体
<em>...</em> 强调文本
<br/> 换行
<button>...</button> 按钮
<abbr>...</abbr> 定义缩写
<img /> 图像 （内联块元素）
<input/> 输入框
<label>...</label> input 元素的标注
<code>...</code> 计算机代码文本
<mark>...</mark> 记号的文本
<select>...<.select> 选择列表（下拉列表）
<span>...</span> 文档中的节
<textarea>...</textarea> 文本域
<video>...<video> 视频
14、块元素和内联元素之间的转换
| 块级元素 | 行内元素 |
|---|---|
| 独占一行,默认情况下，其宽度自动填满其父元素宽度 | 相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化 |
| 可以设置width，height属性 | 行内元素设置width，height属性无效 |
| 可以设置margin和padding属性 | 行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。 |
| 对应于display | 对应于display； |
把块元素转为内联元素: display: inline
缺陷： inline元素之间的空白会保留一个
把内联元素转为块元素：display: block
可以在一行中显示，有可以设置宽和高:display: inline-block;
缺陷： inline-block元素之间的空白会保留一个
15、类：class
16、内联框架：iframe
<iframe src="URL"></iframe>
| 属性 | 值 | 描述 |
|---|---|---|
| frameborder | 1或0 | 规定是否显示框架周围的边框。 |
| height | pixels 或*%* | 规定 iframe 的高度。 |
| longdesc | URL | 规定一个页面，该页面包含了有关 iframe 的较长描述。 |
| marginheight | pixels | 定义 iframe 的顶部和底部的边距。 |
| marginwidth | pixels | 定义 iframe 的左侧和右侧的边距。 |
| name | frame_name | 规定 iframe 的名称。 |
| sandbox | “”allow-formsallow-same-originallow-scriptsallow-top-navigation | 启用一系列对 <iframe> 中内容的额外限制。 |
| scrolling | yes 、no 、auto | 规定是否在 iframe 中显示滚动条。 |
| seamless | seamless | 规定 <iframe> 看上去像是包含文档的一部分。 |
| src | URL | 规定在 iframe 中显示的文档的 URL。 |
| srcdoc | HTML_code | 规定在 <iframe> 中显示的页面的 HTML 内容。 |
| width | pixels**% | 定义 iframe 的宽度。 |
17、form表单
- 表单是一个包含表单元素的区域，允许用户在表单中输入内容
<form>
input elements
</form>
- 表单属性
常见的有action、method
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
<form action="/demo/demo_form.asp" method="GET">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br>
<br>
<input type="submit" value="Submit">
</form>
18、form表单元素：input输入类型
输入类型：text
<input type="text"> 定义供文本输入的单行输入字段
输入类型：password
<input type="password"> 定义密码字段
输入类型：submit
<input type="submit"> 定义提交表单数据至表单处理程序的按钮。
表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。
在表单的 action 属性中规定表单处理程序（form-handler）
输入类型: radio
<input type="radio"> 定义单选按钮。
输入类型: checkbox
<input type="checkbox"> 定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。
输入类型: button
<input type="button> 定义按钮。
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
19、form表单元素：input输入属性
value 属性
value 属性规定输入字段的初始值
readonly 属性
readonly 属性规定输入字段为只读（不能修改）
readonly="readonly" 等同于 readonly
disabled 属性
disabled 属性规定输入字段是禁用的。
被禁用的元素是不可用和不可点击的。
被禁用的元素不会被提交。
disabled 属性不需要值。它等同于 disabled="disabled"。
size 属性
size 属性规定输入字段的尺寸（以字符计）
maxlength 属性
maxlength 属性规定输入字段允许的最大长度
20、form表单元素：select
<select> 元素（下拉列表）
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<option> 元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。
您能够通过添加 selected 属性来定义预定义选项
<option value="fiat" selected>Fiat</option>
21、form表单元素：textarea
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
**注释：**在文本输入区内的文本行间，用 “%OD%OA” （回车/换行）进行分隔。
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
22、form表单元素：button
button 元素定义可点击的按钮
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
23、HTML颜色
三种表示方法：
RGB/RGBA
十六进制
颜色名称
HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）
三种颜色 红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)
颜色名：16个标准颜色：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow
进制转换：https://tool.oschina.net/hexconvert
24、HTML路径
| 路径 | 描述 |
|---|---|
| <img src=”picture.jpg”> | picture.jpg 位于与当前网页相同的文件夹 |
| <img src=”images/picture.jpg”> | picture.jpg 位于当前文件夹的 images 文件夹中 |
| <img src=”/images/picture.jpg”> | picture.jpg 当前站点根目录的 images 文件夹中 |
| <img src=”../picture.jpg”> | picture.jpg 位于当前文件夹的上一级文件夹中 |
| <img src=”./picture.jpg”> | picture.jpg 位于与当前网页相同的文件夹 |
25、字符实体
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：
&entity_name;或&#entity_number;
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| “ | 引号 | " | " |
| ‘ | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 人民币/日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
– CSS基础知识 –
1、什么是CSS
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
.css后缀名，提供工作效率，层叠、层叠、层叠
2、创建CSS样式表
- 外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 内部样式表
<head>
<style>
body {
background-image:url("images/back40.gif");
}
</style>
</head>
- 内联样式（行内样式）
<p style="color:#ccc;margin:20px">这是一个段落。</p>
可以混合使用
优先级：内联样式 > 内部样式 > 外部样式
3、CSS语法
/*这是个注释*/
h1 {
color: blue;
font-size: 12px;
}
4、常用的选择器
- id 选择器：#id名
- class选择器：.class名
- 元素选择器
element p 选择所有<p>元素 element,element div,p 选择所有<div>元素和<p>元素 element element div p 选择<div>元素内的所有<p>元素 element>element div>p 选择所有父级是 <div> 元素的 <p> 元素 element+element div+p 选择所有紧接着<div>元素之后的<p>元素
5、CSS中的颜色
颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合。
使用颜色名称，或 RGB、RGBA、HEX（十六进制值）、HSL、、HSLA 值表示
表示方法：
1、十六进制值写法，以＃符号开始：#FF0000
＃RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）
2、RGB颜色
RGB颜色值在所有主要浏览器都支持。
RGB颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。
例如RGB（0,0,255）值呈现为蓝色，因为蓝色的参数设置为最高值（255）而其他设置为0。
此外，下面的值定义相同的颜色：RGB（0,0,255），RGB（0％，0％，100％）。
3、RGBA颜色
RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。
RGBA颜色值是RGB颜色值alpha通道的延伸 – 指定对象的透明度。
RGBA颜色值指定：RGBA（红，绿，蓝，alpha）。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。
RGBA（0％，0％，100％,100%）。
4、颜色名称 – 如：”red”
black red yellow blue green pink gray white
颜色名称：https://www.w3school.com.cn/cssref/css_colors.asp
5、HSL 值
在 CSS 中，可以使用色相、饱和度和明度（HSL）来指定颜色，格式如下：
hsl(hue, saturation, lightness)
色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。
饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。
亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。
6、HSLA 值
HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 – 它指定了颜色的不透明度。
HSLA 颜色值指定为：
hsla(hue, saturation, lightness, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字
6、CSS背景-background
- background-color
- 十六进制 – 如：”#ff0000″
- RGB – 如：”rgb(255,0,0)”
- 颜色名称 – 如：”red”
- background-image
- url(‘paper.gif’)
- background-repeat值说明repeat背景图像将向垂直和水平方向重复。这是默认repeat-x只有水平位置会重复背景图像repeat-y只有垂直位置会重复背景图像no-repeatbackground-image不会重复inherit指定background-repea属性设置应该从父元素继承
- background-attachment值描述scroll背景图片随着页面的滚动而滚动，这是默认的。fixed背景图片不会随着页面的滚动而滚动。local背景图片会随着元素内容的滚动而滚动。initial设置该属性的默认值。inherit指定 background-attachment 的设置应该从父元素继承。
- background-position值描述left top/left center /left bottom /right top /right center /right bottom /center top /center center /center bottom如果仅指定一个关键字，其他值将会是”center”x% y%第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％xpos ypos第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positionsinherit指定background-position属性设置应该从父元素继承
- 简写background属性
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
7、CSS文本（text）
color：文本颜色
- 十六进制值 – 如: ＃FF0000
- 一个RGB值 – 如: RGB(255,0,0)
- 颜色的名称 – 如: red
text-align：对齐方式
| 值 | 描述 |
|---|---|
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
| inherit | 规定应该从父元素继承 text-align 属性的值。 |
text-decoration：文本修饰
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| blink | 定义闪烁的文本。（firefox） |
| inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
direction：文本方向
| 值 | 描述 |
|---|---|
| ltr | 默认。文本方向从左到右。（left to right） |
| rtl | 文本方向从右到左。 |
| inherit | 规定应该从父元素继承 direction 属性的值。 |
letter-spacing：文字间距
| 值 | 描述 |
|---|---|
| normal | 默认。规定字符间没有额外的空间。 |
| length | 定义字符间的固定空间（允许使用负值）。1px -2px |
| inherit | 规定应该从父元素继承 letter-spacing 属性的值。 |
line-height：行高
| 值 | 描述 |
|---|---|
| normal | 默认。设置合理的行间距。 |
| number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 |
| length | 设置固定的行间距。 |
| % | 基于当前字体尺寸的百分比行间距。 |
| inherit | 规定应该从父元素继承 line-height 属性的值。 |
text-indent：首行缩进
| 值 | 描述 |
|---|---|
| length | 定义固定的缩进。默认值：0。 |
| % | 定义基于父元素宽度的百分比的缩进。 |
| inherit | 规定应该从父元素继承 text-indent 属性的值。 |
text-shadow：文本阴影
语法：text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。 |
text-transform：文本转换
| 值 | 描述 |
|---|---|
| none | 默认。定义带有小写字母和大写字母的标准的文本。 |
| capitalize | 文本中的每个单词以大写字母开头。 |
| uppercase | 定义仅有大写字母。 |
| lowercase | 定义无大写字母，仅有小写字母。 |
| inherit | 规定应该从父元素继承 text-transform 属性的值。 |
unicode-bidi：设置或返回文本是否被重写
unicode-bidi: normal|embed|bidi-override|initial|inherit;
vertical-align：垂直对齐
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 使元素及其后代元素的底部与整行的底部对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | 将元素升高或降低指定的高度，可以是负数。 |
| % | 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
white-space：设置元素中空白的处理方式
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
word-spacing：单词间距
| 值 | 描述 |
|---|---|
| normal | 默认。定义单词间的标准空间。 |
| length | 定义单词间的固定空间。 |
| inherit | 规定应该从父元素继承 word-spacing 属性的值。 |
8、CSS字体（font）
font-family：字体
属性定义及使用说明
font – family属性指定一个元素的字体。
font-family 可以把多个字体名称作为一个”回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。
有两种类型的字体系列名称：
- family-name – 指定的系列名称：具体字体的名称，比如：”times”、”courier”、”arial”。
- generic-family – 通常字体系列名称：比如：”serif”、”sans-serif”、”cursive”、”fantasy”、”monospace。
使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。
注意： 每个值用逗号分开。
注意: 如果字体名称包含空格，它必须加上引号。在HTML中使用”style”属性时，必须使用单引号。
font-family:"Times New Roman",Georgia,Serif;
font-size：字体大小
| 值 | 描述 |
|---|---|
| xx-small x-small small medium large x-large xx-large | 把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。 |
| smaller | 把 font-size 设置为比父元素更小的尺寸。 |
| larger | 把 font-size 设置为比父元素更大的尺寸。 |
| length | 把 font-size 设置为一个固定的值。px em |
| % | 把 font-size 设置为基于父元素的一个百分比值。 |
| inherit | 规定应该从父元素继承字体尺寸。 |
font-style：字体样式
| 值 | 描述 |
|---|---|
| normal | 默认值。浏览器显示一个标准的字体样式。 |
| italic | 浏览器会显示一个斜体的字体样式。 |
| oblique | 浏览器会显示一个倾斜的字体样式。 |
| inherit | 规定应该从父元素继承字体样式。 |
font-variant：以小型大写字体或者正常字体显示文本
| 值 | 描述 |
|---|---|
| normal | 默认值。浏览器会显示一个标准的字体。 |
| small-caps | 浏览器会显示小型大写字母的字体。 |
| inherit | 规定应该从父元素继承 font-variant 属性的值。 |
font-weight：指定字体的粗细
| 值 | 描述 |
|---|---|
| normal | 默认值。定义标准的字符。 |
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
| 100 200 300 400 500 600 700 800 900 | 定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。 |
| inherit | 规定应该从父元素继承字体的粗细。 |
9、CSS链接（link）
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
- a- 正常，未访问过的链接
- a – 用户已访问过的链接
- a – 当用户鼠标放在链接上时
- a – 链接被点击的那一刻
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
当设置为若干链路状态的样式，也有一些顺序规则：
- a 必须跟在 a和 a后面
- a 必须跟在 a后面
常用的设置：
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
单独设置
a.classname:link {}
a#idname:visited {}
10、CSS列表（list）
list-style-image：
list-style-image:url('sqpurple.gif');
| 值 | 描述 |
|---|---|
| URL | 图像的路径。（图片大小10px左右） |
| none | 默认。无图形被显示。 |
| inherit | 规定应该从父元素继承 list-style-image 属性的值。 |
list-style-position：设置列表中列表项标志的位置
| 值 | 描述 |
|---|---|
| inside | 列表项目标记放置在文本以内，且环绕文本根据标记对齐。 |
| outside | 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 |
| inherit | 规定应该从父元素继承 list-style-position 属性的值。 |
list-style-type：设置列表项标志的类型
| 值 | 描述 |
|---|---|
| none | 无标记。 |
| disc | 默认。标记是实心圆。 |
| circle | 标记是空心圆。 |
| square | 标记是实心方块。 |
| decimal | 标记是数字。 |
| decimal-leading-zero | 0开头的数字标记。(01, 02, 03, 等。) |
| lower-roman | 小写罗马数字(i, ii, iii, iv, v, 等。) |
| upper-roman | 大写罗马数字(I, II, III, IV, V, 等。) |
| lower-alpha | 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) |
| upper-alpha | 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) |
| lower-greek | 小写希腊字母(alpha, beta, gamma, 等。) |
| lower-latin | 小写拉丁字母(a, b, c, d, e, 等。) |
| upper-latin | 大写拉丁字母(A, B, C, D, E, 等。) |
| hebrew | 传统的希伯来编号方式 |
| armenian | 传统的亚美尼亚编号方式 |
| georgian | 传统的乔治亚编号方式(an, ban, gan, 等。) |
| cjk-ideographic | 简单的表意数字 |
| hiragana | 标记是：a, i, u, e, o, ka, ki, 等。（日文平假名字符） |
| katakana | 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名字符） |
| hiragana-iroha | 标记是：i, ro, ha, ni, ho, he, to, 等。（日文平假名序号） |
| katakana-iroha | 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名序号） |
列表简写属性：list-style
- list-style-type
- list-style-position
- list-style-image
11、CSS表格（table）
border-collapse：规定是否应折叠表格边框
| 值 | 说明 |
|---|---|
| collapse | 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性 |
| separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性 |
| inherit | 规定应该从父元素继承 border-collapse 属性的值 |
border-spacing：规定相邻单元格之间的边框的距离
| 值 | 描述 |
|---|---|
| length length | 规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。 |
| inherit | 指定应该从父元素继承border – spacing属性的值 |
caption-side：规定表格标题的位置
| 值 | 描述 |
|---|---|
| top | 默认值。把表格标题定位在表格之上。 |
| bottom | 把表格标题定位在表格之下。 |
| inherit | 规定应该从父元素继承 caption-side 属性的值。 |
empty-cells：规定是否在表格中的空白单元格上显示边框和背景
| 值 | 描述 |
|---|---|
| hide | 不在空单元格周围绘制边框。 |
| show | 在空单元格周围绘制边框。默认。 |
| inherit | 规定应该从父元素继承 empty-cells 属性的值。 |
table-layout：设置用于表格的布局算法
| 值 | 描述 |
|---|---|
| auto | 默认。列宽度由单元格内容设定。 |
| fixed | 列宽由表格宽度和列宽度设定。table首先要确定宽度 |
| inherit | 规定应该从父元素继承 table-layout 属性的值。 |
简写属性border
- border-width
- border-style
- border-color
12、CSS盒子模型
* {
margin: 0;
padding: 0;
}
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
13、CSS边框（border）
border：边框
| 值 | 说明 |
|---|---|
| border-width | 指定边框的宽度 |
| border-style | 指定边框的样式 |
| border-color | 指定边框的颜色 |
| inherit | 指定应该从父元素继承border属性值 |
border-style：边框样式
| 值 | 描述 |
|---|---|
| none | 定义无边框。 |
| hidden | 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
| solid | 定义实线。 |
| double | 定义双线。双线的宽度等于 border-width 的值。 |
| groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
| ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
| inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
| outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
| inherit | 规定应该从父元素继承边框样式。 |
border-width：边框宽度
| 值 | 描述 |
|---|---|
| thin | 定义细的边框。 |
| medium | 默认。定义中等的边框。 |
| thick | 定义粗的边框。 |
| length | 允许您自定义边框的宽度。 |
| inherit | 规定应该从父元素继承边框宽度。 |
border-color：边框颜色
| 值 | 说明 |
|---|---|
| color | 指定背景颜色。 |
| transparent | 指定边框的颜色应该是透明的。这是默认 |
| inherit | 指定边框的颜色，应该从父元素继承 |
border-bottom：下边框
border-bottom-width
border-bottom-style
border-bottom-color
border-left：左边框
border-right：右边框
border-top：上边框
14、CSS外边距（margin)
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
| 值 | 描述 |
|---|---|
| auto | 浏览器计算下外边距。 |
| length | 规定以具体单位计的下外边距值，比如像素、厘米等。默认值是 0。 |
| % | 规定基于父元素的宽度的百分比的下外边距。 |
15、CSS填充（padding）
| 属性 | 说明 |
|---|---|
| padding | |
| padding-bottom | 设置元素的底部填充 |
| padding-left | 设置元素的左部填充 |
| padding-right | 设置元素的右部填充 |
| padding-top | 设置元素的顶部填充 |
| 值 | 描述 |
|---|---|
| auto | 浏览器计算下外边距。 |
| length | 规定以具体单位计的下外边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的下外边距。 |
16、CSS轮廓（outline）
outline：轮廓
| 值 | 描述 |
|---|---|
| outline-color | 规定边框的颜色。 |
| outline-style | 规定边框的样式。 |
| outline-width | 规定边框的宽度。 |
| inherit | 规定应该从父元素继承 outline 属性的设置。 |
outline-color
| color | 指定轮廓颜色。 |
|---|---|
| invert | 默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。 |
| inherit | 规定应该从父元素继承轮廓颜色的设置。 |
outlin-style
| 值 | 描述 |
|---|---|
| none | 默认。定义无轮廓。 |
| dotted | 定义点状的轮廓。 |
| dashed | 定义虚线轮廓。 |
| solid | 定义实线轮廓。 |
| double | 定义双线轮廓。双线的宽度等同于 outline-width 的值。 |
| groove | 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 |
| ridge | 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 |
| inset | 定义 3D 凹边轮廓。此效果取决于 outline-color 值。 |
| outset | 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 |
| inherit | 规定应该从父元素继承轮廓样式的设置。 |
outline-width
| 值 | 描述 |
|---|---|
| thin | 规定细轮廓。 |
| medium | 默认。规定中等的轮廓。 |
| thick | 规定粗的轮廓。 |
| length | 允许您规定轮廓粗细的值。 |
| inherit | 规定应该从父元素继承轮廓宽度的设置。 |
17、CSS文档流
- 块元素
- 行内元素
- position：static
18、CSS定位（一）
19、CSS定位（二）
20、CSS定位（三）
21、CSS定位（四）
position 属性的五个值：
- static （默认）
- relative 相对的
- fixed 固定的
- absolute 绝对的
- sticky 粘贴的
fixed ：相对于浏览器
使用left，right，top，bottom进行定位
| 值 | 描述 |
|---|---|
| auto | 默认值。通过浏览器计算上边缘的位置。 |
| % | 设置以包含元素的百分比计的上边位置。可使用负值。 |
| length | 使用 px、cm 等单位设置元素的上边位置。可使用负值。 |
| inherit | 规定应该从父元素继承 top 属性的值。 |
relative 相对其正常位置
absolute 绝对定位的元素的位置相对于最近的已定位(非static)父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
sticky 基于用户的滚动位置来定位。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
22、重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}