css样例整理

“TRBL”原则

即Top/Right/Bottom/Left方向赋值。比如：
每个值之间用空格分隔。

1
border-width:1 1 2 3

还有另一种简写形式

一个值

一个值时，表示四边都是这个值。

1
border-style:solid;

两个值

两个值时，第一个值表示元素上下边框类型，第二个值表示左右边框类型。

1
border-style:solid dotted;

三个值

三个值时，第一个值表示元素的顶边的类型，第二个值表示元素左右边框类型，第三个值表示元素底部边框类型。

1
border-style:solid dotted dashed;

四个值

四个值，每个边都指定。

1
border-style:solid dotted dashed inset;

不同浏览器前缀

浏览器分类 浏览器 私有属性的前端缀
Gecko引擎内核的浏览器 Mozilla（常指Firefox浏览器） -moz-
WebKit内核 Safari, Google Chrome,傲游3 -webkit-
Presto内核 Opera -o-
KHTML内核 Konqueror -khtml-
Trident内核 IE -ms-

-prefix-free摆脱浏览器前缀麻烦

利用这个脚本，可以省略去掉浏览器的前缀，从而节约开发时间和维护成本。

作者:Lea Verou
地址：-prefix-free
在页面的头部调用如下脚本,<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
在link中，或是style中，或是dom元素的style中书写CSS3 code，或是jQuery .css()方法此脚本会自动补上需要的前缀，让响应的浏览器支持该CSS3属性。

选择器优先级

样式表中同一元素可能有两个个或多个规则生效。哪种样式规则最终生效？这样就会产生冲突。css通过层叠处理这种冲突。层叠给每个规则分配一个重要度。页面引用的样式表是开发者编写的，被认为是最重要的样式表。浏览器使用的默认样式表，重要度是最低的。

!important

!important提高样式的重要度。
层叠采用重要度次序：

  • !important样式
  • 用户样式
  • 浏览器样式
  • 两个规则特殊性相同，后定义的规则优先

    特殊性

特殊性（优先级）可以用数值来表示。每种选择器都分配一个数值，将规则的每个选择器的值加在一起，计算出规则的特殊性。

选择器的特殊性分成4个等级，a、b、c、d。

  • 如果样式是行内样式，那么a=1(千位).
  • b等于id选择器的总数（百位）。
  • c等于类、伪类和属性选择器的数量（十位）。
  • d等于类型选择器和伪元素选择器的数量（个位）。
  • *所有选择器因为什么都代表，所以等于0。

特殊性的计算不是以十位为基数计算的。采用的是一个更高的未指定的基数。这能确保不会被大量的id和类型选择器所超越。
但是为了简化，如果在一个特定选择器中的选择器数量少于10个，那么可以以10为基数计算特殊性。

特殊性示例

选择器 特殊性 以10为基数的特殊性
style="" 1,0,0,0 1000
#id1 #id2{} 0,2,0,0 200
#id1 .class1{} 0,1,1,0 110
div #id1{} 0,1,0,1 101
#id{} 0,1,0,0 100
p.comment .class1{} 0,0,2,1 21
p.comment{} 0,0,1,1 11
div p{} 0,0,0,2 2
p{} 0,0,0,1 1

举例猜猜看下面的代码color颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<body>
	<style>
		#content div#main-content h2{
			color:gray;
		}
		#content #main-content>h2{
			color:blue;
		}
		body #content div[id="main-content"] h2{
			color:green;
		}
		#main-content div.news-story h2{
			color:orange;
		}
		#main-content[class="news-story"] h2 {
			color:yellow;
			}
		div#main-content  div.news-story h2.first{
			color:red;
		}
	</style>
	<div id="content">
		<div id="main-content">
			<h2>这个是标题，也是测试目标</h2>
			<p>我的座椅好硬啊。</p>
			<div id="news-story">
				<h2 class="first">我也是测试的标题</h2>
				<p>垫的屁股疼。</p>
			</div>
		</div>
		
	</div>
</body>
</html>

显示结果：

特殊性使用规则

为了避免样式表过于混乱，尽量保持一般样式非常一般，特殊样式尽可能特殊，这样就不需要覆盖特殊样式了。

附加

伪类

伪元素（伪对象）

hexo指令

安装和使用 Hexo

安装 Hexo

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

npm install -g hexo-cli

安装git插件

  1. cd 定位到项目文件夹。
  2. 执行命令npm install hexo-deployer-git --save

指令

init

新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。

hexo init [folder]

new

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

$ hexo new [layout] <title>

generate

生成静态文件。

选项 描述
-d, --deploy 文件生成后立即部署网站
-w, --watch 监视文件变动 


$ hexo generate

该命令可以简写为：

$ hexo g

publish

发表草稿。

$ hexo publish [layout] <filename>

server

启动服务器。默认情况下，访问网址为： http://localhost:4000/。

选项 描述
-p, --port 重设端口
-s, --static 只使用静态文件
-l, --log 启动日记记录，使用覆盖记录格式 


$ hexo server

deploy

部署网站。

参数 描述
-g, --generate 部署之前预先生成静态文件 


$ hexo deploy

该命令可以简写为：

$ hexo d

clean

hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

选项

安全模式

hexo --safe

在安全模式下，不会载入插件和脚本。当您在安装新插件遭遇问题时，可以尝试以安全模式重新执行。

调试模式

hexo --debug

在终端中显示调试信息并记录到 debug.log。当您碰到问题时，可以尝试用调试模式重新执行一次，并 提交调试信息到 GitHub。

简洁模式

hexo --silent

隐藏终端信息。

markdown语法

使用 Markdown 的优点

  • 专注你的文字内容而不是排版样式，安心写作。
  • 轻松的导出 HTML、PDF 和本身的 .md 文件。
  • 纯文本内容，兼容所有的文本编辑器与字处理软件。
  • 随时修改你的文章版本，不必像字处理软件生成若干文件版本导致混乱。
  • 可读、直观、学习成本低。

标题

第一种方式

利用 = （最高阶标题）和 - （第二阶标题），大于2的任何数量的 = 和 - 都可以有效果。

1
2
3
4
最高阶标题类似html的h1
==
第二阶标题类似html的h2
--

效果

最高阶标题类似html的h1

第二阶标题类似html的h2

第二种方式

行首插入 1 到 6 个 # ，对应到标题 1 到 6 阶对应html的h1到h6.在井号后加一个空格，这是最标准的 Markdown 语法。

1
2
3
# 这是 H1
## 这是 H2
###### 这是 H6

效果

这是 H1

这是 H2

这是 H6

列表

列表的显示只需要在文字前加上 - 或 * 即可变为无序列表，有序列表则直接在文字前加1. 2. 3. 符号要和文字之间加上一个字符的空格。
无序列表

1
2
3
* 1
* 2
* 3

  • 1
  • 2
  • 3

有序列表

1
2
3
1. 1
2. 2
3. 3

  1. 1
  2. 2
  3. 3

引用

  • Markdown 标记区块引用是使用类似 email 中用 > 的引用方式。
  • Markdown 也允许你偷懒只在整个段落的第一行最前面加上 >。
  • 区块引用可以嵌套（例如：引用内的引用），只要根据层次加上不同数量的 >。
  • 引用的区块内也可以使用其他的 Markdown 语法，包括标题、列表、代码区块等。

这是一个标题。

  1. 这是第一行列表项。
  2. 这是第二行列表项。

给出一些例子代码：

return shell_exec("echo $input | $markdown_script");

链接

行内式

只要在方块括号后面紧接着圆括号并插入网址链接即可，如果你还想要加上链接的 title 文字，只要在网址后面，用双引号把 title 文字包起来即可。

1
[显示文字](url "title")

点击百度跳转

参考式

  • 定义标记，[id]: https://www.baidu.com "百度"
  • 链接是在链接文字的括号后面再接上另一个方括号，而在第二个方括号里面要填入用以辨识链接的标记。
    1
    2
    [id]: https://www.baidu.com  "百度"
    点击这个也去 [百度] [id].

点击这个也去 百度.

下面这个是省略写法：

1
2
[Google][]
[Google]: http://google.com/

图片

图片与连接相比在前面加一个叹号就可以了。

1
2
3
4
5
![Alt text](/path/to/img.jpg "Optional title")

![Alt text][id]

[id]: url/to/image  "Optional title attribute"

粗体与斜体

Markdown 的粗体和斜体也非常简单，用两个 包含一段文本就是粗体的语法，用一个 包含一段文本就是斜体的语法。

1
2
*你好*
**还好**

你好 斜体
还好粗体

代码框和代码区块

代码框

需要用两个 ` 把中间的代码包裹起来。

1
`alert(123);`

首行空4格或一个制表符,上方需要空一行。

1
alert(123);

alert(123);

代码区

分别用三个反引号包裹起来。

1
2
3
\ ` \ ` \ `
alert(123);
\ ` \ ` \ `

代码高亮。选择代码语言，可以在三个反引号后直接跟语言名称。例如：python，JavaScript，c#，java等。

1
2
3
4
5
6
7
@requires_authorization
class SomeClass:
    pass

if __name__ == '__main__':
    # A comment
    print 'hello world'

1
alert("123123");

分割线

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线。

1
2
3
4
5
6
7
8
9
* * *

***

*****

- - -

---------------------------------------

表格

  • 表格与块之间需要加一空行。否则表格被转义后原样输出了。
  • 不管是哪种方式，第一行为表头，第二行分隔表头和主体部分，第三行开始每一行代表一个表格行；
  • 列与列之间用管道符号 “|” 隔开，原生方式的表格每一行的两边也要有管道符。
  • 可在第二行指定不同列单元格内容的对齐方式，默认为左对齐，在 “-” 右边加上 “:” 为右对齐，在 “-” 两侧同时加上 “:” 为居中对齐。
    1
    2
    3
    4
    5
    | Name | Academy | score | 
    | - | :-: | -: | 
    | Harry Potter | Gryffindor| 90 | 
    | Hermione Granger | Gryffindor | 100 | 
    | Draco Malfoy | Slytherin | 90 |
Name Academy score
Harry Potter Gryffindor 90
Hermione Granger Gryffindor 100
Draco Malfoy Slytherin 90

复选框

1
2
3
4
5
- [ ] 支持以 PDF 格式导出文稿
- [ ] 改进 Cmd 渲染算法，使用局部渲染技术提高渲染效率
- [x] 新增 Todo 列表功能
- [x] 修复 LaTex 公式渲染问题
- [x] 新增 LaTex 公式编号功能
  • 支持以 PDF 格式导出文稿
  • 改进 Cmd 渲染算法，使用局部渲染技术提高渲染效率
  • 新增 Todo 列表功能
  • 修复 LaTex 公式渲染问题
  • 新增 LaTex 公式编号功能

test


/xuduo/2017/08/01/test/pub_hy_img.jpg tttt

<%- url_for(pub_hy_img.jpg) %>

示例 d javaScript
1
alert('Hello World!');

content

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

start

st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op

  • 支持以 PDF 格式导出文稿
  • 改进 Cmd 渲染算法，使用局部渲染技术提高渲染效率
  • 新增 Todo 列表功能
  • 修复 LaTex 公式渲染问题
  • 新增 LaTex 公式编号功能

$$ E=mc^2 $$