css基础---第一篇

CSS 层叠样式表 ，英文全称 Cascading Style Sheets，主要用来渲染HTML，使网页变得美观！

一.HTML文档和CSS样式关联方式

1.外部样式表
link标记：为了成功地加载一个外部样式表，link必须放到head元素中

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

rel代表关系relation，指定被链接的文档是一个样式表 (rel=alternate stylesheet，定义候选样式表)
type描述了使用link标记加载的数据的类型
media属性(all用于所有表现媒体，screen在屏幕媒体中表现文档时使用，print为视力正常的用户打印文档时使用。)

2.style元素包含样式表

<style type="text/css">
p{color:red;}
</style>

3.@import指令 : 出现在style容器中

<style type="text/css">
@import url(css.css);
</style>

4.内联样式，即在HTML标签内部通过style属性设置一个内联样式。
例如：将p标签中字体颜色设为红色

<p style="color:red;">

注意:
向后可访问性：
如果一个浏览器无法识别<style>和</style>，就会将其统统忽略。不过这些标记中的声明不一定会被忽略。因为对于浏览器而言，它们看上去像是正常的文本。所以，样式声明会出现在页面的最上面。为了解决这个问题，一般将声明包含在一个注释标记中，如下：

<style type="text/css"><!--

--></style>

这样一来，较老的浏览器不仅会将style标记完全忽略，还会忽略声明，因为HTML注释不会显示出来。与此同时，能理解CSS的浏览器仍能正常地读取样式表。

二、选择器：
1.元素选择器：即HTML标签选择器，例如：p,div,span等等
2.通配选择器*：一般清空浏览器默认样式使用: *{margin:0;padding:0;}
3.类选择器使用符号. ，ID选择器使用符号#
4.属性选择器：
简单属性选择 h1[class],
根据具体属性值选择 planet[moons='1'],
根据部分属性值选择 [foo^='bar']foo属性值以bar开头，[foo$='bar']foo属性值以bar结尾，[foo*='bar']foo属性值中包含子串bar
特定属性选择类型:[att|='val'] 例如：[lang|='en']
5.使用文档结构

后代选择器：空格
选择子元素：>
选择相邻兄弟元素：+

6.伪类和伪元素
静态伪类:
:link 指示作为超链接并指向一个为访问地址的所有锚。注意，有些浏览器可能会不正确地将:link解释为指向任何超链接。
:visited指示作为已访问地址超链接的所有锚

<a>a链接无href</a>
<a href="1">a链接未被访问</a>
<a href="#">a链接已访问过</a>
<a href="2">a链接活动状态</a>

自行设置样式后，在观察效果

a{color:gray;}
a:link{color:red;}
a:visited{color:black;}
a:active{color:blue;}

由此可以看出 :link用于指向访问地址的链接，:visited用于已访问过的地址链接，:active用于活动状态的地址链接
尽管:link和:visited非常有用，但是它们是静态的，第一次显示之后，一般不会再改变文本样式。

动态伪类：可以应用到任何元素
:focus 指示当前拥有输入焦点的元素
:hover 指示鼠标指针停留在哪个元素上
:active 指示被用户输入激活的元素
(注意：伪类的顺序很重要，link-visited-focus-hover-active)

选择第一个子元素:first-child (注：IE6之前不支持:first-child)
最常见的错误是认为p:first-child之类的选择器是选择p元素的第一个子元素。

<a>a1</a>
<a>a2</a>
<a>a3</a>

a:first-child{color:red;}

选择的是第一个a标签

设置首字母样式:first-letter
设置第一行的样式:first-line
设置之前和之后元素的样式:before，:after





效果图如下：