导图社区 CSS和bootstrap第二阶段
- 269
- 21
- 1
- 举报
CSS和bootstrap第二阶段
包括了CSS和bootstrap的学习。。花费了好长时间总结出来的。所有东西一目了然，希望对前端朋友有所帮助
编辑于2019-06-29 05:24:45- JavaScript 高级程序设计思维导图
计算机专业同学福利！总结了6年的JavaScript 高级程序设计思维导图，非常全面非常细致。需要拿去！Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等。
- CSS和bootstrap第二阶段
包括了CSS和bootstrap的学习。。花费了好长时间总结出来的。所有东西一目了然，希望对前端朋友有所帮助
- web前端课程体系基础课程
前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。本思维导图是web前端基础课程框架结构总结思维导图，需要的请同学拿走！
CSS和bootstrap第二阶段
社区模板帮助中心，点此进入>>
- JavaScript 高级程序设计思维导图
计算机专业同学福利！总结了6年的JavaScript 高级程序设计思维导图，非常全面非常细致。需要拿去！Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等。
- CSS和bootstrap第二阶段
包括了CSS和bootstrap的学习。。花费了好长时间总结出来的。所有东西一目了然，希望对前端朋友有所帮助
- web前端课程体系基础课程
前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。本思维导图是web前端基础课程框架结构总结思维导图，需要的请同学拿走！
- 相似推荐
- 大纲
前端第二阶段
HTMLday1
WEB基础知识
Web与Internet
Internet简介
Internet 是一个全球性的计算机网络，也成为"因特网"等
主要服务
Telnet
WWW
BBS
FTP
基本实现技术
分组交换原理
TCP/IP协议簇
Web简介
又称为万维网，即WWW
将各种类型的信息和服务无缝连接，并提供界面
万维网其实就是无数WEB文档的集合
Web与Internet
Web是Internet上的最流行的应用
Internet为Web运行提供了网络环境
Web的工作原理
Web的工作原理
基于Internet的一个多媒体信息服务系统
B/S模式
由Web服务器，浏览器，通信协议组成
Web服务器
功能
存储WEB上的内容信息（图像，音视频等）
响应浏览器的请求，执行服务器端程序
具备一定安全性功能
产品
TOMCAT
IIS
APACHE
……
Web浏览器
功能
提交用户请求
作为HTML和JS的解释器
用图形化的方式显示HTML文档
产品
Microsoft IE
Mozilla Firefox
Google Chrome
Apple Safari
Opera
Web的相关技术
服务器端技术
运行于服务器端
提供了数据库访问能力
技术
PHP（Hypertext Preprocessor）
JSP（Java Server Page）
ASP（Active Server Page）
客户端技术
运行与客户端，由浏览器解释运行
技术
HTML（Hyper Text Markup Language）
CSS（Cascading Style Sheets）
JS（Javascript）
HTML快速入门
HTML概述
什么是HTML
Hyper Text Markup Language
超文本标记语言,用来设计网页
用该语言编写的文件，以.html 或 .htm为后缀
由浏览器解释运行
可以嵌入脚本语言编写的程序片段，如JS
HTML基础语法
标记语法
HTML用于描述功能的符号成为“标记”
标记使用时必须使用尖括号(<>)括起来
有封闭类型标记，也有非封闭类型的标记
双标记
必须成对出现
<标记>内容</标记>
注意：封闭类型标记必须成对出现
单标记
非封闭类型，也叫做空标记
<标记> 或 <标记/>
<br>
<hr>
<img>
<input>
<meta>
元素
即标记，指尖括号及尖括号所包围的内容部分
元素可以包含文本内容和其他元素，也可以是空的
元素嵌套
元素可以相互嵌套形成更为复杂的语法
<div> <p></p> </div>
注意：
嵌套顺序（完整嵌套）
代码缩进（保证代码可读性）
属性和值
属性是用来修饰元素的
语法
<标记 属性="值" 属性="值">
ex:<p align="center" id="p1">
标准属性
id
定义元素在页面中的唯一标识
title
鼠标移入到元素上时提示的文本
class
样式中，定义元素引用的类选择器
style
样式中，定义元素的行内样式
注释
在源码中编写，但不会被浏览器所解释的内容，成为注释
可以将对代码的解释说明放在注释中
语法
<!-- 注释内容 -->
注意
注释不可以嵌套注释
注释不可以位于<>中
文档结构
文档结构
文档类型声明
指定HTML的版本和风格
<!DOCTYPE html>
HTML页面
表示HTML页面的开始与结束
<html></html>
HTML页面
页面头部
定义页面全局信息
<head></head>
子元素
网页标题
<title></title>
页面内容编码格式
<meta charset="utf-8">
页面主体
网页显示主体内容
<body></body>
属性
文本颜色
text
背景颜色
bgcolor
文本
特殊字符
空格
<
<
>
>
©
©
文本标记
文本样式
斜体：<i></i>
粗体：<b></b>
删除线：<s></s>
下划线：<u></u>
上标：<sup></sup>
下标：<sub></sub>
标题元素
标记
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
表现形式
改变字号（一级最大，六级最小）
加粗显示
上下有垂直的空白距离
独立成行
属性
align
标题文本水平排列方式
取值
left
center
right
段落元素
标记
<p></p>
表现形式
默认文字大小
独立成行
上下垂直空白
align：left / center / right;
注意
p标记中不允许嵌套块级元素
换行元素
标记
<br>
分隔线元素
标记
<hr>
属性
尺寸：size
取值单位为 px（像素），可以省略
宽度：width
取值单位为px（像素）可以省略或百分比
颜色：color
水平对齐方式：align
left
center
right
预格式化
标记
<pre></pre>
特点
保留源文档中的 回车 和 空格
分区元素
块分区元素
标记
<div></div>
表现形式
独立成行
作用
页面布局
行内分区元素
标记
<span></span>
表现形式
多个元素在一行内显示
作用
设置同一行文字内的不同格式
行内元素与块级元素
块级元素
元素会独占一行，即元素前后都会自动换行
主要用于网页布局
display:block
行内元素
不会换行，多个元素会在一行内显示
包裹文本并处理样式
display:inline;
图像和链接
URL
目录结构
目录就是Web站点中文件夹的名称
Web站点的主目录，称为Web站点的根目录
URL
Uniform Resource Locator（统一资源定位器），用来标识网络中的任何资源
三种表现形式
绝对路径
定义：从文件所在的最高级目录下开始查找资源文件所经过的路径
网络资源
协议名
http / https
主机名（IP地址/域名）
www.baidu.com
目录路径
img
资源名称
bg_logo1.png
相对路径
定义：从当前文件位置处开始查找资源文件所经过的路径
同目录，直接用
a.jpg
子目录，先进入
img/a.jpg
img/index/a.jpg
父目录，先返回
../a.jpg
../../a.jpg
../img/a.jpg
根相对路径
定义：从Web站点所在的根目录处开始查找
通过 / 表示根目录
图像
图像格式
JPEG
jpg
jpeg
GIF
PNG
图像元素
p
标记：<img>
属性
src
要显示的图像的路径（绝对/相对/根相对）
width
图像宽度，如果width 和 height 只设置一个属性时，另外一个将等比缩放
height
图像高度
链接
标记：<a>内容</a>
属性
href
链接URL
to 百度
target
to 百度
含义：目标，打开新网页的形式
取值
_blank
在新标签页中打开
_self
在自身页面中打开
...
name
定义页面锚点
链接的表现形式
目标文档为下载资源
<a href="XXX.rar / XXX.zip"></a>
电子邮件链接
<a href="mailto:xxx@xxx.com"></a>
返回页面顶部的空链接
<a href="#"></a>
链接到JavaScript
<a href="javascript:js脚本"></a>
锚点
定义：锚点就是文档中某行的一个记号，通常用于链接到这个记号位置处
使用方式
定义锚点
通过 a 标记的 name 属性
<a name="name1">锚点</a>
其他元素使用 id 属性
<ANY id="anchor">
链接到锚点
1、定义锚点 锚点1 2、链接到锚点：在锚点名前加上# ...
<a href="#锚点名称"></a>
<a href="页面URL#锚点名称"></a>
表格
表格的作用
按照一定的结构来显示数据
由单元格按照从左到右，从上到下的方式排列到一起
数据都保存在单元格中
表格可以显示数据，也可以设置页面的布局
使用表格
第1行，第1列 第1行，第2列 第2行，第1列 第2行，第2列
创建表格
创建表格
<table></table>
创建表行
<tr></tr>
创建单元格
<td></td>
属性
table
width :设置表格的宽度
height:设置表格的高度
align:设置表格的对齐方式
left
center
right
border:设置表格边框宽度
cellpadding:内边距（单元格边框与内容之间的距离）
cellspacing:外边距（单元格之间的距离）
bgcolor:设置表格的背景颜色
tr
align:该行内容水平对齐方式
valign:该行内容的垂直对齐方式
top
middle
bottom
td/th
align：内容水平对齐方式
valign：内容垂直对齐方式
width ：宽度
height ：高度
colspan:设置单元格跨列
rowspan:设置单元格跨行
注意
传统的表格，每行的列数都是统一化的（每行的列数都相同）
一行中所有的单元格的高度都是相同的，默认下以最高的单元格为主
每行中相同列的宽度都是相同的，默认以最宽的单元格为主
表格标题
<caption></caption>
注意：标签必须紧随在<table>之后，并只能有一个
表格的复杂应用
行分组
表头行分组：<thead></thead>
表主体行分组：<tbody></tbody>
注意：如果不显示指定行分组的话，那么默认都在tbody中
表尾行分组：<tfoot></tfoot>
不规则表格
跨列
从指定单元格位置处，横向向右合并几个单元格
被合并掉的单元格要删除
colspan=值;
跨行
从指定单元格位置处，纵向向下合并截个单元格
被合并调的单元格要删除
rowspan=值;
表格的嵌套
表格是允许被嵌套的，但嵌套的表格必须要放在td中
boot项目3天
学子商城响应式布局
AJAXday1
URL
URL的语法
URL的完整格式： ://:@:/;?#
协议
SCHEME：方案，指定以哪种协议从服务器获取指定资源；方案名不区分大小写。常见方案：HTTP、HTTPS、FTP、MAILTO、RTSP、FILE、NEWS、TELNET等
主机／端口号
://:@:/;?# http://www.tedu.cn:80/news/n1001.html
HOST:主机名，资源所在服务器的IP地址或者域名（需要DNS转换为IP地址）
PORT：端口号，每项服务在服务器上都对应一个监听端口号
常见协议指定了一些默认端口号
FTP
21
文件上传、下载
SSH
22
安全的远程登录
TELNET
23
远程登录
SMTP
25
邮件传输
DNS
53
域名解析
HTTP
80
超文本传输
POP3
110
邮件接收
HTTPS
443
加密传输的HTTPS
用户名／密码
://:@:/;?# ftp://admin:123@172.163.99.171/adm/secret.xls
USER：用户名，某些方案访问资源时需要指定用户名
PWD：密码，默认值为e-mail地址
路径
://:@:/;?# ftp:// admin:123@ 172.163.99.171/adm/secret.xls
PATH：路径，服务器上资源的本地名称，由一个斜杠（／）将其与前面的URL组件分隔开来。
参数
://:@:/;?# https://www.ccb.com/login.jsp;jsessionid=DF8103FA
PARAMS：参数，某些方案会使用参数来指定输入参数，每个参数都采用“名／值对”形式，一个URL中可以有多个这样的“名／值对”，使用分号（;）分隔
查询字符串
://:@:/;?# https://www.baidu.com/s?wd=js&issp=1&f=8
QUERY：查询字符串，某些方案会使用查询字符串传递参数以激活应用程序。查询字符串内容没有通用格式，使用?与其它组件分隔
锚点（书签）
://:@:/;?# http://www.xiaoshuo.com/XiYouJi.html#chapter8
FRAG：片段，也称为ANCHOR（锚点）、TAG（书签），指一个资源中某一部分的名字。引用对象时，不会讲frag字段传送给服务器，该字段是在客户端内部使用的，通过#与其它部分分隔。
相对URL
绝对URL
包含访问资源所需全部信息
相对URL
URL本身包含的信息并不完整，必须参靠另外一个URL才能确定其完整内容信息。
HTTP协议
请求(Request)消息
请求起始行
请求方法
GET
表示客户端想获取服务器上的资源(img/js/html/css/video)
无请求主体
靠地址栏传递数据给服务器
POST
表示客户端想传递数据给服务器
请求主体
PUT
表示客户端想(放置文件)到服务器(禁用)
请求主体
DELETE
表示客户端想删除服务器上的指定文件(禁用)
HEAD
表示客户端只想获取指定的响应头
CONNECT
测试连接
TRACE
追踪请示路径
OPTIONS
选项，保留以后使用
请求URL
协议版本
HTTP/1.1
请求头
Host ：127.0.0.1
告诉服务器请求哪一个虚拟主机
Connection:keep-alive
告诉服务器要持久连接
User-Agent ：
告诉服务器自己的类型
Accept-Language ：zh-CN
告诉服务器自己能接收的自然语言
zh-CN : 简体中文
Accept-Encoding ：gzip
告诉服务器自己可以接收的压缩类型
Referer:http://127.0.0.1/05-PROJECT01/01-post.html
告诉服务器请求来自于哪个页面
请求主体
Form Data
响应(Response)消息
响应起始行
协议版本号
响应状态码
1xx ：100-199
提示信息
2xx
成功响应
200 ：OK
3xx
需要客户端进行重定向
301 ：永久性重定向
302 ： 临时重定向
304 ： Not Modified
4xx
客户端请求错误
404 ：Not Found
403 ： Forbidden
405 ： Method Not Allowed 请求方法不被允许
5xx
服务器运行错误
500 ：服务器内部错误
501 ： 没有实现
原因短句
对响应状态码的简单解释
响应头
Server
告诉客户端服务器的信息
Last-Modified
告诉客户端网页最后一次修改的时间
Content-Encoding
告诉客户端内容压缩方式
Connect
告诉浏览器启动持久连接
Content-Type
响应主体类型，告诉浏览器，响应数据的类型是什么
text/plain
纯文本
text/html
文本与网页
text/css
样式
application/javascript
js 代码片段
application/xml
application/json
images/jpeg
响应主体
Response
HTTP优化
HTTP性能优化
HTTP连接过程
（1）建立连接
（2）处理请求
（3）访问资源
（4）构建响应
（5）发送响应
（6）记录日志
HTTP连接性能优化
（1）创建连接：努力减少连接创建次数---使用Keep-Alive避免重复连接
（2）发送请求：尽力减少请求次数---合理设置缓存
（3）等待响应：提高服务器端运行速度---提高数据运算及查询进度
（4）接收响应：尽可能减少响应数据长度---启用压缩
安全的HTTP协议
HTTPS协议
安全版本的HTTP
安全连接建立过程
（1）客户端建立到服务器上的443端口上的连接
（2）双方初始化SSL层，沟通加密参数，交换密钥
（3）客户端发送请求消息，在SSL层加密；服务器接收到密文，在服SSL层解密，得到请求明文，对请求进行处理
（4）服务器发送响应消息，在SSL层加密；客户端接收到密文，在SSL层进行解密，得到响应明文，解析响应内容
（5）SSL关闭通知
（6）TCP连接关闭
AJAXday2
名词解释
同步
当一个任务未完成时，不能开启另一个任务
同步访问
在访问服务器时，客户端只能等待服务器的响应，不能做其他事情
异步
即便一个任务未完成，也不耽误另一个任务的执行
异步访问
在向服务器发送请求时，不耽误用户在网页上做其他的操作
AJAX
AJAX原理
什么是AJAX
Asynchronous Javascript And Xml（异步的Javascript 和 XML）
本质：使用JS提供的 XMLHttpRequest对象异步的向服务器发送请求并接收响应数据。AJAX中，服务器响应回来的是部分的数据而不是完整的页面，并且可以以无刷新的效果来更改页面中的局部内容
AJAX工作原理
Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。
获取AJAX对象
function getXhr(){ var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttprequest(); }else{ xhr=new ActiveXObject('Microsoft.XMLHttp'); } return xhr; }
new XMLHttpRequest()
new ActiveXObject("Microsoft.XMLHttp");
AJAX对象属性和方法
异步对象的属性和方法
abort()
取消请求
status
服务器返回的http请求响应值常用的有：
200：表示请求成功
202：请求被接受但处理未完成
400：错误的请求
404：资源未找到
500：内部服务器错误
getResponseHeader()
获取指定的Http头
open()
创建请求
xhr.open(method,url,isAsyn);
method
get
post
...
url
isAsyn
true : 异步
false: 同步
send(body)
发送请求
body ：请求主体
get提交方式此处为 null
post提交方式则为请求的数据
getAllResponseHeaders()
获取响应的所有Http头
onreadystatechange
发生任何状态变化时的事件控制对象
当 xhr 的readyState 发生改变时要自动激发的操作
xhr.onreadystatechange = function(){ if(xhr.readyState==4&&xhr.status==200){ var resText = xhr.responseText; } }
readyState
表示 xhr 的请求状态
值
0 ：请求尚未初始化
1 ：已打开连接，正发送请求
2 ：请求完成
3 ：正在接收服务器的响应
4 ：接收响应成功
responseText
服务器返回的文本
responseXML
服务器返回的xml，可以当做DOM处理
setRequestHeader()
指定请求的Http头
onreadystatechange
绑定一个事件处理函数，该函数用来处理readystatechange事件
当Ajax对象的readyState的值发生了改变，比如，从0变成了1，就会产生readystatechange事件
readyState
一共有五个值，分别是0，1，2，3，4，分别表示Ajax对象与服务器通信的状态，比如，当值为4时，表示Ajax对象已经获得了服务器返回的所有的数据
AJAX的使用
发送异步请求的步骤
（1）获取Ajax对象：获取XMLHttpRequest对象实例
（2）创建请求：调用XMLHttpRequest对象的open方法
（3）设置回调函数：为Ajax对象的onreadystatechange事件设定响应函数
（4）发送请求：调用Ajax对象的send方法
使用AJAX发送get请求
（1）获取Ajax对象
var xhr=getXhr(); function getXhr(){ var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttprequest(); }else{ xhr=new ActiveXObject('Microsoft.XMLHTTP'); } return xhr; }
（2）创建请求-GET请求
xhr.open('get','xx.php',true); 注意： true：表示发送异步请求（当Ajax对象发请求时，用户仍然可以对当前页面做其它的操作）。 False：表示发送同步请求（当Ajax对象发请求时，浏览器会锁定当前页面，用户不能对当前页面做其它操作）。
（3）回调事件处理函数
xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ var txt=xhr.responseText; //DOM操作 } }
（4）发送请求：调用Ajax对象的send方法
xhr.send(null); GET请求： send方法内传递null 若要提交数据，则在open方法的“URL”后面追加 如： xhr.open("get","xx.php?name=value&name=value",true)
使用AJAX发送post请求
post请求： 需手动设置请求消息头为application／x-www-form-urlencoded send方法内传递的是提交参数，没有可为null
xhr=getXhr();
xhr.open('post','xx.php',true);
xhr.onreadystatechange=handle_ajax;
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send('name=value&name=value...');
AJAXday3
XML语法
XML概述
什么是XML
XML是可扩展标记语言(eXtensible Markup Language)
XML是一种标记语言，类似于HTML
XML的设计宗旨是传输数据，而非现实数据
XML的标签没有被预定义，需要自行定义
XML是W3C的推荐标准
基本语法
XML声明
XML声明必须为<?xml开头，以?>结束
声明必须从文档的0行0列位置开始
声明只有三个属性
version
指定XML文档版本。必须属性，因为我们不会选择1.1，只会选择1.0
encoding
指定当前文档的编码。可选属性，默认值是utf-8
XML语法
XML都是由标签组成，但是所有的XML元素必须都有关闭标签。
This is a xml target This is a xml target错误
XML标签对大小写敏感，必须使用相同大小写来编写和关闭标签
错误 错误
XML必须正确嵌套
This a xml target This a xml target 错误
XML必须要有根元素
XML文档必须有一个元素是其他元素的父元素
XML的属性值必须加引号
元素
J K.Rowling J K.Rowling J K.Rowling
XML元素指的是从（且包括）开始标签直到（且包括）结束标签的部分。
元素可以包含其他元素、文本等。元素可以拥有属性
属性
J K.Rowling J K.Rowling J K.Rowling
XML元素可以在开始标签中包含属性，类似HTML
属性提供关于元素的额外（附加）信息，或用于修饰元素
属性值必须用引号引起来，单双引号均可使用
XML解析
JavaScript中的XML
XML DOM对象
IE浏览器通过ActiveXObject对象得到XML DOM对象 var xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 其他浏览器通过DOMParser对象得到XML DOM对象 var parser=new DOMParser(); Var xmlDoc=parser.parseFromString(xmlFile,"application/xml");
XML DOM对象的支持
XML DOM定义了访问和操作XML文档的标准方法
DOM把XML文档作为树结构来查看。能够通过DOM树来访问所有元素。
加载并解析XML字符串
if(window.DOMParser){ parser=new DOMParser(); xmlDoc=parser.parseFromString(txt,"application/xml"); }else{ //Internet Explorer xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(txt); }
AJAX返回并解析XML
使用XHR发送XML字符串
var xmlString=""; xmlString+=""; xmlString+="John"; xmlString+="Denver"; xmlString+=""; xhr.send("xmlString="+xmlString);
使用XHR接收XML字符串
服务器端 header("content-type:text/xml"); $info="John"; echo $info; 客户端： var xmlElem=xhr.responseXML; 注意：xmlElem为XML Dom对象
JSON
JSON概述
JSON概述
JSON：JavaScript Object Notation，javascript对象表示法
轻量级的文本数据交换格式
广泛使用于存储和交换文本数据领域，作用与XML类似，但比XML更简洁、更快、更容易解析
JSON语法规则
JSON数据的基本格式是“名称／值”对 "salary":3500
数据在（属性：值）中
数据由逗号分隔
花括号保存对象
方括号保存数组
使用JSON
JSON对象
var jsonTxt='{ "ename":"Tom", "salary":3500, "isMarried":true }';
JSON字符串可以描述一个对象，具体语法为
书写在花括号中
可以包含任意多个使用逗号分隔的“名称／值”对；
“名称“必须使用双引号括起来；值若是字符串也必须使用双引号括起来。
JSON数组
var jsonTxt1='[150,300,400]'; var jsonTxt2='["Tom","Mary","John"]'; var jsonTxt3=‘[10,true,null,{"x":60,"y":30}]’; var jsonTxt4='[ {"ename":"Tom","salary":3500}, {"ename":"Mary","salary":3600}, {"ename":"Joe","salary":3800} ]';
JSON字符串还可以描述一个数组，具体语法为：
书写在方括号中；
其中可以包含多个值或对象；
JSON文档与对象的转换
JSON.parse(string)
var jsonTxt='{"x":60,"y":30}'; var jsObj=JSON.parse(jsonTxt);
解析JSON字符串得到JavaScript对象
Project1
学子商城用户模块实战-1
Project2
学子商城用户模块实战-2
CSS3Basic1
CSS概述
什么是CSS
Cascading Style Sheets
层叠样式表，级联样式表，样式表
用于HTML文档中元素的样式定义
实现了内容与表现分离
提高代码的可重用性和可维护性
CSS与HTML之间的关系
HTML用于构建网页的结构
CSS用于构建HTML元素的样式
CSS与HTML之间的使用原则
W3C建议尽量使用CSS样式取代HTML属性
如果为HTML所特有属性，则使用HTML属性
CSS语法
CSS样式表的使用方式
内联方式
将样式定义在元素的style属性里
语法
<ANY style="样式声明;样式声明;">
样式声明
属性名:属性值
特点
只针对一个元素有效
不通用，无法提高可重用性和可维护性
<p style="color:red;backgrond-color:yellow;"></p>
内部样式表
将样式定义在页面<style></style>中
<head> <style></style> </head>
<style></style>中允许包含若干样式规则昀ꗗߐĀ맀综
样式规则
选择器
规范页面中哪些元素能够使用定义好的样式
样式声明
属性:值
特点
在一个页面中能够提升可重用性和可维护性
外部样式表
允许将样式定义在外部的的样式表文件中
步骤
创建一个单独的样式表文件用来保存样式规则
纯文本文件，文件后缀为.css
该文件中只能包含样式规则
新式规则由选择器和样式声明组成
在需要使用该样式表文件的页面上，使用<link>元素链接外部样式表文件
<link rel="stylesheet" type="text/css" href="css样式表URL">
CSS样式表特征
继承性
大多数CSS的样式属性是可以被继承的
层叠性
可以为一个元素定义多个样式规则
样式属性不冲突时，多个样式表中的样式可以层叠为一个
优先级
样式定义冲突时，会按照不同使用方式的优先级来应用样式
浏览器缺省设置
外部样式表和内部样式表
就近原则
内联样式
!important
可以显示的调整样式规则的优先级
语法
属性：值 !important;
CSS基础选择器
通用选择器
作用
用于匹配页面上的每一个元素
可用于页面上所有元素的元素样式定义
语法
*{ }
*{ color:#666; font-size:12px; }
body{ color:#666; font-size:12px; }
元素选择器
作用
用于匹配页面上指定标记的元素
通常用于设定某一种元素的默认样式
语法
元素名称{ }
类选择器
作用
可以由任意元素的class属性进行引用的选择器
在CSS中，类选择器是最灵活的选择器，应用也非常广
语法
定义
.className{}
.是定义类选择器的语法规范，并不是类选择器的名称
命名规范
由字母，数字，下划线，-
不能以数字开始
引用
<ANY class="className">
多类选择器的引用
允许一个元素引用多个类选择器
<ANY class="name1 name2 name3">
分类选择器的定义
作用
将类选择器和元素选择器结合起来使用
从而实现对某种元素中不同样式的细分控制
语法
元素选择器.类选择器{}
div.redColor{ }
p.important{ }
ID选择器
作用
与页面指定ID值的元素进行匹配（私人定制）
语法
#idValue{}
#仅仅表示该选择器是ID选择器而已
群组选择器
作用
选择器声明有是以逗号隔开的选择器列表
可以将一部分样式相同的选择器放在一起定义
语法
选择器1，选择器2，选择器3{ }
div,#main,.top{ color:red;}
后代选择器
作用
通过元素间的后代关系匹配元素
后代关系 ：出现在某元素的子元素（不限制层级）
语法
选择器1 选择器2{ }
子代选择器
作用
通过元素的子代关系匹配元素
子代关系：只存在一层子级关系的子元素昀ꗗߐĀ衪
语法
选择器1>选择器2{ }
伪类选择器
作用
用于匹配元素不同状态的选择器
链接伪类
:link
适用于尚未访问的链接
:visited
适用于访问过的链接
动态伪类
:hover
适用于鼠标悬停在HTML元素时
:active
适用于HTML元素被激活时
:focus
适用于HTML元素获取焦点时
……
选择器优先级
权值
元素选择器
1
类选择器
10
伪类选择器
10
ID选择器
100
内联样式
1000
选择器的权值加到一起，大的优先;如果权值相同，后定义的优先
#main div.top a:hover{ /*权值：*/ }
尺寸与边框
单位
尺寸
%
in
cm
mm
pt
px
em
颜色（取值）
rgb(r,g,b)
rgba(r,g,b,a)
a : alpha , 透明度 0-1 之间的小数
#rrggbb
#rgb
颜色的英文表示法
尺寸
尺寸
作用
用于设置元素的宽度和高度
单位一般为像素或百分比
宽度
width
min-width
max-width
高度
height
min-height
max-height
允许设置尺寸的元素
块级元素
行内块元素（radio,checkbox除外）
具备width和height属性的HTML元素
img
table
溢出
当使用尺寸属性限制元素的大小时，如果内容所需的空间大于元素本身的话，就会导致内容溢出
属性
overflow
visible
hidden
scroll
auto
overflow-x
overflow-y
边框
边框
简写方式
border:width style color;
width:边框宽度
style:边框样式
solid
dotted
dashed
color:颜色
可取值为 transparent
border:none; 或 border:0;
单边定义
border-方向:width style color
方向
top
right
bottom
left
单属性定义
border-属性:值;
属性
width
style
color
单边单属性定义
border-方向-属性:值；
方向
top
right
bottom
left
属性
width
style
color
ex
border-top-color : 上边框颜色
border-bottom-style : 下边框样式
border-left-color:左边框颜色
边框的组成
div{ width:0px; height:0px; border:5px solid transparent; border-top-color:red; }
边框倒角
语法
属性
border-radius
取值
绝对值
百分比
单独定义
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
边框阴影
属性
box-shadow
h-shadow
必需，为水平阴影的位置
v-shadow
必需，为垂直阴影的位置
blur
可选，模糊距离
spread
可选，阴影的尺寸
color
可选，阴影的颜色
inset
将外部阴影(outset)改为内部阴影
边框轮廓
轮廓是绘制于元素周围的一条线，位于边框的外围
属性
outline:width style color
outline-width
轮廓的宽度
outline-style
轮廓的样式
outline-color
轮廓的颜色
取消轮廓
outline:none; / outline:0;
CSS3Basic2
框模型
什么是框模型
页面元素皆为框
Box Model，定义了元素框处理元素内容、内边距、外边距、边框的方式
width 和 height 只负责定义内容区域的尺寸
增加了 外边距、内边距、边框，内容区域的尺寸不会发生改变，但会影响元素框的总尺寸
元素总宽度=左右外边距+左右边框+左右内边距+width
元素总高度=上下外边距+上下边框+上下内边距+height
外边距
什么是外边距
围绕在元素边框周围的空白区域
默认不能被其他元素所占据
外边距是透明的
属性
margin
单位
px
%
auto
设置非行内元素的水平对齐方式
auto对上下外边距不起作用
元素要设置宽度
负值
将元素向着反方向移动
数量
value
四个方向外边距
v1 v2
上下 左右
v1 v2 v3
上 左右 下
v1 v2 v3 v4
上 右 下 左
单边设置
margin-left
margin-right
margin-top
margin-bottom
具备默认外边距的元素
body
h1~h6
p
ul,ol
dl,dd
pre
可以通过 CSS 重写的方式重写外边距
p,h1,h2,h3,h4,h5,h6,body,ul,ol,dl,dd,pre{ margin:0; }
外边距的特殊情况
外边距合并
两个垂直外边距相遇时，他们将合并为一个，值以大者为主
外边距溢出
特殊情况下，给子元素设置外边距的时候，效果会作用在父元素上
父元素无边框
设置给第一个(最后一个)子元素时
解决方案
父元素增加边框
使用父元素的上内边距来取代子元素的上外边距
在第一个子元素位置处增加空 table
行内元素以及行内块元素
行内
只左右有效，上下无效
行内块
左右正常，上下连同该行元素都会跟着改变
内边距
什么是内边距
内容与边框之间的距离
会扩大元素边框所占用的区域
属性
padding
单位
px
%
数量
同上
padding-方向:值
特殊效果
只影响到元素本身，并不会影响到其他元素
box-sizing
作用
重新指定框模型的计算模式
取值
content-box
默认值
border以及padding是在width和height基础之上额外计算的
border-box
元素的padding和border会计算在width 和 height之内
背景
背景是从边框位置开始绘制
背景颜色
background-color
背景图像
background-image
url()
背景重复
background-repeat
repeat 默认值
no-repeat 不重复
repeat-x 横向重复
repeat-y 纵向重复
背景图片尺寸
background-size
value1 value2
value1% value2%
cover
覆盖，背景图显示不完整
containt
包含，背景图显示完整，覆盖不一定全面
背景图像固定
background-attachment
scroll
fixed : 固定
背景图像定位
background-position
x y
x : 水平偏移距离
+ ： 右偏移
- ： 左偏移
y:垂直偏移距离
+ ：下偏移
- ： 上偏移
x% y%
left、center、right、top、bottom
综合属性
background：color url() repeat attachment position;
渐变
什么是渐变
多种颜色平缓变化的一个效果
渐变的分类
线性渐变
径向渐变
重复渐变
语法
线性渐变
background-image:linea-gradient(angle,color-point,....);
angle
关键字
to top
to right
to bottom
to left
角度
0deg ~ 360deg
color-point
red 0px
green 0%
blue 50%
background:linear-gradient(to top,#0aa1ed,#e4393c);
HTMLday2
列表
列表的作用
列表是将一组具有相似特征或者具有先后顺序的内容按照从上到下的顺序排列在一起
组成
列表类型
有序列表<ol></ol>
无序列表<ul></ul>
列表项
<li></li>
使用列表
有序列表
特点：按照一定的顺序将列表项标识出来
语法：<ol></ol>
只能包含列表项<li></li>
属性
type
作用：有序列表的类型
取值
1
a
A
i
I
start
作用：起始编号
取值：数字
无序列表
特点：用于列出页面上没有特定次序的一些内容
语法：<ul></ul>
只能包含列表项<li></li>
属性
type
作用：指定无序列表的列表项标识
取值：
disc，默认，实心圆
circle，空心圆
square，实心矩形
none，不显示标识
列表的嵌套
列表中允许嵌套列表以形成更为复杂的结构
但被嵌套的列表必须要放在 <li></li>中
定义列表
定义：定义列表往往用于要给出一类事物的定义的情形
标记
定义定义列表
<dl></dl>
定义定义列表中的术语
<dt></dt>
定义对属于的解释
<dd></dd>
使用场合：图文混排时使用
结构标记
作用
HTML5所提供的结构标记，专门用于表示常见的网页结构（即布局）
常见结构标记
header元素
作用
用于定义文档的页眉即页面顶部信息
在页面上允许出现多次，可以作为任何部分的头部定义
标记
<header></header>
nav元素
作用
用来定义页面的导航链接部分
标记
<nav></nav>
section元素
作用
用于定义文档中的节，也可以表示文档中的一个具体的部分即主体内容
标记
<section></section>
article元素
作用
用于定义独立于文档的其他部分内容
如：论坛中的帖子，报纸的文章，博客条目或微博信息等
标记
<article></article>
footer元素
作用
用于定义某区域的脚注信息
一般靠近于某区域底部或页面底部内容
标记
<footer></footer>
aside
作用
定义页面的额外组成部分
一般多用于侧边栏和相关引用信息等
标记
<aside></aside>
表单
表单概述
表单的作用
用于显示、收集信息，并提交信息到服务器
两个基本部分
实现数据交互的可视化界面元素（前端）昀ꗗߐĀ퇐荁
<form></form>
表单控件元素
提交后的表单处理（服务器端）
表单元素(form)
作用
收集用户信息并提交给服务器
里面包含与用户交互的表单控件元素
注意：表单元素在页面是不可见的，但不能省略
语法
标记
<form></form>
属性
action
作用
定义表单被提交时发生的动作，即要提交的服务器地址
取值
服务器端的处理程序地址，如*.jsp,*.php,*.do等
需要与服务器端开发人员沟通
method
作用
表单数据提交的方式
取值
get
明文提交，提交的数据是可以显示在地址栏上的
安全性较低
大小限制为2KB
post
隐式提交，所提交的数据是不显示在网页上的
安全性较高
无大小限制
……
enctype
作用：指定表单数据的编码方式
取值
application/x-www-form-urlencoded
multipart/form-data
text/plain
<input>元素
用户收集用户信息并提供不同的输入字段昀ꗗߐĀ灐菏
语法
标记
<input>
主要属性
type
根据不同的type属性值可以创建各种类型的输入字段
text
password
submit
reset
button
file
hidden
radio
checkbox
value
最终提交给服务器的值
name
控件的名称，提供给服务器使用
disabled
禁用控件，该属性没有值
表现形式
文本框与密码框
标记
文本框
<input type="text">
密码框
<inpuit type="password">
属性
name
名称
value
提交给服务器的值，可以是用户输入的数据
maxlength
限制输入的字符数
readonly
设置文本控件只读
placeholder
占位符，默认显示在控件上的文本
单选按钮和复选框
标记
单选按钮
<input type="radio">
复选框
<input type="checkbox">
属性
name
设置名称，并用于分组，一组单选按钮或复选框我名称必须相同
value
控件的值
checked
设置默认被选中
按钮
标记
提交按钮
<input type="submit">
重置按钮
<input type="reset">
普通按钮
<input type="button">
属性
name
value
按钮上的文本
隐藏域和文件选择框
标记
隐藏域
<input type="hidden">
文件选择框
<input type="file">
属性
隐藏域
name
value
文件选择框
name
注意
文件选择框
form的method必须为post
form的enctype必须为multipart/form-data昀ꗗߐĀⅰ胈
textarea 元素
标记
<textarea></textarea>
属性
name
名称
cols
指定文本区域的列数
rows
指定文本区域的行数
readonly
只读
select 和 option 元素昀ꗗߐĀ菈
选项框
标记
<select></select>
属性
name
名称
size
默认显示的选项数量，大于1，则为滚动列表
multiple
设置多选，该属性没有值
选项
标记
<option></option>
属性
value
选项的值
selected
预选中
其他元素
label元素
作用
关联文本与表单控件
关联后，点击文本如同点击表单控件
语法
标记
<label>文本</label>
属性
for
与该元素相联系的控件ID值
fieldset
作用
为控件分组
标记
<fieldset></fieldset>
<legend></legend>
浮动框架
作用
可以在一个浏览器窗口中同时显示多个页面文档
语法
标记
<iframe>内容</iframe>
注意
内容 ，可以为普通的文本描述，当浏览器不支持<iframe>元素时，将显示该文本描述信息
属性
src
浮动框架中的网页URL
width
宽度
height
高度
frameborder
浮动框架边框
新表单元素
新的input类型
电子邮件：type="email"
搜索类型：type="search"
URL类型：type="url"
电话号码类型：type="tel"
数字类型：type="number"昀ꗗߐĀ㿐蠓
min
max
step
范围类型：type="range"
min
max
value
step
颜色类型：type="color"
日期类型：type="date"
周类型：type="week"
月份类型：type="month"
CSS3Basic4
显示
显示方式
属性：display
none
让生成的元素没有框
脱离文档流
block
块级元素
独占一行
允许修改尺寸
正常处理垂直外边距
inline
行内
inline-block
行内块
位置与行内元素一样
允许修改宽和高
table
独占一行
尺寸以内容为准
... ...
显示效果
显示/隐藏
属性：visibility
visible ： 可见的
hidden ：隐藏的
面试：display:none 和 visiblity:hidden的区别
display：none ； 脱离文档流，所以不占页面空间
visibility：hidden；还在文档流中，所以只是隐藏了，空间还占据
透明度
属性：opacity
0~1之间的数字(小数)
数字越小 透明度越高
opacity：0.1；若隐若现
垂直居中对齐
属性：vertical-align
行内块元素
单元格
img
取值
top
middle
bottom
baseline
光标
cursor
default
pointer
crosshair
text
wait
help
列表
列表项标志
list-style-type
none
disc
... ...
列表项图像
list-style-image
url(图像路径)
列表项位置
list-style-position
outside
inside
列表属性
list-style
type url() position;
常用：list-style:none;
定位
定位属性
position
static ： 静态，默认
relative ：相对定位
absolute ：绝对定位
fixed ：固定定位
作用：实现元素的特殊定位方式，relative，absolute，fixed 称之为 “已定位元素”
偏移属性
top属性
上下移动元素
+ ：下移动
- ：上移动
bottom属性
上下移动
+ ： 上移动
- ：下移动
left 属性
左右移动
+ ： 右移动
- ： 左移动
right 属性
左右移动
+ ： 左移动
- ：右移动
z-index
堆叠顺序
相对定位
what？
元素框会相对于它原来的位置偏移某个距离
属性 & 值
position:relative;
配合偏移属性实现位置移动
测试：对一个已定位元素实现 四个偏移属性值
使用场合
自身元素的位置微调
配合着 绝对定位 来使用
绝对定位
what ？
脱离文档流-不占据页面空间
会相对于最近的已定位祖先元素去实现定位
如果没有已定位的祖先元素，那么就相对于最初的包含块-body
属性 & 值
position:absolute;
注意
绝对定位的元素 都将 变成块级元素
margin的处理，除了 auto外，其他数值均正常显示
#d1{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }
可以调整堆叠顺序
堆叠顺序
属性：z-index
取值：数字
注意：只有在已定位元素中才能使用
固定定位
what
将元素固定在页面的某个位置处
不会随着滚动条的滚动而发生位置的变化
脱离文档流，不占据页面空间
属性 & 值
position:fixed
注意
脱离文档流
会变为块级元素
永远都是相对于body实现位置初始化
CSS3Core1
复杂选择器
兄弟选择器
相邻兄弟选择器
选择器1+选择器2
通用兄弟选择器
选择器1~选择器2
属性选择器
[attr]
匹配页面中具备attr属性的所有元素昀ꗗߐĀ剰潵
[attr1][attr2]
匹配页面中既有attr1属性同时也具备attr2属性的元素
elem[attr]
匹配页面中具备attr属性的elem元素
[attr=value]
匹配页面中attr属性值为value的元素
伪类选择器
目标伪类
:target
匹配 活动的html 锚元素
结构伪类
:first-child
匹配 属于其父元素中的首个子元素
:last-child
匹配属于其父元素中的最后一个子元素
:nth-child(n)
匹配属于其父元素中的第n个子元素
:empty
匹配每个为空的元素
:only-child
匹配属于其父元素中的唯一子元素
否定伪类
:not(selector)
将满足selelctor选择器的元素排除出去
伪元素选择器
:first-letter或 ::first-letter
首字符
:first-line 或 ::first-line
首行
::selection
被用户选取的部分
内容生成
伪元素择器
:before 或 ::before
匹配 元素的内容区域 之前
:after 或 ::after
匹配 元素的内容区域 之后
属性：content
生成内容
字符串
图像:url()
解决问题
浮动元素
.clear:after{ content:""; display:block; clear:both; }
外边距的溢出
选择器:before{ content:""; display:table; }
弹性布局
弹性布局
指定某元素内子元素的布局方式，为布局提供最大的灵活性
概念
弹性布局的容器
弹性布局的项目
主轴(Main Axsis)
决定项目们排列方向的一根轴
交叉轴（Cross Axsis）
与主轴相交叉轴的一根轴
语法
display
flex
inline-flex
注意
元素设置为flex容器后，子元素的float,clear,vertical-align属性会失效
元素设置为flex容器后，子元素的尺寸允许被修改
容器text-align也会失效
容器属性
flex-direction
作用
决定在主轴的排列方向
取值
row
主轴为水平方向，起点在左端，默认值
row-reverse
主轴为水平方向，起点在右端
column
主轴为y轴，起点在上端
column-reverse
主轴为y轴，起点在底端
flex-wrap
作用
如果一条轴线排不下，如何换行
取值
nowrap
默认值，不换行
wrap
换行，第一行在上方
wrap-reverse
换行，第一行在下方
flex-flow
作用
flex-direction 和 flex-wrap的缩写
取值
direction wrap
justify-content
作用
定义了项目在主轴上的对齐方式
取值
flex-start
主轴的起点对齐
flex-end
主轴的终点对齐
center
居中对齐
space-between
两端对齐，项目之间的间隔都相等
space-around
每个项目两侧的间隔相等
align-items
作用
定义项目在交叉轴上如何对齐（一行项目）
取值
flex-start
在交叉轴的起点对齐
flex-end
在交叉轴的终点对齐
center
在交叉轴的中间对齐
baseline
在项目的第一行文字的基线对齐
stretch
默认值，如果项目未设置高度或auto，将站门整个容器的高度
项目属性
order
项目排序
取值：数字，数字越大越靠后
flex-grow
定义项目的放大比例，默认为0，即如果有剩余空间，也不放大
取值：整数数字
flex-shrink
定义项目的缩小比例，默认为1
align-self
定义项目在交叉轴上的对齐方式
取值
flex-start
flex-end
center
stretch
baseline
auto
CSS Hack
CSS类内部Hack
+ ：IE7，6
- : IE 6
\0 : IE 8，9，10
\9\0：IE9 ,10
选择器Hack
*p{ } //IE6
头部引用Hack
<!--[if 条件 IE 版本]> 条件注释内容 <![endif]-->
条件
省略
判断是否为指定版本 或是否为 IE浏览器
gt
判断是否大于条件版本浏览器(不包含)
gte
lt
lte
!
CSS3Core2
转换
介绍
改变元素在页面中的 位置，尺寸，角度，形状
2D转换 和 3D转换
属性
转换属性
transform
none
transform-functions
多个转换函数之间用空格隔开
转换原点
transform-origin
v1 v2
x轴 y轴
v1 v2 v3
x y z
单位
px
%
关键字
2D转换
位移
函数：
translate(x)
+ : 向右
- ：向左
translate(x,y)
translateX(x)
translateY(y)
+ ： 向下
- ： 向上
缩放
函数
scale(value)
只给一个值，相当于 x轴和y轴的缩放是相等的
scale(x,y)
scaleX(x);
scaleY(y)
取值
小于1 大于 0
缩小
大于1
放大
小于0
水平和垂直反转
放大
旋转
函数
rotate(ndeg)
n 为正 顺时针转
n为负 逆时针转
注意
1、转换原点可能影响转换效果
2、元素转换后，坐标轴一同旋转的。旋转后做位移 可能会有不同的效果
倾斜
函数
skew(x)
让元素向着x轴的方向(横向)倾斜，实际改变的是y轴的倾斜角度,取值为正 逆时针
skew(x,y)
skewX(x)
skewY(y)
让元素向着y轴的方向倾斜(纵向)，实际改变的是x轴的倾斜角度，取值为正，顺时针
3D转换
属性
perspective：value；
注意
该属性要加在3D转换元素的父元素上
3D旋转
rotatex(xdeg)
rotatey(ydeg)
rotatez(zdeg)
rotate3d(x,y,z,ndeg)
过渡
什么是过渡
使CSS属性值在一段时间内平滑过渡
主要观察的是过程和结果
属性(要素)
过渡属性
transition-property
颜色属性
取值为数值
转换 - transform
渐变属性
visibility
阴影
过渡时长
transition-duration
s | ms
1000ms = 1s
300ms / 0.3s / .3s
过渡速度时间曲线函数
transition-timing-function
ease
linear
ease-in
ease-out
ease-in-out
过渡延迟
transition-delay
过渡属性(综合)
transition：property duration timing-function delay;
动画
使得元素从一种样式逐渐变化为另一种样式(复杂的过渡)
动画使用步骤
声明动画
为动画起名，并且设置 关键帧
关键帧 ：某个时间点上，元素的特殊样式
为元素调用动画
声明动画
@keyframes 名称{ 0% | from{ 样式； } ....... 100% | to{ 样式; } }
@-webkit-keyframes 名称{}
使用动画
animation-name
绑定的动画名称
animation-duration
动画一个周期的时长
animation-timing-function
速度时间曲线函数
animation-delay
延迟
animation-iteration-count
播放次数
具体数值
infinite : 无限次
animation-direction
播放方向
normal
正常
reverse
逆向
alternate
轮流播放
animation：name duration timing-function delay iteration-count direction
animation-fill-mode
动画播放前后的填充状态
none ：默认
forwards ：动画完成后，保持在最后一个帧的状态上
backwards：动画播放前（延迟时间内），保持在第一个帧的状态上
both
animation-play-state
paused ： 暂停
running ： 播放
CSS优化
CSS优化概述
减轻服务器压力
缩短服务器响应时间
提高用户的体验度
CSS优化原则
尽量减少HTTP请求个数
CSS sprites:合并多个背景图像到一个单独图像，然后通过background-image和background-position进行调整 Image maps：结合多个图像到一个单独图像。
页面顶部引入CSS
可以提高页面加载速度 样式表放在头部，允许页面逐步呈现
将CSS和JS放到外部文件中
页面引入外部文件，将由浏览器缓存 后续页会使用缓存
CSS代码优化
合并样式
缩小样式文件
选择更优的样式属性值
减少样式重写
代码压缩
不要在HTML中缩放图像
避免空的src和href
Bootstrap1
响应式网页
概述
什么是响应式
智能地根据用户行为或使用设备环境进行相应的布局
响应式网页的构成
流式网格布局
可伸缩的图片和文字
css3 Media Query技术
测试
使用真实物理设备测试
使用第三方模拟器软件测试
使用浏览器提供的设备模拟器测试
编写
head中：<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
不适用绝对宽度，相对大小的字体
流式布局
图片自适应
选择加载css
css的@media规则
Bootstrap起步
概述
移动设备优先，兼容pc端的响应式网页
构成
起步
全局css样式
组件
jQuery插件
定制
环境搭建
基本模板
声明
元数据
样式
脚本
兼容性
bootstrap.css
css Reset
使用css代码改写浏览器的默认设置，保证兼容性
box-sizing
用于赊着元素的框模型的方式
取值
content-box
border-box
全局css样式
html5文件类型
<!DOCTYPE html> <html lang="zh-cn">...</html>
移动端设备优先
<meta name="viewport" content="width=deice-width,initial-scale=1">
css全局样式
background-color：#fff； @font-family-base、@font-size-base和@line-hieght-base
布局容器
.container
.container-fluid
按钮
五种颜色
（首选项）Primary
（成功） Success
（一般信息）lnfo
（警告）Warning
（危险）Danger
三种尺寸
（大按钮）Large button
（默认尺寸）Default button
（小按钮）Small button
图片
响应式图片
class=“img-fluid”
图片形状
rounded
rounded-circle
img-thumbnail
文本
对齐
text-left、text-center、text-right、text-justify、text-nowrap
大小写
text-lowercase、text-uppercase、text-capitallize
颜色
text-success、text-warning、text-error、text-info、text-primary
Bootstrap2
全局css样式
全局css样式
列表
无序列表和有序列表
<ul>、<ol>
列表样式
.list-unstyled
.list-inline
.list-group
.list-group-item
.active
.disabled
表格
基本表格
.table
条纹状表格
.table-striped
带边框表格
.table-bordered
鼠标悬停
.table-hover
响应式表格
.table-reponsive
辅助样式
浮动
.float-left
.float-right
.clearfix
显示
.visible
.invisible
背景
bg-success/warning/error/info/primary
边框
.border/border-0/border-top/border-left/……
居中
.mx-auto
尺寸
.w-*/h-*/m-*/p-*
栅格布局
概述
随屏幕或者视口（viewport）尺寸的增加，系统会自动分为最多12列， 通过一系列的行（row）与列（column）的组合来创建页面布局
工作原理
.container/.container-fluid----》row----》column
内容放置在column中，只有列可以做row的直接子元素
布局
每行12列，通过不同的列来划分元素的占地宽度
弹性布局
d-flex/d-inline-flex 类创建弹性容器
响应式布局
.d-sm/md/lg/xl-flex
水平方向
.flex-row
.flex-row-reverse
垂直方向
.flex-column
.flex-column-reverse
内容排列
justify-content-*
表单
垂直表单
<div class="form-group"> <label></label> <input /> </div>
水平表单
<form class="form-inline"><div class="form-group"></div></form>
单行输入框
.form-control
多行文本域
form-control
多选和单选框
内联多选和单选框
下拉列表
form-control
组件
常用组件
下拉菜单
基本格式
<div class="dropdown|dropup"> <button data-toggle="drpdown"> <ul class="dropdown-menu">
标题
<li class="dropdown-header">
分割线
<li class="divider"></li>
禁用
<li class="disabled">
按钮组
基本按钮组
<div class="btn-group">
按钮工具栏
<div class="btn-toolbar">
尺寸
.btn-group-lg|sm|xs
垂直排列
<div class="btn-group-vertical">
警告框
<div class="alert alert-warning"></div>
<div class="alert alert-success"></div>
......
<a href="#" class="alert-link"></a>
Bootstrap3
组件
常用组件
导航
选项卡
<ul class="nav nav-tabs"> <li role="presentation" class="active">
胶囊式标签页
<ul class="nav nav-pills">
垂直标签
<ul class="nav nav-pills flex-column">
对齐方式
<ul class="nav nav-tabs justify-content-* ">
导航条
导航条
<div class="navbar navbar-expand-*" >
导航条按钮
<button class="btn navbar-toggler " data-toggle="collapse" data-target="#id">
导航条项目
<p class="nav-item">
非导航链接
<a href="#" class="nav-link">
折叠
.collapse 用于指定一个折叠元素，点击按钮后会在隐藏与显示之间切换
固定
.fixed-top|bottom
卡片
创建卡片
<div class="card">
卡片头部
<div class="card-header">头部</div>
卡片内容
<div class="card-body">内容</div>
卡片底部
<div class="card-footer">底部</div>
媒体对象
结构
<div class="media">
构成
.media-body、align-self-*
列表组
用于显示多个条目
<ul class="list-group"> <li class="list-group-item list-group-item-success">
定制内容
<h4 class="list-group-item-heading"> <p class="list-group-item-text">
轮播
创建轮播 .carousel
为轮播添加指示符 .carousel-indicators
添加要切换的图片 .carousel-inner
指定每个图片的内容 .carousel-item
模态框
<div class="modal">
<div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title"> <div class="modal-body"> <div class="modal-footer"
其他组件
徽章
<button class="btn btn-primary" type="button"> Messages <span class="badge">4</span> <button>
巨幕
<div class="jumbotron"><h1> Hello,world</h1></div>
分页
分页条
<ul class="pagination">
<li class="page-item active">...</li>
尺寸
.pagination-lg
.pagination-sm
面包屑导航
<ul class="breadcrumb"> <li class="breadcrumb-item"> <a href=“#”>…</a> </li> </ul>
缩略图
<div class="img-thumbnail"> <img src="img/1.jpg" ></div>
进度条
<div class="progress"> <div class="progress-bar bg-success" style="width:40%"></div> </div>
Bootstrap4
Bootstrap定制
SCSS概述
动态样式语言
动态语言为css赋予了动态语言的特性，极大提高了样式语言的可维护性
什么是scss
Scss 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 、嵌套 、混合 、导入、函数等高级功能，这些拓展令 CSS 更加强大与优雅
使用scss
服务器
1.安装nodejs解释器
2.安装scss编译程序:npm install -g node-sass
3.在命令行运行scss转换程序(node-sass d:/input.scss d:/output.css)；或者把scss转换程序配置为Webstorm中的“文件监视器”(node-sass -w d:/input.scss d:/output.css )
LESS语法
注释
多行注释
/*多行注释，会被转换到生成的.css文件中*/
单行注释
// 单行注释，不会被转换到生成的.css文件中
变量
可以将需要多次使用的数据声明为一个变量，反复使用。
ex：$jd_red:#e4393c; $thin_border:2px;
嵌套规则
scss可以让我们以嵌套的方式简化样式的编写且可读性更高
ex： #content { div{ h1 { color: #333 } p { margin-bottom: 1.4em } } a{ background-color: #EEE } }
父选择器的标识符&
div a { color: blue; &:hover { color: red } }
属性嵌套
nav { border: { style: solid; width: 1px; color: #ccc; } }
导入scss文件
使用scss的@import规则导入文件，可以省略.scss文件后缀
混合器
可以通过sass的混合器实现大段样式的重用。
混合器使用@mixin标识符定义
定义混合器 @mixin rounded-corners { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
使用混合器 .notice{ background-color: green; border: 2px solid #00aa00; @include rounded-corners; }
带参混合
通过参数，可以使用混合器把样式中的通用样式抽离出来，然后在其他地方重用。
@mixin link-colors($normal, $hover, $visited) { color: $normal; &:hover { color: $hover; } &:visited { color: $visited; } }
使用带参混合器
a { @include link-colors(blue, red, green); }
继承
继承是说一个选择器可以继承另一个选择器定义的所有样式
. error{ border: 1px solid red; background-color: yellow; }
.seriousError { @extend .error; border-width: 3px; }
运算
任何数字、颜色、字符串等变量都可以进行运算
$base：5%; @filler:$base*2;
p { color: #010203 + #040506; }
font-family: sans- + "serif";
函数
颜色自定义函数
rgba(red,green,blue,alpha)
hsl(hue,saturation,lightness);
数字函数
round($value)：将数值四舍五入，转换成一个最接近的整数；
ceil($value)：向上取整；
floor($value)：向下取整；
min($numbers…)：找出几个数值之间的最小值；
max($numbers…)：找出几个数值之间的最大值；
字符串功能
unquote（$string）:删除字符串中的引号；
quote（$string）：给字符串添加引号；
To-upper-case（$string）：将字符串小写字母转换为大写字母
To-lower-case（$string）：将字符串大写字母转换为小写字母
自定义函数
Scss支持自定义函数使用关键词@function定义，需要调用 @return 输出结果。
@function 函数名($n) { @return 运算表达式; }
控制指令
选择器 { @if 条件{ …… } }
选择器 { @if $变量== 值{ …… } @else if $变量== 值{ …… } @else { …… } }
CSS3Basic3
文本格式化
字体属性
字体系列 font-family
字体1,字体2
字体大小 font-size
px 或 pt 或 em
字体加粗 font-weight
normal
bold
value
字体样式 font-style
normal
italic
小型大写字母 font-variant
normal
small-caps
字体属性 font
style variant weight size family;
文本属性
文本颜色 color
文本排列 text-align
left
center
right
justify
两端对齐
文字修饰 text-decoration
none
underline
line-through
overline
行高 line-height
一行数据所占的高度，如果行高大于文字本身高度，那么该行文本将在行高的范围内垂直居中
使用场合
一行文本垂直居中
将行高与元素的高度设置为一致
多行文本的行间距
取值
指定数值
无单位的数字表示当前字体大小的倍数
font:12px/24px "微软雅黑";
文字大小为12px，行高为24px，字体是微软雅黑
首行文本缩进 text-indent
px
文本阴影 text-shadow
h-shadow v-shadow blur color
表格
常用属性
padding
width，height
文本格式化
字体
文本
background
border
vertical-align
top
middle
bottom
特有属性
边框合并 border-collapse
默认值：separate
collapse
边框边距 border-spacing
前提：必须为分离边框模式 即 border-collapse：separate
1个值
水平和垂直间距相同
2个值
第一个值：水平间距
第二个值：垂直间距
标题位置 caption-side
top
bottom
显示规则 table-layout
auto
自动表格布局
单元格大小会适应内容大小
复杂表格时加载速度较慢
适用于不确定每列大小时使用
传统表格体现方式
fixed
固定表格布局
列宽度取决于table和td中设置的宽度，与内容无关
加速显示表格
算法较快，但是不灵活
浮动
定位概述
所谓定位指的就是元素出现在网页的位置昀ꗗߐĀ㟰薮
定位的分类
普通流定位
浮动定位
相对定位
绝对定位
固定定位
普通流定位
普通流定位，又称为文档流定位，是页面元素的默认定位方式
页面中的块级元素：从上到下的方式一个接一个的排列
页面中的行内元素：从左到右的方式一个接一个的排列
浮动定位
概述（特征）
将元素排除在文档流之外即脱离文档流，元素不再占据页面空间（但依然会显示），但其他未浮动元素要目前补位
元素只会在当前行浮动
浮动元素会停靠在父元素的左边或右边，或平级的其他已浮动元素的边缘上
浮动元素依然会在包含框内
浮动元素能够让多个块级元素在一行内显示
属性
float
none
默认值，没有任何的浮动效果
left
左浮动，让该元素停靠在父元素的左边，或停靠在左侧已有的浮动元素边缘上
right
右浮动，让该元素停靠在父元素的右边，或停靠在右侧已有的浮动元素边缘上
浮动带来的特殊效果
一行内，显示不下所有的已浮动元素时，最后一个将换行（有可能被卡住）
元素一旦浮动起来之后，那么宽度将变成自适应(宽度由内容决定)
元素一旦浮动起来之后，那么就将变成块级元素,尤其对行内元素，影响最大
文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的，会巧妙的避开浮动元素
清除浮动
作用
清除当前元素前面元素浮动所带来的影响
语法
属性
clear
取值
none
默认值，不做任何清除浮动的操作
left
清除前面元素左浮动带来的影响
right
清除前面元素右浮动带来的影响
both
清除前面元素所有浮动带来的影响
浮动元素对父元素的影响
影响
由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0
解决方案
直接设置父元素的高度
设置父元素浮动
为父元素设置overflow属性
hidden
auto
父元素中，追加空子元素，并设置其clear属性为both