HTML
HTML的全称为超文本标记语言(Hyper Text Markup Language)，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
标记语言语法
1.必须在一对尖括号<>中
2.有开始也应有结束
<!-- style标签的开始和结束 -->
<style>
.my-back{
background: #ffb800;
}
</style>
<!-- title标签的开始和结束 -->
<title>管理界面大布局示例</title>
<!-- link标签的开始和结束 -->
<link href="mycss/ui.css" rel="stylesheet"/>
3.注释使用一对专用的尖括号<!-- -->
4.标签可以拥有属性，值使用一对双引号或单引号包裹。
<img src="img/icon-v2.png" class='ui-nav-img' οnclick="showInfo()"/>
整个img标签拥有3个属性，一个为src值为img/icon-v2.png，另一个为class值为ui-nav-img，最后一个是onclick值为showInfo()
5.HTML不区分大小写，标签都可以嵌套
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect> <a href="javascript:;"> <i class="layui-icon layui-icon-more-vertical"></i> </a> </li>
上述代码一共3个标签依次嵌套，第一行li是a的父标签，第二行a即是li的子标签，同时又是第3行i的父标签；i是a的子标签，也是li的子标签但非直接子级；
HTML文档结构
标准结构使用html标签包裹head(头部部分)和body(主体部分):
<html> <head> <!-- 网页描述信息设置信息 --> </head> <body> <!-- 网页上可视化的具体内容 --> </body> </html>
head中的标签：
| 标签 | 描述 |
|---|---|
| <head> | 定义了文档的信息 |
| <title> | 定义了文档的标题 |
| <base> | 定义了页面链接标签的默认链接地址 |
| <link> | 定义了一个文档和外部样式CSS文件之间的关系 |
| <meta> | 定义了HTML文档中的元数据（描述或配置信息） |
| <script> | 定义了客户端的javascript脚本文件 |
| <style> | 定义了HTML文档的样式文件 |
简单列举：
<head>
<title>腾讯网</title>
<!-- 网页编码 -->
<meta charset="gb2312">
<!-- IE8以上使用Edge -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- QQ自定义的meta元素 -->
<meta name="theme-color" content="#FFF" />
<!-- 文档针对移动设备进行了优化 -->
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!-- Keywords和description 搜索引擎使用 -->
<meta content="资讯,新闻,财经,房产,视频,NBA,科技,腾讯网,腾讯,QQ,Tencent" name="Keywords">
<meta name="description"
content="腾讯网从2003年创立至今，已经成为集新闻信息，区域垂直生活服务、社会化媒体资讯和产品为一体的互联网媒体平台。腾讯网下设新闻、科技、财经、娱乐、体育、汽车、时尚等多个频道，充分满足用户对不同类型资讯的需求。同时专注不同领域内容，打造精品栏目，并顺应技术发展趋势，推出网络直播等创新形式，改变了用户获取资讯的方式和习惯。" />
<!-- 以下是当前页面的javascript脚本 -->
<script type="text/javascript">
try {
if (location.search.indexOf('?pc') !== 0
&& /Android|Windows Phone|iPhone|iPod/i.test(navigator.userAgent)) {
window.location.href = 'https://xw.qq.com?f=qqcom';
}
} catch (e) {}
</script><!--[if !IE]>|xGv00|2d5210e6c1b95e3bf4b8983f9cb00ab3<![endif]-->
<!-- 以下是外部的javascript脚本 -->
<script src="asset/lib/jquery/jquery/jquery-1.11.1.min.js"></script>
<script src="ext2020/configF2017/5e857945.js" charset="utf-8"></script>
<script src="qqindex2021/qqhome/setGray.js" charset="utf-8"></script>
<!-- 以下是当前页面的css样式 -->
<style>
.my-back{
background: #ffb800;
}
</style>
<!-- 以下是外部的css样式文件 -->
<link rel="shortcut icon" href="//mat1.gtimg.com/www/icon/favicon2.ico" />
<link rel="stylesheet" href="main.b50036e75b669ecd34e0.min.css">
</head>
body中的标签：
主体部分的内容都是可视化的，大致分为文字，段落，列表，图片，超链接，表格，表单，框架集；
文字
| 标签 | 描述 |
|---|---|
| <font> | 文本标签 属性：size(大小),color(颜色),face(字体) |
| <b> | 粗体 |
| <u> | 下划线 |
| <i> | 斜体 |
| <sub> | 下标(注) |
| <sup> | 上标(注) |
| <marquee> | 跑马灯 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文字</title>
</head>
<body>
天王盖
<font size="7">地虎</font><br/>
<font color="yellow" size="+4">小鸡</font>炖
<font size="-4">蘑菇</font>
<br/> 12345
<br/> 上山
<font size="+2">
<i>
<b>打</b>
</i>
</font>老虎
<br/>--------------------------------<br/>
a<sup>2</sup>-b<sup>2</sup>=(a+b)*(a-b)<br/>
H<sub>2</sub>O,CaCO<sub>3</sub>
<br/>--------------------------------<br/>
<marquee direction="right" scrolldelay="1000" >你好！</marquee>
</body>
</html>
特殊字符：
| 标签 | 描述 |
|---|---|
| < | 小于 |
| > | 大于 |
| ≤ | 小于等于 |
| ≥ | 大于等于 |
| © | 版权 |
| ® | 商标 |
| | 空格 |
| " | 双引号 |
| & | &符号 |
其他的参考文档。
段落
包括换行，线条，标题，层，段，块，格式化元素，除过span没有换行功能外，其他都会换行；
| 标签 | 描述 |
|---|---|
| <br/> | 换行 |
| <hr/> | 线条 属性：width(长);size(宽) |
| <h1>~<h6> | 标题(1~6级) |
| <span> | 块(不会换行) |
| <div> | 层 |
| <p> | 段落 |
| <pre> | 保留格式输出 |
列表
无序列表ul和有序列表ol，以及列表中的项li
| 标签 | 描述 |
|---|---|
| <ol> | 有序列表 属性 type="1,a,A,i,I" |
| <ul> | 无序列表 属性 type="disc,cricle,square" |
| <li> | 列表中的项 |
| <dl> | 数据列表 |
| <dt> | 列表标题 |
| <dd> | 列表数据 |
如：
<ol type="I"> <li>赵丽颖</li> <li>关丽颖</li> <li>迪丽颖</li> <li>马丽颖</li> </ol> <dl> <dt>今日新闻</dt> <dd>新闻001</dd> <dd>新闻002</dd> <dd>新闻003</dd> </dl>
图片
图片主要是img，属性src表示要显示的图片路径，路径有三种:
绝对路径：以http或https或ftp开头的
相对路径：以当前文档为参考的路径 ( 向上一级为../ )
物理路径：也加本地路径以盘符开头(C:/....)
还有width和height调整图片大小，title表示鼠标移动到图片上的提示(有的浏览器支持的是alt)
超链接
超链接主要是a标签
属性href表示要显示的网页地址，路径和图片一样支持3种。
属性target表示要显示的位置
-
_blank 在空白页面(新页面)打开
-
_self 在当前页面打开，默认属性
-
_parent 在父区域中打开（框架集中）
-
_top 在最顶层区域打开区域中打开（框架集中）
-
自定义的区域 在自定义区域打开区域中打开（框架集中）
属性name定义网页上的锚点，使用 href 跳转到指定的锚点位置。
<a name="myThird"/> <!-- 定义 --> <!-- 其他html略 --> <a href="#myThird"/> <!-- 当前页面使用 --> <a href="01aname.html#myThird">测试02</a><!-- 其他页面使用，也可以显示到锚点位置 -->
表格
主要有table,tr,td组成
| 标签 | 描述 |
|---|---|
| <table> | 表格 属性：border 边框 属性：bgcolor 背景色 属性：align 水平对齐 属性：valign 垂直对齐 属性：colspan 列合并 属性：rowspan 行合并 属性：cellspacing 单元格之间距离 属性：cellpadding 单元格内部填充距离 |
| <tr> | 行 |
| <td> | 单元格 |
| <th> | 标题单元格 |
| <thead> | 标题行 |
| <tbody> | 表格内容 |
| <tfoot> | 表格页脚 |
表单
form和很多的表单元素
表单元素
主要指输入框，选择框，下拉列表等用户可以填写或选择或点击的元素
input元素：
| 标签 | 描述 |
|---|---|
| <input type="text"> | 文本框 属性: value 默认填充的值 |
| <input type="password"> | 密码框 属性: value 默认填充的值 |
| <input type="hidden"> | 隐藏框 属性: value 默认填充的值 |
| <input type="radio"> | 单选框 属性: value 选中后的值 属性: checked 默认选中(是checked="checked"的简写) 属性: name 单选框的分组 |
| <input type="checkbox"> | 复选框 属性: value 选中后的值 属性: checked 默认选中(是checked="checked"的简写) |
| <input type="button"> | 普通按钮 属性: value 按钮上的文字 |
| <input type="submit"> | 提交按钮(form中使用) 属性: value 按钮上的文字 |
| <input type="reset"> | 重置按钮(form中使用) 属性: value 按钮上的文字 |
| <input type="image"> | 图片按钮(提交按钮，form中使用) 属性: src 按钮上的图片 |
下拉列表元素：
| 标签 | 描述 |
|---|---|
| select | 下拉列表 |
| option | 下拉列表中的项 属性：value 选中后的值 属性: selected 默认选中(是selected="selected"的简写) |
多行文本域：
| 标签 | 描述 |
|---|---|
| textarea | 多行文本域， 属性: rows 行数 属性: cols 列数 |
推荐在一行中填写默认的值，如:abcxyz
多行文本域： <textarea rows="10" cols="40">abcxyz</textarea>
表单
表单标签为form，在网页中提交数据时使用，会自动将表单中的所有元素的name属性和value属性拼接或封装起来并向服务器发送数据。
| 标签 | 描述 |
|---|---|
| form | 包含表单元素的表单 属性: action 要提交的服务器的链接(相当于a标签的href) 属性: target 在哪里显示服务器返回内容(相当于a标签的target) 属性: method 提交的方式，默认是get提交(post更安全) 属性: enctype 提交的数据格式，默认是字符串提交application/x-www-form-urlencoded，如有上传文件该属性设置为multipart/form-data |
没有name无法拼接
表单元素没有name <form action="01aname.html"> 账号：<input /> <br/> 密码：<input type="password" /><br/> <input type="submit"/> <input type="reset"/> </form> <!-- 最终点击提交按钮提交的数据为 127.0.0.1:8020/html02/01aname.html -->
只拼接有name的表单元素值：
表单元素设置了name
<form action="01aname.html">
账号：<input name="uname"/> <br/>
密码：<input type="password" name="upwd"/><br/>
<input type="submit"/>
<input type="reset"/>
</form>
<!--
点击提交按钮提交的数据为
http://127.0.0.1:8020/html02/01aname.html?uname=&upwd=
当账号填写100，密码填写999时点提交按钮提交的数据为
http://127.0.0.1:8020/html02/01aname.html?uname=100&upwd=999
-->
post请求和get请求的区别
（1）post请求更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中，get请求的是静态资源，则会缓存，如果是数据，则不会缓存）
（2）post请求发送的数据更大（get请求有url长度限制，http协议本身不限制，请求长度限制是由浏览器和web服务器决定和设置）
（3）post请求能发送更多的数据类型（get请求只能发送ASCII字符）
（4）传参方式不同（get请求参数通过url传递，post请求放在request body中传递）
（5）get请求产生一个TCP数据包；post请求产生两个TCP数据包（get请求，浏览器会把http header和data一并发送出去，服务器响应200返回数据；post请求，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 返回数据）
注意：在发送 POST 的时候都没有带 Expect 头，server 也自然不会发 100 continue。
post请求的过程：
（1）浏览器请求tcp连接（第一次握手）
（2）服务器答应进行tcp连接（第二次握手）
（3）浏览器确认，并发送post请求头（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）
（4）服务器返回100 Continue响应
（5）浏览器发送数据
（6）服务器返回200 OK响应
get请求的过程：
（1）浏览器请求tcp连接（第一次握手）
（2）服务器答应进行tcp连接（第二次握手）
（3）浏览器确认，并发送get请求头和数据（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）
（4）服务器返回200 OK响应
网络环境好的情况下，发一次包和发两次包的时间差别基本可以忽略。而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。
框架集
页面分成不同的区域，框架frame，框架集frameset(和body冲突)，内嵌框架iframe。
上下结构：
<!-- 上下两个区域 上面区域占30% 下面区域占70% --> <frameset rows="30%,*"> <frame /> <frame /> </frameset>
上中下结构：
<!-- 上中下三个区域 上面区域占30% 中间区域占30% 下面区域占40% --> <frameset rows="30%,30%,*"> <frame /> <frame /> <frame /> </frameset>
先上下结构，再将下结构分成左右两部分:
<!-- 上下两个区域 上面区域占20% 下面区域占80% --> <frameset rows="20%,*"> <frame /> <!-- 下面区域继续分成 左右两部分 --> <frameset cols="20%,*"> <frame /> <frame /> </frameset> </frameset>
| 标签 | 描述 |
|---|---|
| frameset | 框架集 属性：frameborder 边框 |
| frame | 框架 属性：noresize 不能改变大小 属性：name 该区域的名称，用于a标签或form中的target 属性：src 该区域会显示的页面 |
| iframe | 内嵌框架，比framese兼容性好 属性：frameborder 边框 属性：noresize 不能改变大小 属性：name 该区域的名称，用于a标签或form中的target 属性：src 该区域会显示的页面 |
新增的元素属性
| 标签 | 描述 |
|---|---|
| type="number" | 只能输入数字 |
| type="email" | 只能输入邮箱 |
| type="tel" | 只能输入手机号(验证有问题) |
| type="date" | 选择日期 |
| type="time" | 选择时间 |
| type="month" | 选择月份(年月) |
| type="week" | 选择周(年周) |
| type="search" | 输入搜索内容(验证有问题) |
| placeholder="提示内容" | 文本框的提示内容 |
| required="required" | 必填项(简写required) |
| autofocus="autofocus" | 自动聚焦(得到焦点) |
| autocomplete=”on“ | on打开自动补全功能，off关闭(有问题) |
音频视频标签
audio: 支持mp3
video：支持mp4
source: 播放内容列表，属性src内容和type类型
| 属性 | 描述 |
|---|---|
| src | 要播放的内容 |
| controls="controls" | 显示控制面板,简写controls |
| autoplay="autoplay" | 自动播放,简写autoplay |
| loop="loop" | 循环播放,简写loop |
CSS
层叠样式表(Cascading Style Sheets)，也是一种标记语言，主要用于设置HTML标签的外观（字体，边框，背景，内容，定位，显示等）效 果，从而达到美化页面的效果。
语法和结构
-
样式表由选择器和内容组成 ，如：选择器 { 多条内容;}
div { width:200px; height:50px }
/* 内容1 ; 内容2 */
/*选择器 属性1:值1 属性2:值1 */
-
属性和属性值以"键值对"形式定义，键:值
-
属性之间使用“;”隔开
-
不区分大小写
-
选择器由字母或数字组成，但不要使用数字开头，可以是一样"."或"#"开头
.btn01{ }
#btn02{ }
span{ }
-
注释只有 /* */ ，单行多行都可以使用
代码风格
紧凑格式，体积小，可读性差：
div{width:200px;height:50px}
展开格式，体积大，可读性好：
.icon-pic{
background-position:0 -546px;
padding-left:28px
}
种类
行内样式表(内联样式)：写在HTML标签中的style属性中
<!-- 该div中的文本颜色为 红色;字体大小为 14px --> <div style="color:red;font-size:14px"> </div>
内部样式表(内嵌样式): 写在style标签中的
<!-- 该style中定义的作用于当前页面的span样式 -->
<style>
span{
color:green;
font-size:16px
}
</style>
外部样式表(外链样式):写在.css文件中，使用link标签引入
/* 专门的css代码保存在t01.css */
ul{
color:blue;
font-size:12px
}
使用时，需要引入t01.css
<!-- 01test.html --> <link href="css/t01.css" rel="stylesheet" type="text/css"/>
href代表css文件的位置，rel代表该文件的类型（stylesheet为样式表）,type不是必须的；
推荐内部样式表和外部样式表定义在head标签中。
CSS选择器
选择器主要作用为声明该样式的适用范围，大致分为基本选择器和复合选择器
基础选择器
标签选择器：以HTML标签命名的选择器，适用于当前页面中所有的标签
/* 当前页面上的ul标签中的文字颜色 红;字体大小为 14px */
ul{
color:red;
font-size:14px
}
类选择器: 以.开头命名的选择器，适用于当前页面标签中含有 class="选择器"的所有标签
/* 文字颜色 绿;字体大小为 24px */
.txt01{
color:green;
font-size:24px
}
html中
<!-- 只有 油泼面 和 泡馍 加上了样式 --> <span class="txt01">油泼面</span> <span>biangbiang面</span> <div class="txt01"> 泡馍 </div> <div> 葫芦头 </div>
class可以容纳多种样式
/* 文本字体 微软雅黑 */
.txt02{
font-family:"微软雅黑"
}
html中 泡馍 使用了两个样式，使用空格隔开
<div class="txt01 txt02"> 泡馍 </div>
id选择器: 以 #开头命名的选择器，适用于当前页面标签中含有 id="选择器"的所有标签（id在网页中应该唯一）
/* 文字颜色 蓝;字体大小为 12px */
#txt04{
color:blue;
font-size:12px
}
html中使用时
<!-- 只有 蘸水面 和 软面 加上了样式 --> <span id="txt04">蘸水面</span> <span>臊子面</span> <div id="txt04"> 软面 </div> <div> 摆摊面 </div>
通配符“*” ：可以作用于所有的样式
/* 所有元素添加背景颜色，左边距保持10px */
*{
background: paleturquoise;
margin-left: 10px;
}
复合选择器
需要多个选择器组合
后代选择器：适用于父元素中的全部子元素，也叫包含选择器 , 规则为使用空格隔开，如 : 父选择器 子选择器
/* 所有在ul下的li*/
ul li{ color:red}
/* 所有在div下的span*/
div span{color:green}
html代码：
<ul> <li>泡馍</li> <!-- red --> <li>葫芦头</li> <!-- red --> </ul> <div> <span>秦镇米皮</span> <!-- green --> </div> <span>宝鸡擀面皮</span> <!-- 没有对应的样式 --> <ul> <li> <div> <span>杨凌蘸水面</span><!-- red变green 就近原则 --> </div> </li> </ul>
子级选择器：适用于父元素中的直接子元素，也叫子选择器 , 规则为使用>隔开，如 : 父选择器>子选择器
/* 所有在div下的直接span子元素*/
div>span{color:green}
html
<div> <span>秦镇米皮</span> <!-- green --> <p> <span>浆水面</span> <!-- 没有对应的样式 --> </p> </div>
并集选择器： 适用于多个并列的选择器，也叫同级选择器，规则为使用,隔开，如: 选择器1,选择器2
/* 所有在div,所有的span,所有的txt01的字体颜色 红*/
div,span,.txt01{color:red}
伪类选择器：适用于选择器的状态，也叫伪样式，规则为使用 : 隔开样式和状态，如: 选择器:hover
div{ color:green}
div:hover{ color:red} /* 鼠标移上时 */
a:link{ color: blue;} /* 未访问过 */
a:visited{color: gray;} /* 已访问过 */
a:hover{ color:red} /* 鼠标移上 */
a:active{color:yellow} /* 鼠标按下 */
html代码：
<div> 紫阳蒸盆子 </div> <a href="http://www.baidu.com">摆渡</a>
属性选择器
适用于指定含有某些属性的选择器，规则为使用[]指定属性的内容，如：选择器[属性]
包含某个属性: 选择器[属性]
属性值必须等于某个值: 选择器[属性="值"]
属性值必须以某个值开头: 选择器[属性^="值"]
属性值必须以某个值结尾: 选择器[属性$="值"]
属性值必须含有某个值: 选择器[属性*="值"]
div[align]{ color:red} /* 含有align属性 */
div[align="left"]{ color:green} /* align的值等于“left" */
div[align^="R"]{ color:blue} /* myAttr的值以“r"开头 */
div[myAttr$="2"]{ color:peru} /* myAttr的值以“0"结尾 */
div[myAttr*="0"]{ font-weight: bold;} /* myAttr的值含有“0"的 */
div[myXyz][myAbc*="2"]{ color: hotpink;}/* 组合一下：属性含有myXyz以及myAbc的值含有"2" */
html代码：
<div align="center">热米皮</div> <div>菜豆腐</div> <div align="right">塘坝鱼</div> <div align="left">小酥肉</div> <div align="right">蒸碗</div> <div align="left">粉蒸肉</div> <hr/> <div myAttr="101">黄馍馍</div> <div myAttr="202">窝窝头</div> <div myAttr="303">羊肉面</div> <hr/> <div myAbc="1" myXyz="aa">腕托</div> <div myAbc="2" myXyz="bb">莜面</div>
伪元素
伪元素选择器用于CSS创建标签元素，简化HTML结构，在元素的文档树中时不可见的；必须有content属性
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
<style>
div::before{
content: "正宗";
background: pink;
}
div::after{
content: " 13元";
background: red;
}
</style>
<div>杂酱面</div>
CSS字体
| 样式 | 描述 | 举例 |
|---|---|---|
| color | 颜色 | color:red |
| font-size | 大小，单位像素 | font-size:12px |
| font-family | 字体, 使用“”或''包裹 | font-family:"楷体" |
| font-weight | 粗体，bold或700以上为加粗 | font-weight:bold |
| font-style | 斜体, italic(斜体)normal(正常) | font-weight:italic |
| text-decoration | 装饰，underline(下划线) overline(上划线)，line-through(删除线) | text-decoration:underline |
| text-align | 水平对齐, left,center,right | text-align:left |
| line-height | 行高，给定行高自动垂直对齐 | line-height:60px |
| word-spacing | 单词间距 | word-spacing:5px |
| letter-spacing | 字母间距 | letter-spacing:5px |
font可以简写，但有一定的顺序要求：修饰 大小 字体；
<style>
.txt01{
color:red;
font-size: 12px;
font-family: "微软雅黑";
font-weight: bold;
}
.txt02{
color:blue;
font-size: 22px;
font-family: "微软雅黑";
font-style: italic;
}
.txt03{
color:green;
font-size: 24px;
font-family: "微软雅黑";
text-decoration: underline ;
}
.txt04{
color: peru;
font-size: 14px;
font-family: "微软雅黑";
width: 100px; height: 60px;
background: skyblue;
text-align: right;/* 水平对齐 */
line-height: 60px; /* 和容器高度一致 达到垂直对齐*/
}
.txt05{
word-spacing: 0px;
letter-spacing: 0px;
}
/* 简写时 ： 修饰 大小 字体 */
.txt06{
font:bold italic 18px "微软雅黑";
}
</style>
<div class="txt01">水煎包</div>
<span class="txt02">灌汤包</span>
<div class="txt03">小笼包</div>
<div class="txt04">烤包子</div>
<div class="txt05">this is hot day</div>
<div class="txt06">this is nice day</div>
CSS边框
| 样式 | 描述 | 举例 |
|---|---|---|
| border-width | 边框宽度 | border-width: 2px |
| border-style | 边框样式 实线solid,双线double 虚线dashed,点线dotted | border-style : solid |
| border-color | 边框颜色 | border-color : red |
| border-top | 上边框 | border-top: double 10px red; |
| border-left | 左边框 | border-left: 20px brown double; |
| border-right | 右边框 | border-right: double peru 30px; |
| border-bottom | 下边框 | border-bottom: double 10px palevioletred; |
| border-radius | 圆角边框 |
也可以简写 border : 宽度 颜色 样式；其中宽度 颜色 样式的顺序可以任意调整；
<style>
div{ width: 100px; height: 70px;}
#d1{
border-width: 10px;
border-style: solid;
border-color: green;
}
#d2{ border: sienna 10px solid; border-radius:20px;}
#d3{
border-top: double 10px red;
border-left: double 20px brown;
border-right: double 30px peru;
border-bottom: double 10px palevioletred;
}
#d4{
border: dotted 2px gray;
border-top-width: 0px;
}
#d5{
width: 100px; height: 100px;
border: solid 2px blue;
border-radius:50px;
line-height: 100px; text-align: center;
}
</style>
<div id="d1">小葱拌豆腐</div>
<div id="d2">小鸡炖蘑菇</div>
<div id="d3">麻辣小龙虾</div>
<div id="d4">陕北烤全羊</div>
<div id="d5">榆林羊杂汤</div>
CSS背景
| 样式 | 描述 | 举例 |
|---|---|---|
| backgroud-color | 背景色 | background-color: peru |
| backgroud-image | 背景图片 | background-image: url("img/lu.jpg") |
| background-repeat | 背景图片重复方式 横向repeat-x,纵向repeat-y 不重复no-repeat,默认铺满repeat | background-repeat:repeat-x |
| background-position | 背景图片位置 左(负数)，右(正数)和上(负数)下(正数) | background-position: -71px -16px |
简写 backgroud: 颜色 图片 重复 位置；其中 颜色 图片 重复 位置顺序可任意。
图标素材站：www.iconfont.cn
<style>
div{width: 100px; height: 100px;}
#d1{background-color: peru;}
#d2{background: red;}
#d3{
background-image: url("img/lu.jpg");
background-repeat:repeat-x ;
}
#d4{background: steelblue;
background-image: url("img/dian.jpg");
}
#d5{
width: 30px; height: 30px;
border: 1px solid black;
background-image: url("img/sprint.png");
background-position: -71px -16px;
}
</style>
<div id="d1">川</div>
<div id="d2">湘</div>
<div id="d3"></div>
<div id="d4">粤</div>
<div id="d5"></div>
CSS列表
| 样式 | 描述 | 举例 |
|---|---|---|
| list-style-type | 列表项的图标： none不需要 lower-alpha，lower-roman小写 upper-alpha，upper-roman大写 disc实心圆，circle空心圆,square方块 | list-style-type: none |
| list-style-image | 列表项开头自定义图片，自定义图片和li的高度最好一致 | list-style-image: url("img/dian.jpg") |
| list-style-position | 列表项的缩进：inside/outside | list-style-position:inside |
<style>
.myul01{list-style-type: square}
.myul02{
list-style-image: url(img/dian.jpg);/* 推荐图片高度和li的高度一致*/
list-style-type:none;
/*list-style-position:outside;*/
}
</style>
陕西小吃
<ul class="myul01">
<li>秦镇米皮</li>
<li>汉中热皮</li>
<li>宝鸡擀面皮</li>
<li>泾阳酿皮</li>
</ul>
陕西小吃
<ul class="myul02">
<li>秦镇米皮</li>
<li>汉中热皮</li>
<li>宝鸡擀面皮</li>
<li>泾阳酿皮</li>
</ul>
CSS盒子模型
网页元素布局时的边界(margin)，边框(border)，填充(padding)以及内容组成的区域；
margin: 外间距，border外的距离
padding: 内间距(填充距离)，border和内容之间的距离
距离: 数值 如 margin:25px ; 代表四周的外间距都为25px
距离: 上下 左右 如 margin:25px 50px; 代表上下的外间距为25px，左右的外间距为50px
距离: 上 左右 下 如 margin:25px 10px 50px; 上外间距为25px，左右的外间距为10px，下外间距50px
距离: 上 右 下 左 如 margin:25px 10px 50px 15px;
<style>
#d1{
width: 100px;height: 60px;
border: 10px solid silver;
padding: 25px;
margin: 35px;
}
</style>
<div id="d1">
今天
</div>
<style>
#d2{
border: 1px dotted silver;
/*padding: 1px 5px 10px 30px;*/ /* 上右下左*/
/*padding: 18px 100px;*/ /* 上下,左右*/
/*padding: 10px 50px 1px;*/ /* 上,左右,下*/
}
</style>
<div id="d2">
今天
</div>
<style>
#d3{
border: 20px dotted silver;
padding: 10px 50px;
margin: 5px 10px 10px 20px;
}
</style>
<div id="d3">
今天
</div>
CSS显示
| 样式 | 描述 | 举例 |
|---|---|---|
| display | 显示block和隐藏none | |
| visibility | 显示visible和隐藏hidden | |
| overflow | 显示visible和隐藏hidden滚动scroll |
display和visibility控制元素的显示，overflow控制的是超出元素可见区域内容的显示。
<style>
div{width: 100px;height: 70px;}
#d1{background: red; }
#d2{background: blueviolet; visibility: hidden; }/*保留原有位置*/
#d3{background: blue; }
#d4{background: sienna; display:none; }/*脱离当前页面*/
#d5{background: wheat; overflow: hidden;}/*文档内容*/
</style>
<div id="d1">1油泼面</div>
<div id="d2">2臊子面</div>
<div id="d3">3蒜蘸面</div>
<div id="d4">4裤带面</div>
<div id="d5">5驴蹄子面,小样说是乾县特色小吃，大致有记载的年份是公元</div>
CSS定位
定位的样式为position，有多种定位方式，其中有两种区别较大的定位方式：相对定位和绝对定位。
relative相对定位：以元素的初始位置左上角为原点
absolute绝对定位：以网页的左上角为原点
<style>
div{width: 100px;height: 70px; position: relative;} /*相对*/
#d1{background: red; }
#d2{background: blueviolet; left:50px;top:-30px}
#d3{background: blue; left:200px}
#d4{background: sienna; left:300px}
#d5{background: wheat; left:400px}
</style>
<div id="d1">1油泼面</div>
<div id="d2">2臊子面</div>
<div id="d3">3蒜蘸面</div>
<div id="d4">4裤带面</div>
<div id="d5">5驴蹄子面</div>
<hr/>
<style>
.sec>div{width: 100px;height: 70px; position: absolute;}/*绝对*/
#d6{background: red; }
#d7{background: blueviolet; left:50px;top:30px}
#d8{background: blue; left:200px;top:140px}
#d9{background: sienna; left:300px;top:210px}
#da{background: wheat; left:400px;top:280px}
</style>
<div class="sec">
<div id="d6">6油泼面</div>
<div id="d7">7臊子面</div>
<div id="d8">8蒜蘸面</div>
<div id="d9">9裤带面</div>
<div id="da">a驴蹄子面</div>
</div>
z-index : 决定最上层的权重，数值大的覆盖数值小的元素
| 样式 | 描述 | 举例 |
|---|---|---|
| position | 定位 relative相对定位,absolute绝对定位 fixed固定 | position:relative |
| top | 上(负数)下(正数)位移 | top:10px |
| left | 左(负数)右(正数)位移 | left:10px |
| z-index | 层叠权重；数值大的元素覆盖数值小的元素 | z-index:99 |
| float | 漂浮(浮动)；根据网页宽度自动排列元素； | float:left |
zindex的html代码：
<style>
#d1{width: 100px; height: 70px;
background: darkred;
position: fixed;
top:0px;left: 0px;z-index:10
}
</style>
<div id="d1">
羊杂汤
</div>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<style>
div{width: 100px;height: 70px; position: relative;}
#d2{background: red; z-index:2;}
#d3{background: blueviolet;top: -40px;left: 30px;z-index:1;}
#d4{background: blue; top: -150px; left:50px}
#d5{background: sienna; }
#d6{background: wheat; }
</style>
<div id="d2">2臊子面</div>
<div id="d3">3蒜蘸面</div>
<div id="d4">4裤带面</div>
<div id="d5">5驴蹄子面</div>
<div id="d6">6油泼面</div>
<p>a</p>
<p>a</p>
<p>a</p>
float的html代码
<style>
div{width: 100px;height: 70px; float: left;}
#d2{background: red; }
#d3{background: blueviolet;}
#d4{background: blue; }
#d5{background: sienna; }
#d6{background: wheat; }
</style>
<div id="d2">2臊子面</div>
<div id="d3">3蒜蘸面</div>
<div id="d4">4裤带面</div>
<div id="d5">5驴蹄子面</div>
<div id="d6">6油泼面</div>
CSS其他
鼠标样式
cursor:鼠标移动到元素上时的一些样式
<style>
div{width: 100px;height: 70px;}
#d1{background: green; cursor: move;}
#d2{background: red; cursor: pointer;}
#d3{background: blueviolet;cursor: wait;}
#d4{background: blue; cursor: auto;}
#d5{background: sienna; }
#d6{background: wheat; }
</style>
<div id="d1">1油泼面</div>
<div id="d2">2臊子面</div>
<div id="d3">3蒜蘸面</div>
<div id="d4">4裤带面</div>
颜色格式
颜色名：red,blue,pink...
颜色值：#fff000,#00cc00...
三原色: rgb(255,255,0),rgb(0,255,0)...
透明色: rgba(255,255,0,0.1),rgb(0,255,0,0.8)...
具体颜色查找文档《网页标准颜色对照表》
样式单位
在写css样式的时候最常用的长度单位是px(像素)，除此之外经常会碰到em、pt等等。
其实css中的长度单位有px、em、pt、in、ex、pc、mm、cm、ch、rem、vw、vh、vmin、vmax。下面品自行将对这些css样式的长度单位做详细说明。
1、px：像素(Pixel),相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。
像素（px）是相对于观看设备的。对于低 dpi 的设备，1px 是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px 表示多个设备像素。
css容器的大小我们经常用px做单位;字体大小(font-size)很多人用px做单位，其实用px做字体单位唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。
2、em：相对长度单位。相对于元素的字体大小（font-size），如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。3em 表示当前字体大小的 3 倍
3、pt：点(Point)，绝对长度单位。可以尝试和下面的in英寸进行对比，1pt = 1/72 of 1in；
4、ex：相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 相对于当前字体的 x-height(极少使用)
5、pc：派卡(Pica)，绝对长度单位。相当于我国新四号铅字的尺寸。1pc = 12 pt
6、in：英寸(Inch)，绝对长度单位。1in = 96px = 2.54cm
7、mm：毫米(Millimeter)，绝对长度单位。国人常用的尺寸；
8、cm：厘米(Centimeter)，绝对长度单位。国人常用的尺寸；
9、ch：相对长度单位。相对于 "0"（零）的宽度；
10、rem：相对长度单位。相对于根元素的字体大小（font-size）；
11、vw：相对长度单位。相对于视口*宽度的 1%；
12、vh：相对长度单位。相对于视口*高度的 1%；
13、vmin：相对长度单位。相对于视口*较小尺寸的 1％ ，vw和vh中较小的那个；
14、vmax：相对长度单位。相对于视口*较大尺寸的 1％，vw和vh中较大的那个；
视口（Viewport）= 浏览器窗口的尺寸。如果视口宽 50 里面，则 1vw = 0.5cm。15、%：相对长度单位。相对于父元素
其中：1in = 2.54cm = 25.4 mm = 72pt = 6pc ;
bootstrap
Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。
包含内容：
-
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。
-
CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。
-
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。
-
JavaScript 插件：Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。
-
定制：您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。
下载：
-
官网 : http://www.getbootstrap.com 以及中文网 : Bootstrap中文网 都可以下载 bootstrap-x.x.x-dist.zip。
-
Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 必须在 Bootstrap 之前引入下载 jQuery : http://jquery.com
解压后项目结构如下： 
使用：
在 html 中的模板为：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<!--
viewport 表示用户是否可以缩放页面
width 指定可视区域的逻辑宽度
device-width 设备宽度
initial-scale 设置web页面的初始缩放比例
initial-scale=1.0 表示将显示未经缩放的web页面
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap 的 css 文件-->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<div class="container-fluid">
<h2>使用Bootstrap框架的HTML5页面模板</h2>
</div>
<!-- jQuery 文件(Bootstrap 的 JavaScript 插件需要引入 jQuery，不使用插件可以不引入) -->
<script src="js/jquery.min.js"></script>
<!-- 引入 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
布局和栅格
容器（Container）
Bootstrap 3 的 container class 用于包裹页面上的内容：
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
可以看出 container 的左右外边距（margin-right、margin-left）交由浏览器决定。还有一种容器样式为 container-fluid , container-fluid 的 width 是100％，而 container 的 width 是用媒体查询获得的动态尺寸。两者样式肯定是不一样的。并且由于 padding 的原因两者不可用嵌套，他们就是提供两种视觉风格。
<link href="css/bootstrap.min.css" rel="stylesheet"/> <div class="container" style="height: 400px;background: #3c763d;font-size: 60px"> container容器 </div> <div class="container-fluid" style="height: 400px;background: #5bc0de;font-size: 60px"> container-fluid容器 </div>
栅格布局
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的 mixin 用于生成更具语义的布局。
栅格系统其实就是一种布局，是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。
栅格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份，其他约定如下：
-
“行（row）”必须包含在
.container（固定宽度）或.container-fluid（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 -
通过“行（row）”在水平方向创建一组“列（column）”。
-
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
-
类似
.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 -
通过为“列（column）”设置
padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。 -
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
-
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个
.col-xs-4来创建。 -
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
-
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何
.col-md-*不存在， 也影响大屏幕设备。
这里面的 xs(xsmall phones)，sm(small tables)，md(middle desktops)，lg(larger desktops) 。分别对应超小屏(自动)，小屏(750px)，中屏(970px)，大屏(1170px)。
列组合
可以通过更改数字来合并列。但总列数不能超过12。
<div class="container" > <!-- 一行12列，4个区域分别占2,1,1,2列 共计6列 --> <div class="row"> <div class="col-md-2" style="background: #985f0d">md2</div> <div class="col-md-1" style="background: #8c8c8c">md1</div> <div class="col-md-1" style="background: #b2dba1">md1</div> <div class="col-md-2" style="background: #f0ad4e">md2</div> </div> <hr/> <!-- 一行12列，4个区域分别占3,3,3,3列 共计12列 --> <div class="row"> <div class="col-md-3" style="background: #985f0d">md3</div> <div class="col-md-3" style="background: #8c8c8c">md3</div> <div class="col-md-3" style="background: #b2dba1">md3</div> <div class="col-md-3" style="background: #f0ad4e">md3</div> </div> </div>
效果如下： 
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移（包括该列右侧所有组件一起偏移）。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。但总列数不能超过12。
<div class="row"> <!-- 两个区域分别占2，2列，其中最后一列向右偏移3列 --> <div class="col-md-2" style="background: #985f0d">md-2</div> <div class="col-md-2 col-md-offset-3" style="background: #8c8c8c">md-offset-2</div> </div>
效果如下： 
列排序
通过使用 .col-md-push-* （右移）和 .col-md-pull-* （左移）类就可以很容易的改变列（column）的顺序。和列偏移不同，会覆盖左边的列，也会被右边原有的列覆盖。
<!-- 原有样子 --> <div class="row"> <div class="col-md-2" style="background:red">md-2</div> <div class="col-md-1" style="background:yellow">md-1</div> <div class="col-md-1" style="background:deepskyblue">md-1</div> <div class="col-md-2" style="background:lawngreen">md-2</div> </div> <div class="row"> <div class="col-md-2" style="background:red">md-2</div> <div class="col-md-1 col-md-pull-1" style="background:yellow">md-1</div> <div class="col-md-1 col-md-push-3" style="background:deepskyblue">md-1</div> <div class="col-md-2" style="background:lawngreen">md-2</div> </div>
效果如下： 
这里黄色的md-1左移之后覆盖了红色md-2的一列位置，而蓝色md-1右移了3个才能显示出来，否则会被绿色的md-2覆盖。
列嵌套
使用内置的栅格系统的行，其内容可以再次嵌套12列：
<div class="row"> <!-- 两列分别占6,6 --> <div class="col-md-6" style="background: #8c8c8c"> <!-- 嵌套一行共12列，其中4列分别占2,1,1,2 --> <div class="row"> <div class="col-md-2" style="background:red">md-2</div> <div class="col-md-1" style="background:yellow">md1</div> <div class="col-md-1" style="background:deepskyblue">md1</div> <div class="col-md-2" style="background:lawngreen">md-2</div> </div> </div> <div class="col-md-6" style="background: #b2dba1">666</div> </div>
效果如下： 
可以看出md-2,md1,md1,md-2这四列一个嵌套的列中占了6列。
列的响应式
对于一个列，我们可以给定多种样式来定义其在不同分辨率中所占的列数，以达到根据屏幕大小响应式的切换其显示：
<!-- md分辨率下 --> <div class="row"> <div class="col-md-3" style="background:red">md-2</div> <div class="col-md-3" style="background:yellow">md1</div> <div class="col-md-3" style="background:deepskyblue">md1</div> <div class="col-md-3" style="background:lawngreen">md-2</div> </div> <!-- md分辨率 xs分辨率 --> <div class="row"> <div class="col-md-3 col-xs-6" style="background:red">md-2</div> <div class="col-md-3 col-xs-6" style="background:yellow">md1</div> <div class="col-md-3 col-xs-6" style="background:deepskyblue">md1</div> <div class="col-md-3 col-xs-6" style="background:lawngreen">md-2</div> </div>
我们分别定义md和xs分辨率下所占的列数，切换屏幕大小，可以看见当分辨率较大时(>750px)使用md样式： 
当分辨率较小时(<750px)使用xs样式，而没有定义xs样式则失控默认占满一行： 
所以对于一个列，理论上我们可以定义 xs、sm、md、lg 四种不同的样式以自适应不同屏幕分辨率下的响应式显示效果。
媒体查询
@media媒体查询用途
媒体查询Media Queries，可以根据不同的设备为其实现不同的样式。@media可以根据不同的屏幕尺寸设置不同的样式，页面布局分别适应移动端、pc端等，在调整浏览器的大小，页面会根据媒体的宽度和高度来重新布置样式。
CSS2中使用的@media媒体查询在很多设备上支持的还不够友好，CSS3的多媒体查询继承了CSS2多媒体类型的所有思想，取代了查找设备的类型，CSS3根据设置自适应显示。
媒体查询可以用于检测很多东西：自动检测viewpoint（视窗）的宽度和高度；设备的宽度和高度；旋转方向（智能手机横屏或竖屏）；分辨率大小。
语法规则
（一）直接写在css样式中
@media mediatype and/not/only (media feature) { CSS-Code }
语法规则：
使用媒体查询必须是以 @media 开头；
然后指定设备类型（媒体类型mediatype）；
接着是括号()里的规定媒体/设备特征（media feature），媒体特征的书写格式与css样式类似，都是属性名：属性值（例如min-width：200px）；
最后跟着的大括号{ css-code }，里面放置的是要设置的css样式。
逻辑运算符：
not：用来排除某种设备。比如，排除打印设备 @media not print；
only：用以指定某特定媒体设备。对于支持 Media Queries 的移动设备来说，如果存在 only 关键字，移动设备的 Web 浏览器会忽略 only关键字并直接根据后面的表达式应用样式文件。对于不支持 Media Queries 的设备但能够读取 Media Type 类型的 Web浏览器，遇到 only 关键字时会忽略这个样式文件。
all：适用于所有的设备类型；
and：媒体查询中使用来连接多种媒体特性,一个媒体查询中可以包含0或多个表达式，表达式可以是0或多个关键字，以及一种媒体类型。
如：@media screen and (max-width:800px) and (min-width:400px)
（二） 针对不同的媒体设备外部链入不同的 stylesheets（外部样式表）
<link rel="stylesheet" media="mediatype and|not|only (media feature)"href="mystylesheet.css">
定义媒体查询的部分放在<link>标签内，用media属性标注，media=" 媒体类型 and/not/only（媒体特性）"
媒体特性
Media Feature
值 描述 aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率 color 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0 color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0 device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。 device-height 定义输出设备的屏幕可见高度。 device-width 定义输出设备的屏幕可见宽度。 grid 用来查询输出设备是否使用栅格或点阵。 height 定义输出设备中的页面可见区域高度。 max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。 max-color 定义输出设备每一组彩色原件的最大个数。 max-color-index 定义在输出设备的彩色查询表中的最大条目数。 max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。 max-device-height 定义输出设备的屏幕可见的最大高度。 max-device-width 定义输出设备的屏幕最大可见宽度。 max-height 定义输出设备中的页面最大可见区域高度。 max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 max-resolution 定义设备的最大分辨率。 max-width 定义输出设备中的页面最大可见区域宽度。 min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。 min-color 定义输出设备每一组彩色原件的最小个数。 min-color-index 定义在输出设备的彩色查询表中的最小条目数。 min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。 min-device-width 定义输出设备的屏幕最小可见宽度。 min-device-height 定义输出设备的屏幕的最小可见高度。 min-height 定义输出设备中的页面最小可见区域高度。 min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 min-resolution 定义设备的最小分辨率。 min-width 定义输出设备中的页面最小可见区域宽度。 monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。 resolution 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm scan 定义电视类设备的扫描工序。 width 定义输出设备中的页面可见区域宽度。
应用实例
了解了媒体类型和媒体特性，或发现其书写类型和css样式基本一致，但是在media queries中，使用max / min来表示大于等于小于以此作为逻辑判断。而不是使用大于号>或小于号(<)符号进行判断。来看一下具体实例：
（一）最小宽度min-width
min-width规则为：当媒体类型大于或是等于指定的宽度时，大括号内的样式生效；
例：
body {
background-color:lightgreen;
}
@media screen and (min-width: 700px) {
body {
background-color:lightblue;
}
}
规定最小宽度为700px，当浏览器窗口的宽度大于或等于700px时，则主体区域的背景颜色变为 淡蓝色。
若宽度小于700px，主体区域背景颜色保持原有样式，显示为为淡绿色。
如果想让lightblue生效，就必须使宽度大于或等于700px，700px以下的宽度无效。区间为[>700]。
（二）最大宽度max-width
max-width规则为：当媒体类型小于或是等于指定的宽度时，大括号内的样式生效；
body {
background-color:lightgreen;
}
@media screen and (max-width: 700px) {
body {
background-color:lightblue;
}
}
规定最大宽度为700px，当浏览器窗口的宽度小于或等于700px时，则主体区域的背景颜色变为 淡蓝色。
若宽度大于700px，主体区域背景颜色保持原有样式，显示为为淡绿色。
如果想让lightblue生效，就必须把宽度保持在700px之下，700px及更大的宽度无效。区间为[0，700]。
（三）同时设置多个媒体特性
使用and属性来设置多个媒体特征。一个媒体查询中可以包含0或多个表达式，表达式可以是0或多个关键字，以及一种媒体类型。
body {
background-color:lightgreen;
}
@media screen and (max-width: 1000px) and (min-width: 700px){
body {
background-color:lightblue;
}
}
最大宽度为1000px，最小宽度为700px，所以屏幕宽度要保持在大于等于700px且小于等于1000px的范围内。背景颜色为浅蓝色的设置才能生效。区间为[1000,700]。
同样也可以同时设置多个媒体查询
宽度大于1000px背景颜色浅绿色；宽度700px~1000px时背景颜色为浅蓝色，宽度为699px~399px时背景颜色为红色。
（四）输出设备的屏幕可见宽度 device-width
在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。
width和height有可以指定最大最小值，同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。
最大/最小屏幕可见宽度。
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" /> 表示外部样式iphone.css适用于最大设备宽度为480px。device-width指的是设备的实际分辨率（可视面积的分辨率）
（五）not关键字
使用not关键字来排除某种所指定设备类型，排除后面表达式中的媒体类型。not表现的效果就是“非”，对后面跟着的表达式进行否定定义。
@media not print and（max-width：200px）{body{background：blue}} 样式代码将被使用在除打印设备和设备宽度小于200px下所有设备中。
（六）only关键字
only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。
支持媒体特性的设备，正常调用样式，此时就当only不存在；
表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，因为其先会读取only而不是screen；
另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用
@media only screen and (max-width: 600px)and(min-width:300px;) {
.b1 {background: red;}
}
@media only screen and (min-width: 600px) {
.b1 {background: green;}
}
@media only screen and (min-width: 768px) {
.b1 {background: blue;}
}
@media only screen and (min-width: 992px) {
.b1 {background: orange;}
}
@media only screen and (min-width: 1200px) {
.b1 {background: pink;}
}
扫一扫
1377
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
