HTML
WEB:HTML + CSS + Javascript
1、WEB概述
1、什么是WEB
WEB就是互联网上的一种应用程序 - 网页程序
程序结构：
1、C / S
C:Client 客户端
S:Server 服务器
2、B / S
B:Browser 浏览器
S:Server 服务器
2、WEB组成 & 运行流程
WEB组成：浏览器，服务器 和 通信协议组成
浏览器：代替用户向服务器发送请求(User Agent)
服务器：接收用户请求并给出响应
通信协议：规范了请求和响应数据是如何打包以及传递的 - http
Hyper Text Transfer Protocal
超级 文本 传输 协议
3、WEB 服务器
1、服务器的作用
1、用于接收用户的请求并给出响应
2、存储WEB的信息
3、具备安全性功能
2、产品
1、APACHE
2、TOMCAT
3、IIS
4、Nginx
3、技术
1、Python Web
2、JSP
3、php
4、ASP.NET
4、WEB 浏览器
1、作用
1、代替用户向服务器发送请求
2、作为响应数据的解释和执行引擎
2、主要浏览器产品
1、Microsoft IE(Internet Explorer)
2、Google Chrome
3、Mozilla Firefox
4、Apple Safari
5、Opera Opera
浏览器靠内核处理数据，内核包含以下两部分：
1、内容排版引擎 - HTML，CSS
2、脚本解释引擎 - JavaScript
3、浏览器技术
1、HTML
2、CSS
3、JavaScript - JS
HTML概述
1、HTML介绍 & 基础语法
1、什么是HTML
Hyper Text Markup Language
超级 文本 标记 语言
超文本 ：具备特殊功能的文本
普通文本 a : 普通字符 a
超文本 a : 表示超链接功能
普通文本 b : 普通字符 b
超文本 b : 表示加粗功能
标记 ：超文本的组成形式
普通文本 a : a
超文本 a :<a></a>
HTML是由W3C负责制定和推广规范的
W3C : World Wide Web Consortium(万维网联盟)
2、HTML 在计算机中的表现
HTML在计算机中以 .html 或 .htm 为结尾的文件存在的
开发工具：所有的文本编辑软件
1、windows 记事本
2、Editplus , Sublime
3、Webstorm,Dreamweaver,... ...
运行工具：浏览器
推荐使用：Google Chrome 浏览器
3、标记的语法规范
1、什么是标记
在网页中用于表示功能的符号称为"标记/标签/元素"
2、语法
标记在使用过程中，需要用 <> 括起来
标记分为 双标记 和 单标记
1、双标记
双标记，是有显示的开始 和 结束标记组成的
<标记>内容</标记>
ex:
<b>普通文本</b>
<s>文本内容</s>
2、单标记
只有一个标记，既能表示开始，也能表示结束
语法：<标记> 或 <标记/>
ex:
1、<br> 或 <br/> : 换行
2、<hr> 或 <hr/> : 一条水平线
3、<img> 或 <img/> : 图片
4、<input> 或 <input/> : 表单控件
3、标记的嵌套
在一对标记中，又出现了其他的标记，相当于就是功能的嵌套
ex:
<s><b>文本内容</b></s>
标记嵌套时一定要注意格式问题：
被嵌套的内容一定要加 缩进
<s>
<b>文本内容</b>
</s>
4、标记的属性 和 值
1、什么是属性
在标记中，属性是用来修饰标记的显示效果的
2、语法
1、属性必须声明在开始标记中
<标记 属性声明位置处></标记>
<标记 属性声明位置处>
2、属性 和 标记之间，用空格隔开
<标记 属性声明位置处></标记>
<标记 属性声明位置处>
3、属性 和 值之间使用 = 连接，值要用''或""引起来
<标记 属性="值"></标记>
4、一个元素允许设置多个属性，并且排名不分先后，多属性间用 空格 隔开
<标记 属性1="值1" 属性2="值2">
5、HTML中的注释
<!-- 这是注释内容
这也是注释内容
-->
注意：
1、注释不能出现在<>中
<p<!-- -->></p> 错误写法
2、注释不能嵌套
<!--
这是一段注释
<!--
这又是一段注释
-->
-->
2、HTML文档结构
1、文档类型声明
出现在网页最顶端的第一个标记
作用：告诉浏览器使用的是HTML的哪个版本
<!doctype html>
2、html页面
在 文档类型声明 之下，使用一对 <html></html> 根标记来表示页面
html根标记包含两对子标记：
1、<head></head>
表示网页头部信息
2、<body></body>
表示网页的主体，显示给用户看的内容
3、<head></head> 元素
1、<title>标题内容</title>
2、指定网页内容的编码格式
<meta charset='utf-8'>
3、指定网页的关键字 - 面向搜索引擎
<meta name='keywords' content='关键字1,关键字2,关键字3'>
4、指定网页的描述文本 - 面向搜索引擎
<meta name='description' content='... ...'>
HTML标记
1、文本
1、HTML中的特殊字符
1、 表示一个空格
2、< 表示一个 <
3、> 表示一个 >
4、© 表示一个 © （copyright）
5、¥ 表示 ￥
2、文本样式标记
1、作用
改变文本在网页中的表现形式
2、标记
1、<i></i> : 斜体
2、<u></u> : 下划线
3、<s></s> : 删除线
4、<b></b> : 加粗显示
5、<sup></sup> : 上标
6、<sub></sub> : 下标
3、标题标记
1、语法
<h#></h#>
# : 1-6
<h1></h1> : 一级标题，文字最大
<h6></h6> : 六级标题，文字最小
2、标题元素们的特点
1、改变文字大小以及加粗效果
2、每个标题都具备垂直的空白距离
3、每个标题独占一行
4、每个标题都有一个属性
属性：align
取值：
1、left 左对齐
2、center 居中对齐
3、right 右对齐
4、段落元素
1、作用
突出显示一段文本
独占一行
每个元素都具备垂直空白距离
2、语法
<p></p>
属性：align
取值：left / center / right
5、换行元素
<br>
6、水平线元素
<hr>
7、分区元素
1、块分区元素
标记：<div></div>
特点：独占一行
属性：align (left / center / right)
作用：布局
2、行内分区元素
标记：<span></span>
特点：能在一行中显示多个
作用：设置同一行文本的不同样式
8、行内元素 与 块级元素
1、按照元素不同的表现形式，对元素进行的一个类别的划分
2、块级元素
在网页中能够独占一行的元素都是块级元素
p,div,h1~h6
以上元素都有align属性
3、行内元素
多个元素能够在一行内显示的，都是行内元素
span,i,b,s,u,sub,sup
列表
1、列表的组成
1、列表的类型
1、有序列表 ：<ol></ol> Order List
2、无序列表 ：<ul></ul> Unordered List
2、列表项
<li></li> ：List Item
ex:
1、创建一个有序列表
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
2、创建一个无序列表
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
2、列表的属性
1、<ol>
属性:type
取值:
1、1:按数字方式显示标识，默认值
2、A:按大写英文字符方式显示标识
3、a:按小写英文字符方式显示标识
4、I:按大写罗马数字方式显示标识
5、i:按小写罗马数字方式显示标识
2、<ul>
属性：type
取值：
1、disc : 默认值，实心圆点
2、circle : 空心圆点
3、square : 实心方块
4、none : 不显示任何标识
3、列表的嵌套
被嵌套的内容必须要放在 li 中
<ul>
<li>
<ol>
<li></li>
</ol>
</li>
<li>
<ol></ol>
</li>
</ul>
图像 和 链接
1、URL
1、什么是URL
Uniform Resource Locator
统一资源定位器，主要用于标识网络中资源的位置，俗称 路径
2、URL分类
1、绝对路径
从一个固定的位置处去查找资源文件的地址
网络资源：
1、协议名称
https
2、主机名/域名/IP地址
www.baidu.com
3、目录路径
文件所在的文件夹们
img
4、文件名称
bd_logo1.png
https://www.baidu.com/img/bd_logo1.png
2、相对路径
从当前文件位置处开始查找资源文件所经过的路径就是相对路径
3、根相对路径
以 "/" 作为开始来标识的路径
2、图像
1、标记
<img>
2、属性
1、src
要显示的图片的url(相对/绝对/根相对)
2、width
设置图片的宽度，以 px 为单位的数值(允许省略 px)
3、height
设置图片的高度，同上
注意：width 和 height，如果只设置其中一个属性值的话，那么另一个属性值也会跟着等比缩放
3、超链接
1、什么是超链接
允许通过鼠标的点击完成页面跳转的行为就是超链接
2、语法
标记：<a>内容</a>
属性：
1、href
标识要链接到的文件的地址
2、target
指定打开新网页的方式
取值：
1、_self
默认值，在自身标签页中打开新网页
2、_blank
在新标签页中打开新网页
表格
1、什么是表格
表格是按照一定的结构来展示数据的
表格是按照从上倒下，从左到右的方式来展示数据的。数据全部都保存在 单元格中
2、表格的语法
1、标记
1、表格：<table></table>
2、表行：<tr></tr> -- Table Row
3、单元格(列)：<td></td> -- Table Data
ex:创建一个 4*4 的表格（创建一个表格，共4行，每行中包含4列）
2、属性
1、表格
1、border
指定表格的边框宽度，以px为单位(px可省)
2、width
指定表格的宽度，以px为单位
3、height
指定表格的高度
4、align
指定表格在父元素中的水平对齐方式
取值：left / center / right
5、cellpadding
单元格内边距
6、cellspacing
单元格外边距
2、tr属性
1、align
取值：left / center / right
控制当前行的文本的水平对齐方式
2、valign
取值：top / middle / bottom
3、bgcolor
作用：控制当前行的背景颜色
取值：表示颜色的英文单词
3、td属性
1、width
2、height
3、align
4、valign
5、bgcolor
6、colspan ：跨列
7、rowspan ：跨行
3、不规则表格的创建
1、单元格的跨列
从指定单元格位置处开始，横向向右合并几个单元格(包含自己)，被合并掉的单元格要删除出去
语法：colspan="n"
2、单元格的跨行
从指定单元格位置处开始，纵向向下合并几个单元格(包含自己)，被合并掉的单元格要删除出去
语法：rowspan="n"
4、行分组
1、语法
1、表头行分组
<thead></thead>
2、表尾行分组
表格的最后一行如果要分组的话，放在表尾行分组
<tfoot></tfoot>
3、表主体行分组
除表头和表尾行分组之外，剩余的放在表主体中
<tbody></tbody>
表单
1、作用
收集用户的信息并提交给服务器
表单在网页中是不可见的，但是功能是不能忽略的
表单中的两个要素：
1、form元素 - 收集用户的信息
2、表单控件
能够与用户进行数据交互的可视化组件
2、form元素
1、作用
就是表单，收集信息并提交给服务器
2、语法
<form></form>
注意：只有放在 form 中的表单控件，才能被提交
3、属性
1、action
指定提交给服务器上处理程序的地址
默认提交给本页
2、method
提交方法/方式
取值：
1、get
默认值
向服务器要数据时使用get
特点：
1、提交的数据会显示在地址栏上
2、安全性较低
3、有提交数据的大小限制 - 2KB
2、post
要提交数据给服务器处理时，使用post
特点：
1、隐式提交，看不到提交的数据
2、安全性较高
3、无提交数据的大小限制
3、enctype
指定表单数据进行编码的方式。即允许将什么样的数据提交给服务器
1、application/x-www-form-urlencoded
默认值，允许将所有的文本数据提交给服务器
2、multipart/form-data
允许将文件提交给服务器
3、text/plain
允许将普通字符提交给服务器，特殊字符不行
3、表单控件
1、作用
可视化的组件，用于与用户进行数据交互
表单控件只有放在<form>才允许被提交
2、表单控件详解
1、文本框 与 密码框
文本框：<input type="text">
密码框：<input type="password">
属性：
1、name ：为控件起名，在服务器上使用
2、value ：值，控件上所显示的值
3、maxlength ：限制输入的最大字符数
4、placeholder ：提示占位符
2、按钮
1、提交按钮
<input type="submit">
2、重置按钮
<input type="reset">
3、普通按钮
<input type="button">
属性：
1、value
控制按钮上的文字
表单
1、表单控件
1、单选按钮 和 复选框
单选按钮：<input type="radio">
复选框：<input type="checkbox">
属性：
1、name
为控件定义名称。除了定义名称之外，name属性也起到了分组的作用。
一组的单选按钮和复选框，名称必须一致
2、value
定义控件的值，当用户选中控件的时候，则将该控件的value提交给服务器
3、checked
设置预选中，该属性无值
2、隐藏域 和 文件选择框
1、隐藏域
作用：想提交给服务器但不想给用户看的数据要放在隐藏域中
语法：
<input type="hidden">
属性：
name ：定义控件的名称
value：定义控件的值
2、文件选择框
<input type="file">
属性：
name ：定义控件名称
注意：
1、表单的method必须为post
2、表单的enctype必须为multipart/form-data
3、多行文本域
标记：<textarea></textarea>
属性：
1、name ：定义控件名称
2、cols ：指定文本域的列数(一行中最多能显示多少个英文字符，中文减半)
3、rows ：指定文本的默认行数
4、下拉选项框
<select name="">
<option value="值1">显示内容1</option>
<option value="值2">显示内容2</option>
<option value="值3">显示内容3</option>
</select>
===============================================
CSS
CSS介绍
CSS：Cascading Style Sheets - 样式表
HTML ：搭建网页结构
CSS ：在网页结构基础上进行网页的美化
CSS的使用方式（重点）
1、内联方式
将CSS内容定义在单独的HTML元素中
语法：
<ANY style="样式声明">
样式声明：
1、每个样式声明都是由样式属性名称和样式属性值来组成的
2、属性名称和属性值之间使用 : 连接
属性名:值
3、在一个style中允许出现多个样式声明，多个样式声明之间使用 ; 来分割
<ANY style="属性1:值1;属性2:值2;">
常用的属性和值：
1、文字大小
属性：font-size
取值：以 px 为单位的数值
ex：设置某div的文字大小为 24px
<div style="font-size:24px;">xxx</div>
2、文本颜色
属性：color
取值：表示颜色的英文单词
3、背景颜色
属性：background-color
取值：表示颜色的英文单词
2、内部样式表
1、作用
让定义好的样式适用在多个元素中
2、语法
<head>
<style>
样式规则1
样式规则2
...
样式规则n
</style>
</head>
样式规则：
由选择器 和 样式声明 组成
选择器：规范了页面中哪些元素能够使用声明好的样式
选择器{
样式声明1;
样式声明2;
}
ex:
div{
font-size:24px;
}
p{
color:blue;
}
3、外部样式表
1、作用
让声明好的样式能够适用在多个网页中
将样式规则声明在独立的css文件中(xxx.css)
在使用的网页上对xxx.css文件进行引用
<head>
<link rel="stylesheet" href="css文件路径">
</head>
CSS样式表的特征
1、继承性
大部分的css属性是可以由父元素继承给子元素的
2、层叠性
允许为一个元素定义多种使用方式(内联，内部样式表，外部样式表)。如果定义的属性不冲突的话，那么所有的属性都可以应用
到元素上
3、优先级
如果样式属性声明冲突的华，则按照不同的优先级来应用样式
浏览器缺省设置 ： 低
内部或外部样式表 ： 中
就近原则 ：后定义者优先
内联方式 ： 高
调错：
1、Unknown property name
样式属性名称写错了
2、Invalid property value
样式属性值写错了
CSS选择器(重难点)
1、选择器的作用
规范了页面中哪些元素能够使用声明好的样式
目的：为了匹配页面中的元素
2、选择器详解
1、元素选择器
特点：由元素名称作为选择器，目的是为了匹配页面中指定元素名称的所有标记
语法：
元素名{
... ...
}
ex:
div{ ... } /*匹配页面中所有的div*/
span{ ... } /*匹配页面中所有的span元素*/
h1{ ... }/*匹配页面中所有的h1元素*/
2、类选择器
特点：允许被页面上任意一个元素所引用
语法：
.类名{ ... }
ex:
1、.redColor{color:red;}
2、.top{font-size:24px;}
类名：
字母，数字，下划线(_),- 组成
数字不能开头
引用类选择器：
<ANY class="类名">
ex:
1、<div class="redColor"></div>
特殊用法：
1、分类选择器的定义方式
1、特点
允许将元素选择器和类选择器结合到一起使用，目的是为了实现对某种元素不同样式的细分控制
2、语法
元素选择器.类选择器{
... ...
}
ex:
div.redBack{ color:red; }
匹配：class为redBack的div元素
2、多类选择器的引用方式
让一个元素引用多个类选择器，多个类选择器名称间用 空格 隔开
<ANY class="sel1 sel2 sel3">
3、id选择器
1、id
在HTML中，每个元素都可以声明一个 id 属性，取值在网页中必须是独一无二的，不能重复的。
2、id选择器的作用
为了匹配页面中指定id值的元素
3、id选择器的语法
#ID值{ ... }
ex:
1、#main{ ... }
匹配页面中id为main的元素
4、群组选择器
1、作用
定义多个选择器们共有的样式
声明方式是一个以 , 隔开的选择器列表
2、语法
选择器1,选择器2,选择器3,...{
... ...
}
ex:
#main,span,.redColor,div.top{
color:red;
}
等价于：
#main{color:red}
span{color:red}
.redColor{color:red}
div.top{color:red}
5、后代选择器
1、作用
依托于元素的后代关系来匹配某元素的后代元素(不限制层级)
2、语法
选择器1 选择器2{}
ex:
1、div span{
匹配所有的div中的所有的span
}
2、#top .important{
匹配id为top中所有class为important的元素
}
6、子代选择器
1、作用
依托于元素的子代关系来匹配元素(只有一层层级)
2、语法
选择器1>选择器2{ ... }
ex:
#main>.important{
匹配id为main元素中直接子级class为important的元素
}
7、伪类选择器
1、作用
为了匹配元素不同状态的选择器
2、语法
:伪类状态{}
通常会配合其他选择器一起使用
选择器:伪类状态{}
1、链接伪类
1、:link
匹配超链接未被访问时的状态
2、:visited
匹配超链接被访问过后的状态
2、动态伪类
1、:hover
匹配当鼠标悬停在元素上时的状态
2、:active
匹配当元素被激活时的状态
选择器
1、优先级
选择器的优先级看权值
选择器 权值
元素选择器 1
类/伪类 10
ID选择器 100
内联方式 1000
复杂的选择器，权值进行累加计算
尺寸 与 边框
1、CSS单位
1、尺寸单位
1、px 像素
2、%
3、in 英寸 1in = 2.54cm
4、pt 磅 1pt=1/72in
ppi : Pixel Per Inch = 72
5、mm : 毫米
6、cm : 厘米
注意：在css中，尺寸的单位是不能省略的
2、颜色单位(取值)
1、rgb(r,g,b)
r:red(0-255)
g:green(0-255)
b:blue(0-255)
ex
rgb(255,0,0)
rgb(0,0,0) - 黑色
rgb(255,255,255) - 白色
2、rgba(r,g,b,alpha)
alpha:0-1小数，0完全透明，1完全不透明
3、#rrggbb
由6位16进制数字表示一种颜色
#000000 ：黑色
#ffffff ：白色
#1a2b3c ：？？
4、#rgb
#rrggbb的缩写，每两位数字相同时，可以采用缩写
#112233 ：#123
#ff0000 ：#f00
2、尺寸
1、作用
改变元素的宽度和高度
2、属性
1、width
改变元素宽度
2、height
改变元素高度
块级元素的默认尺寸：
宽度：占父元素的100%
高度：以内容为准
行内元素的默认尺寸：
宽度：以内容为准
高度：以内容为准
3、允许修改尺寸的元素
1、所有的块级元素都可以修改
2、所有的行内块(表单控件)元素都可以修改
3、table允许修改尺寸的
4、除img以外的行内元素们，不允许修改尺寸
4、溢出处理
1、什么是溢出
当使用尺寸属性限制元素的尺寸时，如果内容所需要的空间大于元素尺寸时，就会产生溢出的效果
2、溢出处理属性
属性：overflow
取值：
1、visible ：可见的，默认值
2、hidden ：隐藏
3、scroll
显示滚动条，溢出时可用
4、auto
自动，溢出方向会产生滚动条
3、边框
1、边框的实现
1、简写方式
通过1个属性设置4个方向边框的所有效果(宽度，样式，颜色)
属性：border
取值：width style color
width:边框的宽度，以px为单位
style:边框的样式
solid : 实线
dotted : 虚线（点）
dashed : 虚线（线）
color:颜色 或 transparent(透明)
特殊：border:none;或 border:0;
2、单边定义
只设定某一条边的边框的宽度，样式，颜色
语法：
border-方向:width style color;
方向：top / bottom / left / right
特殊：
border-方向:none;
3、单属性定义
设置四条边框的某一个属性值
属性：
border-属性:值;
属性：width / style / color
ex:
1、设置四个方向边框样式为虚线
2、设置四个方向边框颜色为green色
4、单边单属性设置
设置某一方向边框的某以属性值
属性：
border-方向-属性:值;
方向：top / bottom / left / right
属性：width / style / color
ex：
1、右边框的样式改为 虚线(dashed)
border-right-style:dashed;
2、下边框的颜色改为 粉色(pink)
border-bottom-color:pink;
2、轮廓
outline:none;
3、边框倒角
将元素的四个直角变为圆角
属性：border-radius
取值：
1、以 px 为单位的数值
2、以 % 为单位的数值 - 50%
4、边框阴影
属性：box-shadow
取值：h-shadow v-shadow blur spread color;
h-shadow:水平偏移距离，（必须的）
取值为正，阴影右偏移
取值为负，阴影左偏移
v-shadow:垂直偏移距离，（必须的）
取值为正，阴影下偏移
取值为负，阴影上偏移
blur:模糊距离，数值越大，模糊效果越强烈
spread:阴影尺寸
color:颜色
box-shadow:0px 0px 1px 1px red;
box-shadow:0px 0px 5px red;
框模型
1、什么是框模型
框：Box，页面元素皆为框
框模型：
Box Model，定义了元素的尺寸和距离的一种计算方式
包含：尺寸属性，边框属性，外边距属性，内边距属性
当框模型的属性们应用到元素中的时候，那么元素整体的所占尺寸就会发生变化
元素的实际宽度 = 左右外边距 + 左右边框 + width + 左右内边距
元素的实际高度 = 上下外边距 + 上下边框 + height + 上下内边距
2、外边距
1、什么是外边距
围绕在元素边框/边缘之外的空白距离就是外边距
2、语法
属性：
1、margin
控制4个方向的外边距
2、margin-top
上外边距
3、margin-right
右外边距
4、margin-bottom
下外边距
5、margin-left
左外边距
取值：
1、以 px 为单位的数值
2、以 % 为单位的数值
3、取值为负数
移动元素时使用
为元素设置上外边距为正数时元素向下移动
为元素设置上外边距为负数时元素向上移动
为元素设置左外边距为正数时元素向右移动
为元素设置左外边距为负数时元素向左移动
4、取值为 auto
自动
注意：
1、只对左右外边距有效，上下无效
2、只能为设置宽度的块级元素设置左右外边距为 auto - 让块级元素水平居中对齐
margin属性的简洁用法：
1、margin:value;
value表示的是上下左右四个方向的外边距值
2、margin:v1 v2;
v1 : 表示上下外边距的值
v2 : 表示左右外边距的值
3、margin:v1 v2 v3;
v1 : 表示上外边距的值
v2 : 表示左右外边距的值
v3 : 表示下外边距的值
4、margin:v1 v2 v3 v4;
v1 : 上
v2 : 右
v3 : 下
v4 : 左
3、页面中具备默认外边距的元素
body,p,h1,h2,h3,h4,h5,h6,ul,ol 具备默认的外边距
会通过 css 重写的方式，取消默认的外边距
body,p,h1,h2,h3,h4,h5,h6,ul,ol{
margin:0;
}
框模型
1、外边距(略)
2、内边距
1、什么是内边距
内容与元素边缘之间的距离
注意：内边距会扩大元素边框内所占的区域的
2、语法
padding:四个方向的内边距
padding-top / right / bottom / left : 值;
取值：
1、以 px 为单位的数值
2、以 % 为单位的数值
padding的简洁写法：
padding:value ; 四个方向内边距
padding:v1 v2 ; 上下 左右
padding:v1 v2 v3;上 左右 下
padding:v1 v2 v3 v4;上 右 下 左
页面中具备默认内边距的元素：
1、ol,ul，左内边距为40px
2、文本框，密码框，按钮，上下内边距
3、box-sizing 属性
作用：重新指定框模型的计算方式
属性：box-sizing
取值：
1、content-box
元素的width属性只表示内容区域的宽度
元素的height属性只表示内容区域的高度
2、border-box
元素的width属性包含内容区域宽度，左右内边距和左右边框的值
元素的height属性包含内容区域高度，上下内边距和上下边框的值
背景属性
1、背景颜色
属性：background-color
取值：合法的颜色值
注意：背景颜色是从border位置处就开始绘制的
2、背景图像
属性：background-image
取值：url(图片路径)
3、背景图片平铺
属性：background-repeat
取值：
1、repeat
默认值，横向纵向都平铺
2、no-repeat
不平铺
3、repeat-x
只在横向平铺
4、repeat-y
只在纵向平铺
4、背景图片尺寸
属性：background-size
取值：width height
1、以px为单位
2、以%为单位
5、背景图片位置
1、作用
改变背景图在元素中的位置
2、属性
background-position
取值：
1、x y
以px为单位的数值，用空格隔开
x：背景图像的水平偏移位置
取值为正，图片右偏移
取值为负，图片左偏移
y：背景图像的垂直偏移位置
取值为正，图片下偏移
取值为负，图片上偏移
2、x% y%
0% 0% : 在左上角
100% 100% : 在右下角
50% 50% : 正中间
3、关键字
x : left 上午 11:47:31/ center / right
y : top / center / bottom
6、背景属性
属性：background
取值：color url() repeat position;
ex:
background:red;
background:url(a.jpg) no-repeat -35px center
文本格式化属性
1、字体属性
1、指定字体
属性：font-family
取值：使用 , 隔开的字体值的列表
ex:
1、font-family:"微软雅黑";
2、font-family:"microsoft yahei";
3、font-family:"黑体";
4、font-family:"simhei";
5、font-family:"宋体";
6、font-family:"simsun";
7、font-family:"微软雅黑",Arial,Helvetica;
2、指定字体大小
属性：font-size
取值：
以 px 或 pt 为单位的数值
3、字体加粗
属性：font-weight
取值：
1、normal ：正常体，无加粗效果
2、bold ：加粗
3、value
取值为无单位的数字
400 - normal
900 - bold
4、字体样式 - 斜体
属性：font-style
取值：
1、normal ：正常，无斜体效果
2、italic ：斜体
5、小型大写字母
作用：将文本中的所有小写字母都变为大写字母，但是大小跟小写字母一样
属性：font-variant
取值：
1、normal
2、small-caps
6、字体属性
属性：font
取值：style variant weight size family;
注意：
使用简写属性时，必须要设置 family 的值，否则无效
练习：
创建任意文本
1、字体大小更改为 18pt
2、加粗所有文本
3、斜体显示所有文本
4、所有小写字符都变成小型大写字符
5、字体设置为 微软雅黑
2、文本属性
1、文本颜色
属性：color
取值：合法颜色值
2、文本的排列方式
控制内容的水平对齐方式
属性：text-align
取值：left / center / right / justify
justify:两端对齐
3、文字修饰
属性：text-decoration
作用：指定某元素中文字的线条修饰效果
取值：
1、none
无任何线条修饰
2、underline
下划线
3、overline
上划线
4、line-through
删除线
4、行高
作用：指定一行文本数据所占的高度是多少
特点：如果行高的高度高于文本的高度的话，那么文本将在行高范围内垂直居中显示
属性：line-height
取值：
1、以 px 为单位的数值
2、无单位的数字，表示为当前字体大小的倍数
5、首行文本缩进
属性：text-indent
取值：以 px 为单位的数字，表示缩进距离
6、文本阴影
属性：text-shadow
取值：h-shadow v-shadow blur color
表格属性
1、表格常用属性
1、尺寸属性 - width，height
2、边框属性 - border
3、文本格式化属性
font-*
text-*
4、背景属性
5、框模型属性
margin 不能应用在td上
6、vertical-align
取值：top / middle / bottom
2、表格特有属性
1、边框合并
属性：border-collapse
取值：
1、separate
默认值，分离边框模式
2、collapse
边框合并模式
2、边框边距
作用：设置单元格四周的距离
属性：border-spacing
取值：
1、指定一个值
水平和垂直的间距是相等的
2、指定两个值
第一个值：水平间距
第二个值：垂直间距
两个值中间用空格隔开
注意：只有在分离边框模式下才有效
过渡效果
1、什么是过渡
使得CSS属性值在一段时间内变化成另外一个属性值
2、过渡的语法
1、指定过渡属性
作用：指定哪个属性值在变化的时候使用过渡的效果
属性：transition-property(必须的)
取值：
1、属性名称
2、all
但凡能使用过渡效果的属性的值在变化时一律都使用过渡效果体现
允许使用过渡效果的属性：
1、与颜色相关的属性都可以使用过渡
2、取值为数字的属性都可以使用过渡
2、指定过渡时长(必须的)
属性：transition-duration
取值：以 s 或 ms 为单位的数字
1s = 1000ms
300ms = 0.3s = .3s
3、指定过渡的速度时间曲线函数(指定变化速率)
属性：transition-timing-function
取值：
1、ease
默认值，慢速开始，快速变快，慢速结束
2、linear
匀速
3、ease-in
慢速开始，加速结束
4、ease-out
快速开始，减速结束
5、ease-in-out
慢速开始和结束，中间先加速后减速
4、指定过渡延迟
属性：transition-delay
取值：以 s 或 ms 为单位的数值
5、过渡属性
属性：transition
取值：property duration timing-function delay;
显示
1、光标
作用：指定当鼠标悬停在元素上时鼠标的表现方式
属性：cursor
取值：
1、default ：默认
2、pointer ：小手
3、crosshair ：+
4、text ：I
5、wait ：等待
6、help ：帮助
2、列表
常用属性：
list-style:none;
3、转换
1、什么是转换
改变元素在页面中的位置，尺寸，角度的一种方式
2、属性
1、转换属性
属性：transform
取值：
1、none ：默认值，无任何转换效果
2、一组转换函数
如果是多个转换函数的话，中间用 空格 隔开
2、转换原点
属性：transform-origin
取值：两个数字，中间用空格隔开
1、以 px 为单位的数值
2、以 % 为单位的数值
3、关键字
top / bottom / center / left / right
3、转换效果
1、位移
作用：改变元素在页面中的位置
属性：transform
取值：
1、translateX(x)
x表示水平位移距离和方向
取值为正，元素右移
取值为负，元素左移
2、translateY(y)
y表示垂直位移距离和方向
取值为正，元素下移
取值为父，元素上移
3、translate(x)
等同于 translateX(x)
4、translate(x,y)
同时指定x轴和y轴位移方向和距离
2、缩放
作用：改变元素的尺寸
属性：transform
取值：
1、scaleX(x)
x:横向缩放比例
取值大于1，则表示放大
取值大于0但小于1，则表示缩小
取值小0的话，物极必反
2、scaleY(y)
y:纵向缩放比例
取值大于1，则表示放大
取值大于0但小于1，则表示缩小
取值小0的话，物极必反
3、scale(value)
水平和垂直方向的缩放比例是相同的即等比缩放
3、旋转
作用：改变元素在页面中的角度
属性：transform
取值：rotate(ndeg)
n 取值为正，顺时针旋转
n 取值为负，逆时针旋转
注意：
1、转换原点会影响转换效果
2、旋转操作会连同坐标轴一起跟着旋转，他会影响旋转之后的位移效果的
