2014年1月

给网站添加icon

每次用到都会忘记（归根结底果然是用得太少吧）
其实还是很简单的，简单的link

<link rel="icon" type="image/x-icon" href="">

PS:只要目录存在favicon.ico 就算不加这段也可以，但对SEO不友好，各种都会默认你无icon，此外，系统会频繁读取，还是定义的好=A=

复习一下：how to add CSS

<link rel="stylesheet" type="text/css" href="">

CSS伪类与伪元素

伪类

属性 描述 CSS
:active 向被激活的元素添加样式。 1
:focus 向拥有键盘输入焦点的元素添加样式。 2
:hover 当鼠标悬浮在元素上方时，向元素添加样式。 1
:link 向未被访问的链接添加样式。 1
:visited 向已被访问的链接添加样式。 1
:first-child 向元素的第一个子元素添加样式。 2
:lang 向带有指定 lang 属性的元素添加样式。 2

伪元素

属性 描述 CSS
:first-letter 向文本的第一个字母添加特殊样式。 1
:first-line 向文本的首行添加特殊样式。 1
:before 在元素之前添加内容。 2
:after 在元素之后添加内容。 2

伪类扩展阅读：http://www.w3school.com.cn/css/css_pseudo_classes.asp
伪元素扩展阅读：http://www.w3school.com.cn/css/css_pseudo_elements.asp

CSS几个竖直与水平居中盒子模型

1、利用绝对定位，一个居中的模型

演示

#login {                      /* 定义一个ID选择器 */
    width:300px;              /* 定义盒子宽度为300px */
    height:200px;            /* 定义盒子高度为200px    */
    position:absolute;        /* 使用绝对位置进行定位    */
    left:50%;                 /* 左部盒子开始位置是页面宽度的50%  */
    top:50%;                  /* 顶部盒子开始位置是页面高度的50%  */
    margin-left:-150px;       /* 左部开始位置再退回盒子宽度的一半 */
    margin-top:-100px;        /* 顶部开始位置再退回盒子高度的一半 */
    background:#BABABA;       /* 定义盒子的背景颜色为灰色         */
}

- 阅读剩余部分 -

text的三个以前忽视的属性（尤其阴影）

text-intent:
文本缩进，与background配合可以发挥添加icon的效果（嘛虽然貌似伪元素:before也可以）

text-decoration:
有underline（下划线）overline（上划线）line-through（删除线）blink（闪烁）none（无）
去除超链接下划线：text-decoration:none

前面两个的扩展阅读：http://www.w3school.com.cn/css/css_text.asp

text-shadow:
CSS3中的新增属性，所以对IE支持不好（IE9及以下）[自觉这东西好看与否完全取决于你的美术水平]
如：

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

演示

扩展阅读：http://www.w3school.com.cn/cssref/pr_text-shadow.asp

Alt与Title属性的区别

上次做网页的时候就发现了这个问题，图片希望鼠标放在该图片上显示文字，结果使用了alt却不出现，查了一下发现，标注alt主要是在图片没加载出来时显示文字以及用于SEO，那项功能因为IE的缘故被误读为“也能实现”，实际上是不正确的。

如果要实现该效果，用title就可以了。

关于alt的延伸阅读：http://www.w3school.com.cn/tags/att_img_alt.asp

CSS优先级与选择器

样式表优先级：

如果同时使用内联样式表和嵌入样式表，并设置了相同属性，则内联样式表优先级高。而同时使用嵌入样式表和外部样式表并设置相同属性，优先级由出现的先后顺序决定（后出现的覆盖先出现的）。

- 阅读剩余部分 -

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5