HTML_CSS_base
1. WEB.
1. 什么是WEB
Web就是网页，是一种基于B/S的应用程序
B : Browser 浏览器
S ：Server 服务器
---------
C ：Client 客户端
S ：Server 服务器
2. Web 组成
浏览器 ：代替用户向服务器发送请求
服务器 ：接收用户请求并响应
通信协议 ：规范数据在网络中是如何打包即传递的
http : HyperText transfer protocal
超文本传输协议
3. Web 服务器
1. 作用 ：
接收用户请求并响应
存储Web信息
具备安全性功能
2. 产品 ：
1. Apache
2. Tomcat
3. IIS - Internet Information Service
4. Nginx
...
3. 技术
1. JSP - Java Sever Page
2. PHP
3. ASP.net
4. Python Web (Django Flask...)
4. Web 浏览器
1. 作用
代替用户向服务器发送请求
作为响应数据的解释引擎，向用户呈现界面
2. 主流浏览器产品
根据浏览器的内核/引擎进行划分
1. Microsoft IE
2. Google Chrome
3. Mozilla FireFox
4. Apple Safari
5. Opera Opera
浏览器引擎
1. 渲染引擎 -解析HTML,CSS,控制页面的渲染效果
2. JS引擎 - 解释网页脚本文件
3. 前端开发技术
HTML CSS JavaScript
2. HTML概述
1. HTML介绍
1. 什么是HTML
HyperText Markup language
超文本 标记 语言
作用 : 书写网页结构
2. 超文本
具备特殊功能的文本就是超文本
et :
普通文本 a : 普通字符
超级文本 a : 表示超链接功能
普通文本 b : 普通字符
超级文本 b : 表示加粗功能
3. 标记
也叫标签，主要是用来标记网页中的内容，以实现网页的布局和JS操作
2. HTML 在计算机中的表现
所有的网页文件在计算机中都是以.html /.htm文件存储的
开发工具 ：
1. 记事本
2. Editplus , Dreamweaver
3. sublime , Webstorm ,Hbuilder ,VSCode, Atom...
运行工具 ：
Chrome 浏览器
调试工具 ：
开发者工具，F12 打开
3. HTML 基础语法
1. 标签/标记
在网页中具有特殊功能的符号
1. HTML 中所有的标签都以<>为标志，区分普通文本
2. 标签分类
1. 双标签 ：成对出现，有开始有结束
<开始标签> 标签内容
et :
一级标题
2. 单标签 ：只有开始标签，没有结束标签，可以手动添加/表示结束
<标签名>
<标签名/>
et :
换行标签--等同于
水平线 -- 等同于
3. 标签嵌套
1. 在成对的标签中出现其他标签
超链接标签 ：首页
文本加粗标签 ：首页
---加粗的超链接文本---
首页
首页
2. 嵌套结构中，外层元素称为父元素，内层元素称为子元素
4. 文档结构
1. 新建文件，保存为.htm /.html格式
2. 书写一对html标签
3. 在html标签中嵌套一对 head 标签
4. 在html标签中嵌套一对 body 标签
5. 为body标签添加文本内容，内容不限
5. 书写规范
1. HTML不区分大小写
推荐使用小写
2. 保持适当缩进，增强代码可读性
2. 标签属性
标签属性主要用来修饰标签的显示效果
语法 ：
1. 属性由属性名和属性值组成
属性名="属性值"
2. 属性的声明必须写在开始标签中
<开始标签 属性名='属性值'>..
3. 每个标签都可以设置多个属性，属性之间使用空格隔开
<开始标签 属性名='属性值' 属性名='属性值' 属性名='属性值'>..
4. 练习
在body标签中添加一对p标签，内容不限；
为p标签增加属性algin,取值 center
为p标签增加属性id,取值 p1
3. HTML 注释
注意 ：
1. 注释不能写在标签里的
错误 ：
>
2. 注释不能嵌套
4. HTML 中的换行于空格
HTML文档会忽略掉多余的空格，只显示为一个空格，如果需要显示多个空格或者 < > ，都需要使用特殊符号代替
4. HTML结构组成
1. 文档的类型声明
h5的声明方式
作用 ： 告诉浏览器当前使用的HTML版本，以便浏览器能正确解析HTML标签和渲染样式
书写位置 ： 文档最开始位置
2. 文档的开始和结束
1. 在文档类型声明之后，使用一对标签标示文档的开始和结束
2. 在HTML标签中，包含两对子元素
标签标示网页的头部信息，包含网页的标题，选项卡的图标，网页的关键字，作者，描述等信息，还可以引入外部的资源文件
标签表示网页的主体信息，网页所呈现的内容都要写在body里
3. 标签中包含的子元素
1. 设置网页的标题
2. 设置网页的字符编码
浏览器按照utf-8的编码方式解析网页
5. 文本相关的标签
1. 字符实体（具有特殊意义的符号）
1. 表示一个空格
2. < 表示小于号 <
3. > 表示大于号 >
4. © 表示版权符号
5. ¥ 表示人民币符号¥
2. 文本样式标记
1. 斜体显示文本 ：
2. 文本添加下划线 ：
3. 文本加粗效果 ：
4. 文本添加删除线 ：
5. 上标显示文本 ：
6. 下标显示文本 ：
练习 ：
这是一段有加粗，斜体，删除线，下划线，上标和下标的文本
特点 ：这些标签可以与其他的标签或文本共行显示
3. 标题标签
1. 作用
以不同的文字大小和加粗方式显示文本
2. 语法
：一级标题
...
: 六级标题
练习 ：
咏鹅
骆宾王
鹅 ，鹅，鹅，
曲项向天歌，
白毛浮绿水，
红掌拨清波。
特点 ：
1. 会改变文字的大小并且具有加粗效果
2. 每个标题都会具备垂直的空白距离
3. 每个标题都独占一行，不与其他元素共行显示
4. 每个标题都可以添加属性 align
取值 ：left / center / right
设置文本的水平对齐方式，默认居左对齐
4. 段落标签
1. 作用
突出显示一段文本，每段文本都独占一行或一块，不予其他元素共行显示，并且也具备垂直的空白距离
2. 语法
属性 align 设置文本的水平对齐方式
取值 left / center / right
5. 格式标签
换行标签
等同于
水平线标签
等同于
6. 分区标签
1. 块分区
标签 ：
作用 ：划分页面结构，配合CSS实现网页布局
特点 ：独占一行显示（独占一块）
2. 行内分区元素
标签 ：
作用 ：设置同一行文本的不同样式（结合CSS）
特点 ：可以与其他元素或文本共行显示，允许在一行文本中使用多个span元素
7. 标签分类
1. 块级元素
只要在网页中是独占一行，不予其他元素共行显示的元素都是块级元素，简称块元素。例如 ：h1 h2 h3 h4 h5 h6,p,div...
作用 ：都可以做布局
特点 ：都可以添加algin属性，设置内容的水平对齐方式
2. 行内元素 / 内联元素
可以与其他元素共行显示的元素
例如 ：i b u s sub sup span
6. 列表标签
1. 作用
按照从上到下的方式来排列数据
并且能够显示项目符号在数据的前面
2. 列表的组成
1. 列表的类型
1. 有序列表
默认是按照数字排列
2. 无序列表
默认以实心原点作为标识
2. 列表项
列表中的每一条数据都是一个列表项
语法 ：
注意 ：列表项要嵌套在列表标签中使用
et :
- Java
- PHP
- Python
练习 ：
1. 创建新的HTML文件
2. 搭建网页结构
3. 在body中创建有序列表，分别展示四大名著
4. 再创建一个无序列表，展示四大天王
3. 列表属性
1. 有序列表 --ol
1. type属性 ：设置项目符号
取值 ：
1. 1 ：按照数字排列显示，默认值
2. a : 按照小写字母顺序排列
3. A ：按照大写字母排列
4. i : 按照罗马数字排列
5. I : 按照罗马数字排列
罗马数字 ：i ii iii iv v vi..
2. start属性 ：设置从第几个字符开始排列
取值 ：数字
2. 无序列表 -ul
1. type属性 ：设置项目符号
取值 ：
1. disc 实心圆点（默认）
2. circle 空心圆点
3. square 实心方块
4. none 不显示项目符号
4. 列表嵌套
在一个列表中又出现了其他的列表
列表属性
- type属性
- start属性
每一部名著中都列出三个主要人物
1. 水浒传
1. 武松
2. 西门庆
3. 潘金莲
2. 西游记
1. 大师兄
2. 二师兄
3. 沙师弟
7. 图像与超链接标签
1. URL
Uniform Resource Locator
统一资源定位符 ：用来标识网络中资源的位置，俗称路径
URL 组成 ：协议 域名 文件目录及文件名
URL分类 ：
1. 绝对路径
从根目录开始查找
常用于网络文件路径
et :
访问网络资源
http://www.baidu.com
http://www.baidu.com/img/logo.png
2. 相对路径
从当前文件所在的文件夹开始查找
3. 根相对路径 （了解）
从Web程序所在的根目录开始查找资源文件
注意 ：
1. 网络URL中不能出现中文
2. URL是严格区分大小写的
2. 图像标签
1. 在网页中插入一张图片
2. 语法 ：
3. 属性 ：
1. src :指定要显示的图片路径
2. width ：设置图片的宽度，以像素px为单位，也可以省略单位
3. height ：设置图片的高度
注意 : src 为必填属性，宽高可以省略，省略宽高的话，图片将以原始尺寸显示在网页中
4. title ：用来设置图片的标题，当鼠标悬停在图片上方时出现
5. alt : 用来设置图片加载失败之后的提示文本
复习：
1. 文档基本结构
网页主体
2. 常用标签
1. 标题标签 h1 - h6
2. 段落标签 p
3. 加粗 b 斜体 i 下划线 u 删除线 s 上标 sup 下标 sub
4. 换行 br 水平线 hr
5. 块分区 div 行内分区 span
6. 有序列表 ol 无序列表 ul 列表项 li
7. 图片
8. 标签分类
1. 块元素 h1 - h6 p div ul ol li
特点 独占一行，不予其他元素共行显示
2. 行内元素 span i b u s sub sup
特点 可以与其他元素共行显示
-------------------------------------------------
1. 超链接标签
1. 什么是超链接标签
能够实现从当前文件跳转到其他文件的标签
2. 语法
超链接文本
标签属性 ：
1. href :必填属性，指定链接地址，以路径形式给出,#表示当前页，不会发生页面刷新操作，如果属性为"",也表示当前页，但是包含了网络请求，相当于刷新页面。
2. target :可选属性，设置目标文件的打开方式
属性值 ：
1. _self :默认值，表示在当前窗口打开
2. _blank :表示新建窗口打开
3. 锚点链接
链接到当前文件的指定位置
语法 ：
1. 设置锚点
2. 设置跳转
早年经历
2. 表格
1. 语法
1. 标签介绍
表格标签 ：
行 标 签 ：
单元格标签 ：
2. 创建顺序
1. 创建表格标签
2. 在表格标签中嵌套行标签，每一个 tr 就代表一行
3. 在行标签中创建单元格标签，用来存放数据
et :
| 姓名 | 年龄 | 性别 |
2. 标签属性
1. table 属性
1. border ：设置边框，取值以px为单位的数值（px可以省略）
2. width ：设置宽度
3. height ：设置高度
4. align ：设置表格在其父元素中的水平对齐方式
5. cellpadding : 设置单元格的内边距（内容与边框之间的距离），取值为px单位的数值
6. cellspacing : 设置单元格的外边距（单元格与单元格之间的距离，或者单元格与表格边框之间的距离），取值像素为单位的数值
7. bgcolor : 设置表格的背景颜色，取值可以是英文的颜色名称
2. tr 标签属性
1. bgcolor : 设置当前行的背景颜色
2. align ：设置当前行中内容的水平对齐方式
取值 ： left / center / right
3. valign :设置当前行内容的垂直对齐方式
取值 ：top / middle / bottom,默认垂直居中
3. td 标签属性
1. width 设置单元格的宽度
2. height 设置单元格的高度
3. align 单元格内容的水平对齐方式
4. valign 单元格内容的垂直对齐方式
5. bgcolor 单元格的背景颜色
3. 单元格合并（重点）
是单元格独有的属性 colspan rowspan
1. 单元格的跨列合并
从当前单元格的位置开始，横向向右合并几个单元格
colspan = "3" ->跨3列进行合并(包含自身)
2. 单元格的跨行合并
从当前的单元格开始，纵向向下合并单元格
rowspan = "3" ->向下跨3行合并单元格
注意 ：一旦发生单元格合并，
跨列合并，要删除当前行中多余的单元格
跨行合并，要删除其后行中多余的单元格
始终保持表格结构完整
4. 行分组
表格结构
1. 行分组
允许将表格中的一行或者是若干行划分为一组，便于管理
2. 语法
1. 表头行分组
2. 表尾行分组
3. 表主体信息
注意 ： 可以省略，默认情况下，所有的行都会被自动添加到 tbody 中
如果需要手动添加行分组，建议按照 thead tfoot tbody的顺序书写
3. 表单
1. 用于接收用户的数据并且提交给服务器
表单二要素
1. form 表单元素
收集用户信息并发送给服务器
2. 表单控件 （重点）
提供了能够跟用户交互的可视化组件
2. form 元素
1. 注意 ： form元素本身是不可见的，却不能省略，因为数据的提交功能要由 form 元素完成
2. 语法 ：
3. form 标签属性
1. action
指定数据提交的目的地址
2. method
数据请求方式 get /post
默认为get方式提交
1. get （默认值）
通常用于向服务器端获取数据
特点 ：
1. 提交的数据会以参数的形式拼接在URL后面
2. 安全性较低
3. 提交数据最大为2KB
2. post
将数据提交给服务器处理
特点 ：
1. 隐式提交，看不到提交数据
2. 安全性较高
3. 没有数据大小限制
3. 表单控件（重点）
1. 作用
提供与用户交互的可视化组件
注意 ： 只有放在表单元素中的表单控件才允许被提交
2. 分类
1. 文本框和密码框
语法 ：
文本框
密码框
属性 ：
1. name 属性 定义当前控件的名称，缺少的话无法提交
name = "uname"
uname=zhangsan
2. value 属性，要提交给服务器的值，同时也是默认显示在控件上的值
3. maxlength 用来限制用户输入的最大字符数
4. placeholder 用户输入之前显示在框中的提示文本
2. 单选框和复选框
单选按钮
复选框
属性 ：
1. name
定义控件名称，还起到分组的作用，一组中的按钮名称必须保持一致
2. value 属性
设置当前控件的值，最终提交给服务器
3. checked 属性
设置预选中状态 可以省略属性值，也可以使用"checked" 作为值
3. 隐藏域和文件选择框
1. 隐藏域
作用 ：需要提交给服务器但是却不需要呈现给用户的数据，都可以放在隐藏域中
语法 ：
属性 ：
1. name 控件名称
2. value 控件的值
2. 文件选择框
作用 ： 选择文件上传，发送给服务器
语法 ：
属性 ：
name 定义控件名称
4. 下拉选择框
假设用户选择河北省，在使用get方式提交数据时，URL后拼接的数据应为
province=hebei
5. 文本域
支持用户输入多行文本
语法 ：
属性 ：
1. name 控件名称
2. cols 指定文本域默认显示的列数，一行中能显示的英文字符量，中文减半
3. rows 指定文本域能够显示的行数
注意 ：文本域可以由用户调整大小
6. 按钮
1. 提交按钮
将表单数据发送给服务器
2. 重置按钮
重置表单，将表单内容恢复到初始化状态
3. 普通按钮
可以绑定自定义事件
按钮中的value属性值实际上是定义按钮的显示文本
4.
注意 ：
1. 按钮标签可以在任何地方使用，不局限在form 表单中使用
2. 按钮标签使用在form中，默认具有提交功能，等同于input submit
3. 可以添加属性type 取值 submit / reset / button 进行区分 （非必填）
4. 在表单外作为普通按钮使用时，需要通过JS 动态绑定事件
7. 特殊用法
label for ID
语法 ：
使用label标签包裹表单控件要显示的文本信息，为label标签添加for属性，属性值与所要绑定的表单控件的ID属性值保持一致，实现文本与控件的绑定
复习 ：
1. 表格
1. 语法
2. 单元格合并
colspan : 跨列合并
rowspan :跨行合并
注意 ：
1. 这两个属性是 td 的属性
2. 多余的单元格要删掉
3. 表格结构
结构化标签只有在需要做行分组的时候再使用，默认情况下，表格中的内容都会自动添加到tbody中
2. 表单
1. 语法
2. 表单控件
1. 文本框和密码框
2. 单选按钮和复选框
3. 按钮
按钮标签
4. 隐藏域和文件选择框
-----------------------------------------------------
CSS
1. CSS 介绍
CSS ：Cascading Style Sheet 层叠样式表
作用 ：修饰和美化页面元素，实现网页排版布局
2. CSS 使用
在 HTML 文档中使用 CSS 主要有三种方式
1. 行内样式/内联样式
特点 ：在具体的标签中使用style属性，引入CSS样式代码
语法 ：
<标签 style="CSS 样式声明">
1. CSS 样式声明 / 语句
1. 对当前元素添加样式
2. 语法 ：
CSS 属性 ：值；
2. 注意 ： CSS 样式声明可以是多条
<标签 style="属性:值；属性:值；"
常见的CSS属性
1. 设置字体大小
1. 属性 font-size
2. 取值 以像素为单位的数值，浏览器默认的字体大小是 16px
et :
2. 设置字体颜色
1. 属性 color
2. 取值 颜色的英文单词
et :
3. 设置背景颜色
1. background-color
2. 取值颜色的英文单词
2. 文档内嵌 / 内部样式表
特点 ：将CSS代码与具体的标签相分离，在HTML文档中使用标签引入CSS代码
语法 ：
选择器 ：
1. 使用文档内嵌方式引入CSS样式表时，实现了结构与样式相分离，但是需要自己定义选择器来匹配文档中元素，为其应用样式
作用 ： 匹配文档元素为其应用样式
2. 语法 ：
选择器实际上由两部分组成
选择器（符）{
属性 ：值；
属性 ：值；
}
et :
标签选择器/元素选择器：
使用标签名作为选择符，匹配文档中所有的该标签，并应用样式
p {
color :green;
font-size :20px;
}
注意 ：
可以书写在文档中的任意位置，但是基于样式优先的原则，一般写在中
3. 外链方式 / 外部样式表
1. 定义外部的.css文件，在HTML中引入即可，真正实现文档与样式表的分离
2. 语法：
在外部的样式表中使用选择器定义样式；
在HTML文档中使用引入CSS文件
et :
3. 样式表特征
1. 继承性
大部分的CSS属性都是可以被继承的
子元素或者后代元素可以继承父元素中的样式
et :
所有的文本属性都可以被继承
块元素的宽度与父元素保持一致
2. 层叠性
允许为元素定义多个样式，共同起作用
et :
p{
color:red;
background-color:blue;
}
3. 样式表的优先级
从低到高 ：
1. 浏览器缺省设置 ：浏览器默认样式
2. 文档内嵌/外链方式 ：在不发生样式冲突时，样式共同起作用；
如果发生样式冲突，后来者居上，最后定义的样式最终显示
3. 行内样式的优先级最高
4. CSS 选择器
1. 作用 ：规范页面中哪些元素能够应用声明好的样式
目的 ：匹配页面元素
2. 详解
1. 标签选择器 / 元素选择器
特点 ：将标签名作为选择符，来匹配文档中所有的该标签，包含后代元素
语法 ：
标签名 {
属性:值；
}
练习 ：
新建文件 tag-selector.html
创建超链接标签
设置超链接文本色为红色
取消下划线 text-decoration : none;
2. 类选择器
特点 ：通过元素的class属性值进行匹配
语法 ：
.c1{
样式
}
p文本
以英文.开头，跟上class属性值，中间没有空格
练习 ：
创建文件 class-selector
创建几个元素 div p span h1
使用类选择器为上述元素添加样式
1. 文本大小为24px
2. 背景颜色为橘色
3. 文本斜体显示 font-style : italic;
类选择器的结合使用
1.标签名.类名
中间没有空格
表示在指定标签中匹配class属性值对应的元素
p.c1{
}
注意 ：标签名一定要写在前面
et :
.c1p 查找类名为c1p的元素
2. .类名1.类名2 （不常用）
3. 标签中使用两个类选择器的样式
3. ID 选择器
1. id 作用
HTML中所有的元素都有一个id属性，主要用来表示该元素在文档中的标志，具有唯一性
2. id 选择器
通过元素的id属性值进行匹配
语法 ：
#id属性值{
样式
}
注意 ：
通常网页中外围的结构化标签，都使用id进行标识，具有唯一性
et :
#nav{
}
练习 ：
创建文件 id-selector
创建div,设置id属性值为nav
使用id选择器添加样式
width ：100%；
height : 50px;
background-color: pink;
4. 群组选择器
1. 作用 ：为多个选择器设置共同的样式
2. 语法 ：
选择器1，选择器2，选择器3，{
样式
}
div,h1,p{
color : gray;
}
5. 后代选择器
1. 作用
依托于元素的后代关系来匹配元素（既包含直接子元素，也包含后代元素）
2. 语法
选择器1 选择器2{
}
在选择器1对应的元素中匹配后代元素，后代元素需满足选择器2
et :
#nav span{
}
匹配#nav下的所有span元素
6. 子代选择器
1. 作用 ：依托元素的子代关系进行匹配，
只匹配直接子元素
2. 语法
选择器1>选择器2 {
}
在选择器1对应的元素中匹配直接子元素，满足选择器2的要求
et :
#nav>ul>li{
}
7. 伪类选择器
1. 分类 ：
1. 超链接伪类选择器
2. 动态伪类选择器
2. 作用 ：
主要是针对元素的不同状态去设置样式
1. 超链接的不同状态
访问前 :link
访问后 :visited
激活（鼠标点按不松）:active
鼠标滑过 :hover
2. 其他元素具备
鼠标滑过 :hover
鼠标点按 :active
3. 表单控件
获取到焦点时的状态 :focus
对文本框和密码框而言，当用户点击输入时，都视为获取焦点状态
3. 伪类选择器需要与其他选择器结合使用，设置元素在不同状态下的样式
a:link{
color :black;
text-decoration :none;
}
4. 注意 ：
如果要给超链接添加四中状态下的样式，必须按照以下顺序书写伪类选择器
:link
:visited
:hover
:active
简称 “爱恨原则 LoVe / HAte ”
3. 选择器的优先级
当多个选择器的样式同时应用到一个元素上时，要按照不同选择器的优先级来应用样式
div{
color:red;
}
#box{
color:green;
}
.c1{
color:blue;
}
判断选择器的优先级，主要看选择器的权重（权值）数值越大，优先级越高
选择器 权值
标签选择器 1
类选择器/伪类 10
id选择器 100
行内样式 1000
如果是复杂的选择器 （后代，子代），选择器最终的权值是各选择器权值之和
#nav li{ --101
color: green;
}
div li{ --2
color: red;
}
5. 尺寸单位与颜色取值
1. 尺寸单位
1. px - 像素单位，默认单位
2. % - 参照父元素对应属性的值进行获取
--------
3. in -inch 英寸 1in = 2.54cm
4. pt -磅 1pt = 1/72 in
5. cm
6. mm
2. 颜色表示方式
1. 英文单词
2. rgb(r,g,b)表示颜色
每一种三原色的取值范围 ：0 - 255
et :
红色 ：rgb(255,0,0);
黑色 ：rgb(0,0,0);
白色 ：rgb(255,255,255);
3. rgba(r,g,b,alpha)
设置颜色，还可以调整透明度
三原色的取值范围 0 - 255
alpha 透明度的取值 0 - 1
0 ：表示透明
1 ：表示不透明
取小数表示半透明，整数部分的0可以省略不写
0.5 / .5
4. 十六进制表示颜色
三原色 取值 0 - 255
转换为十六进制
十六进制取值范围 0-9 a-f
表示颜色
1. 长十六进制 6位表示方法
每两位为一组，代表一种三原色
表示红色
#ff0000
黑色 #000000
白色 #ffffff
其他颜色 ：#643a1f
2. 短十六进制 3位表示方式
浏览器会自动对每一位进行重复补全，最终补全为长十六进制
红色 ：#f00 ->#ff0000
黑色 ：#000
白色 ：#fff
6. 元素分类
HTML中标签分为
1. 块元素
特点 ：
1. 独占一行，不与其他元素共行显示
2. 可以手动设置宽高
et : div h1 p ul ol table form
2. 行内元素
特点 ：
1. 可以与其他元素或者文本共行显示
2. 不能手动设置宽高，元素的大小由内容决定
et : span i b label u s sub sup
3. 行内块元素
特点 ：
既可以与其他元素共行显示，也可以手动设置宽高
et : img input
属性 ：
可以通过 vertical-align设置行内块元素左右元素与其的垂直对齐方式
取值 ： top / middle / bottom
注意 ：vertical-align只在行内块元素中使用
7. 行内元素是可以共行显示的，但是如果代码中出现了换行，页面最终效果上，行内元素之间会有空隙
复习
1. CSS 三种引入方式
1. 行内 style属性
2. 文档内嵌 style标签
3. 外部样式表文件
行内优先级最高
文档内嵌和外部样式表中涉及样式冲突，后来者居上
浏览器默认样式优先级最低
2. CSS 选择器
1. 标签选择器
h1{
}
2. 类选择器
.class{
}
3. ID 选择器
#id{
}
4. 群组选择器
div,#main,.c1,span{
}
5. 后代选择器
div span{
}
6. 子代选择器
div>span{
}
7. 伪类选择器
超链接伪类选择器
:link
:visited
:hover
:active
其他元素可以使用动态伪类
:hover
:active
文本框和密码框
:focus
8. 选择器的优先级 看权值
标签选择器 1
类选择器 10
id选择器 100
行内样式 1000
选择器的组合 （后代 子代）权值相加
3. CSS 常用属性
width
height
color
background-color
font-size
font-weight
text-decoration
vertical-align
4. 尺寸单位和颜色表示
1. px
2. %
3. red
4. rgb(255,0,0)
5. rgba(255,0,0,.5)
6. #ff0000
7. #f00
--------------------------------------------
1. 尺寸 和 边框
1. 尺寸属性
width height
用来改变元素的宽高大小
取值 ：px为单位的数值，或者 %
注意 ：
块元素和行内块元素都可以设置宽高大小
行内元素不起作用，大小由内容自适应
2. 溢出处理
溢出属性 ：overflow
取值 ：
1. visible 默认值，可见
2. hidden 隐藏，溢出部分隐藏不可见
3. scroll 显示滚动条，溢出时滚动条可用
4. auto 自动，当发生溢出时，产生滚动条并可用
2. 边框
1. 边框实现
1. 边框简写
通过一个属性为四个方向设置边框
可以设置 边框的 宽度 样式 颜色
属性 ：border
取值 ：width style color (缺一不可)
width : 像素为单位的数值，边框宽度
style : 设置边框样式
取值 ：
solid 实线
dashed 虚线
dotted 点线
double 双线
color : 设置边框颜色
特殊用法 ：
取消边框 border : none;
2. 单独设置某个方向的边框
属性 ：
border-top
border-right
border-bottom
border-left
取值 ：width style color
3. 单独定义边框的宽度 样式 颜色 （了解）
border-width:
border-style:
border-color:
4. 边框实现三角标
1. 元素的宽高尺寸为0
2. 元素分别设置四个方向的边框，宽度保持一致
3. 保留指定方向的边框颜色可见，剩余边框颜色设置为 transparent 透明色
4. 注意 ：
想要实现三角标，必须设置四个方向的边框，缺少的话，边框会恢复成矩形
2. 轮廓线
围绕在元素边框周围的线
常见于 表单元素
属性 outline
取值 width style color
一般多取消元素的默认轮廓线
outline : none;
3. 圆角边框
设置元素的圆角
属性 ：border-radius
取值 ：
1. 像素
2. % 参照元素尺寸获取
取值情况
1. border-radius : 20px;
一个值表示上右下左的圆角程度都是20px
2. border-radius : 10px 20px 30px 40px;
四个值分别代表四个方向的圆角程度
3. border-radius : 10px 20px;
两个值表示 1 3 对应，2 4 对应
对角保持一致
4. border-radius : 10px 20px 30px;
第四个值与第二个值保持一致
5. 改变元素形状，改成圆形
border-radius : 50%;
4. 边框阴影 (盒阴影)
属性 ：box-shadow
取值 ：
offset-x 阴影的水平偏移距离
offset-y 阴影的垂直偏移距离
blur 阴影的模糊程度，值越大越模糊
spread 阴影的延伸距离
color 阴影颜色
注意 ：
1. 浏览器坐标系，不管是窗口还是元素，都以左上角为原点，向右向下为X和Y轴的正方向
2. spread 表示阴影的延伸距离，可以省略
3. color 表示阴影颜色，默认为黑色
2. 盒模型 / 框模型
1. 一切元素皆为框
盒模型 ：定义元素在文档中实际占据的尺寸
包含内容 ： 外边距 边框 内边距 元素尺寸
默认情况下元素最终占据的尺寸大小 ：
最终宽度 = 左右的外边距 + 左右的边框 + 左右的内边距 + 元素宽度
最终高度 = 上下的外边距 + 上下的边框 + 上下的内边距 + 元素高度
2. 外边距
1. 元素边框与其他元素边框之间的距离
设置元素与元素之间的距离
2. 属性
margin
取值 ：可以是像素为单位的数值，也可以是%
取值情况 ：
1. margin : v1;
一个值表示上右下左四个方向都设置外边距
2. margin ：v1 v2;
两个值表示上下的外边距为v1,左右外边距为v2
3. margin : v1 v2 v3;
上方的外边距为v1,下方的外边距为v3,左右外边距为v2
4. margin ：v1 v2 v3 v4
分别设置上右下左四个方向的外边距
特殊用法：
1. 清除元素的默认外边距
margin : 0;
2. 设置元素在其父元素中水平居中
margin : 0 auto;
3. 取值可以是正值也可以是负值
如果给负值，表示元素位置微调
margin : 10px 20px;
margin : -10px 10px 20px -10px;
3. 四个方向的外边距单据设置
属性 ：
margin-top
margin-right
margin-bottom
margin-left
取值 ：
只给一个值，可以是像素值，也可以是%
4. 页面中具有默认外边距的元素
body p h1~h6 ul ol
3. 内边距
1. 元素的内容与元素边框之间的距离
2. 语法
属性 ：padding
取值 ：像素值或%
取值情况 ：
padding: 10px; 上右下左四个方向的内边距
padding: 10px 20px; 设置上下 左右的内边距
padding：10px 20px 30px; 上 左右 下
padding: 10px 20px 30px 40px; 上右下左
3. 分别对四个方向的内边距做设置
padding-top
padding-right
padding-bottom
padding-left
4. 具有默认内边距的元素
ol ul 文本框 密码框 按钮 td
4. box-sizing
1. 作用 ：指定盒模型的计算方式
2. 属性 : box-sizing
取值 ：
1. content-box 默认值
元素的width height属性只规定元素内容区域的大小，如果元素设置内外边距，边框，则元素最终的尺寸要进行累加（参照盒模型公式）
div{
width:200px;
height:200px;
border:3px solid red;
padding:10px;
margin:20px;
}
最终宽度 200+3*2+10*2+20*2
最终高度 200+3*2+10*2+20*2
2. border-box
元素的width height属性，设置的是包含边框，内边距和内容部分总共的尺寸
div{
width:200px;
height:200px;
border:3px solid red;
padding:10px;
margin:20px;
box-sizing : border-box;
}
最终宽度 200+20*2
width = border + padding + content;
5. 元素显示设置
属性 ：display
作用 ：改变元素类型
取值 ：
1. block 转换为块元素
2. inline 转换为行内元素
3. inline-block 转换为行内块元素
4. none 设置元素隐藏
注意 ：
block 设置元素显示
none 设置元素隐藏
a{
display:inline-block;
width：
height:
}
3. 背景相关的属性
1. 背景颜色
属性 background-color
取值 颜色值
注意
1. 背景颜色从边框位置开始绘制
2. 如果元素添加内边距，也会按照背景颜色进行填充
3. 所有元素默认背景颜色都为透明，新建窗口为白色并不是body的背景颜色，是窗口渲染的结果
2. 背景图片
属性 background-image
取值 url("图片路径")
3. 背景图片平铺显示
如果背景图片尺寸小于元素尺寸。会自动对图片进行重复平铺，直到把元素铺满
属性 background-repeat
取值
1. repeat 默认值，沿水平和垂直方向平铺
2. no-repeat 不重复平铺
3. repeat-x 横向平铺
4. repeat-y 纵向平铺
4. 背景图片尺寸
属性 background-size
取值
1. 像素值
2. 百分比 采用当前元素的尺寸获取
包含 width height 两个值
------
3. cover 将图片等比拉伸至完全覆盖元素，超出部分裁减掉
4. contain 将图片等比拉伸至刚好被元素容纳，未填充到的部分不管
5. 背景图片的位置
默认情况下，背景图片从元素的左上角显示
属性 ：background-position
取值 ：
1. x y
以像素为单位的数值，使用空格隔开
x : 背景图片水平偏移距离
正值表示向右偏移
负值表示向左偏移
y : 背景图片的垂直偏移距离
正值表示向下偏移
负值表示向上偏移
2. x% y%
百分比参照元素尺寸获取
1. 0% 0%
图片显示在左上角
2. 100% 100%
背景图显示在右下角
3. 50% 50%
背景图显示在中间
3. 使用方位值表示
x y
x ：left / center / right
y : top / center /bottom
如果只设置一个方向上的关键字，另外一个方向默认是center
6. 背景属性简写
属性 ： background
取值 ： color url() repeat position;
注意 ：背景图片的尺寸大小需要单独设置
et :
div{
background : red;
}
background : url();
background : red url() no-repeat right bottom;
1. 文本相关属性
1. 字体属性
1. 设置字体大小
属性 ：font-siz
取值 ：px
2. 指定字体名称
属性 ：font-family
取值 ：字体名称，如果出现多个名称，使用,隔开
注意 ：如果字体名称中出现中文或者空格，要是用引号引起来
et :
font-family : Arial,serif;
font-family : "微软雅黑","黑体";
font-family : "Microsoft YaHei";
3. 设置字体加粗
属性 ：font-weight
取值 ：
1. 单词表示
normal 默认值，正常显示
bold 加粗显示
lighter 极细文本
2. 数字表示
可以取值100-900之间的整百数值，值越大字体越粗
400 等价于 normal
700 等价于 bold
4. 设置字体样式
属性 ：font-style
取值 ：
1. normal 正常显示
2. italic 使用斜体
3. oblique 文本倾斜，出现斜体效果
5. 字体属性简写
属性 ：font
取值 ：style weight size family;
注意 ：font-family属性值必须写，不写的话整个属性无效
et :
font : 18px "黑体";
font : 18px "黑体",serif;
2. 文本属性
1. 文本颜色
属性 ：color
取值 ：颜色值
2. 文本水平对其方式
属性 ： text-align
取值 ： left (默认值) /center/right/justify (两端对齐)
3. 设置行高
属性 ：line-height
取值 ：像素值 或无单位的数值，表示是当前文本大小的倍数
et :
line-height :32px;
p{
font-size: 18px;
line-height: 2;
//行高为字体大小的2倍 36px
}
常用 ：使用行高设置一行文本的垂直居中
用法 ：将元素的行高与高度保持一致
et :
div{
width: 100px;
height: 50px;
line-height: 50px
}
用法2 ：使用行高对文本上下进行微调
line-height = height 垂直居中
line-height > height 文本偏下
line-height < height 文本偏上
注意 ：一行文本 在当前行中一定是垂直居中的，上下的空隙由浏览器自动分配
4. 文本装饰线
属性 ：text-decoration
取值 ：
1. underline :下划线
2. overline :上划线
3. line-through :删除线
4. none : 针对超链接，取消默认下划线
2. 表格属性
1. 基础样式属性是通用的
width height background color margin padding...
2. 独有的CSS属性
1. 边框合并
属性 ：border-collapse
取值 ：
1. separate 默认值 边框分离
2. collapse 边框合并
注意 ：
1. td 不支持外边距
2. 边框合并属性只能写在table标签里
2. 边框边距
1. 设置单元格之间的距离
2. 属性 ：border-spacing
取值 ：h-Value v-Value
h-value : 表示水平方向的距离
v-value : 表示垂直方向的距离
两个值之间使用空格隔开
3. 注意 ：
只能在表格边框分离状态下使用
3. 过渡效果
1. 过渡效果指的是元素CSS属性值在变化时的一种平滑效果
2. 语法 ：
1. 指定过渡属性
作用 ：用来指定哪些CSS属性需要添加过渡效果
transition-property
取值 ：
1. 单个的属性名称
et :
transition-property:width;
2. all
但凡能添加过渡效果的属性都添加效果
3. 指定多个属性名称，使用,隔开
et :
div{
width: 100px;
height: 100px;
background: red;
transiton-property:all;
}
div:hover{
width:200px;
height:200px;
}
4. 能够添加过渡效果的属性
1. 所有颜色相关的属性
2. 所有取值为数字的属性
2. 指定过渡时长
表示在多长时间内完成过渡效果
属性 ：transition-duration
取值 ：单位为s（秒）或者是ms（毫秒）的数值
et :
1s = 1000ms
0.3s = 300ms
.3s = 300ms
3. 指定过渡效果的速度时间曲率
属性 ：transition-timing-function
作用 ：设置过渡效果的变化速率
取值 ：
1. ease 默认值 慢速开始，中间快速变快，慢速结束
2. linear 匀速变化
3. ease-in 慢速开始，加速结束
4. ease-out 快速开始，减速结束
5. ease-in-out 慢速开始和结束，中间过程先加速后减速
4. 指定过渡延迟
属性 ：transition-delay
作用 ：延迟几秒之后再发生过渡效果
取值 ：s / ms为单位的数值
5. 使用注意 ：
1. 其他属性都可以省略（transition-property，timing-function，delay）过渡时长duration必须设置，否则CSS样式的变化就又成瞬时变化，没有过渡效果了
2. 使用过渡相关的属性时，要定义在元素的默认样式中，不能写在伪类选择器中，会影响过渡效果
练习 ：
1. 创建200 * 200 的元素，背景色为红色
2. 鼠标悬停时：
1. 尺寸400 * 400
2. 背景颜色变为绿色
3. 元素变成圆形
样式改变在5s内完成
6. 属性简写
属性 ： transition
取值 ： property duration timing-function delay
注意 ： duration 必须写
4. 布局方式
1. 设置元素在网页中的排列方式和位置
2. 分类
1. 普通流布局/标准流布局/文档流布局
默认布局方式
特点 ：
将元素按照书写顺序和元素类型，从左向右，从上至下排列
2. 浮动布局
属性 ：float
取值 ：left / right / none(默认值)
left :元素向左浮动，停靠在其他元素的边缘
right : 元素向右浮动，停靠在其他元素的边缘
特点：
1. 元素设置浮动之后，会脱离文档流，脱流之后，元素在文档中不占位，呈现一种浮动元素“漂浮”在文档流上方的效果
2. 浮动元素后面的正常元素会上移，占据原本浮动元素所在的位置
3. 多个元素同时左浮或右浮，浮动元素会依次停靠在前一个元素的边缘位置，第一个浮动元素会贴着父元素的边框显示
4. 如果父元素中无法并排显示浮动元素，浮动元素会自动换行显示
5. 浮动元素在文档中不占位
6. 所有类型的元素，只要设置浮动，就可以设置宽高，行内/行内块元素浮动之后，水平方向上就没有空隙了
3. 浮动元素的特殊效果
文字环绕效果
浮动元素虽然会遮挡后面正常的元素，但是不会遮挡正常元素中内容的显示，内容会自动围绕在浮动元素周围显示
4. 浮动元素对父元素高度的影响
由于浮动元素在文档中不占位，一旦子元素全部浮动，父元素的高度就变成0，影响父元素背景颜色，背景图片显示，影响后面元素的布局
解决方式 ：
1. 指定父元素的高度
弊端 ：无法确认父元素的高度，不一定每次都清楚知道
2. 父元素中设置overflow:hidden;
弊端 ：如果父元素要显示溢出的内容，设置overflow :hidden之后，溢出内容就不显示了
3. 清除浮动带来的影响
1. 在父元素的末尾添加空的块级元素
2. 设置空标签 clear : both;
5. 清除浮动
由于浮动元素会对其后正常元素和其父元素带来一定影响，所以在网页布局中要清除这种影响
属性 ：clear
取值 ：
1. none 默认值，不做处理
2. left
清除当前元素前面左浮元素带来的影响，当前正常元素左边不允许出现浮动元素
et :
.d1{
float:left;
}
.d2{
clear:left;
}
3. right
正常元素右边不允许出现浮动元素
4. both
正常元素两边都不能出现浮动元素
1. 定位布局
1. 属性 position
2. 取值
1. static 默认值 按照文档流布局
2. relative 相对定位
3. absolute 绝对定位
4. fixed 固定定位
注意 ：只有元素的position属性设置为 relative / absolute / fixed,才认为元素是“已经定位的元素”
3. 偏移属性
属性 ： top /right / bottom/ left
作用 ：配合已定位的元素实现位置移动
取值 ：像素值
top : 以元素的上边界为基准移动元素
right : 以元素的右边界为基准移动元素
bottom : 以元素的底边界为基准移动元素
left : 以元素的左边界为基准移动元素
2. 定位方式
1. 相对定位
position ：relative;
元素采用相对定位时，会参照它在文档中原本的位置进行偏移
2. 绝对定位（重点）
position : absolute;
特点 ：
1. 绝对定位的元素，会脱离文档流，元素在文档中不占位
2. 绝对定位的元素会参照一个离他最近的并且已经定位的祖先元素进行偏移
3. 如果元素没有已定位的祖先元素，元素会参照body(浏览器窗口左上角)的位置进行偏移
注意 ：
1. 元素一旦绝对定位，就可以设置宽高了
2. 经常使用 “父相子绝”的方式实现页面布局
父元素采用相对定位，子元素采用绝对定位
3. 浮动和绝对定位都可以实现元素脱流，采用浮动+外边距调整元素位置 等价于 绝对定位+偏移属性，浮动更常见于外围结构标签，做网页整体布局时使用，绝对定位更常用于内部元素的调整
4. 浮动和相对定位可以共存的，设置的相对定位只是为了辅助内部子元素的定位布局
3. 堆叠次序调整
1. 已定位的元素堆叠在一起时的排列顺序
2. 语法
属性 ：z-index
取值 ：无单位的数值，默认为0，数值越大越靠上
3. 注意
1. 如果元素z-index属性值相同，后来者居上
2. 父子元素都设置z-index，永远是子元素在上，不受z-index影响
3. z-index属性只能用在已定位的元素上
position : relative / absolute / fixed
4. 固定定位
1. 固定定位可以使元素固定在浏览器窗口的某个位置，不会随网页内容滚动而滚动
2. 语法 ：
属性 ：position
取值 ：fixed
配合偏移属性实现元素位置的固定
3. 注意 ：
1. 固定定位的元素永远是参照浏览器窗口进行定位的
2. 固定定位的元素都会变成块元素
3. 显示方式
1. 作用 ：决定元素以何种方式显示在网页中
2. 属性 ：display
取值 ：
1. none 设置元素隐藏，隐藏之后不占位
2. block 设置元素显示，或者转换元素类型，将元素转换为块元素
3. inline 转换为行内元素
4. inline-block 转换为行内块元素
4. 显示效果
1. 属性 ：visibility
2. 取值 ：
1. visible 默认值，表示显示
2. hidden 元素隐藏，仍然在文档中占位
-----------------------------
1. 属性 ：opacity 设置元素透明度
2. 取值 ：0（透明） ~ 1 （不透明）
注意 ：
1. 元素设置opacity属性，所有内容（背景颜色，文本颜色）都会实现半透明效果
2. 子元素会继承父元素中半透明效果
3. 如果父子元素都设置了opacity，子元素最终的效果是在父元素半透明的基础上再进行半透明，
子元素最终效果 = 父元素opacity * 本身opacity
--------------------------------------
1. 设置垂直对齐方式
属性 ：vertical-align
取值 ：top / middle / bottom
注意 ：
可以用在行内元素上，更常见于为行内块元素设置vertical-align。调整行内块元素左右内容与它的对齐方式
-----------------------------
2. 光标显示
作用 ：改变鼠标悬停在元素上时的显示外观
属性 ：cursor
取值 ：
1. default 默认值
2. pointer 显示为小手形状
3. text 显示为 I 普通文本
4. crosshair 显示为 +
5. 列表属性
1. 列表本身是块级元素，自带内外边距，带有项目符号
2. 属性
1. 属性 : list-style-type
设置项目符号
取值 ：
1. none （取消项目符号）
2. disc 实心原点
3. circle 空心圆点
4. square 实心方块
...
-----了解-----
2. 设置项目符号为图片
属性 ：list-style-image
取值 ：url("图片路径")
3. 设置项目符号的位置
属性 ：list-style-position
取值 ：inside / outside(默认）
设置项目符号出现在内容框的外部还是内部
4. 必须掌握
属性简写
list-style : none; 常用来取消列表项目符号
6. 转换属性
1. 主要是用来改变元素在页面中的位置，尺寸，角度
2. 语法
属性 ：transform
取值 ：转换函数
注意 ：多个转换函数之间使用空格隔开
1. 转换原点
转换原点实际上就是元素转换操作的基准点
属性 ：transform-origin
取值 ：x y;
表示以元素左上角为原点选取旋转原点的坐标
1. 可以使用像素值
2. 可以使用百分比
3. 可以使用方位值
top /center / bottom
left /center /right
默认以元素的中心点作为转换的基准点
2. 转换函数
1. 平移变换
1. 改变元素在网页中的位置
2. 属性 transform
取值 ：translate(x,y)
x 表示元素在水平方向上平移的距离
y 表示元素在垂直方向上平移的距离
正值表示元素向右 / 下移动
负值相反
其他情况
1. translateX(value)
指定元素沿水平方向位移
2. translateY(value)
指定元素沿垂直方向位移
3. translate(value)
等价于translateX(value)
2. 缩放变换
改变元素在页面中的大小
属性 ：transform
取值 ：scale(value)
value为无单位的数值，表示缩放比例
默认值是1 正常比例显示
value > 1 会等比放大
0 < value < 1 等比缩小
value < 0 元素会反转
其他情况
1. scaleX(v)
横向缩放
2. scaleY(v)
垂直缩放
3. 旋转变换
元素旋转一定角度显示
属性 ：transform
取值 : rotate(ndeg) 二维转换
表示元素按照指定的角度进行旋转
正值 表示顺时针
负值 表示逆时针
------------------
3D变换
rotateX(ndeg) 沿X轴翻转
rotateY(ndeg) 沿Y轴旋转
4. 注意 ：
1. 旋转原点会影响转换效果
2. 元素如果涉及旋转操作，会连带坐标轴一起旋转,影响后面的位移操作
translate(x,y)
沿坐标轴进行移动
目录
1. WEB.
1. 超链接标签
CSS
1. 尺寸 和 边框
1. 文本相关属性
1. 定位布局