HTML+CSS
WEB概述：
1、什么是WEB
1、WEB就是互联网上的一种应用程序（网页程序）
2、程序结构：
1、C/S: C：Client 客户端， S：Server 服务器
1、缺点：需要经常更新
2、B/S：B：Browser 浏览器，S：Server 服务器
3、WEB的组成和运行流程
1、web组成：浏览器，服务器，和 通信协议组成
1、浏览器：代替用户向服务器发送请求（User Agent）
2、服务器：接收用户请求并给出响应
3、通信协议：规范了请求和响应数据是如何打包以及传递的（http协议）
HTTP：Hyper Text Transfer Protocal（超文本传输协议）
4、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
5、WEB浏览器：
1、作用：
1、代替用户向服务器发送求情
2、作为响应数据的解释和执行引擎
2、主要浏览器产品：
1、Microsoft IE（Internet Explorer）
2、Google Chrome
3、Mozilla Firefox
4、Apple Safari
5、Opera Opera
3、浏览器靠内核处理数据，内核包括以下两个部分：
1、内容排版引擎——HTML，CSS
2、脚本解释引擎——JavaScript
4、浏览器技术
1、HTML
2、CSS
3、JavaScript
HTML概述
1、HTML介绍 和 基础语法
1、什么是HTML
Hyper Text Markup Language（超级本文标记语言）
1、超文本：具有特殊功能的文本
示例：
1、普通文本 a：普通字符a ；b：普通字符b
2、超级文本 a：表示超级连接功能；b：表示加粗功能
2、标记：超文本的组成形式
示例：
1、普通文本 a：a
2、超级文本 a：<a></a>
3、HTML是由W3C负责制定和推广规范的
1、W3C：World Wide Web Consortium（万维网联盟）
2、HTML在计算机中的表现
1、HTML在计算机中以.html 或者.htm 为结尾的文件存在的
2、开发工具：所有的文本编辑软件
1、Windows 记事本
2、Editplus，Sublime
3、Webstorm，Dreamweaver，...
3、运行工具：浏览器
3、标记的语法规范
1、什么是标记
在网页中用于表示功能的符号称为‘标记’/'标签'/‘元素’
2、语法
1、标记在使用过程中，需要用<>括起来
2、标记分为双标记和单标记
1、双标记
1、双标记是有显示的开始 和结束标记组成的，<标记>内容</标记>
2、示例：
1、<s>删除线</s>
2、<b>加粗</b>
3、注意：有开始，必须有结束，否则会产生意想不到的效果
2、单标记
1、只有一个标记，既要表示开始，也能表示结束
2、语法：<标记> 或者 <标记/>
3、示例
1、<br> 或 <br/>：换行
2、<hr> 或 <hr/>：一条水平线
3、<img> 或 <img/>:图片
4、<input> 或 <input/>:表单空间
3、标记的嵌套
1、在一对标记中，又出现了其他的标记，相当于就是功能的嵌套
2、示例：
<s>
<b>文本内容</b>
</s>
3、注意：标记嵌套时一定要注意格式问题：
1、被嵌套的内容一定要加缩进
4、标记的属性 和 值
1、什么是属性
1、在标记中，属性是用来修饰标记的显示效果的
2、语法：
1、属性必须要声明在开始标记中
2、属性和标记之间要用空格隔开
3、属性和值之间要使用=号连接，值要用‘’或者“”号引起来
4、一个元素允许设置多个属性，并且排名不分先后，多属性之间用 空格 隔开
5、HTML中的注释：
1、<!--备注内容-->
2、注意：
1、注释不能出现在<>中
2、注释不能嵌套
2、HTML文档结构
1、文档类型声明
1、出现在网页最顶端的第一个标记
2、作用：告诉浏览器使用的是HTML的哪个版本
示例：<!doctype html>:h5的文本声明，不区分大小写
2、html页面：
1、在文档类型声明之下，使用一对<html></html>根标记来表示页面
2、html根标记要包含两对子标记：
1、<head></head>:表示网页头部信息
2、<body></body>:表示网页的主体，显示给用户看的内容
3、<head></head>元素
1、<title>标题</title>
2、<meta charset='utf-8'/>:指定网页内容的编码格式,此处需要与html文件保存的编码一致
3、指定网页的关键字——面向搜索引擎(用户看不到)，营销网站必须有的
<meta name='keywords' contnet='关键字1，关键字2，关键字3'>
4、指定网页的描述文本——面向搜索引擎
<meta name='description' content='描述的内容一般大概100字之内字之内'>
<!doctype html> <html> <head> <meta charset="utf-8"/> <meta name='keywords' content="减肥，减肥妙招，一天瘦十斤"/> <meta name='description' content='还在为肥胖而感到苦恼吗？'/> <title>我的第一个网页</title> </head> <body> </body> </html>
HTML标记
1、文本
1、HTML中的特殊字符
1、 ：表示一个空格，多个 之间用；分号分开
2、<：表示一个<
3、>：表示一个>
4、©：表示一个©（copyright）
5、¥：表示￥
6、注意：使用<和>生成的尖括号将失去原有标签的功能
<p></p>  ：在网页中表示的是一个段落元素©版权所有：¥:9999
<p></p> ：在网页中表示的是一个段落元素©版权所有：¥:9999
2、文本样式标记
1、作用：改变文本在网页中的表现形式
2、标记：
1、<i></i>：斜体
2、<u></u>：下划线
3、<s></s>：删除线
4、<b></b>：加粗
5、<sup></sup>：上标
6、<sub></sub>：下标
7、特点：以上标记允许与其他文本内容在一行内显示
这是一段有<b>加粗</b>，<i>斜体</i>，<s>删除线</s>，<u>下划线</u>，上<sup>标</sup>，下<sub>标</sub>的文本标
这是一段有加粗，斜体，删除线，下划线， 上
，下标
的文本
3、标题标记
1、语法：<h#></h#> ,#表示1-6
2、特点：
1、改变文字的大小以及加粗效果
2、每个标题都具备垂直的空白距离
3、每个标题独占一行
4、每个标题都具有一个属性
1、属性：align
2、值：
1、left:居左显示（默认）
2、center：居中显示
3、right：居右显示
<h1 align='center'>静夜思</h1> <h2 align="center">李白</h2> <h3 align="right">床前明月光</h3> <h4 align="left">疑是地上霜</h4> <h5>举头望明月</h5> <h6>低头思故乡</h6>
4、段落元素：
1、作用：突出显示一段文本
2、特点：
1、独占一行
2、每个元素有具备垂直空白距离
3、语法：<p></p>
1、属性：alig
2、值：left/center/right
3、特点：不能嵌套块级元素
5、换行元素：<br> 或者 <br/>
6、水平线元素：<hr> 或者 <hr/>
7、分区元素：
1、块分区元素
标记：<div></div>
特点：独占一行，可以嵌套任何内容
属性：align（取值：left/center/right）
作用：布局
2、行内分区元素
标记：<span></span>
特点：能在一行中显示多个，只能嵌套文本，i，u，s，b，等元素
作用：设置同一行文本的不同样式
8、行内元素 与 块级元素
1、按照元素不同的表现形式，对元素进行一个类别的划分
2、块级元素：
1、在网页中能独占一行的元素都是块级元素
2、比如：p，div， h1～h6，
3、特点：块级元素都有align属性
3、行内元素：
1、多个元素能够在一行内显示的，都是行内元素
2、比如：span，i，b，s，u，sup，sub等元素
1、列表标记
1、列表的组成
1、列表的类型
1、有序列表：<ol></ol> (Order List)
2、无序列表：<ul></ul>（Unorder List）
2、列表项：<li></li>（List Item）
2、列表的属性
1、<ol></ol>
属性：type
取值：
1、1:按数字方式显示标识，默认值
2、A：按大写英文字母方式显示标识，Z之后是AA，AB....
3、a：按小写英文字母方式显示标识
4、I：按大写罗马数字方式显示标识
5、i：按小写罗马数字方式显示标识
2、<ul></ul>
属性：type
取值：
1、disc：默认值，实心圆点
2、circle：空心圆点
3、square：实心方块
4、none：不显示任何符号
<ol> <li>西游记</li> <li>红楼梦</li> <li>三国演义</li> <li>水浒传</li> </ol> <ol type="1"> <li>西游记</li> <li>红楼梦</li> <li>三国演义</li> <li>水浒传</li> </ol> <ol type="A"> <li>西游记</li> <li>红楼梦</li> <li>三国演义</li> <li>水浒传</li> </ol> <ol type="a"> <li>西游记</li> <li>红楼梦</li> <li>三国演义</li> <li>水浒传</li> </ol> <ol type="I"> <li>西游记</li> <li>红楼梦</li> <li>三国演义</li> <li>水浒传</li> </ol> <ol type="i"> <li>西游记</li> <li>红楼梦</li> <li>三国演义</li> <li>水浒传</li> </ol> <ul> <li>金毛狮王</li> <li>青翼蝠王</li> <li>紫衫龙王</li> <li>白眉鹰王</li> </ul> <ul type="disc"> <li>金毛狮王</li> <li>青翼蝠王</li> <li>紫衫龙王</li> <li>白眉鹰王</li> </ul> <ul type="circle"> <li>金毛狮王</li> <li>青翼蝠王</li> <li>紫衫龙王</li> <li>白眉鹰王</li> </ul> <ul type="square"> <li>金毛狮王</li> <li>青翼蝠王</li> <li>紫衫龙王</li> <li>白眉鹰王</li> </ul> <ul type="none"> <li>金毛狮王</li> <li>青翼蝠王</li> <li>紫衫龙王</li> <li>白眉鹰王</li> </ul>
3、列表的嵌套
1、被嵌套的内容必须放在li中
<ol> <li> 水浒传 <ol type='a'> <li>西门庆</li> <li>潘金莲</li> <li>武大郎</li> </ol> </li> <li> 三国演义 <ol type='i'> <li>吕布</li> <li>貂蝉</li> <li>董卓</li> </ol> </li> </ol>
2、图形 和 链接
1、URL
1、什么是URL
1、Uniform Resource Locator（统一资源定位符），主要用于标识网络中资源的位置，俗称路径
2、URL分类
1、绝对路径
1、从一个固定的位置处去查找资源文件的地址
2、网络资源：
1、协议名称（https）
2、主机名称/域名/IP地址（www.baidu.com）
3、目录路径（文件所在的文件夹）（img）
4、文件名称（bd_logo1.png）
https://www.baidu.com/img/bd_logo1.png
2、相对路径
1、从当前的文件位置处开始查找资源文件所经过的路径就是相对路径
3、根相对路径
1、以‘/’作为开始来标识的路径
2、图像
1、标记：<img/>
2、属性：
1、src：要显示的图片的URL（相对/绝对/根相对）
2、width：设置图片的宽度，以px为单位的数值（允许省略px）
3、height：设置图片的高度，同上
4、title：表示没有刷新出来图片的时候显示的
5、注意：width和height，如果只设置一个属性值，那么另外一个属性值也会跟着等比缩放
<img src="https://www.baidu.com/img/bd_logo1.png" title="百度" width="270" />
3、超链接
1、什么是超链接
允许通过鼠标的点击完成页面跳转的行为就是超链接
1、标记：<a>内容</a>
2、属性：
1、href:标识要链接到的文件的地址,href='#'表示链接到本页
2、target：指定打开新网页的方式
取值：
1、_self：默认值，在自身标签页中打开新网页
2、_blank：在新标签页中打开新网页
<a href="https://www.baidu.com/img/bd_logo1.png" target="_blank">百度</a>
3、表格
1、什么是表格
1、表格是按照一定的结构来展示数据的，表格是按照从上到下，从左到右的方式来展示数据的，数据全部都存在单元格中
2、表格的语法：
1、标记
1、表格：<table></table>
2、表行:<tr></tr>（Table Row）
3、单元格（列）：<td></td>(Table Data)
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：控制当前行的背景颜色
1、取值：表示颜色的英文单词
3、td属性：
1、width:单元格的宽度，改变一个单元格的宽度将改变该列的宽度
2、height：单元格的高度，改变一个单元格的高度将改变该行的高度
3、align：
4、valign：
5、bgcolor
6、colspan：跨列
7、rowspan：跨行
3、不规则表格的创建
1、单元格的跨列
1、从指定单元格位置开始，横向向右合并几个单元格（包括自己），需要手动删除被合并掉的单元格
2、语法：colspan=‘n’
2、单元格的跨行
1、从指定单元格位置开始，纵向向下合并几个单元格（包括自己），需要手动删除被合并掉的单元格
2、语法：rowspan=‘n’
4、行分组
1、语法
1、表头行分组：<thead></thead>
2、表尾行分组：<tfoot></tfoot>
表格的最后一行如果要分组的话，放在表尾行分组
3、表主题行分组：<tbody></tbody>
除表头和表尾分组之外，剩余的放在表主题分组
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1" width="400" align="center" cellpadding="10" cellspacing="0"> <thead bgcolor='blue'> <tr align="center"> <td bgcolor="red">姓名</td> <td>身高</td> <td>体重</td> <td>年龄</td> </tr> </thead> <tr> <td bgcolor="red" width="600" height="60" align="center" valign="bottom">范冰冰</td> <td colspan="2" align="center">158</td> <td>58</td> </tr> <tr> <td>李冰冰</td> <td>166</td> <td rowspan="2">92</td> <td>40</td> </tr> <tr> <td>孙冰冰</td> <td>172</td> <td>24</td> </tr> </table> </body> </html>
4、表单
1、作用：收集用户信息并提交给服务器
2、特点：表单在网页中是不可见的，但是功能是不能忽略的
3、表单中的两个要素：
1、form元素：收集用户的信息
2、表单控件：能够与用户进行数据交互的可视化组件
4、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（encoding type）：指定表单数据进行编码的方式，即允许将什么样的数据提交给服务器
取值：
1、application/x-www-form-urlencoded：默认值，允许将所有的文本数据提交给服务器
2、multipart/form-data：允许将文件提交给服务器
3、text/plain：允许将普通字符（[0-9A-Za-z_]）提交给服务器，特殊字符不能提交
5、表单控件
1、作用：可视化的组件，用于与用户进行数据交互，表单控件只有放在<form>中才允许被提交
2、表单控件详解
1、文本框 与 密码框
1、文本框：<input type='text'>
2、密码框：<input type='password'>
3、属性：
1、name：为控件起名，在服务器上使用，如果不声明name属性，则无法提交
2、value：值，控件上所显示的值
3、maxlength：限制输入的最大数字数,不能限制value值的默认值的长度
4、palceholder：提示占位符，该值不会被提交，如果不设置value值，则输入框中显示该值，不受maxlength的限制
2、按钮
1、提交按钮：<input type='submit'>或者<button type='submit'>按钮上的文字</button>
2、重置按钮：<input type='reset'>或者<button type='reset'>按钮上的文字</button>
3、普通按钮：<input type='button'>或者<button type='button'>按钮上的文字</button>
4、属性：
1、value：控制按钮上面的文字
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单</title> </head> <body> <form action="login" method="GET"> <p> 用户名称：<input type="text" name="username" value='123456785' maxlength='5' placeholder="请输入用户名称"> </p> <p> 用户密码：<input type="password" name="userpwd" maxlength="6" placeholder="请输入用户密码"> </p> <p> <input type="submit" name="" value="提交按钮"> </p> <p> <input type="reset" name="" value="重置按钮"> </p> <p> <input type="button" name="" value="普通按钮"> </p> </form> </body> </html>
3、单选按钮 和 复选框
1、单选框：<input type='radio'>
2、复选框：<input type='checkbox'>
3、属性：
1、name：为控件定义名称，除了定义名称之外，name属性也起到了分组的作用，
注意：一组的单选按钮和复选框，名称必须一致
2、value：定义控件的值，当用户选中控件的时候，则将该控件的value值提交给服务器
3、checked：设置预选中，该属性无值
4、隐藏域 和 文件选择框
1、隐藏域
1、作用：想提交给服务器但是不想给用户看的数据要放在隐藏域中
2、语法：<input type='hidden'>
属性：
1、name：定义控件的名称
2、value：定义控件的值
2、文件选择框：用于向服务器发送文件
1、语法：<input type='file'>
属性：name：定义控件的名称
2、注意：
1、表单的method必须为post
2、表单的enctype必须为multipart/form-data
5、多行文本域：
1、标记：<textarea></textarea>
2、属性：
1、name：定义控件的名称
2、cols：指定文本域的列数（一行中最多能显示多少个英文字符，中文减半）,滚动条占一列
3、rows：指定文本域的默认行数（超过这个行数将出现滚动条）
6、下拉选项框：
1、语法：
<select name=''>
<option value='值1'>显示内容1</option>
<option value='值2'>显示内容2</option>
<option value='值3'>显示内容3</option>
...
</select>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单</title> </head> <body> <form action="login" method="post" enctype="multipart/form-data"> <p> 性别: <input type="radio" name="gender" value="0">男 <input type="radio" name="gender" value="1" checked>女 </p> <p> 爱好： <input type="checkbox" name="hobby" checked>吃 <input type="checkbox" name="hobby" checked>和 <input type="checkbox" name="hobby">玩 <input type="checkbox" name="hobby">乐 </p> <p> <input type="hidden" name="uid" value="123456"> </p> <p> 用户头像： <input type="file" name="uImg"> </p> <p> 自我介绍： <textarea name="into" cols="10" rows="5">fsfsdfsdfsdfsdfsdfdsfdsfsdfdsfsdfdsfsd</textarea> </p> <P> 所在地址： <select name='addr'> <option value="1">北京市</option> <option value="2">上海市</option> <option value="3">重庆市</option> <option value="4">天津市</option> </select> </P> </form> </body> </html>
CSS
1、CSS介绍
CSS：Cascading Style Sheets 级联样式表
HTML：搭建网页结构
CSS：在网页结构基础上进行网页的美化
2、CSS的使用方式（重点）
1、内联方式：将CSS内容定义在单独的HTML元素中
1、语法：<ANY style='样式声明'>
1、样式声明：
1、每个样式声明都是由样式属性名称和样式属性值来组成的
2、属性名称和属性值之间使用：冒号连接
3、在一个style中允许出现多个样式声明，多个样式声明之间使用；分号分割
4、示例：<ANY style='属性1：值1；属性2：值2；属性3：值3...'>
5、常用的属性和值
1、文字大小
属性：font-size
取值：以px为单位的数值,px不能省略
2、文本的颜色
属性：color
取值：表示颜色的英文单词
3、背景颜色
属性：background-color
取值：表示颜色的英文单词
2、内部样式表
1、作用：让定义好的样式使用在多个元素中
2、语法：
<head>
<style>
样式规则1
样式规则2
...
样式规则n
</style>
</head>
样式规则：
1、由选择器 和 样式声明组成
2、选择器：规范了页面中哪些元素能够使用声明好的样式
3、示例：
选择器{
样式声明1；
样式声明2；
...
}
3、注释：在<style>中使用/* */来表示注释
3、外部样式表
1、作用：让声明好的样式适用于多个网页中
将样式规则声明在独立的css文件中（xxx.css）
在使用的网页上对xxx.css文件进行引用
<head>
<link rel='stylesheet' href='css文件路径'>
</head>
3、CSS样式表的特征
1、继承性：大部分的CSS属性是可以由父元素继承给子元素的
2、层叠性：
允许为一个元素定义多种使用方式（内联，内部样式表，外部样式表）。如果定义的属性不冲突的话，那么所有的属性都可以应用到元素上
3、优先级：如果样式声明冲突的话，则按照不同的优先级来应用样式
1、浏览器缺省设置：最低
2、内部或外部样式表：中
1、就近原则：后定义者优先
3、内联方式：最高
4、可以在样式后面添加 !import表示优先级最高
4、调错：
1、Unknown property name：样式属性名称写错了
2、Invalid property value：样式属性值写错了
4、css选择器（重难点）
1、CSS选择器的作用
1、规范了页面中哪些元素能够使用声明好的样式
2、为了匹配页面中的元素
2、选择器详解
1、元素选择器
1、特点：由元素名称作为选择器，目的是为了匹配页面中指定元素名称的所有标记
2、语法：
元素名{
样式声明1
...
}
2、类选择器：
1、特点：允许被页面上任意一个元素所引用
2、语法：
.类选择器名称{
样式声明1
....
}
3、命名规范：字母，数字下划线组成，数字不能开头
4、引用类选择器：
<ANY class='类名'>
5、特殊用法：
1、分类选择器的定义方式
1、特点：允许将元素选择器或类选择器结合到一起使用
2、目的：为了实现对某种元素不同样式的细分控制
3、语法：
元素选择器.类选择器{
...
}
2、多 类选择器的引用方式：
1、特点：让一个元素引用多个类选择器，多个类选择器名称之间用空格分开
2、<ANY class='类名1 类名2'>
3、id选择器
1、id：在HTMl中，每个元素都可以声明一个id属性，取值在网页中必须是独一无二的，不能重复的
2、id选择器的作用：为了匹配页面中指定id值的元素
3、语法：
#id选择器名{...}
4、群组选择器
1、作用：定义多个选择器们共有的样式
2、声明方式是一个以，逗号隔开的选择器列表
3、语法：选择器1，选择器2，选择器3...{...}
5、后代选择器：（只要具备层级关系，不管是几层层级关系，子代也属于后代）
1、作用：
依托于元素的后代关系来匹配某元素的后代元素（不限制层级）
2、语法：
选择器1 选择器2{}
3、示例：
1、div span{
匹配所有的div中所有的span元素
}
2、#top .important{
匹配id为top中所有class为important的元素
}
6、子代选择器：（具有一层层级关系）
1、作用：
依托于元素的子代关系来匹配元素（只有一层层级）
2、语法：选择器1>选择器2>选择器3...{....}
3、示例：
1、#main>.important{
匹配id为main中子代class为important的元素
}
7、伪类选择器
1、作用：为了匹配元素不同状态的选择器，通常会配合其他选择器一起使用（选择器:伪类状态{...}）
2、语法：:伪类状态
1、连接伪类
1、:link：匹配超链接未被访问时的状态
2、:visited：匹配超链接被访问过后的状态
2、动态伪类
1、:hover：匹配当鼠标悬停在元素上时的状态
2、:active：匹配当元素被激活是的状态（点击时的状态）
3、:focus：匹配元素获取焦点时的样式（在输入框内显示光标时）
5、选择器的优先级
1、选择器的优先级看权值
| 选择器 | 权值 |
| 元素选择器 | 1 |
| 伪类/类选择器 | 10 |
| id选择器 | 100 |
| 内联方式 | 1000 |
2、说明：
1、复杂的选择器，权值进行累加计算
2、当权值相同时，且属性有相同的，则按就近原则进行选择
1、尺寸 与 边框
1、CSS单位
1、尺寸单位
1、px：像素
2、%： 百分比
3、in：英寸 1 in = 2.54cm，对角线
4、pt：磅 1 pt = 1/72in
ppi:Pixel Per Inch = 72(一英寸中含有72个点)
5、mm：毫米
6、cm：厘米
7、注意：在CSS中，尺寸的单位是不能省略的
2、颜色单位（取值）
1、rgb（R，G,B）
r：red（0-255）
g：green（0-255）
b：blue(0-255)
rgb（0，0,0）：黑色
2、rgba（r，g，b，alpha）
alpha：0-1的小数，0：完全透明，1：完全不透明
rgba（0,0,0,0.3）：黑色加0.3的透明度
3、#rrggbb
由6位16进制数字表示一种颜色
#000000：黑色
#111111：白色
4、#rgb
#rrggbb的缩写，每两位数字相同时，可以采用缩写
#000：黑色
#111：白色
2、尺寸：
1、作用：改变元素的宽度和高度
2、属性：
1、width：改变元素的宽度
2、height：改变元素的高度
块级元素的默认尺寸：
1、宽度：占父元素的100%
2、高度：以内容为准
行内元素的默认尺寸
1、宽度：以内容为准
2、高度：以内容为准
3、允许修改尺寸的元素：
1、所有的块级元素都可以修改
2、所有的行内块（表单控件）元素都可以修改
3、table（不是块级，行内，行内快元素）允许修改尺寸
4、除img以外的行内元素们，不允许修改尺寸
4、溢出处理
1、什么是溢出
当使用尺寸属性限制元素的尺寸时，如果内容所需要的空间大于元素尺寸时，就会产生溢出效果
2、溢出处理属性：
属性：overflow
取值：
1、visible：默认值，可见的
2、hidden：隐藏
3、scroll：显示滚动条，溢出时可用，没溢出时不可用
4、auto：自动，溢出方向会产生滚动条，没溢出时不显示滚动条
3、边框：
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-属性：值
属性：
border-width
border-style
border-color
4、单边单属性设置
设置某一方向边框的某一属性值
语法：
border-方向-属性：值
方向：top/bottom/left/right
属性：width/style/color
2、边框的组成：
1、边框是由四个三角形组成的（宽高都为0的时候）,或四个梯形组成的（宽高不为0的时候）
3、轮廓:(边框外围的边框，一般表单控件都有轮廓)
outline：none；
4、边框倒角
将边框的四个直角变为圆角
属性：border-radius
取值：
1、以px为单位的数值
2、以%为单位的数值（一般为50%）
5、边框阴影
属性：box-shadow
取值：h-shadow v-shadow blur spread color
h-shadow：以px为单位的数值，水平偏移，取正值，阴影右偏移，负，左偏移（必须的）
v-shadow：以px为单位的数值，垂直偏移，正，下偏，负，上偏（必须的）
bulr：以px为单位的数值，模糊距离，数值越大，模糊效果越强烈
spread：以px为单位的数值，阴影尺寸
color：阴影颜色
4、框模型（盒子模型）
1、什么是框模型
1、框：Box ，页面元素皆为框
2、框模型：Box Modle，定义了元素的尺寸和距离的一种计算方式
1、包含：尺寸属性，边框属性，外边距属性，内边距属性
2、当框模型的属性们应用到元素中的时候，那么元素整体所占尺寸就会发生变化
3、元素的实际宽度=左右外边距+左右边框宽度+左右内边距宽度+width
4、元素的实际高度=上下外边距+上下边框宽度+上下内边距宽度+height
2、外边距：
1、什么是外边距
围绕在元素边框/边缘之外的空白距离就是外边距
2、语法：
1、margin：控制四个方向的外边距
2、margin-top：上边距
3、margin-bottom：下边距
4、margin-left：左边距
5、margin-right：右边距
3、取值：
1、以 px为单位的数值
2、以% 为单位的数值（占父元素的百分比）
3、取值为负数：移动元素时使用，(一般用在margin-top和margin-left)
1、为元素设置上外边距为正数时向下移动
2、为元素设置上外边距为负数时向上移动
3、为元素设置左外边距为正数时向右移动
4、为元素设置左外边距为负数时向左移动
4、取值为auto：自动
1、只对左右外边距有效，上下无效
2、只能为设置宽度的块级元素设置左右外边距为auto
3、作用：让块级元素是水平居中
5、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：左
4、页面中具有默认外边距的距离
1、<p></p>
2、h1~h6
3、ol，ul
4、body
会通过CSS重写的方式，取消默认的外边距
body,p,h1,h2,h3,h4,h5,h6,ol,ul{
margin:0;
}
3、内边距
1、什么是内边距
内容与元素边缘之间的距离，内边距会扩大元素边框内所占的区域
2、语法：
1、属性
1、padding：四个方向的内边距
2、padding-top
3、padding-bottom
4、padding-left
5、padding-right
2、取值：
1、以px为单位的数值
2、以%为单位的数值
3、padding的简洁写法
1、padding：value：四个方向内边距
2、padding：v1 v2：上下，左右
3、padding：v1 v2 v3：上，左右，下
4、padding：v1 v2 v3 v4：上，右，下，左
4、页面中具有默认内边距的元素：
1、ol，ul：左右内边距为40px
2、文本框，按钮
4、box-sizing属性：
1、作用：重新指定框模型的计算方式
2、属性：box-sizing
3、取值：
1、content-box（默认值）
1、元素的width属性只表示内容区域的宽度
2、元素的hegiht属性只表示内容区域的高度
2、border-box
1、元素的width属性包括内容区域宽度，左右内边距和左右边框的值
2、元素的height属性包括内容区域高度，上下内边距和上下边框的值
5、背景属性：
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
取值：
1、width：宽度，以px为单位，以%为单位
2、height：高度，以px为单位，以%为单位
5、背景图片位置
1、作用：改变背景图片在元素中的位置
2、属性：background-position
3、取值：
1、x y：以px为单位的数值，用空格隔开
x：背景图像的水平偏移位置，取值为正，图片右移，负，左偏移
y：背景图像的垂直偏移位置，取值为正，图片下移，负，上偏移
2、x% y%：
0% 0%：在左上角
100% 100%：在右下角
50% 50%：在中间
3、关键字
x可以被left/ center/ right所取代
y可以被top/ center/ bottom所取代
6、背景属性
属性：background
取值：color url（） repeat position
示例：
1、background：red
2、background：rul（‘a.png’ no-repeat -30px 90%）
6、文本格式化属性
1、字体属性
1、指定字体
属性：font-family
取值：使用，逗号隔开的字体值的列表
示例：font-family：‘微软雅黑’，‘黑体‘；
说明：如果第一个字体不支持则匹配下一个字体，依次类推
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、小型大写字母：
1、作用：将文本中的所有小写字母都变为大写字母，但是大小和小写字母一样
2、属性：font-variant
3、取值：
1、normal
2、small-caps
6、字体属性
1、属性：font
2、取值：style variant weight size family
3、注意：使用简写属性时，必须要设置family的值，否则无效
2、文本属性
1、文本颜色
1、属性：color
2、取值：合法颜色值
2、文本的排列方式：控制内容的水平对齐方式(只对行内元素有效，对块级元素无效)
1、属性：text-align
2、取值：left/ center /right/ justify（两端对齐，最后一行数据无效）
3、文字修饰
属性:text-decoration
作用：指定某元素中文字的线条修饰效果
取值：
1、none：无任何线条修饰
2、underline：下划线(<u></u>)
3、overline：上划线
4、line-through：删除线（<s></s>）
4、行高：
1、作用：指定一行文本数据所占的高度是多少（不是字高）
2、特点：如果行高的高度高于文本的高度，那么文本将在行高范围内垂直居中显示
3、属性：line-height
4、取值：
1、以 px 为单位的数字
2、无单位的数字，表示当前文本大小的倍数
5、首行文本缩进
属性：text-indent
取值：以px为单位的数字，表示缩进距离
6、文本的阴影
属性:text-shadow
取值：h-shadow v-shadow bulr color
7、表格属性
1、表格常用属性
1、尺寸属性：width，height
2、边框属性：border（给table元素设置border时只有table有边框，td没有边框）,tr没有border属性
3、文本格式化属性
1、font-*
2、text-*
4、背景属性
5、框模型属性
margin不能应用在td上
margin，padding不能应用在tr上
6、vertical-align
取值：top / middle / bottom
2、表格特有属性
1、边框合并
属性：border-collapse
取值：
1、separate：默认值，分离边框模式
2、collapse：边框合并模式
2、边框边距：设置单元格四周的距离
属性：border-spacing
取值：
1、指定一个值：表示水平和垂直的间距是相等的
2、指定两个值：第一个值表示水平间距，第二个值表示垂直间距，两个值之间用空格隔开
注意：只有在分离边框模式（border-collapse：separate）下才有效
8、过渡效果
1、什么是过度
使得CSS属性值在一段时间内变化成另外一个属性值
2、过渡的语法
1、指定过渡属性
作用：指定哪个属性值在变化的时候使用过渡的效果
属性：transition-property（必须的）
取值：
1、属性名称
2、all（凡是能用过渡效果的属性的值在变化时一律使用过渡效果体现）
允许使用过渡效果的属性：
1、与颜色相关的属性都可以使用过渡
2、取值为数字的属性都可以使用过渡
2、指定多度时长（必须的）
属性：transition-duration
取值：以秒或毫秒为单位的数字
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
练习：创建一个div 200*200，鼠标悬停时：1、背景颜色变为紫色 2、由正方形变为长方向 3、向右偏移500px，鼠标移出时，使用过渡效果显示回来
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>过渡效果</title> <style type="text/css"> div{ width: 200px; height: 200px; border: 1px solid yellow; transition: all 5s ease 1s; } div:hover{ /*如果将transition放在此处，则只在鼠标悬停上面有效，离开时无效*/ height: 100px; background-color: purple; margin-left: 500px; } </style> </head> <body> <div></div> </body> </html>
1、定位（重点）
1、什么是定位：表示元素在页面中的位置
2、为什么需要定位：元素在默认位置无法满足页面的需求，所以需要通过定位改变元素默认的位置
3、css中定位的分类
1、普通流定位（默认定位方式）
2、浮动定位（重难点）
3、相对定位
4、绝对定位（难点）
5、固定定位
4、普通流定位
普通定位，又称‘文档流定位’，是页面中所有元素的默认定位方式。典型的‘流式布局’
特点：
1、每个元素在页面中都有自己的位置，并占据一定的页面空间
2、每个元素都是从其父元素的左上角开始排列的
3、每个元素基本上都是按照从上到下，从左到右的方式进行排列的
块级元素：从上到下排列
行内元素&行内快：从左到右排列，只有一行内显示不下的时候才换行
问题：如何能够让多个块级元素子在一行显示呢？
5、浮动定位（重难点）
1、什么是浮动&浮动的特点
1、浮动元素会被排除在文档流之外（脱离文档流），那么元素将不再占据页面的空间
2、未浮动的元素们会上前占位
3、浮动元素会停靠在父元素的左边或右边或其他已浮动元素的边缘上
4、浮动只能在当前行浮动
5、浮动解决的问题（让多个块级元素在一行内排列）
2、语法：
属性：float
取值：
1、none：默认值，无任何浮动效果
2、left：浮动到父元素的左边，或停靠在左边已有浮动元素的边缘上，左浮动
3、rgiht：浮动到父元素的右边，或停靠在右边已有浮动元素的边缘上，右浮动
3、浮动引发的特殊效果
1、如果父元素中显示不下所有的已浮动元素的话，那么最后一个将换行显示，但是有可能被卡主
2、元素一旦浮动起来之后，将都变成块级元素，行内元素们是可以修改尺寸的
3、元素一旦浮动起来，在未指定宽度的情况下，那么宽度将由内容来决定
4、文字，图片，行内元素是采用环绕的方式来排列的，是不能被浮动元素压在下面的
4、清除浮动
1、浮动带来的影响
当前元素浮动，会受到后面元素浮的位置。
如果后面的元素不想受到当前元素浮动影响的话，则可以通过清除浮动的方式来解决问题
2、语法：
属性：clear
取值：
1、none：默认值，即不做任何清除浮动的操作
2、left：清除前面元素左浮动带来的影响
3、right：清除前面元素右浮动带来的影响
4、both：清除前面元素任何一种浮动方式带来的影响
5、浮动元素对父元素高度的影响
1、父元素的高度是以未浮动的子元素的高度为准的，
2、如果一个父元素中所有的子元素都是浮动的，那么他的高度会变为0
3、解决方案：
1、为父元素增加overflow属性，取值为auto或hidden
有弊端：如果有溢出要显示的内容，也一同被隐藏了
2、在父元素的末尾处，增加一个空块级元素，并设置其为clear为both
2、其他定位方式（相对，绝对，固定）
1、相关属性
1、定位方式
作用：改变元素默认的定位方式
属性：position
取值：
1、static：默认值，静态的
2、relative：相对定位
3、absolute：绝对定位
4、fixed：固定定位
注意：将元素的position设置为relative/absolute/fixed任何一种的话，那么该元素就称为‘已定位元素’
2、偏移属性（共四个）
作用：配合已定位元素去实现位置的偏移
属性：
top：以元素的上边为基准边去移动元素
bottom：以元素的下边为基准去移动元素
left：以元素的左边为基准去移动元素
right：以元素的右边为基准去移动元素
取值：以px 为单位的数值
注意：只有已定位（相对，绝对，固定）的元素才能使用偏移属性
2、相对定位
1、什么是相对定位
元素会相对它原来的位置偏移某个距离
2、语法
属性：position
取值：relative
配合 偏移属性 实现位置的移动
3、绝对定位
1、什么是绝对位置 &特点
1、绝对定位的元素会脱离文档流（不占据页面空间）
2、决定定位的元素会相对于离他 最近 的，已经定位的 祖先 元素去实现位置初始化
3、如果没有元素离他最近，已定位的祖先元素的话，那么元素就会相对于body去实现位置的初始化
2、语法
属性：position
取值：absolute
配合 偏移属性 实现位置的变化
4、堆叠顺序
属性：z-index
取值：无单位的数字，默认值为0，数字越大越靠前
5、固定定位
1、什么是固定定位
将元素固定在浏览器窗口的某个位置处，不会随着滚动条的滚动而发生位置的改变
2、语法
属性：position
取值：fixed
配合着 属性属性 实现位置的初始化
3、注意：固定定位的元素永远都是相对于body去实现位置的初始化的
3、显示
1、显示方式：
1、作用：决定了元素以什么样的方式（块级，行内）显示在网页中
2、语法：
属性：display
取值：
1、none：让元素不显示（隐藏），脱离文档流（不占页面空间）
2、block：让元素显示的和块级元素一致
3、inline：让元素显示和行内元素一致
4、inline—block：让元素显示的和行内块一致
特点：
1、多个元素能够在一行内显示
2、每个元素是允许修改尺寸的
2、显示效果
1、visibility 属性
作用：控制元素的可见性
取值：
1、visible：可见的，默认值
2、hidden：隐藏，该隐藏方式并未脱离文档流，所以还占据页面空间
2、opacity 属性
作用：控制元素的透明度
取值：0（完全透明）～1（完全不透明）之间的数字
3、vertical-align 属性
1、用在td中，设置td内容的垂直对齐方式
2、用在图片 和 行内快元素上
设置图片和行内块的文本相对于图片和行内块元素的垂直对齐方式
取值：
1、top
2、middle
3、bottom
4、baseline：基线对齐,默认值
3、光标
作用：指定当鼠标悬停在元素上时鼠标的表现形式（可不必加在hover上面）
属性：cursor
取值：
1、default：默认
2、pointer：小手
3、crosshair：+
4、text：I
5、wait：等待
6、help：帮助
4、列表：
常用属性：
list-style：none；
5、转换：
1、什么是转换
改变元素在页面中的位置，尺寸，角度的一种方式
2、属性：
1、转换属性
属性：transform
取值：
1、none：默认值，没有任何转换效果
2、一组转换函数，如果是多个函数的话，中间用 空格 隔开
2、转换原点：
属性：transform-origin
取值：连个数字，中间用空格隔开
1、以px为单位的数值，（以元素的左上角0 0为准）
2、以%为单位的数值，以元素的左上角0 0为准）
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表示纵向缩放比例，同上
3、scale（value）：水平和垂直的缩放比例相同
3、旋转：
作用：改变元素在页面中的角度
属性：transform
取值：rotate（ndeg）：n取值为正，顺时针，n取值为负，逆时针，deg为度数单位
注意：
1、转换原点会影响转换效果
2、旋转操作会连同坐标轴一起跟着旋转，他会影响旋转之后的位移效果
图例
<body style="background-color:011624"> <div class="legend" style="width:120px; height:170px; background-color:rgba(0,8,14,0.5); margin-top:10%; margin-left:30%"> <ul class="colors" id="legend-color" style="font:normal normal normal 16px '微软雅黑'; color: white; line-height:29px"> <li style="list-style: url('1.png');">0~35</li> <li style="list-style: url('2.png');">35~75</li> <li style="list-style: url('3.png');">75~115</li> <li style="list-style: url('4.png');">115~150</li> <li style="list-style: url('5.png');">150~250</li> <li style="list-style: url('6.png');">250+</li> </ul> </div>
实现呼吸点效果
<!doctype html> <html> <head> <meta charset="utf-8"/> <style> .round{ width: 36px; height: 36px; margin:100px auto; position: relative; } .circle { background-color: #AC002F; width:12px; height:12px; border-radius:50%; top:12px; left: 12px; position:absolute; } .circle_bottom { background-color: #AC002F; width:24px; height:24px; border-radius:50%; filter:alpha(opacity=40); top: 6px; left: 6px; position:absolute; } .circle_bottom2 { background-color: #AC002F; width:36px; height:36px; border-radius:50%; filter:alpha(opacity=20); } .animation { ;-webkit-animation:twinkling 2.1s infinite ease-in-out; animation:twinkling 2.1s infinite ease-in-out; -webkit-animation-fill-mode:both; animation-fill-mode:both; } .animation2 { ;-webkit-animation:twinkling 2.1s infinite ease-in-out; animation:twinkling 2.1s infinite ease-in-out; -webkit-animation-fill-mode:both; animation-fill-mode:both; } @-webkit-keyframes twinkling { 0% { opacity:0.2; filter:alpha(opacity=20); -webkit-transform:scale(1); } 50% { opacity:0.5; filter:alpha(opacity=50); -webkit-transform:scale(1.12); } 100% { opacity:0.2; filter:alpha(opacity=20); -webkit-transform:scale(1); } }@keyframes twinkling { 0% { opacity:0.2; filter:alpha(opacity=20); -webkit-transform:scale(1); } 50% { opacity:0.5; filter:alpha(opacity=50); -webkit-transform:scale(1.12); } 100% { opacity:0.2; filter:alpha(opacity=20); -webkit-transform:scale(1); } } </style> </head> <body> <div class="round"> <div class="circle"></div> <div class="circle_bottom animation "></div> <div class="circle_bottom2 animation2 "></div> </div> </body> </html>
