关于CSS的总结

一、id选择器和class选择器
1、CSS 中 id 选择器以 “#” 来定义，id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器的属性不能以数字开头，数字开头的id 在 Mozilla/Firefox 浏览器中不起作用。
2、在 CSS 中，类选择器以一个点”.”号显示，class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

二、CSS的样式表
1、外部样式：当样式需要应用于很多页面时，外部样式表将是理想的选择，在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link> 标签链接到样式表。<link> 标签在（文档的）头部：

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

2、内部样式：当单个文档需要特殊的样式时，就应该使用内部样式表。使用内部样式表<style> 标签在文档头部定义。

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

3、内联样式表：由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。要使用内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

4、多重样式：某些属性在不同的样式表中被同样的选择器定义，属性值将从更具体的样式表中被继承过来。实例如下：
h1的外部样式表：

h1
{
    color:red;
    text-align:left;
    font-size:8pt;
}

h1的内部样式表：

h1
{
    text-align:right;
    font-size:20pt;
}

则h1最终继承的属性为：

color:red;
text-align:right;
font-size:20pt;

即属性相同时，内部样式表的所有属性都被继承，外部样式表独有的属性被继承。
5、多重样式表的优先级：
内联样式> 内部样式>外部样式 > 浏览器默认样式

三、CSS的文本格式
1、文本修饰：text-decoration 属性用来设置或删除文本的装饰，从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

h1 {text-decoration:overline;}//线在文字上面
h2 {text-decoration:line-through;}//线在文字中
h3 {text-decoration:underline;}//线在文字下

2、文本转化：文本转换属性是用来指定在一个文本中的大写和小写字母，可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

3、文本缩进：首行缩进

p {text-indent:50px;}

4、文本阴影

<style>
h1 {text-shadow:2px 2px #FF0000;}//第一个2px表示向右偏移，第二个表示向下
</style>

四、CSS 链接
1、CSS链接有四个样式：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

2、

猜你喜欢