CSS3
CSS（Cascading Style Sheets）级联样式表，是一种计算机语言，用来控制HTML内容的显示效果。
CSS预先定义了众多和显示效果有关的样式属性，比如color、font-size等。
CSS的基本单位是样式声明propertyName:value;可以把样式声明写在CSS的选择器中，也可以直接写在HTML标签的
style属性中。
一个标签的最终显示效果，是由若干个样式属性层叠到一起形成的。
文本样式：用来控制文本的显示效果。
常用样式属性：
color：文本颜色
text-indent：文本缩进
text-align：文本对齐方式
word-spacing：单词间隔
letter-spacing：字符间隔
text-decoration：文本修饰
颜色值：
颜色名：red、blue等表示颜色的英文单词
RGB颜色：rgb(255,0,0)
RGBA颜色：rgba(255,0,0,0.5)
十六进制颜色：#FF0000
长度单位：
px：像素
%：百分比
em：一个字符的长度
字体样式：
font-family设置字体名称
font-size设置字体尺寸
font-style设置字体风格
font-weight设置字粗细
CSS选择器
基本选择器：
标签选择：通过标签名定位标签
id选择器：通过标签的id属性值定位标签
类选择器：通过HTML标签的class属性值定位标签
属性选择器：通过属性名、属性值等定位标签
伪类选择器：用来定位处在特定状态下的标签
复合选择器：选择器可以进行多种形式的组合
边框样式：
很多HTML标签都有边框，如img、table、td、div、input等
border-style边框样式
border-width边框宽度
border-color边框颜色
可以合并上面三个样式属性border:solid 2px red;
还可以分别控制上下左右边框的样式，如border-top-color样式属性
table元素使用border-collapse:collapse;可以合并单元格边框
背景样式：
很多HTML标签都可以设置背景样式(背景色、背景图片)，如body、div等
background-color:red;背景色，颜色值
background-image:url("bg1.jpg");
background-repreat:背景图片平铺方式
background-attachment：背景图片是否随内容滚动
background-position-x:center;背景图片水平方向位置
可以写在一起background:url("bg1.jpg") repreat;
盒子模型：
为了更好的控制页面样式，CSS定义了盒子模型。一个HTML标签就是一个盒子
* 一个盒子在页面中占据的范围大小由外边距、边框、内边距、内容的总面积决定
* 内边距和外边距只能指定宽度样式
* 盒子的背景会对内边距和内容起作用
* 外边距、边框、内边距可对上下左右部分分别进行样式控制
* 设置盒子高度或宽度时只对内容起作用
块级元素：这类元素默认有换行效果，典型的如div
行内元素：这类元素默认没有换行效果，典型的如span
文档流：
HTML元素在页面上显示时，根据在源码中出现的次序，按照从上到下、从左到右、块级元素独占一行、行内元素不换
行的规则依次排序。文档流中的元素会对后续元素的位置产生影响。
相对定位：
元素在显示时，相对自己本来的位置向下或者向右偏移指定数值，但元素本身并不脱离文档流，也就是说后面的元素
还认为此元素在原来的位置，所以会排列在此元素原本位置的后面（但会造成覆盖）。
绝对定位：
以最近的已经定位的祖先元素为基准进行偏移（如果没有这样的祖先元素则以浏览器窗口为基准），元素本身脱离文
档流，也就说后面元素认为此元素不存在，所以会占据此元素原来的位置（但会造成覆盖，脱离文档流后就不具有块
级元素独占一行的性质了）。
固定定位：
和绝对定位类似也会脱离文档流，但总是以浏览器窗口为基准，而且位置不会随滚动条移动
z-index层级
由于元素定位后悔产生元素的叠加覆盖情况，为了灵活控制叠加部分的显示，CSS提供了z-index层级样式属性
z-index只能取整数，默认为0，可正可负
z-index值大的元素会覆盖值小的元素
浮动：
如果一个盒子向左浮动（float：left），这个元素会成为行内元素；它后面的块级元素会失去一半的独占一行的特
性，即左边紧靠在浮动元素后面，右边延伸到行尾。
向右浮动和向左浮动效果类似。
可以使用clear:both;清除浮动效果对后面盒子的影响。
元素坐标：
HTML所有标签都具以后5个只读属性：
offsetLeft：元素边框距页面左边界的距离
offsetTop：元素边框距页面上边界的距离
offsetWidth：元素的宽度（左右边框的跨度）
offsetHeight：元素的高度（上下边框的跨度）
offsetParent：返回已经定位的祖先元素，如果没有则返回body元素或者null
使用CSS的五种方式
行内样式：写在元素的style属性里
内嵌样式：写在<style>元素内
导入样式：在<style>元素内开头使用@import url(index.css);方式引入，这种方式实际上算是内嵌样式
链接样式：使用<link>元素引入css文件，如<link type="text/css" rel="stylesheet" href="c1.css" />
默认样式：集合每一种html标签都有默认的css样式
当某个样式属性出现多次时，优先规则为：
1、不同引入方式的优先级：行内>内嵌、导入和链接>默认样式
2、同一种引入方法或相同优先级的引入方式中，后出现的会覆盖先出现的
其他常用样式属性
display控制元素的可见性
cursor控制鼠标指针进入元素时的样式
HTML5
HTML（Hyper Text Mark-up Language）超文本标记语言，是一种编程语言，也可以说是一种标准、规范
HTML提供了一系列标记（标签），每个标记都有不同的含义和作用，浏览器根据标记的含义把内容显示到浏览器页面
上
超文本：页面不仅可以包含普通文本，还可以包含图片、链接、音乐、程序等非文本内容
基本标签：
* <!DOCTYPE>定义文档类型，表明该文档的类型和版本
* <html>定义HTML文档（页面）
* <title>定义文档的标题
* <meta>定义文档的元数据，影响浏览器对页面的解析处理
* <body>定义文档的主体
* <h1>~<h6>定义标题文本大小
* <p>定义段落文本
* <br>定义换行
* <hr>定义水平线
* <!--...-->定义注释
列表标签：
无序列表
<ul>：在页面上显示一个无序列表（type属性决定图标样式）
<li>：表示一个列表项
有序列表
<ol>：在页面上显示一个有序列表（type属性：1 a A i I）
<li>
自定义列表
dl:在页面上显示一个自定义列表
dt:定义父节点列表项
dd:定义子节点列表项
注意：dt和dd不是嵌套关系，而是并列的
语法规则：
* 标签成对出现，有开始标签就需要有结束标签
* 标签不区分大小写，但建议使用小写
* 一对标签的内容可以为空、文本，或者其他标签
* 如果一对标签的内部总是为空，可以简写为单标记形式，如<br/>
* 两对标签不可以交叉
* 标签可以包含若干属性，属性之间使用空格隔开，属性之间没有顺序
* 一些标签需要配合使用，共同完成一件复杂的事情
* 浏览器把若干连续的空白字符（空格符、换行符、制表符）处理成一个空格的效果
文本显示效果标签
<small>小号文本；<big>大号文本；<b>粗体文本；<i>斜体文本
<u>加下划线文本；<s>加删除线的文本；<strike>加删除线文本
<center>居中文本；<em>强调文本；<strong>语气更为强烈的强调文本
<sup>上标文本；<sub>下标文本；<font>文本的字体、尺寸和颜色
实体字符：
空格( )：
小于号(<)：<
大于号(>)：>
和号(&)：&
双引号(")："
表格标签：
<table>定义一个表格整体
<caption>定义表格标题
<tr>定义表格中的行
<td>定义行的单元格（colspan、rowspan属性可以合并单元格）
<thead>表头
<th>定义表格中的表头单元格
<tbody>表格主体，可用于大表格分段显示优化
<tfoot>表格的脚注
超链接标签
链接到外部资源：
<a href="www.baidu.com" target="_blank">百度一下</a>
target属性取值：
_self：在当前页面显示外部资源
_blank：在新页面显示外部资源
链接到页面内的另一个<a>标签
<a name="mao">定义一个位置（锚）</a>
<a href="#mao">指向这个位置</a>
图片标签
<img>用来在页面上显示一个图片
<img src="美女.jpg" alt="美女不在，请稍等"/>
src属性：指定图片资源位置
alt属性：当找不到src指定的图片资源时，显示在浏览器上的说明提示
width、height属性：指定图片显示的宽、高
border：指定图片边框的宽度
表单标签
表单标签是一组标签，定义了供用户输入的表单控件，以便收集用户输入的信息
<form>用来确定表单范围，以及指定表单提交行为等
<form>的属性：
action：指定把表单数据提交到服务器哪个地方
method：指定提交数据的方式，常用get（默认）和post
enctype：指定数据的编码方式，当需要上传文件时需要指定为multipart/form-data
<input>用来定义表单控件，不同的type属性值有不同的外观样式
<input>的属性：
type：
text：单行文本输入框
passoword：密码输入框
radio：单选按钮
checkbox：多选按钮
file：文件选择框
hidden：隐藏域
button：普通按钮（点击时不会提交表单）
submit：提交按钮
reset：重置按钮
name：指定此表单控件收集的是哪方面的用户数据，此属性必须指定，否则输入的数据不会被提交到服务器
value：用来指定表单控件的值，其实用户输入的内容就是value属性的值
<label>定义表单控件的描述，for指定目标控件的id
<textarea>定义多行文本控件
<select>定义下拉列表，name属性在该标签指定，和<option>配套使用
<option>定义下拉列表的选项，value属性在该标签指定
<button>提交按钮，和input(submit)效果一样，另外输入框中按回车键也会提交表单
框架标签
<iframe>定义内嵌框架、内嵌页面
<iframe src="inner.html" width="600px" height="370px"></iframe>
页面布局标签
<div>(division)和<span>都可以把页面分成相对独立的各个部分，方便布局。不同之处在于div默认有换行效果，
而span则没有
HTML5是HTML语言的第5次重大版本，新增了一些HTML标签、属性、CSS样式属性、JavaScriptAPI等，同时也删除了
一些过时的和样式有关的HTML标签和属性
<video>：用来在页面播放视频，支持MP4或者WebM视频格式，但各浏览器之间没有统一标准，不同浏览器支持的格
式不同，为此又提供了<source>,以便提供备选的视频资源
<video>属性：
src：视频资源的URL
width：视频播放器宽度
height：视频播放器高度
controls：显示播放空间，比如播放按钮
autoplay：资源准备好后自动播放
loop：循环播放
<audio>：用来在页面播放音频，支持OGG、MP3、WAV三种音频格式，同样，各浏览器之间也没有统一的标准，用法
和<video>相似
表单增强
新的表单控件：也就是为<input>标签的type属性增加了新的可选值：
date：日期控件 格式为yyyy-MM-dd
time：时间控件 格式为hh:mm
number：数组控件
range：范围控件
search：搜索框控件
color：颜色选择器
email、url、datetime
placeholder：输入框提示信息
required：必填
pattern：用于验证用户输入
form：指定控件所属的表单，这样控件就不必一定要在<form>标签内了
autofocus：自动获得焦点
multiple：指定文件上传时是否可选中多个文件
accept：指定上传文件时允许的MIME类型（文件类型），如"image/*"
HTML5中<div>的新增文档语义标签：
<header>：一般放置logo、菜单栏
<nav>：一般放置目录、导航栏、友情链接
<article>：页面中相对独立的结构，比如一篇文章、文章的每一个评论
<section>：页面区域,文章章节，和<article>可相互代替也可嵌套，比较灵活
<aside>：一般放置广告、解释性信息
<footer>：一般放置版权信息
新增事件：
beforeunload：页面关闭或刷新前触发
scroll：页面滚动时触发
resize：页面尺寸被调整时触发
mousewheel：鼠标滚轮滚动时触发
dragstart、dragover、drop：拖放事件
<canvas>：画布
HTML5为window对象新增了localStorage属性对象，可以把字符串类型的键值对数据存放到用户本地电脑上，各个
网站各个浏览器存放的数据相互独立，存储上限大约是5MB
Bootstrap
Bootstrap来自Twitter，是目前最受欢迎的前段框架。
Bootstrap基于HTML、CSS、JavaScript，在使用时主要通过使用Bootstrap声明的CSS的class来达到效果，简洁
美观，特别适合用来开发网站前台页面。
Bootstrap可以很好的支持移动设备，在移动设备上显示网页时可以自动缩放。
准备：
新建HTML页面，导入bootstrap.min.css（样式效果都在这里面）、jquery.min.js（bootstrap.min.js依赖
jQuery库，但需要自己提供jquery.min.js文件）、bootstrap.min.js（一些动态效果如折叠需要使用这个js文
件）
1、容器（Container）：用来包裹其他页面元素
效果：容器左右两边有等宽的外边距
主要class：.container
2、网格布局
Bootstrap把页面的一行，称为网格行，等分为12份，也就是12列，并且这12列可以进行任意组合，比如3,3,3,3或
者2,4,6等，方便进行排版布局
主要class：
.row表示布局时的一行
.col-x-n表示一个元素占据了12列中的n列，x表示设备尺寸
注意：网格行可以嵌套，即.row可以嵌套在.col-x-n里面
3、Bootstrap表格
主要class：
.table表示表格整体
.table-striped指定隔行变色效果
.table-bordered添加单元格边框
.table-hover鼠标经过变色效果
4、表单
主要class：
.form-horizontal作用域<form>，指定水平布局
.form-group和.row相似，也把一行等分为12列，子元素可使用.col-x-n
.control-label作用于<label>，用来指定对齐方式
.form-control作用于<input>、<textarea>等表单控件，用于指定各种类型表单控件的样式
.input-x作用于<input>、<textarea>等表单控件，指定表单控件大小，x可以为xs、sm、md、lg
可以使用.col-x-offset-n指定元素的偏移量，就相当于前面多了个.col-x-n元素
5、按钮
主要class：
.btn作用于<button>、<input type="button">、<input type="submit">、<a>，表示整个按钮
.btn-y指定按钮语境色彩，y可以为default、primary、success、info、warning、danger、link
.btn-x可指定按钮尺寸，x可以为sx、sm、md、lg
6、字体图标
字体图标可以简单的理解成看起来像图标的文本字符（可以当成文本来处理，可以设置颜色、大小以及其他文本样式）
主要class：
.glyphicon表示使用此字体图标
.glyphicon-x指定使用哪一个字体图标，x可以为user、plus、minus、edit等
7、导航菜单
主要class：
.nav表示整个导航菜单
.nav-pills指定此导航菜单是胶囊式的
.nav-tabs指定此导航菜单是标签式的
8、标签
主要class：
.label表示整个标签
.label-x指定标签的语境色彩，x可以为default、primary、success、info、warning、danger
9、进度条
主要class：
.progress表示整个进度条
.progress-striped表示这个进度有条纹效果
.progress-bar表示进度条的已完成部分（配合style="width:n%"指定具体百分比）
.progress-bar-x指定进度条语境色彩，x可以为success、info、warning、danger
10、多媒体对象
多媒体是指图片、音频、视频等
Bootstrap的多媒体对象用来混排多媒体和文本（比如文章评论）
主要class：
.media表示整个多媒体
.media-object表示多媒体对象
.media-body表示文本内容
.media-heading表示文本内容的标题
多媒体可以嵌套
11、列表组
主要class：
.list-group表示整个列表组
.list-group-item表示一个列表项
12、面板panel
主要class：
.panel表示整个面板
.panel-x表示面板语境色彩，x可以为default、primary、success、info、warning、danger
.panel-heading表示面板标题
.panel-body表示面板内容
使用带有.panel-group的<div>包裹若干个面板可在逻辑上形成一组面板
13、well
主要class：
.well表示整个well
.well-x表示well尺寸，x可以为sm、lg
14、折叠面板
主要class：
.collapse表示整个可折叠的元素
.panel-collapse表示面板中可折叠的部分
.in表示展开
由于折叠动作是使用JavaScript做出来的，需要引入jQuery库，同时需要data-toggle、id等属性
同一个panel组中的各个panel折叠、展开时会联动
CSS3、HTML5及Bootstrap
Guess you like
Origin blog.csdn.net/Mr_TXQ/article/details/109054345
Recommended
Ranking