CSS/CSS3/Html5学习笔记
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
<!DOCTYPE html>
<a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a href="http://www.w3school.com.cn">W3School</a>
<b> 标签规定粗体文本。
-----CSS基础-----
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
多个样式定义可层叠为一
优先级：
所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于 <head> 标签内部）
4.内联样式（在 HTML 元素内部）
CSS 语法
selector {declaration1; declaration2; ... declarationN }
例如：
p {
text-align: center;
color: black;
font-family: arial;
}
1.空格不会影响 CSS 在浏览器的工作效果。
2.除涉及到与 HTML 文档class 和 id 名称外，CSS 对大小写不敏感。
分组选择器：
被分组的选择器可以分享相同的声明，用“，”隔开。以下为标题全部绿色：
h1,h2,h3,h4,h5,h6 {
color: green;
}
继承：
根据 CSS，子元素从父元素继承属性。
body {
font-family: Verdana, sans-serif;
}
根据上面这条规则，在站点的元素没有规定自己的样式时，就自动继承父元素 body 的Verdana 字体
哪个近继承哪个，不同层次有不同属性，则都继承。
派生选择器：（即子选择器？或者说交集选择器?）
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。
h2 strong {
color: blue;
}
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>
id选择器
id 属性只能在每个 HTML 文档中出现一次
#red {color:red;}
<p id="red">这个段落是红色。</p>
类选择器
.center {text-align: center}
<h1 class="center">
This heading will be center-aligned
</h1>
属性和值选择器
下面的例子为带有 title 属性的所有元素设置样式：
[title=W3School]
{
border:5px solid blue;
}
属性和值选择器 - 多个值
[title~=hello] { color:red; }//适用于由空格分隔的属性值
[lang|=en] { color:red; }//适用于由连字符分隔的属性值
创建CSS的三种方式：
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
内部样式表
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
-----CSS样式-----
背景色
background-color
p {background-color: gray;}
背景图像
background-image
body {background-image: url(/i/eg_bg_04.gif);}
背景定位
background-position
百分比方式
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50% 50%;
}
如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。
背景关联
background-attachment:fixed
声明图像相对于可视区是固定的（fixed），不会受到滚动的影响
表格边框
下面的例子为 table、th 以及 td 设置了蓝色边框：
table, th, td
{
border: 1px solid blue;
}
表格文本对齐
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中：
td
{
text-align:right;
}
vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：
td
{
height:50px;
vertical-align:bottom;
}
表格内边距
如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：
td
{
padding:15px;
}
轮廓（outline）是绘制于元素周围的一条线
-----CSS 框模型 (Box Model)-----
margin 外边距 外边距可以是负值
border 边框
padding 内边距
width 元素宽度 元素外面裹着内外边距
height 元素高度 元素外面裹着内外边距
百分数值是相对于其父元素的 width 计算的
举例
h1 {padding: 10px;}
还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值
h1 {padding: 10px 0.25em 2ex 20%;}
-----CSS定义-----
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素或浏览器窗口本身的位置。
一切皆为框
块级元素
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。
行内元素
也叫内联元素、内嵌元素。
span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
display 属性
可以使用 display 属性改变生成的框的类型。
将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。
把 display 设置为 none，让生成的元素根本没有框。
CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框
的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
position 属性
position 属性值的含义：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定
位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
CSS定位属性
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。
CSS相对定位
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
CSS绝对定位
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来
不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。
提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
CSS浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
在 CSS 中，我们通过 float 属性实现元素的浮动。
-----CSS选择器-----
CSS 元素选择器
也叫类型选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
选择器分组
用“，”来代表不同的选择器组合。即并集。
h1, h2, h3, h4, h5, h6 {color:blue;}
通配符选择器
该选择器可以与任何元素匹配
* {color:red;}
结合元素选择器
p.important {color:red;}
选择器现在会匹配 class 属性包含 important 的所有 p 元素
CSS 多类选择器
<p class="important warning">
.important.warning {background:silver;}
通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）
简单属性选择
可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：
img[alt] {border: 5px solid red;}
根据具体属性值选择
假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
根据部分属性值选择
假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：
p[class~="important"] {color: red;}
p.important 和 p[class="important"] 应用到 HTML 文档时是等价的
子串匹配属性选择器
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
特定属性选择类型
最后为您介绍特定属性选择器。请看下面的例子：
*[lang|="en"] {color: red;}
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
根据上下文选择元素
即后代选择器，以空格隔开。只要是它的后代都能选到，不管是儿子还是孙子还是什么。
我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：
h1 em {color:red;}
CSS 子元素选择器
只选儿子一代
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {color:red;}
CSS 相邻兄弟选择器
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
伪类
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。
伪元素
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。
-----CSS高级-----
水平对齐
对齐块元素
块元素指的是占据全部可用宽度的元素，并且在其前后都会换行。
使用 margin 属性来水平对齐
可通过将左和右外边距设置为 "auto"，来对齐块元素。
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
使用 position 属性进行左和右对齐
对齐元素的方法之一是使用绝对定位：
实例
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。
跨浏览器兼容性问题
当像这样对齐元素时，对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。
body
{
margin:0;
padding:0;
}
使用 float 属性来进行左和右对齐
对齐元素的另一种方法是使用 float 属性：
实例
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
CSS 尺寸 (Dimension) 属性
允许你控制元素的高度和宽度。同样，它允许你增加行间距。
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。
CSS 分类属性 (Classification)
CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。
clear 设置一个元素的侧面是否允许其他的浮动元素。
cursor 规定当指向某元素之上时显示的指针类型。
display 设置是否及如何显示元素。
float 定义元素在哪个方向浮动。
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
visibility 设置元素是否可见或不可见。
HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
浏览器支持
所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。
浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
什么是 Web Worker？
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。
浙公网安备 33010602011771号