关于HTML和CSS一些鸡零狗碎的事

原文发表于我自己的服务器www.jjxiaoliu.cn；不过这个服务器我可能不打算续费了，所以搬到cnblogs来。

 

有些关于HTML和CSS的内容不值得单独列一篇文章，全都放在这里了。

 

这里的rel表示relationship，就是后面href文档与本文档的关系。

 

我们可以利用注释来给原本不能断行的HTML代码增加断行：

和

制作的简单横向菜单中（配合CSS） –>

item1

–>

item2

 

指定charset的两种写法：


这两种几乎是一样的。所以一般用短些就可以了。

 

我们可以使用download属性来设定用户下载到本地的文件名：
Download something

 

用于标记计算机代码的HTML标签：

• ，标记通用计算机代码
• ，标记变量名
• ，标记用户输入
• ，标记计算机输出

 

.vs.
仅描述表格结构；一般而言会使得浏览器以更醒目的方式渲染标签内容（表现形式）。
如果对上一段文字感到拧巴，可以参考这一篇：
HTML与CSS：结构与表现。
另外，在打印长表格时，和会自动重复出现在每一页的头和尾。从这点来说，它们更像是页头和页尾。
在需要时，和也是可以混用的。可以参考MDN上关于标签的例子。

 

pseudo-classes与pseudo-element
pseudo-classes匹配整个标签，而pseudo-element匹配标签内的特定元素。
例如：p:first-child匹配作为第一个child元素出现的p标签；p::first-letter匹配p标签内的第一个字符。
顺便说一下，pseudo-classes的child是指标签本身作为child，不是指标签的下级child。且child计数从1开始。

 

CSS的属性名称不区分大小写，但属性值区分大小写。
[name=”jjxiaoliu”]等价于[Name=”jjxiaoliu”]，但不等价于[name=”JJxiaoliu”]。

 

CSS可以用紧邻的[]匹配多个属性。
[country=”china”][province=”jiangsu”]可以匹配如下标签：

Jiangsu Province, China

注意两个[]之间不能有空格。
如果两个[]之间有空格，那么将形成Descendant selector，于是匹配的将是如下形式的HTML结构：

Jiangsu Province, China

 

 

class和id联合使用
p.class_name#id_name
类似的，class也可以和属性联合使用：
p.class_name[attribute]
类自身也能联合使用：
.classa.classb { }
匹配如下标签：

（上面两条结合起来看：本质上是说的相同的事情。）

 

css的margin属性
如果相邻元素都是正值，那么取正最大；
如果相邻元素都是负值，那么取负最大；
如果相邻元素正负相反，那么取两者的和。

 

css的position属性
如果设置为absolute，那么位置值默认是相对于html标签，除非其祖先设置过position为非static值：即absolute的位置值是相对于其祖先元素里除去用static定位以外的最近一个。使用absolute定位的元素不占据空间（或者说不参与其他元素定位计算）。
如果设置为relative，那么位置值是相对于其“原本（没有设置位置的情况下）应该在的”位置，且“原本应该在的位置”还留着参与其他元素定位（即留白）。
如果设置为fixed，那么位置值是相对于浏览器窗口可视区。常用于在滚动页面时需要固定在屏幕某位置的元素。

 

link, visited, hover, active 

根据CSS的优先顺序（最后一条匹配规则优先），这四个伪类需要按照一定的顺序（从一般到特殊）书写。

1. link作为默认“静态”规则（没有点过，鼠标不在），放在第一项；

2. visited和link同样是“静态”规则，区别是已访问过，考虑到满足visited必定满足link，为了让visited生效，要放在第二项；

2.5 这中间可以插一条focus（When you focus it with key TAB）

3. hove是“动态”规则，鼠标还没有点击，满足它的同时，必定同时满足link，可能满足visited，所以放在第三项；

4. active最为特殊，在满足active的同时，必定满足hover和link，可能满足visited，放在最后一项。

 

使用CSS制作带箭头box的例子：http://www.cssarrowplease.com/