html系统学习之五

参考资料来源W3School（http://www.w3school.com.cn）

其实写博客就是把以前写在本子上东西写到网络上，好处就是在办公室写完了，回到家或是去网吧还可以接着写。这里有几个过程，第一个写的过程，如果只是阅读，那么印象没有边看边写这么深刻，第二个写完之后有种充实感，不会再因为今天又玩了一天的游戏，啥事也没干成，养成好好学习，天天向上的习惯，第三个就是方便日后查询，也可以把日后的某一天与写的那时候比较一下，看看彼一时如何，此一时如何，是更加进步了还是根本都已经忘记了。

今天着重学习一下CSS，它有多大用处，相信地球人 都知道。样式首先它分三种用法：

• 外部样式，当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。

• 内部样式，当单个文件需要特别样式时，就可以使用内部样式表。

• 内联样式，当特殊的样式需要应用到个别元素时，就可以使用内联样式。

  
  This is a paragraph
  

 

如果某个元素同时应用了上面的样式，那么到底用谁呢？这里有个优先级，从高到低为：内联样式，内部样式(head标记中)，外部样式。

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器selector通常是您需要改变样式的 HTML 元素。其中每条声明declaration又是由一个属性和一个值组成。打个比方：

h1 {color:red; font-size:14px;}

看清楚了吧，元素后面的内容用大括号括起来，每个声明后面有个分号，每个声明的属性与值是用冒号隔开的。与 XHTML 不同，CSS 对大小写不敏感。

几个高级的语法：

1.选择器的分组，多个选择器之间用逗号分隔，下面代码表示所有的标题颜色都用绿色，这里还有个通配符星号，代表所有元素

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

2.继承及其问题，首先什么是继承？根据我的理解就是父元素的声明，应用到它的子元素，看个例子好理解

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

这里应该这个窗体中的所有元素的字体都如body元素中设置的一样，但是问题就是早期的浏览器版本不支持继承，所以有时候只能用选择器分组，多写一点代码罗。如果要摆脱继承只需把子元素再创建一个规则。

其它的一些选择器，可以相互组合

派生选择器：通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

li strong {
    font-style: italic;
    font-weight: normal;
  }

在下面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。

我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用


我是斜体字。这是因为 strong 元素位于 li 元素内。
我是正常的字体。

id 选择器：为标有特定 id 的 HTML 元素指定特定的样式。以 "#" 来定义

#red {color:red;}
#green {color:green;}
#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

类选择器：类选择器以一个点号显示：

.center {text-align: center}

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

This heading will be center-aligned



This paragraph will also be center-aligned.

类名的第一个字符不能使用数字！
属性选择器：如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

*[title] {color:red;}

把包含标题（title）的所有元素变为红色

a[href][title] {color:red;}

上面将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

子元素选择器：注意大于号

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的 strong 元素变为红色，但是第二个 strong 不受影响：

This is very important.
This is really very important.

 

相邻兄弟选择器：注意加号

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

这么多选择器，已经晕了，再组合一下，我要敢问路在何方，其实想想，选你喜欢上手的用就行了，经常用的不会很多，碰到特殊情况知道还有其它选择方法就行了。

伪类

W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

 

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

 

CSS 伪类用于向某些选择器添加特殊的效果。

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

以上叫什么锚伪类，在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后，才是有效的。伪类名称对大小写不敏感。

CSS2 - :first-child 伪类

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。
CSS2 - :lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型

文字段落中的引用的文字文字

伪元素

W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

 

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

 

CSS 伪元素用于向某些选择器设置特殊效果。

头快要爆炸了，一下子接受不了这么多，先记下了，日后再来当字典查吧