高山流水

CSS笔记

发表于 2018-05-25 更新于 2019-02-28 分类于 Web开发

说明
1. 部分参考O'Reilly Media出版的HTML and CSS和HTML with CSS & XHTML
2. 部分参考作者兼续在简书上的笔记https://www.jianshu.com/p/727dbfcef685

一、基本概念

常识与实践

css的每一个语句包括一个场所，以及这个场所的一个属性，及应用到这个属性的一个样式,一个典型的css规则如下:

p { // 需要增加样式的元素: p,这称为选择器(selector),匹配页面中的所有p元素
     background-color: red; //背景色为红色
      border: 1px solid gray; //边框: 1像素,实线,灰色
    }

css 的注释: /* */

1	/* this rule will have no effect because it's in a comment p { color: blue; } 缺一个星号*/

css验证：http://jigsaw.w3.org/css-validator/
- 还可以把验证图标放到你的web页面中
查看浏览器是否支持新元素，以及支持情况是否有更新：https://caniuse.com/#search=new%20elements

二、链接方式

内部链接

要为html直接增加css样式，需要在<head>元素中增加开始和结束style标记，css规则放在里面

<style>
  p {
     color: gray;
  }
</style>

CSS文件外置

另一种方式将css文件外置，如style.css,作为样式表(stylesheets),然后从html中创建一个到这个文件的外部链接,用<link>元素,用外部样式表的好处是要修改整个网站的样式，只要进入这个样式表，对css进行几处修改即可。如:

1
2
3

<link type="text/css" rel="stylesheet" href="lounge.css" >
#放到<head>元素中,在html5中不再需要type这个属性(可选),rel(relation)指定html与所链接文件间的关系,这里指我们要链接到一个样式表
#link是一个void元素

三、多样式表

使用多个样式表,顺序很重要，一个样式表会覆盖在它上面链接的样式表中的样式,有时会有一个样式表作为页面的基础样式。修改样式，要在下面提供自己的样式表，指定要修改的样式,如下所示:

1
2
3

<link rel="stylesheet" href="corperate.css">//总公司样式
<link rel="stylesheet" href="beverage-division.css">//部门对总公司的样式做了一些补充，甚至可以覆盖公司的样式
<link rel="stylesheet" href="lounge-seattle.css">//西雅图休闲室对样式表做了自己的调整

四、简写

css属性太多，能不能不费吹灰之力就指定这些属性呢？可以把同一属性的值结合起来写成一句,即简写。

简写格式

padding
- padding: 0px 40px 30px 20px;
- 顺序是上右下左，顺时针
- 如果都相同可以用padding: 20px;
  1
  2
  3
  4
  padding-top: 0px;
  padding-right: 40px;
  padding-bottom:30px;
  padding-left: 20px;
margin
- 上面的padding格式同样对margin也适用
- 还有另一种方法,如果上下一样，左右一致,可以这样写:margin: 0px 20px;,前面指定上下，后面指定左右。
border
- 边框属性简写border: thin solid #007e73;
- 可以用你喜欢的任何顺序
background
- 背景简写background: white url(images/cocktail.gif) repeat-x;
- 同样顺序随便
字体
- 字体简写的格式稍微复杂一些:
- font : font-style font-variant font-weight font-size/line-height font-family
- font的属性中font-size必须有
- font-size前的属性是可选的，组合任意，不过必须出现在font-size之前
- line-height是可选的，只要在font-size后加/然后指定行高即可
- font-variant指小型大写字母
- font-family名之间要使用逗号分隔
- 如: font : small/1.6em Verdana, Helvetica, Arial,sans-serif;

简写的优劣

不一定要用简写形式，有些人觉得长形式更可读。
简写的好处: 缩写css文件大小，输入更快。
简写的不足: 如果存在问题，或者顺序有误，比较难调试
简写记起来复杂，可以用参考手册

五、选择(selector选择器/选择符)

子孙选择器

父元素和子孙元素名之间有一个空格,子孙选择器会选择所有子孙，包括这个元素中嵌套的所有,不管嵌套多深,例如

1
2
3

#elixirs h2 {//选择elixirs子孙的所有h2
	color: black;
	}

选择直接的子元素

用>

1
2
3

#elixirs>h2 {//选择elixirs的直接孩子h2
color: black;
}

复杂选择

更复杂的选择,方法还是一样

1
2
3

#elixirs blockquote h2 {//选择elixirs中的blockquote中的h2元素
  color: blue;
}

属性选择器

img[width] { border: black thin solid; }

选择所有包含一个width属性的图像
img[height="300"] {border: red thin solid; }
image[alt~="flowers"] { border: #ccc thin solid; }

选择所有alt属性包含单词“flowers“的所有图像
按兄弟选择h1+p { font-style: italic; }

所有紧跟在一个<h1>元素后面的段落

六、规则添加

要为多个元素编写一个规则，只需要在选择器之间加上逗号，如 "h1,h2"。

h1,h2 {// 多个选择器
 font-family: sans-serif;
 color: gray;
}

元素可以指定多次规则,例如我们想给h1添加下边框，但是不想给h2页也加上，也不想分解上面的规则，可以给h1再增加一个属性:
1
2
3
4
5
6
7
h1,h2 {
font-family: sans-serif;
color: gray;
}
h1{
border-bottom: 1px solid black;
}
把元素的所有共同样式归组在一起(如果改变，只需要在一个规则中修改)，然后把一个元素特定的样式写在另一个规则中。

七、类

当我们用选择器选择元素使用一个规则时,会对所有该元素应用这个样式，所以如何单独地选择这些元素呢?

这里就需要类class,class可以定义一类元素，对属于该类的所有元素应用样式。要将一个元素加入一个类，只需要增加属性"class",并提供类名,如"greentea":

1
2
3

<p class="greentea">
...
</p>

类元素选择器

先选择这个类中的元素,再用"."指定一个类,最后是类名,如:

1
2
3

p.greentea {
  color: green;
}

添加类元素

如果想对所有<blockquote>也做同样的处理，可以:

1
2
3

blockquote.greentea,p.greentea {
    color: green;
}

类选择器

如果想把<h1>,<h2>,<h3>,<p>和<blockquote>都增加到greentea呢？要对类中的所有元素都用同一样式可以用:

.greentea{
  color: green;
}
/*省略所有元素名,只有一个点,则会应用到所有成员*/

多类元素

元素可以有多个类,例如:

1
2
3

<p class="greentea raspberry blueberry"
#各个类名用空格分隔
#类中顺序不重要

特定元素选择器

如果多个选择器都选择了一个元素呢？例如上面的3个类都与p元素匹配，并且都定义了color属性，那么那个会胜出?

如果某个规则更特定，则选择更特定的元素

如果特定程度相同，那么会选择css文件中最后列出的规则，例如下面的例子中会选择p.blueberry的规则:

p { color : black;} // 对于所有段落
.greentea { color: green;} //对于所有greentea类，比上面特定
p.greentea { color : green;} //只选择greentea类中的段落,比上面特定
p.raspberry { color : blue;} //同上,与greentea特定程度相同
p.blueberry { color : purple;} //同上,与greentea特定程度相同

八、id

id的作用

id属性用来唯一地命名元素,通常你想对多个元素重用某些样式，才能真正发挥类的作用。但是如果只有一个元素需要样式，或者页面上只有一个元素，那就应该使用id,每个元素只能有一个id，页面中只能有一个元素拥有特定id,一个元素有一个id，同时可以属于一个或多个类,id中不允许出现空格或其他特殊字符,如<p id="footer">...</p>

选择元素

用id选择一个元素,需要在id前面使用一个#字符(类是[.]),id选择器只与页面中的一个元素匹配

1
2
3

#footer{
    color: red;
  }//选择id为footer的任意元素

1
2
3

p#footer{
  color: red;
}//选择id为footer的<p>元素

实践建议

在复杂页面中，可能有些页面把id指定给一个段落，有些页面分配给了一个列表，那么需要为该id定义多个规则,根据页面上不同类型的元素应用不同的规则,如p#someid和blockquote#someid
类名要以一个字母开头，不过id名可以以一个数字或字母开头，id和类名都可以包含字母、数字及_字符，但它们都不能有空格。id：p#footer，类：p.specials。

九、继承

样式继承

为p选择器增加font-family属性时，也会影响到<p>元素中内部元素的字体。
元素能够从他们的父元素继承样式。
不是所有的样式都能继承,只有一部分,如font-family。
并不是所有元素都会继承，如img没有文本，所以不会受到字体影响。
继承的样式可以覆盖,例如给<em>提供一个特定的规则来覆盖body中指定font-family,浏览器会使用更特定的规则：
1
2
3
4
5
6
7
body {
font-family : sans-serif;
}

em {
font-family: serif;
}

那哪些元素能够继承

如果样式会影响你的文本外观，那么所有这些样式都能继承,如color,font-family,font-size,font-weight,font-style等和字体相关的属性
其他属性不能继承，如边框，因为如果body元素有边框，不表示你希望body内的所有元素都有边框
根据常识确定，或者试试看

十、层叠Cascade

浏览器会用多个样式表组织样式，首先是你的(网页作者)ccs所有样式表，其次是用户创建的样式，最后浏览器本身会维护一组默认样式。即层叠样式表Cascading Style Sheets
给定一组样式表中的一组样式，浏览器会以层叠的方式确定具体使用哪个样式
读者可以在他的css属性上加上!important，那他就能覆盖你的样式。如
1
h1 {font-size: 200% !important;}
浏览器需要选择最特定的规则进行显示，特定性由3个数开始000
- 第一位: 这个选择器包含id吗？每个id加1分
- 第二位: 这个选择器包含类或伪类吗？每个类和伪类加一分
- 第三位: 这个选择器包含元素名吗？一个元素名加一分
- 把它们读作真正的数,100>010>001，例如h1.greentea的特定性值为011,ol li p的特定性为003。
浏览器首先收集样式表找到所有的声明,然后对所有匹配的规则按作者，读者和浏览器排序，再按特定性对组内的所有声明分别排序，
最后对于冲突的规则，按照他们在各个样式表中出现的顺序排序，如果两个规则得分相同，最后出现的规则胜出。

十一、媒体查询

link媒体查询

你可能想针对将要显示页面的设备调整页面的样式，可以用media属性，在link元素中增加这个属性。
media属性允许你制定应用这个样式表的设备类型。
其他属性包括
- min-device-width（设备的实际屏幕）/max-device-width
- orientation(显示方向，横向landscape,纵向portrait)
- max and min height
- color
- aspect ratio宽高比
- min-width/max-width(浏览器窗口本身的最大和最小宽度)

<link rel="stylesheet" href="lounge-mobile.css" mdeia="screen and (max-device-width: 480px)">
#匹配有屏幕的设备，且屏幕宽度不超过480像素。

<link rel="stylesheet" href="lounge-print.css" media="print">
#匹配打印机设备

css媒体查询

可以直接在css中增加媒体查询,使用@media规则,把对所有媒体类型都通用的规则放在@media规则下面,例如

@media screen and (min-device-width: 481px){//当设备屏幕宽度大于480px时使用
#guarantee {
  margin-right: 250px;
}
}
@media screen and (max-device-width: 480px){//当设备屏幕小于等于480px时使用
 #guarantee {
   margin-right: 30px;
 }
}
@media print { // 如果要打印页面，使用该规则
body {
  font-family: Times, "Times New Roman", serif;
}
}

实践建议

如果css文件相当庞大，建议使用link元素
除了给出设备的媒体属性，如果你更关心浏览器大小，可以用max-width和min-width
CSS3 Media Queries specification中更多细节http://www. w3.org/TR/css3-mediaqueries/)

十二、属性

盒模型the box model

盒模型是css看待元素的一种方式，css将每个元素看作由一个盒子表示，每个盒子由一个内容区以及可选的内边距，边框和外边距组成。由内而外分别是:

内容区: content ,包含内容，如文本或图像
透明内边距: padding ,可选,包围内容区
边框: border ,可选,内边距周围
透明外边距: margin,可选,包围所有部分

内容区

内容区包含元素的内容，它的大小通常正好包含全部内容

`padding`内边距

使用内边距可以在内容与盒子边框之间创建一些看得到的空间
CSS可以控制内边距的宽度，甚至任意一边的宽度，上下左右
透明,无法指定样式
元素的背景颜色或背景图像会延伸到内边距下面，但不会延伸到外边距

设置padding的顺序很重要，如果先设置padding-left再设置padding，刚才设置的padding-left就会被覆盖

1
2
3

padding: 25px;
padding-left: 80px;
# 我们首先有一个属性来控制所有4个边，另外再对每个边单独设置

`border` 边框

围绕内容的一条线
边框可以有不同的宽度，颜色和样式
内边距将内容区与边框隔开
可以指定任意一边的边框样式 border-top-color,border-top-style,border-top-width等

锯齿边框(破折线＋白色):

1 2	border-style: dashed; border-color: white;

`border-style` 边框样式

solid 实线
ridge 脊线
dashed 破折
dotted 虚线
double 双线
groove 槽线
outset 外凸
inset 内凸

`border-width`边框宽度

关键字 thin medium thick
像素 5px;

`border-color` 边框颜色

和color 类似,使用颜色名，rgb或16进制码

`border-radius` 边框圆角

可以为4个角分别指定，如border-top-left-radius
可以用px或em(相对于元素字体大小)

border-radius: 15px;

`margin` 外边距

用外边距在同一个页面上的不同元素之间增加空间
和内边距一样，CSS可以控制外边距的宽度，甚至任意一边的宽度,上下左右
透明,无法指定样式
和padding一样，设置margin的顺序很重要

1 2	margin: 30px; margin-right: 250px;

十三、`color` 颜色

文本元素的字体颜色

color 元素实际控制着一个元素的前景色,他会控制文本和边框颜色，不过你也可以用border-color属性为边框指定自己的颜色
改变p的字体颜色不会影响里面的链接颜色
Web颜色按构成颜色的红、绿和蓝三个分量所占数量来指定，每种颜色会分别指定一个从0到100%的数值，然后把它们混合起来得到最终的颜色。如100%红，100%绿，100%蓝混合在一起是白色。所有指定Web颜色的方法最终都是告诉浏览器：一个颜色的红绿蓝分量分别是多少。
对于文本和背景，要使用对比度最大的颜色，能提高可读性

用16进制码指定颜色

如#fc1257,这种方式最常用
以#开头,分别用2位数字指定红绿蓝
1
2
3
body {
background-color: #cc6600;
}
如果每一组分量中的两位数字都相同，可以使用简写,例如#ccbb00可以简写成#cb0,不过如果是#ccbb10则不能简写

按名指定颜色

CSS只定义了大约150个颜色名,颜色名不区分大小写
16种基本颜色,所有浏览器都有,以及150种扩展色,它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

例如:

1
2
3

body {
      background-color: silver;
    }

用红绿蓝值指定颜色

以rgb开头，在小括号里指定红绿蓝的百分比,例如:

1
2
3

body{
    background-color: rgb(80%, 40% , 0%)//橙色
  }

还可以指定0-255之间的一个数值,例如:

1
2
3

body{
  background-color: rgb(204, 102, 0)//和上面颜色一致,255*80% = 204
}

十四、font-family 字体

大多数计算机上通常只安装了部分字体,所以选择字体时要当心,通常指定的font-family包含一个候选字体列表,他们都来自同一个字体系列,候选字体用逗号分隔,大小写字母必须一致，最后总是放一个通用的字体系列名，如果一个字体名中包含多个单词,比如Courier New，如何指定？用引号,"Courier New",如:

1
2
3

body{
  font-family: Verdana, Geneva, Arial, sans-serif;
}

字体系列

每个font-family包含一组有共同特征的字体。共有5个字体系列:

Sans-serif : 无衬线体 , 在计算机上更容易识别, 很多人认为在计算机显示中最适合体文本,包括: [Verdana : 大多数Win上都有],[Geneva : 大多数Mac上都有],[Arial : 在PC和Mac上都很常见]
Serif : 有衬线体 , 新闻报纸的文字排版
Monospace : 固定宽度的字符,主要用于显示软件代码示例
Cursive : 看似手写的字体 , 有时会看到在标题中偶尔使用
Fantasy : 包含有某种风格的装饰性字体

`@font-face` 指定字体

@font-face 允许你定义一种字体的名字和位置,然后可以在你的页面中使用。不是一个选择器规则，而是一个内置的CSS规则。可以获取一个Web字体，并为它分配一个font-family名。
Web字体标准: 字体文件使用".woff"文件扩展名,表示web开放字体格式(web open font format)
常用字体格式:
- ［TrueType : .ttf］
- ［OpenType : .otf 建立在tt之上］
- ［Embedded OpenType字体 : .eot otf的压缩形式微软专用，仅ie支持］
- ［SVG字体 : .svg 通用图像格式］
- ［Web开放字体格式 : .woff 推荐使用,浏览器支持最广泛］
缺点: 获取字体需要花费时间，第一次获取字体时页面性能可能会受影响。管理多个字体文件痛苦，最后移动设备和小型设备不支持。
有字体托管服务可以为你托管web字体。
- Google Web Font Service (http://www.google.com/webfonts)
- FontSquirrel (http://www. fontsquirrel.com/) [a great place to find open source, free fonts that you can upload to your server]
利用font-family可以创建一个首选字体列表。浏览器会先在用户计算机上查找Verdana字体，如果有，这个元素就使用这个字体，如果不可用，找Geneva,以此类推,如果前面指定的字体都没有找到，就用浏览器默认的Sans-serif字体，就是我们最后指定的通用字体。

把该规则增加到文件的最上面,放在body规则之上

@font-face {
font-family: "Emblema One"; //创建一个名字
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
     url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.tff");
//src属性告诉浏览器到哪里找到这个字体,浏览器会尝试每一个src文件，直到找到它支持的一个文件。
}

`@import`允许导入其他CSS文件

`font-weight` 控制文本的粗细

lighter : 相对于继承的值使文本稍细一点。
normal : 正常
bold : 粗体
bolder : 相对于继承的值使文本稍粗一点。
还可以设置为100到900之间的一个数（100的倍数),不过并没有广泛支持，通常不使用

`font-size` 让文本更大或更小

像素px指定大小 : font-size: 14px;//告诉浏览器字母高度是多少像素。14px中间不能有空格
百分数%指定大小 :font-size: 150%;//指定相对于父元素的字体大小

em指定字体大小 : font-size: 1.2em; //指定相对于父元素的字体的比例因子,称为相对大小

body {
    font-size: 14px;
}
h1 {
    font-size: 150%; //父元素body,这里是14*150% = 21px
}
h2 {
    font-size: 1.2em; //父元素body,这里是14*1.2 = 17px
}

关键字指定字体大小 : font-size: small;,
- small通常定义为12px,下面每一级大小约比前一个大小大20%
- 包括:xx-small,x-small,small,medium,large,x-large,xx-large

指定字体大小的秘诀

选择一个关键字(推荐small或medium),作为body的字体大小,为页面默认字体大小
使用em或百分数,相对于body字体大小指定其他元素的字体大小(em或百分数)这样改变Web页面中字体大小就很容易，只要改变body字体大小就可以了,例如:
1
2
3
body { font-size : small; }
h1 { font-size : 150%; }
h2 { font-size : 120%; }
> 注意老版IE不支持用像素指定的文本缩放

浏览器默认字体大小

大多数情况下，浏览器默认的body字体大小都是16像素
如果在body中指定字体大小为90%,这将是默认字体的90%
- h1 : 200%, 相对于默认字体,下同
- h2 : 150%
- h3 : 120%
- h4 : 100%
- h5 : 90%
- h6 : 60%

`text-decoration` 文本装饰

underline : 下划线 ,下划线文本通常被用户误认为是链接文本，所以要谨慎使用
none : 无效果
overline : 上划线
line-through : 删除线。html有个<del>元素可以将内容标记为要删除的内容；<ins>元素标记要插入的内容，通常为下划线。
一次可以设置多个装饰
如果文本继承了你不想要的文本装饰，可以使用值"none"来去除装饰
如果同一段文本有两个不同的规则，不会累加，要把这两个值合并到一个规则中，才能同时得到这两个文本装饰.
1
2
3
em {
text-decoration: line-through;
}
### font-style 字体风格
italic : 斜体 ,斜体文本向右倾斜,另外衬线还有弯曲
oblique : 倾斜 ,并不是使用一组专门设计的倾斜字符,而是由浏览器将正常文字倾斜
不论你指定什么风格，结果并不确定，有时你会得到斜体，有时则是倾斜文本。无从控制。

`list-style` 改变列表中列表项的外观

列表的主要属性是list-style-type,利用这个属性可以控制列表中使用的项目符号

disc：默认
circle：圆圈标记
square：方块标记
none：删除列表标记

定制列表标记

如果想定制列表的标记，可以用list-style-image为列表设置标记图像,如:

li{
  list-style-image: url(images/backpack.gif);
  padding-top: 5px;
  margin-left: 20px;
}

对于有序列表也一样，可以用list-style-type控制一个有序列表标记:
- decimal,十进制
- upper-alpha,大写字母
- lower-alpha,小写字母
- upper-roman,大写罗马数字
- lower-roman,小写罗马数字
列表项的项目符号的位置如何控制?用list-style-position,有两个取值
- inside(标记在列表项里)
- outside（列表项外)。
- 区别如下:

十五、其他属性

`left` 指定一个元素的左边所在位置

`top` 控制一个元素顶部的位置

`background-image` 在元素后面放置一个图像,如

url,既可以是一个相对路径，也可以是一个完整的URL

1 2	background-image: url(images/background.gif); //用url括起来,注意没有引号

`background-repeat` 背景图像是否重复

默认在水平和垂直方向上重复
控制平铺行为,no-repeat,repeat-x,repeat-y,inherit(按照父元素来处理);

1	background-repeat: no-repeat;

`background-position` 背景图像的位置

可以按像素指定，或百分数,还可以用关键字,如top,left,right,bottom和center

1	background-position: top left;

`background-color` 控制元素的背景颜色

`text-align` 对齐

text-align会对块元素中的所有内联内容对齐,而不仅仅是文本
text-align只能在块元素上设置，对内联元素无效
- left 左对齐
- center 居中
- right 右对齐

`letter-spacing` 在字母之间设置间距

`line-height` 设置文本元素中的行间距

body {
    font-size: small;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    line-height: 1.6em; //调整为字体大小的1.6倍
}

line-height元素有点特殊,可以对它直接使用一个数,而不是相对度量,代表各元素行高是其自己字体大小的多少倍

1
2
3

#elixirs {
  line-height: 1;//代表elixirs中的所有元素的行间距为其自己字体大小的1倍
}

设置line-height为normal，允许浏览器选择一个适当的行高大小,通常根据字体来确定。

`border-bottom` 下边框

下边框会延伸到页面边缘,但是文本的underline属性的下划线只会出现在文本下面
1px solid black

`width` 指定元素宽度

宽度永远是设置的值
width属性只指定内容区的宽度
要确定整个盒子的宽度，需要将内容区的宽度加上左和右内边距,左右外边距和边框的宽度
一个块的默认宽度为"auto",它会延伸占满可用的空间
如果使用百分数，那么宽度会计算为元素所在容器宽度的一个百分比
高度也是默认的，也是"auto",一般，不用指定元素的高度，就让它们默认为auto
可以设置内联元素如span、em和strong的宽度，不过在对这些元素定位之前，可能注意不到宽度改变的效果。另外，还可以对这些元素增加外边距、内边距及边框。内联元素的外边距和内边距与块元素稍有不同。如果一个内联元素四周都增加外边距，只能看到左边和右边会增加空间。你也可以对内联元素的上边和下边增加内边距。不过这个内边距不会影响包围它的其他内联元素的间距，所以内边距会与其他内联元素重叠。

`a`元素和它的多重人格

页面上的链接有多重显示样式，包括未访问，已访问或者处于悬停状态等(还有focus和active),这里需要用到伪类
foucs是指浏览器将焦点放在你的链接上时就是焦点状态，浏览器允许用户按下tab键轮流访问时，浏览器访问到某个链接，某个链接就拥有了"焦点"。设置一个焦点伪类值对于提高可访问性很有帮助，因为需要使用键盘（而不是鼠标）来访问链接的人会知道他们何时选择到正确的链接。
active是指用户第一次单击一个链接时，就处于活动状态。
a元素可能同时处于多个状态，一般认为适当的顺序是
- link,visited,hover,focus,active

例子:

a:link {
  color: green;
}
a:visited {
  color: red;
}
a:hover {
  color: yellow;
}

### 伪类pseudo-classes

上面的a:link,a:visited和a:hover就是伪类
它们都允许我指定样式，就好像他们是类一样，但是没有人在html中真正输入这些类
浏览器会仔细检查所有a元素，把它们增加到正确的伪类中，如果一个链接已访问过，会放到:visited类中，如果悬停，浏览器会把这个链接扔到:hover伪类中。浏览器会在后台向这些类增加和删除元素.
伪类不止能处理链接，还能对其他类型的元素提供处理
- first-child对应元素的第一个子元素。
- first-letter可以用来选择一个块元素中文本第一个字母。可以创建首字母大写和首字母下沉等效果。
- first-line选择段落第一行。
  1
  2
  p:first-letter { font-size: 3em;}
  p:first-line {font-style: italic;}

十六、布局和定位

流

流：浏览器从html文件最上面开始，从上到下沿着元素流逐个显示所遇到的各个元素。
块元素从上向下流，各元素之间有一个换行，内联元素从左上方流向右下方,在水平方向上相互挨着摆放（只要右边还有空间放的下）
文本是内联元素的特殊情况，浏览器会把它分解成适当大小的内联元素，以适应给定的空间。
对于外边距，浏览器并排放置两个内联元素时，外边距会相加，但是当上下放置两个块元素时，会把它们共同的外边距折叠在一起，高度为最大的外边距高度。
事实上只要两个垂直外边距碰到一起，它们就会折叠，但是在元素嵌套时，如果外面的元素有一个边框，那么两个元素的外边距就不会碰到一起，就不会折叠

`float`

float属性首先尽可能远地向左或向右浮动一个元素，然后在它下面的所有内容会绕流这个元素。
对于所有浮动元素都有一个要求：它必须有一个宽度。
浮动元素的外边距不会折叠,因为它只是浮在页面上，注意到这一点可以避免常见CSS错误。
内联元素也可以浮动，如浮动图像

float属性可以设置为left或right,不能是中间

#amazing {
    width: 200px;
    float: right;
  }

下面看浏览器如何处理float（想象一下word的图片浮动):
- 首先，浏览器像往常一样，正常将元素流入页面，从最上面开始。
- 浏览器遇到浮动元素时，会把它尽可能放在最右边，还会从流中删除这个段落，好像它浮在页面上一样。
- 由于该浮动段落已经从正常的流中删除，所以其他块元素会填在这里，就好像没有这个段落一样。
- 对于内联元素定位时，它们会考虑浮动元素的边界，因此会绕着浮动元素。

`clear`

当元素流入页面时，在这个元素左边，右边或两边不允许有浮动内容,例如为防止页脚和右边栏重叠，可以用clear设置:

#footer {
  background-color: #675c47;
  color:            #efe5d0;
  text-align:       center;
  padding:          15px;
  margin:           10px;
  font-size:        90%;
  clear:            right;
}

现在浏览器放置元素时会查看右边有没有浮动元素，如果有就下移，直到没有浮动元素为止。

两栏效果

把sidebar放在页眉下面，然后用float将sidebar栏向右浮动,通过将main div的右外边距设置得和sidebar的宽度相同，来创建两栏效果,不过此时如果页面太宽，页脚会上移造成重叠问题
这个问题可以在页脚肿添加clear属性解决。还有一个问题是因为我们把sidebar放在主要内容前，所以在小的移动设备上会看到边栏在最前面。
右紧左松，让主内容向左浮动，设置仿照上面的。这样div的顺序是正确的，但当浏览器变宽时，边栏过于扩展不好，还是固定些好
使用绝对定位，类似浮动效果，当主内容区的垂直空间缩小，边栏会向下覆盖页脚
使用CSS表格

流体与冻结设计

上面讨论的都是流体布局(liquid layouts)，下面讨论冻结布局(frozen layouts),冻结布局会锁定元素。
- 如将body中的所有内容都放到一个id为#allcontent的div中
  1
  2
  3
  4
  5
  6
  #allcontent {
  width: 800px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #675c47;
  }
  那么页面的宽度将被限制为800px，无论浏览器宽度如何变化都不会移动,但这会导致浏览器很宽时，右边有很多空白空间。

凝胶布局 Jello

凝胶布局会锁定页面中内容区的宽度，不过会将它在浏览器中居中，将内容区的内外边距设为auto即可，浏览器会确定正确的外边距是多少，确保左和右外边距相同，所以内容会居中,如下所示
1
2
3
4
5
6
7
8
#allcontent {
width: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675c47;
margin-left: auto;
margin-right: auto;
}

绝对定位

例如上面的边栏，将边栏绝对定位时，它会从流中删除并根据制定的top，left，right或bottom属性定位。绝对定位，相对于“非static 定位”的第一个父容器定位（若没有任何父容器，则相对于父容器就是相对于浏览器<html>定位）。
- 相对于<html>的绝对定位中，属性buttom定义为浏览器窗口的底部，而不是页面的底部。
- 实现页面底部绝对定位的一个方法是把元素放进一个相对布置在页面底部的元素中。
由于边栏在流之外，其他元素甚至不知道有这样一个元素，它们会将它完全忽略,所以流中的内联内容不会围绕在一个绝对定位的元素周围。

如将侧边栏绝对定位

#sidebar {
   position: absolute;
   top:  100px;
   right:  200px;
   width:  280px;
 }

关于绝对定位还有一个分层放置的问题，一个元素可以放在另一个绝对定位元素上面，那如何分层？谁在上面？
- 每个定位元素都有一个z-index的属性，这会指定它在一个虚拟z轴上的位置（z轴从屏幕指向你，上面的元素“更靠近”你，z-index更大)
- 只有使用CSS绝对定位，相对定位或固定定位的元素有z-index
可以对任何元素指定绝对位置。
position的默认值为static，将元素放在正常的文档流中。忽略top, bottom, left, right或者z-index声明。
position共有4个值:static,absolute,fixed,relative和inherit。
- fixed将元素放在相对于浏览器窗口（区别于“页面”）的一个位置上，固定元素永远不会移动。还可以使用负的left属性值。
- relative让元素正常流入页面，不过在页面上显示之前要进行偏移。
- inherit规定应该从父元素继承position属性的值。
绝对元素不必像浮动元素一样指定宽度，不过默认会占浏览器的整个宽度，所以如果要改变这种行为就要设置width属性。
指定元素位置还可以用百分数,相对于浏览器宽度。

CSS表格

类似电子表格，在表格中只放置块元素，所以要把图像包围在一个div中。
为整个表格创建一个div，然后为每一行分别创建一个div，对于每一列，只要在行div中放置一个div。

例如一行两列的表格可以按如下方式创建：

<div id="tableContainer">
  <div id="tableRow">
    <div id="main">
      ...
    </div>
    
    <div id="sidebar">
      ...
    </div>
  </div>
</div>

对应的css为:

#tableContainer {
  display: table;
  border-spacing: 10px;//于是不再需要div中的外边距
}
#tableRow {
  display: table-row;
}
#main {
  display: table-cell;
  background:       #efe5d0 url(images/background.gif) top left;	  font-size:        105%;
  padding:          15px;
  /*margin:           0px 10px 10px 10px;*/
  vertical-align: top;//确保表格两个单元格中的所有内容相对于单元格上边对齐，默认为中间对齐,可以设置为top,middle,bottom
}
#sidebar {
  display: table-cell;
  background:       #efe5d0 url(images/background.gif) bottom right;
  font-size:        105%;
  padding:          15px;
  /*margin:           0px 10px 10px 10px;*/
  vertical-align: top;
}

上面的border-spacing会在单元格之间增加10像素空间，另外在表格边界周围也会增加10像素空间，但是border-spacing和页眉（页脚）的外边距创建的10像素空间不会折叠。就会导致页眉和页脚与两列之间有20像素的空间，如何修正？将页眉（页脚）的下边距（上边距）设为0即可。

十七、开放商特定的CSS

<!doctype html> 
<html>

<head>
	<meta charset="utf-8">
	<title>CSS Transforms and Transitions</title> 

	<style>
	#box {
				position: absolute; 
				top: 100px;
				left: 100px;
				width: 200px;
				height: 200px; 
				background-color: red;
				transition: transform 2s; 
				-webkit-transition: -webkit-transform 2s;
				-moz-transition: -moz-transform 2s;
				-o-transition: -o-transform 2s;}
	
	#box:hover {
				transform: rotate(45deg); 
				-webkit-transform: rotate(45deg); 
				-moz-transform: rotate(45deg); 
				-o-transform: rotate(45deg); 
				-ms-transform: rotate(45deg);} 
	</style>
</head>

<body>
	<div id="box">
	</div> 
</body>

</html>

Reveal.js初学者指南（未完）

发表于 2018-05-10 更新于 2018-10-29 分类于 Web开发

Reveal.js允许您使用HTML创建美观的交互式幻灯片，并且免费。以下是使用默认主题的典型Reveal.js演示文稿的屏幕截图：

##一、操作键 1. 使用空格键或方向键移动演示文稿 2. iOS风格的滑动功能也适用于任何带有触摸功能的屏幕 3. Escape键：缩略图视图 4. .键：使屏幕变暗

##二、下载和安装 ###（一）获取Reveal.js-master.zip文件并解压缩到工作目录 1. 访问Reveal.js主页：https://github.com/hakimel/reveal.js 2. 寻找Zip图标，并点击下载

![](http://htmlcheats.com/wp-content/uploads/2013/03/gitub-download-as-zip.png)

解压缩后获得reveal.js master文件夹

###（二）将需要的文件复制到你的工作目录 1. 将reveal.js master文件夹中的css，js，plugin和lib文档复制到用来写HTML文件，并制作演示文稿的目录中。

###（三）将幻灯片创建为单个HTML文件

##三、逐步创建Reveal.js演示文稿 1. 以最小的HTML文件开始

1
2
3
4
5
6
7
8
<!doctype html>
<html lang="en">	
<head>
	<meta charset="utf-8">
</head>
<body>
</body>
</html>

给Reveal.js base增加references，给

section增加theme style sheets

<head>
	<meta charset="utf-8">
	<title>Reveal.js 3 Slide Demo</title>
	<link rel="stylesheet" href="css/reveal.min.css">
	<link rel="stylesheet" href="css/theme/default.css" id="theme">	
	<!--Add support for earlier versions of Internet Explorer -->
	<!--[if lt IE 9]>
	<script src="lib/js/html5shiv.js"></script>
	<![endif]-->
</head>

<head>部分必须包含两个样式表：reveal.min.css和一个主题，例如default.css

按照惯例，minimized的文件像完整样式表一样被命名为（在本例中为reveal.css），但在“css”之前有“min”，因此为reveal.min.css。
default.css文件表示默认的Reveal.js主题，它为您的演示文稿的整体外观提供了一个外观。如果用“sky.css”代替“default.css”，它会加载Sky主题，如下所示：
可以在目录css-theme中找到所有主题。

将对Internet Explorer 9的支持添加到

部分

HTML笔记

发表于 2018-05-09 更新于 2019-02-28 分类于 Web开发

说明
1. 部分参考O'Reilly Media出版的HTML and CSS和HTML with CSS & XHTML
2. 部分参考作者兼续在简书上的笔记https://www.jianshu.com/p/727dbfcef685

一、基本概念

简称

HTML是HyperText Markup Language的缩写,译为超文本标记语言
CSS是Cascading Style Sheets的缩写，译为层叠样式表

元素类型

块(block)元素,前后都有一个换行
- 如<h1>~<h6>,<p>,<blockquote>
- 特点是: 特立独行
内联(inline)元素,总在“行内”出现,
- 如<q>,<a>,<em>
- 特点是: 随波逐流
void元素,这个元素没有实际内容，会用简写来表示
- <img>,<br>
- 这样能提高效率

浏览器与服务器惯例

浏览器不会显示空白符和换行,制表符等
Web服务器默认文件名为"index.html"或"default.htm"。如果浏览器向Web服务器请求一个目录而不是文件时，例如http://www.starbuzzcoffee.com/images/或http://www.starbuzzcoffee.com/。Web服务器会尝试查找这个目录中的一个默认文件。"index.html"或"default.htm"。所以，要从根目录（或任何其他目录）默认地返回一个文件，只需要把这个文件命名为"index.html"或"default.htm"。

htm是微软服务器的一个怪癖
如果末尾没有正斜杠，如果该目录确实存在，那么浏览器会自动帮你加上末尾的斜线
file:///文件URL有3个正斜杠而不是2个。当浏览器从你的计算机本地读取文件时会使用file协议。
- 例如，文件file:///chapter4/starbuzz/index.html会告诉浏览器index.html在路径chapter4/starbuzz/下。
- 记忆：http url中删去网站名也会有3个正斜杠
HTML5不再只是用来建立Web页面，Web页面主要是静态页面，上有一些图像和链接，可能还有一些漂亮的效果，比如菜单。总的而言，是用来阅读的。另一方面，Web应用则用来交互，用来完成具体工作。就像你的桌面计算机上的应用一样，只使用Web应用就能在Web上完成工作。如社交媒体应用、地图应用和游戏。
http://www.mydomain.com:8000/index.html。
- 8000是一个可以放在HTTP URL中的可选的“端口”。
- 网站名就像一个地址，端口则像是这个地址的邮箱号（例如，一个复合公寓里），通常Web上的所有东西都会传送到一个默认端口（80），不过有时Web服务器会配置为在另外一个不同的端口接收请求（如8000）。这种情况经常在测试服务器上出现。正常的Web服务器几乎都在端口80接收请求。如果你没有指定端口，则默认为80。
www.starbuzzcoffee.com是一个网站名。其中www是域中特定服务器的名字。starbuzzcoffee.com则是域名。域名由ICANN(The Internet Corporation for Assigned Names and Numbers)控制，要保留域名，每年还需要交纳少许注册费。域名可以用于多个网站，如business.starbuzzcoffee.com或student.starbuzzcoffee.com。
怎么把文件传输到web服务器呢？方法有很多，大多数主机代理商支持一种叫做FTP的文件传输方式（File Transfer Protocol，文件传输协议），还有一种叫做SFTP安全文件传输协议（Secure File Transfer Protocol）。
常用的FTP应用程序
- Fetch (http://fetchsoftworks.com/)[Mac/收费]
- Transmit (http://www.panic.com/transmit/)[Mac/收费]
- Cyberduck (http://cyberduck.ch/)[Mac/免费]
URL统一资源定位符uniform Resource Location。是一个全局地址global address，可用来定位Web上的任意资源，包括HTML液面，视频音频和很多其他形式的Web内容。除了制定资源的位置，URL还可以制定用来获取资源的协议。
http://www.starbuzzcoffee.com/index.html。http是接收资源的协议。中间是网站名，最后是从根目录到资源的绝对路径。
- http是超文本传输协议HpyerText Transfer Protocol。
- 超文本文件HpyerText documents，通常就是HTML页面。
要创建服务器脚本，大多数托管公司都支持PHP, Ruby on Rails, Perl, Python, Node.js, and Java当然还有很多其他的语言。

规范

遵照标准编写html，尽量减少错误，用doctype告诉浏览器你使用的哪一版本的html，可以减少浏览器显示效果的差异。现在html5的doctype很简单，告诉浏览器你在使用标准html：

<!DOCTYPE html>
#虽然上述例子中DOCTYPE用了大写而html用了小写，但是这两者都是大小写不敏感的。
#<!doctype html>或<!DOCTYPE HTML>均可
#每个html页面都应该加
#标签、属性名、属性值等，有的有大小写之别，而有的则没有。
#HTML标准规定所有的字符串除特别说明外都是要区分大小写的

页面中增加

标记指定字符编码,通常使用utf-8,它是Unicode系列中的一个编码。如下:
1
2
<meta charset="utf-8">
#这个标记要放到<head>元素中所有其他元素的上面
html标准验证工具：W3C验证http://validator.w3.org
以后html不再有版本号，甚至不是html5,从现在起它只是"HTML"。标准改变，浏览器会继续支持老方式，同时也会支持新的方式，这叫做向后兼容性(backwards compatibility)。
Element = Opening Tag + Content + Closing Tag。我们把一对开始标记和结束标记，称为匹配标记matching tags。

元素=开始标记+内容+结束标记
属性的写法：属性名=“属性值”，<a href="top10.html">Great Movies</a>
处理XHTML时，<br/>的语法更为严格，只要看到<br>就应该改写成<br/>。不过除非要规划或者编写与XHTML兼容的页面，否则在HTML中都应该使用`
spec规范：就是一个文档，制定了HTML标准是什么，也就是说HTML中有哪些元素和属性等。这个文档由World Wide Web Consortium (W3C, for short)万维网协会维护。

二、实践

一般

规划页面时先设计大的块元素,然后用内联元素完善。
尽可能使用元素告诉浏览器内容的含义。
id属性是唯一标识元素的方法，可以使用大小写，不过必须一致, (每次都用小写会更容易些), id在它的页面必须唯一。任何元素都可以有id属性进行标示。
- id的要求：一定用一个字母（A_Z或者az）开头，后面可以是任意字母，数字，横线，下划线，冒号或点号，但不能加空格。
任何元素都可以增加title属性，为其增加工具提示文体（tooltip text）。这些信息通常会在鼠标移到元素上时显示title的内容，以达到补充说明或者提示的效果。
将自己的注释放到HTML中，格式为。
用Mac系统中的文本编辑编写HTML时，需将其改为纯文本模式。默认为“富文本”模式，这种模式下，在保存文件时，会增加它自己的格式和特殊字符。修改为纯文本文件的步骤：

链接

同一网站内的网页使用相对地址（相对路径），外部网页使用绝对地址（相对路径，即URL）。

相对路径<a href="beverages/elixir.html">elixirs</a>
..表示上溯到父目录。"../.."表示上溯两层目录。
上溯的相对路径<a href="../lounge.html">Back to the Lounge</a>
相对路径：相对于链接的源Web页面指向网站中其他文件的一个链接，就像在地图上一样，终点总是相对于起点。绝对路径：从根目录去获得特点的页面或文件。
带id的元素有一个特殊特性：你可以直接链接这些元素。
- 如<a href="index.html#chai">see chai tea</a>
- 方法为在链接后加#,再加上目标标识符（id）。
通常在页面的最上面定义一个目标"top"，并在页面最下面定义一个目标"Back to top"。要链接到同一页面的top目标，可以写为<a href="#top">Back to top</a>
链接要简洁，可以在title中提供额外的信息，不要使用诸如"单击这里",或"这一页"之类的链接标签,不要把链接放在一起。
一般用http://wickedlysmart.com/buzz/index.html#Coffee进行链接，不能使用http://wickedlysmart.com/buzz#Coffee的形式进行链接,因为浏览器会在末尾加正斜杠，可能取代id引用，不过可以用http://wickedlysmart.com/buzz/#Coffee

嵌套

适当嵌套元素，嵌套时要完全嵌套
嵌套元素要当心，不要把<a>元素嵌到另一个<a>元素中，会让访问者迷惑。不允许在<img>等void元素中嵌套其他内联元素。

工具

Dreamweaver
Hype(Tumult)
Coda(Panic)
Flux(The Escapers)
Microsoft Expression Web
Amaya (Open source, developed by the W3C)
Eclipse (by the Eclipse Foundation)

三、HTML首部元素

html 根元素

web页面的根元素,只有<head>和<body>能直接放在<html>标签中

head 页面头部
- head包含有关页面的信息,只能放置<title>,<meta>和<style>元素。
- <meta> : 关于页面的信息,属性包括charset : 指定字符集,通常为utf-8
- <title> : 页面标题
- <style> : 页面样式,属性包括type: 样式类型, 一般为"text/css",如<style type="text/css">...</style>
- 以前，人们认为以后可能还会有其他样式。事实表明，完全用<style>不带任何属性，任何浏览器都知道你指的是CSS。

四、HTML页面主体

body 主体元素 web页面的主体元素
h1- h6 6级标题

标题默认是粗体,例如: <h1>一级标题</h1>
p 段落

块元素,paragraph的缩写,例如: <p>...</p>
a 超链接
- 内联元素,at的缩写,如 <a href=""></a>
- <a>元素的内容可以是文字，图像甚至块元素(html5)
- href: hyper reference的缩写,指定链接地址
- title: 所要链接页面的文本描述
- target: 告诉浏览器使用一个不同的窗口，使用_blank作为目标，就会打开一个新的窗口显示页面。如果多个<a>元素都指定_blank作为target,那么每个链接都会在一个新的空窗口中打开，如果指定另一个名字，如Coffee，那么有相同目标名的所有链接都会在同一个Coffee窗口中打开。
- <a>元素包围图像时，IE浏览器会在图像周围加一个边框，显示这是一个链接（Safari浏览器，不会这么做）
em 强调

内联元素，emphasize的缩写,例如: <em>强调</em>
br 换行
- void元素,break的缩写,例如<br>
- <br>既不是块元素，也不是内联元素
code 显示计算机程序代码

块元素,例如: <code>...</code>
pre 原样显示文本

块元素,例如: <pre></pre>。通常显示的时候，会保留空格和空行。
strong 加粗文本

内联元素例子: <strong>加粗</strong>

五、引用

q 短引用

作为现有段落的一部分,大部分浏览器会加引号，内联元素,quotation的缩写
blockquote 长引用
- 需要单独显示，<blockquote>创建了单独的一个文本块，另外把文字稍稍缩进，使它更像一个引用。它是个块元素。
- 如果想引用一段或者多段文字，就要使用<blockquote>,不过如果只想把一个引用放在现有的文字里，作为其中一个部分，就可以使用<q>。
- 可以把<p>放到<blockquote>中，形成多个段落
- 可以把<q>放到<blockquote>中，表示引用的引用
- 缩进是某些浏览器显示<blockquote>的效果，不是所有的浏览器对<blockquote>都缩进。

六、列表

<ol>和<li>(或者<ul>和<li>)总是要一起使用,列表可以嵌套,例如:

<ul>
	<li class="selected"><a href="">HOME</a></li>
	<li><a href="">BLOG</a></li>
	<li><a href="">INVENTIONS</a></li>
	<li><a href="">RECIPES</a></li>
	<li><a href="">LOCATIONS</a></li>
</ul>

`li`列表项

块元素,list item的缩写

`ol` 有序列表

块元素, ordered list的缩写,浏览器负责编号

`ul` 无序列表

块元素, unordered list的缩写

`dl`,`dt`,`dd` 定义列表

每一项都由一个定义术语和定义描述组成

<dl>
    <dt>Burma Shave Sign...</dt>
      <dd>Road signs common in the US</dd>
    <dt>Route 66</dt>
      <dd>Most famous road in the U.S. highway system</dd>
  </dl>

Burma Shave Sign...: Road signs common in the US
Route 66: Most famous road in the U.S. highway system

七、字符实体character entity

用简单缩写来指定特殊字符,但并不保证在所有浏览器上都能显示
输入实体时都会用到&,例如字符>的缩写是>，字符'<'的缩写是<。如果内容中确实需要一个字符&,就要使用&amp。
除了用实体名还可以用实体的数字编号比如&#100,并不是所有实体都有名字，所以这种情况下，只能使用数字。
详尽的字符实体清单：http://www.unicode.org/charts/

八、图像

`img` 图片

void元素,image的缩写
src: 必要属性,指定img的源文件位置，可以指定相对位置
alt: 必要属性,指定描述这个图像的一些文本,可以在图像无法显示的时候显示文本，也可以帮视力障碍的用户，这个属性得加，不然无法通过html标准验证
width: 指定图像宽度
height: 指定图像高度
例子: <img src="" alt="" width="800" height="600">

图片格式

Web上最常用的3种格式: JPEG, PNG 和 GIF
照片和复杂图像使用JPEG,支持1600万种不同颜色，有损格式，缩小文件时会丢掉图像信息，不支持透明度，不支持动画，文件较小，便于Web高效显示
PNG,GIF适合单色图像和线条构成的图像，如logo,剪切画和图像中的小文本,都是无损格式，都支持透明度，都比相应的JPEG更大些
PNG可以包含上百万种颜色，有PNG-8,PNG-24和PNG-32，选哪一种取决于你需要表示多少种颜色。PNG会压缩文件来缩小文件大小，不过不会丢掉信息，所以认为这种一种“无损”格式。
GIF最多表示256种不同颜色，但是能支持动画

图片实践

在img属性中指定宽度和长度的原因是浏览器预先知道了长宽就可以在显示图像之前就开始建立页面布局，否则浏览器得先下载图像，知道大小，然后再重新调整布局。
width和height也可以用来图片缩放，不过由于各种原因，还是不要这样达到目的的好。因为浏览器在调整图像之前还是必须得下载完整的大图像
图像宽度要小于800像素，是一个好经验。大多数人通常都会把浏览器宽度设置为800-1280像素，所以一般经验是将图像最大宽度设置为800像素。

图像可以作为指向其他Web页面的链接，将img放在a元素的内容中，如下所示:

1
2
3

<a href="html/seattle_classic.html">
   <img src="thumbnails/seattle_classic.jpg" alt="A classic iPod in Seattle, WA">
</a>

分辨率，一般是96像素/英寸。习惯的标准是72像素/英寸ppi。CSS像素是1英寸的1/96（96 ppi）
- 所以3”宽和高的图像，要使用288288的像素(963=288)
- 英尺用 ' 表示，英寸用 '' 表示
用蒙版处理logo的小技巧

九、容器

标记逻辑区

逻辑区就是页面上彼此相关的一组元素,div和span容器用来标记一组元素

`div` 块元素容器

在属于一个逻辑区的元素周围放置<div>开始和结束标记
div中的元素也会从div继承一些属性(如font-size,color等)
可以用div为页面增加更多结构，进一步展示页面的底层逻辑结构，但不要为了加结构而不必要地增加结构，在完成任务的前提下让结构尽可能简单

你也可以嵌套结构，例如可以把cats,dogs的<div>放在一个pets<div>中,如:

<div class="pets">
  <div class="cats">...</div>
  <div class="dogs">...</div>
</div>

`span` 内联元素容器

类似于div，不过是针对内联元素的，建立内联内容的逻辑分组,如:

<ul>
  <li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
  <li><span class="cd">When It Falls</span>, <span class="artist">Zero 7</span></li>
  <li><span class="cd">Earth 7</span>, <span class="artist">L.T.J. Bukem</span></li>
  <li><span class="cd">Le Roi Est Mort</span>, <span class="artist">Vive Le Roi!, Enigma</span></li>
  <li><span class="cd">Music for Airports</span>, <span class="artist">Brian Eno</span></li>
</ul>

Buddha Bar, Claude Challe
When It Falls, Zero 7
Earth 7, L.T.J. Bukem
Le Roi Est Mort, Vive Le Roi!, Enigma
Music for Airports, Brian Eno

十、表格

`table` 表格

用<table>标记开始一个表格，一行用<tr>开始,每个<th>分别是某一列的表头,表头是前后排列的。每个<td>元素包含表格中的一个单元格。例子:

<table>
<caption>Table</caption>
  <tr>
    <th>City</th>
    <th>Date</th>
    <th>Temperature</th>
    <th>Altitude</th>
    <th>Population</th>
    <th>Diner Rating</th>
  </tr>
  <tr>
    <td>Walla Walla, WA</td>
    <td>June 15th</td>
    <td>75</td>
    <td>1,204 ft</td>
    <td>29,686</td>
    <td>4/5</td>
  </tr>
  <tr>
    <td>Magic City, ID</td>
    <td>June 25th</td>
    <td>74</td>
    <td>5,312 ft</td>
    <td>50</td>
    <td>3/5</td>
  </tr>
</table>
//添加css
table {
    margin-left: 20px;
    margin-right: 20px;
    border: thin solid black;
    caption-side: bottom;//将标题放在底部
}

td, th {
    border: thin dotted gray;
    padding: 5px;
}

caption {
    font-style: italic;
    padding-top: 8px;
}

`caption` 标题

增加标题<caption>...</caption>, 放在<table>元素之下,<tr>元素之上（即使你后面要用css把它显示在下方）,默认会显示在表格上方。

background-color 背景色

添加颜色, 设置背景色即可，如:

1
2
3

th {
  background-color: #cc6600;
}

颜色交替

为各行指定交替的颜色, 能够更容易得区分各行, 可以先定义一个新类, cellcolor, 然后把这个类增加到你希望着色的各行(tr)上，如:

1
2
3

.cellcolor {
  background-color: #fcba7a;
}

另外还可以用下面的nth-child伪类实现

`nth-child` 伪类

nth-child伪类是一种更高级地选择元素的方法，例如让偶数段落有红色背景，奇数段落有绿色背景:

p:nth-child(even){
  background-color: red;
}
p:nth-child(odd){
  background-color: green;
}

这个伪类还可以更加灵活，用数字n制定简单表达式，如奇偶数：

p:nth-child(2n){
  background-color: red;
}
p:nth-child(2n+1){
  background-color: green;
}

合并单元格

就是说有的单元格要跨越多行，可以使用rowspan属性，指定一个数据单元格占多少行，然后从这个单元格所跨越的其他行中删除相应的表格元素。表格元素还能跨多列，只要为td元素增加colspan属性，然后指定列数，跨多列时需要删除同一行中的表格数据元素，例如：

<tr>
  <td rowspan="2">Truth or Consequences, NM</td>
  <td class="center">August 9th</td>
  <td class="center">93</td>
  <td rowspan="2" class="right">4,242 ft</td>
  <td rowspan="2" class="right">7,289</td>
  <td class="center">5/5</td>
</tr>
<tr>

  <td class="center">August 27th</td>
  <td class="center">98</td>


  <td class="center">4/5</td>
</tr>

嵌套表格

表格里可以嵌套表格,只需要把另一个table元素放在一个td中，例如：

<tr>
  <td class="center">August 27th</td>
  <td class="center">98</td>
  <td class="center">
    <table>
      <tr>
        <th>Tess</th>
        <td>5/5</td>
      </tr>
      <tr>
        <th>Tony</th>
        <td>4/5</td>
      </tr>
    </table>
  </td>
</tr>

处理表格双线

默认情况下每个单元格都有边框，会形成双线，分散注意力，可以在table中将border-spacing设置为0px,还可以用border-collapse的css属性来折叠边框，使单元格之间根本没有边框间距，这样浏览器会忽略所有边框间距，然后将紧挨的两个边框合并成一个边框,例如

table {
  margin-left: 20px;
  margin-right: 20px;
  border: thin solid black;
  caption-side: bottom;
  border-collapse: collapse;
}

其他实践

如果希望表头放在表格的左侧，可以把表格表头元素放在各行中，而不是都放在第一行中。
html表格允许你用html标记指定表格的结构，而css表格则提供一种方法，可以用一种类似表格的方式显示块级元素。
需要在页面中创建表格数据时就用html表格，不过如果只需要对其他类型的内容使用一种类似表格的表现方式，就可以用css表格显示布局。
表格单元格确实有内边距和边框，不过单元格之间的空间border-spacing是针对整个表格定义的，不能单独设置每个表格单元格的外边距，不过可以在垂直方向和水平方向上设置不同的边框间距，如border-spacing: 10px 30px,10像素水平间距，30像素垂直边框间距。

十一、表单

表单`form`

action属性包含Web服务器的url, method属性确定表单数据如何发送到服务器，如POST,另外input 是内联元素, 如果想要有换行用<br>。
表单的name属性。它相当于表单和处理表单的服务器脚本之间的一个黏合剂。
value属性，可以为submit更改别的名字，为文本输入元素的输入域提供默认文本。<input>中可限制文本，用maxlength，但是<textarea>中没有办法限制用户输入多少文本。
name="extras[]"，这只是一个普通的表单元素名，名字里有没有中括号对于浏览器没有任何的影响。那为什么要使用这样的元素名呢？因为编写processorder.php服务器脚本所用的脚本语言（PHP）希望得到一点提示，想知道一个表单变量可能包含多个值。提供这个提示的做法就是在名字后面增加一个[]。
例子如下:

<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST">
  <p>Just type in your name (and click Submit) to enter the contest:<br>

    First name: <input type="text" name="firstname" value=""><br>
    Last name:  <input type="text" name="lastname" value=""><br>
    <input type="submit">
  </p>
</form>

`POST`和`GET`请求

浏览器发送数据的方法主要有两种，POST和GET。POST和GET完成的任务是一样的，都是把表单数据从浏览器发送到服务器，不过采用了两种不同的方式，POST会打包你的表单变量，在后台把它们发送到服务器，GET也会打包你的表单变量，但是会把这些数据追加到URL的最后，然后向服务器发送一个请求。
那么什么时候使用post什么时候使用get呢？
- 如果你希望用户能够对提交表单后的结果页面加书签，就必须使用GET，因为如果使用POST就无法加书签了。
- 那什么时候需要加书签呢？假设服务器返回一个搜索列表，你可能希望用户对结果加书签，那么他们就能直接查看这些结果，而不用再填写表单。
- 另外，如果你有一个处理订单的服务器脚本，可能不希望给这个页面加标签，因为否则每次他们返回这个标签时，都会重新提交这个订单。
- 还有一种情况肯定不想用GET，比如你的表单中的数据是私有的，如信用卡或口令，url是明文看到的，所以不安全。最后，如果你用了textarea就应该用POST,因为可能会发送大量数据，get和post对数据量都有限制，但是post要宽松的多。

可访问性

应该用<label>元素来标记那些标签，<label>元素可以提供页面结构的更多的信息，使你能更容易地使用css对标签设置样式，另外对于有视力障碍的人，也有助于他们使用的屏幕阅读器更准确地标识表单元素。

必须为表单元素增加一个id属性，然后增加一个label，设置其for属性为相应的id。例如:

<input type="radio" id="whole_beantype" name="beantype" value="whole">
<label for="whole_beantype">Whole bean</label><br>
<input type="radio" id="ground_beantype" name="beantype" value="ground" checked>
<label for="ground_beantype">Ground</label>

`field`和`legend` 分组

当表单变的越来越大时，在视觉上对元素分组会很有帮助，可以用fieldset做到，legend为这一组提供一个标签,例如:

<fieldset>
  <legend>Ship to</legend>
  <div class="tableRow">
	表单内容
</fieldset>

Ship to

表单内容

`passwords input` 密码

输入的文本会加掩码,例如：

1	<input type="password" name="secret">

`file input` 文件

创建一个文件输入控件,使用这个元素的前提是必须使用POST方法, 例如:

<input type="file" name="doc">

多选菜单

为select元素增加布尔属性multiple，在屏幕上显示所有项，选择时同时按下Ctrl或Command键，可以选择多个选项,例如：

<select name="characters" multiple>
  <option value="Buckaroo">Buckaroo Banzai</option>
  <option value="Tommy">Perfect Tommy</option>
  <option value="penny">Penny Priddy</option>
  <option value="Jersey">New Jersey</option>
  <option value="John">John Parker</option>
</select>

`placeholder` 提示

为填写表单的人提供提示, 比正常内容浅一些
大多数不同类型的input元素都可以使用
例如：<input type="text" placeholder="Buckaroo Banzai">

`Required` 必要

可用于任何表单控件, 指示一个域是必要的, 对于设置了这个属性的控件, 如果没有指定值, 就无法正常提交表单, 例如:<input type="text" placeholder="Buckaroo Banzai" required>

`text input` 文本输入

用type属性指示你希望得到一个"文本"输入, 大多数表单元素都需要一个名字, 服务器脚本将使用这个元素名, 用maxlength限制最大字符数, 例如创建一个单行控件：

<input type="text" name="fullname">

`submit input` 提交输入

创建一个按钮, 允许你提交表单, 点击该按钮时, 浏览器将表单发送到服务器进行处理。标签默认为"Submit"(提交), 或者"Submit Query"(提交查询), 用value属性制定提交按钮的名字, 例如：

<input type="submit">

`radio input` 单选按钮

创建包含多个按钮的控件, 一次只能选择一个按钮。给一组给定选项关联的单选按钮必须有相同的名字。每个选项可以有不同的值, 通常将单选按钮的标签放在元素右边,使用checked布尔属性默认选中某个元素,例如：

1 2	<input type="radio" name="hotornot" value="hot"> hot<br> <input type="radio" name="hotornot" value="not" checked> not

hot
not

`checkbox input` 复选按钮

创建复选框控件，可以选中也可以不选中,允许选择0个或多个选项。给一组给定选项关联的单选按钮必须有相同的名字name。每个选项有不同的值value,通常将复选按钮的标签放在元素右边,使用checked布尔属性默认选中某个元素,例如：

1
2
3

<input type="checkbox" name="spice" value="salt">
<input type="checkbox" name="spice" value="Pepper">
<input type="checkbox" name="spice" value="Garlic" checked>

第一项
第二项
第三项

`textarea` 文本区

<textarea> 元素会创建一个多行的文本区，如果文本在文本区中放不下，右边还会出现一个滚动条，非空元素。
name 指定唯一的名字。
rows 告诉浏览器文本区高度为多少字符,cols属性告诉浏览器文本区宽度为多少字符。
任何位于<textarea>和</textarea>之间的文本都是浏览器中文本区控件的初始文本。
例如:

<textarea name="comments" rows="10" cols="48">初始文本</textarea>
初始文本

`select` 菜单

创建一个菜单控件，从一组选项中做出选择
name 指定名字
option 元素的内容用作作为菜单项的描述

例子:

<select name="characters">
  <option value="Buckaroo">Buckaroo Banzai</option>
  <option value="Tommy">Perfect Tommy</option>
  <option value="penny">Penny Priddy</option>
  <option value="Jersey">New Jersey</option>
  <option value="John">John Parker</option>
</select>

十二、html5表单控件

`number input` 数字输入

限制只能输入数字，用min,max来限制允许输入的数字, 例子:

<input type="number" min="0" max="20">

`range input` 范围输入

类似number，显示滑动条,step指定步长,例子:

<input type="range" min="0" max="20" step="5">

`color input` 颜色输入

单击时弹出颜色选择器,例子:

<input type="color">

`date input` 日期输入

日期选择器,例子:

<input type="date">

`email input` email输入

文本输入元素，在移动浏览器上，开始输入email时会得到一个方便输入email的定制键盘,例子 :

<input type="email">

`tel input` tel 输入

与email类似，在移动设备上弹出一个定制键盘, 例子 :

<input type="tel">

`url input` url 输入

和email，tel类似, 例子 :

<input type="url">

十三、html5新增元素

上面的都是属于html的标准的，html5在这个基础上又添加了一些新的元素，如article,nav,header,footer,time,aside,section,video等,虽然这些新元素用起来和原来的div一样，但是使用新元素，浏览器，搜索引擎和开发人员就能肯定该元素是什么，用最合适的元素完成任务。比如aside元素，在屏幕大小受限的移动手机上，浏览器知道这个内容是一个aside，你可能会看到内容被塞到页面最下面，让你首先看到最重要的内容。相反如果使用div就什么情况都可能发生。这些元素本身没有多少样式，不过可以为页面中的内容增加含义信息.

`footer` 页脚

用footer表明这段是页脚，例如:

<footer>
  © 2012, Starbuzz Coffee
  <br>
  All trademarks and registered trademarks appearing on
  this site are the property of their respective owners.
</footer>
//相应的css也需要改变，把#footer 改成footer
footer {
  background-color: #675c47;
  color:            #efe5d0;
  text-align:       center;
  padding:          15px;
  margin: 0px 10px 10px 10px;
  font-size:        90%;
}

`section` 节

用section将相关内容组织在一起,例如可以把饮料内容都放在一起，例如 :

<section id="drinks">
  <h1>BEVERAGES</h1>
    <p>House Blend, $1.49</p>
    <p>Mocha Cafe Latte, $2.35</p>
    <p>Cappuccino, $1.89</p>
    <p>Chai Tea, $1.85</p>
  <h1>ELIXIRS</h1>
    <p>
      We proudly serve elixirs brewed by our friends
      at the Head First Lounge.
    </p>
    <p>Green Tea Cooler, $2.99</p>
    <p>Raspberry Ice Concentration, $2.99</p>
    <p>Blueberry Bliss Elixir, $2.99</p>
    <p>Cranberry Antioxidant Blast, $2.99</p>
    <p>Chai Chiller, $2.99</p>
    <p>Black Brain Brew, $2.99</p>
</section>

`article` 文章

用article包含独立的内容，如一个新闻报道，例如:

<article>
  <header>
    <h1>Starbuzz uses computer science</h1>
    <time datetime="2012-03-10">3/10/2012</time>
  </header>
  <p>
    Have you ever noticed how efficient a Starbuzz Coffee
    house is? The lines alway move fast, and despite the
    astronomical number of different drinks any customer can
    order, we have your drink up, hot (or cold if that's the
    way you want it) and ready in seconds. How do we do it?
  </p>
</article>

`time` 日期

time元素有个重要的属性:datetime。datetime要用官方internet日期格式来写，如果内容没有按官方日期写，就必须有datetime属性。官方日期完整格式为yyyy-MM-dd hh:mm，可以指定一部分。例如： <time datetime="2012-02-18">2/18/2012</time>
HTML5的语义化，其实很多标签都没有实际的意义。用来给机器识别以便于搜索引擎、爬虫解析。time元素没有datetime这个属性时，语义上的时间值定义为该元素的textContent（当然前提是要符合特定的格式）。如果没有，则必须写这个属性，例如：<time datetime="2016-08-05"><br>今天</time>天气不错。
格林尼治标准时间（GMT）
协调世界时（UTC,Coordinated Universal Time ）

`header` 元素

可以为article,section,aside增加header元素，可以增加一些内容，比如署名。通常，section和article都会有一个header,用来提供描述或介绍,即使只有一个标题也可以使用header,提供额外的语义含义，将文章的首部与其余的内容区分开。例如:

<section id="blog">
<article>
<header>
  <h1>Starbuzz meets social media</h1>
  <time datetime="2012-03-12">3/12/2012</time>
</header>
...

`nav` 导航

导航nav,创建一组链接，包围在一个无序列表中，使用一个类来标识被选中的一项,nav可以插入到页眉的下面

<nav>
  <ul>
    <li><a href="index.html">HOME</a></li>
    <li class="selected"><a href="blog.html">BLOG</a></li>
    <li><a href="">INVENTIONS</a></li>
    <li><a href="">RECIPES</a></li>
    <li><a href="">LOCATIONS</a></li>
  </ul>
</nav>
//对应要为他们设置css样式，不然不符合期望
nav {
    background-color: #efe5d0;
       margin: 10px 10px 0px 10px;
}
nav ul {
    margin: 0px;
    list-style-type: none;
    padding: 5px 0px 5px 0px;
}
nav ul li {
    display: inline;
    padding: 5px 10px 5px 10px;
}
nav ul li a:link, nav ul li a:visited {
    color: #954b4b;
    border-bottom: none;
    font-weight: bold;
}
nav ul li.selected {//如果某个导航项正好对应我们所在的页面，它看起来会与其他导航项有所不同
    background-color: #c8b99c;
}

其他html5元素

mark：突出显示某些文本
audio: 声音内容
progress: 显示任务完成进度
meter: 显示某个范围的度量
figure: 定义类似照片，图表，甚至代码清单等独立的内容
canvas:在页面中显示JavaScript绘制的图像和动画
i：呈现斜体的文本

十四、视频

`video`元素

<video>可以用来播放视频，一般的格式如下:

1 2	<video controls autoplay width="512" height="288" src="video/tweetsip.mp4"> </video>

autoplay,指定自动播放
controls,提供一组控件来控制播放，暂停，调节音量等
autoplay和controls是"布尔属性",有就显示，没有就不会出现。注意autoplay属性，通常用户希望决定加载页面时是否播放视频，另外controls属性对于不同浏览器提供的控件有所不同
poster属性可以在视频未播放时显示这个图像poster="images/poster.png",通常浏览器会显示视频第一帧，往往是黑屏
preload用来细粒度地控制(fine-grained control)视频如何加载，实现优化。大多数情况下，浏览器根据autoplay和用户带宽决定加载多少视频，可以覆盖这种设置。preload取值:
- none,则用户播放视频之前不加载视频
- metadata，下载视频元数据，但不下载视频内容
  - 元数据是指从信息资源中抽取出来的用于说明其特征、内容的结构化的数据(如题名,版本、出版数据、相关说明,包括检索点等)，用于组织、描述、检索、保存、管理信息和知识资源。
- auto,让浏览器做决定
- loop 属性，布尔属性，决定视频结束后是否自动重新开始播放视频
- width，height设置视频显示区，海报会缩放到指定宽度和高度，视频会保持宽高比，有多余则显示黑边

视频格式

一个视频文件包括两个部分，一个视频部分和一个音频部分，每个部分使用特定编码类型来编码，容器也有自己的格式和格式名,现在主要有3种格式的视频：mp4(H.264,aac) ,webm(vp8,vorbis) ,ogg(theora,vorbis) ,那么如何处理所有这些格式呢？

HTML5规范允许采用任何视频格式。具体支持哪些格式由浏览器实现来确定。在video元素中可以对应每种格式分别使用一个<source>元素，浏览器从上往下找，直到找到它能播放的一种格式。

<video controls autoplay width="512" height="288">
  <source src="video/tweetsip.mp4">
  <source src="video/tweetsip.webm">
  <source src="video/tweetsip.ogv">
  <p>Sorry, your browser doesn't support the video element.</p>//如果浏览器不支持视频，显示此文本
</video>

视频选择

source中可以具体的指定视频格式，为浏览器提供帮助，因为浏览器在决定是否能够播放一个文件之前还要做一些侦查工作，type指定视频文件的容器格式，codecs指定视频编码器和音频编码器,如果不知道codecs参数可以省略,例如：

1	<source src="video/tweetsip.ogv" type='video/ogg; codecs="theora, vorbis">

MIME（多用途互联网邮件扩展，Multipurpose Internet Mail Extensions）
- 常见形式是一个主类型加一个子类型，用斜线分隔。
- 比如text/html、application/javascript、image/png等。
- 在访问网页时，MIME type帮助浏览器识别一个HTTP请求返回的是什么内容的数据，应该如何打开、如何显示。
文件扩展名是什么？
- 是操作系统用来标注文件格式的一种机制，用一个点号（.）和主文件名分隔开。
- 由于历史原因，多数扩展名是三个字母。
- 注意，这里说的是标注，而非定义，既然是标注，说明不是强制的。比如你用photoshop可以打开一个psd图像文件。把这个文件扩展名改为txt，再拖到photoshop窗口里，还是一样能打开，说明内容完全没有变化，变化的只是双击时的默认打开方式。
1. 文件扩展名和MIME的异同
- 两者有共同的用途：用来标注信息的格式。
- 但应用场景完全不同：一个是操作系统中标注文件的，一个是邮件和HTTP协议中用来标注网络数据的。
如果你喜欢flash可以把flash放到<object>...</object>控件中，并放到source标记下面，如果浏览器不认识video元素，就会使用flash视频。

利用Hexo搭建个人博客(未完)

发表于 2018-04-28 更新于 2018-10-29 分类于 Web开发

一、基本概念

安装Hexo 1. 打开iTerm

Mac系统软件【日历】

发表于 2018-04-28 更新于 2019-02-28 分类于软件教程

一、使用场景

以后的某天有个安排
- 8月2日下午有个会议
- 8月3日下午5点到7点有一台手术

二、使用步骤

在 Dock 或“应用程序”文件夹中找到“日历”。
通过多种方式添加事件
- 连按（双击）日历上的任何位置可添加当时的某一事件。可通过显示的“检查器”窗口添加被邀请人、设置时间、地点和更多内容。
- 拖动某一事件可重新安排该事件。
- 连按某一现有事件可在“检查器”中对该事件进行编辑。
- 可通过“日历”app 中的“快速事件”字段使用自然语言输入事件。点按“添加事件”按钮并输入说明该事件的文本，例如“这个星期五下午 5 点在 Apple 咖啡馆与查尔斯共进午餐”。“日历”app 将使用您输入的文字来创建新事件，并且时间、联系人和地点等字段都会为您填好。
- 如需估计的行程时间、方向和天气，您需要打开“系统偏好设置”中的定位服务。
通知
- 当某事件即将发生时，OS X 中的“通知”会及时通知您。如果您正忙，可以让“日历”通知稍后再次显示，方法是向右轻扫，或点按“稍后提醒”按钮。按住“稍后提醒”按钮可查看其他选项。

三、使用技巧

创建新日历

默认情况下，OS X 的“日历”app 中包括两个日历：“工作”和“家庭”。如果想创建新日历，请从文件菜单中选取新建日历。在文本字段中键入日历的名称。例如，如果您有多个孩子，则最好为每个孩子单独创建一个日历来跟踪他们的日程安排。您可以点按“日历”按钮来查看和控制日历的显示方式。
要更改某个日历的颜色或名称，请从日历列表中选择该日历，然后选取“编辑”>“显示简介”。
要移除某个日历及其所有事件，请右键点按或按住 Control 并点按该日历的名称，然后从显示的快捷键菜单中选择“删除”。

设备间推送日历更新
- 如果您有 iCloud 帐户，并且在多台设备和电脑上设置 iCloud 日历服务，则 iCloud 日历和提醒事项信息将在每台设备和电脑上都保持最新。
- 在“系统偏好设置”中设置您的 iCloud 日历帐户。可在“日历”窗口中查看您基于 iCloud 的日历。
- 在“系统偏好设置”中：
  - 点按“iCloud”。
  - 登录 iCloud。
  - 选中“日历”旁边的方框。
从其他服务添加日历
- 您也可以从其他常见服务（包括 Exchange、CalDAV、Facebook 和 Yahoo）将约会添加到“日历”app 中的日历。（注：这个并不常用，例如Gmail收到一封会议通知的邮件，只能添加Google Calendar的事件。针对只有Google Calendar的事件，我们可以先给日历添加一个Google账户。）
- 选取 Apple 菜单 () >“系统偏好设置”。
- 选择“互联网帐户”。
- 点按窗口底部的“添加帐户”(+) 按钮。
- 选取您要使用的帐户类型，然后输入您的帐户凭证。
- 确保已选择（选中）“日历”选项，以显示与“日历”app 中的此帐户相关联的事件。
生日和节假日
- Mavericks 中的“日历”会显示从“通讯录”app 直接展开时显示的生日。对某个联系人的生日字段所做的任何更改都会自动显示在“生日”日历中。
公布日历(要让其他人查看某个日历)
- 选取“编辑”>“共享日历”
- 输入您要与其共享此日历的联系人列表或电子邮件地址中的联系人姓名。
- 如果您希望任何人都能从互联网订阅您的日历，请选择“公共日历”选项。
- 随后系统会提供您一个可以发送给他人的 URL，以便他们可以查看该日历。点按该 URL 旁边的“共享”按钮可将其直接发送给使用 OS X 内建共享选项的收件人。
订阅其他日历：订阅他人（例如家人或同事）的已公布日历。
- 选取“文件”>“新建日历订阅”。
- 输入要订阅的日历的 Web 地址 (URL)，然后点按“订阅”。
- 您订阅的日历会显示在“订阅”标题下的“日历”弹出式列表中。要对日历进行更改（例如其事件的颜色或显示在日历列表中的名称），请在日历列表中选择该日历，然后选取“编辑”>“显示简介”。
可以将日历打印出来
- 文件>打印>继续>存储为PDF

Mac系统软件【提醒事项】

发表于 2018-04-28 更新于 2018-10-29 分类于软件教程

一、使用场景

不需要指定时间的任务
- 购物清单。
- 工作中的任务清单。
- 下载清单。
在［某个时刻］如闹钟那样［提醒］你［一件小事］
- 下班时顺路买牛奶。
- 早上八点记得擦黑板。
它还可以在某个时间点重复，但最好仅限一件小事
- 每天早上六点喝第一本水。
- 每天早上八点吃药。

二、使用步骤

找到【提醒事项】应用的图标并点击打开
打开提醒事项后我们可以看到它的操作界面，左侧可以添加相关的列表，将你的提醒事项进行分类，点击右上角的“+”号，就可以新建一个提醒事项了。
在新建了一个提醒事项后，点击后面“i”字符号就可以设置这个提醒事项的提醒时间，或者提醒位置。两种方式可以同时勾选，也可以只选其一。
- 日期提醒:到了这个时间点,Mac/iphone会提醒你该做这个事了。
- 位置提醒：当你的Mac/iphone到达某个你设置好的位置后会提醒你完成该项事件。
有时候，我们需要完成某些每天都做的事件，因而需要设置每天的提醒，我们在设置提醒事项的“日期提醒”时，可以看到“重复”一栏选项，选择“每天”即可。
当提醒时间到了后，Mac会在桌面的右上角弹出消息。

三、使用技巧

设置提醒日期和时间有点麻烦，可以用Siri。一些时间不会太久远的简单事项，如：明晚要打扫卫生，就可以直接呼出Siri：周四晚10点半提醒我打扫卫生。普通话不是太离谱的话，Siri识别效率都挺高的。

Hello World

发表于 2018-04-27 更新于 2018-10-29

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1	$ hexo new "My New Post"

More info: Writing

Run server

1	$ hexo server

More info: Server

Generate static files

1	$ hexo generate

More info: Generating

Deploy to remote sites

1	$ hexo deploy

More info: Deployment

一、基本概念

常识与实践

二、链接方式

内部链接

CSS文件外置

三、多样式表

四、简写

简写格式

简写的优劣

五、选择(selector选择器/选择符)

子孙选择器

选择直接的子元素

复杂选择

属性选择器

六、规则添加

七、类

类元素选择器

添加类元素

类选择器

多类元素

特定元素选择器

八、id

id的作用

选择元素

实践建议

九、继承

样式继承

那哪些元素能够继承

十、层叠Cascade

十一、媒体查询

link媒体查询

css媒体查询

实践建议

十二、属性

盒模型the box model

内容区

padding内边距

border 边框

border-style 边框样式

border-width边框宽度

border-color 边框颜色

border-radius 边框圆角

margin 外边距

十三、color 颜色

文本元素的字体颜色

用16进制码指定颜色

按名指定颜色

用红绿蓝值指定颜色

十四、font-family 字体

字体系列

@font-face 指定字体

@import允许导入其他CSS文件

font-weight 控制文本的粗细

font-size 让文本更大或更小

指定字体大小的秘诀

浏览器默认字体大小

text-decoration 文本装饰

list-style 改变列表中列表项的外观

定制列表标记

十五、其他属性

left 指定一个元素的左边所在位置

top 控制一个元素顶部的位置

background-image 在元素后面放置一个图像,如

background-repeat 背景图像是否重复

background-position 背景图像的位置

background-color 控制元素的背景颜色

text-align 对齐

letter-spacing 在字母之间设置间距

line-height 设置文本元素中的行间距

border-bottom 下边框

width 指定元素宽度

a元素和它的多重人格

十六、布局和定位

流

float

clear

两栏效果

流体与冻结设计

凝胶布局 Jello

绝对定位

`padding`内边距

`border` 边框

`border-style` 边框样式

`border-width`边框宽度

`border-color` 边框颜色

`border-radius` 边框圆角

`margin` 外边距

十三、`color` 颜色

`@font-face` 指定字体

`@import`允许导入其他CSS文件

`font-weight` 控制文本的粗细

`font-size` 让文本更大或更小

`text-decoration` 文本装饰

`list-style` 改变列表中列表项的外观

`left` 指定一个元素的左边所在位置

`top` 控制一个元素顶部的位置

`background-image` 在元素后面放置一个图像,如

`background-repeat` 背景图像是否重复

`background-position` 背景图像的位置

`background-color` 控制元素的背景颜色

`text-align` 对齐

`letter-spacing` 在字母之间设置间距

`line-height` 设置文本元素中的行间距

`border-bottom` 下边框

`width` 指定元素宽度

`a`元素和它的多重人格

`float`

`clear`

`li`列表项

`ol` 有序列表

`ul` 无序列表

`dl`,`dt`,`dd` 定义列表

`img` 图片

`div` 块元素容器

`span` 内联元素容器

`table` 表格

`caption` 标题

`nth-child` 伪类

表单`form`

`POST`和`GET`请求

`field`和`legend` 分组

`passwords input` 密码

`file input` 文件

`placeholder` 提示

`Required` 必要

`text input` 文本输入

`submit input` 提交输入

`radio input` 单选按钮

`checkbox input` 复选按钮

`textarea` 文本区

`select` 菜单

`number input` 数字输入

`range input` 范围输入

`color input` 颜色输入

`date input` 日期输入

`email input` email输入

`tel input` tel 输入

`url input` url 输入

`footer` 页脚

`section` 节