CSS，样式选择器

标签： css 选择 | 发表时间：2012-12-02 13:41 | 作者：小Kiss

出处：http://www.cnblogs.com/

CSS，样式选择器

一、CSS

CSS（层叠样式表）使用来美化页面用的，CSS主要有元素内连，页面嵌入和外部引用三种使用方式；

1.元素内联，直接将样式写入元素的style属性中，适用于样式没有可复用性的场合。

2.页面嵌入，在head头部进行嵌入

<head>
<style type="text/css">
input{border-color:Yellow;color:Red;}
</style>
</head>

结果：表示页面中所有的input都采用指定的样式。适用于样式复用，减小页面的面积

3.外部引用，首先建立CSS文件，将要要写的CSS样式添加到该文件中。在head头部进行引用。适用于多页面共享CSS。

CSS文件，文件名为S1.css

textarea{background:Yellow}

对上面的CSS文件进行引用；

二、样式选择器

　　对于非元素内联的样式需要定义样式选择器，通俗的说就是这个样式适合哪些元素，样式选择器有：标签选择器，class选择器，id选择器，关联选择器，组合选择器，伪选择器

1.标签选择器

对于指定标签采用统一的标签；

<head>
<style type="text/css">
input{border-color:Yellow;color:Red}
</style>
</head>

2.class选择器

以定义一个命名的样式，然后在用它的时候设定元素的class属性为样式，还可以同时设定多个class，名称之间加空格。

<head>
<style type="text/css">
.warning{background:Yellow}
.highlight{font-size:xx-large;cursor:help;}
</style>
</head>

其中.waringhe .highlight是给元素定义了名称，这个名称不作用于任何元素，除非引用它。

对该样式进行引用；

标签+class选择器：
class选择器也可以针对不同的标签，实现同样的样式名对于不同标签有不同的形式，只要在前面加上标签名称即可。

<head>　
　 <style type="text/css">　　　　
input.accountno{text-align:right;color:Red}
　　　　label.accountno{font-style:italic;}　　
</style>
</head>

3.id选择器：为指定的id的元素设定样式。代码如下：

<head>
<style type="text/css">
#UserName{font-size:xx-large;}
</style>
</head>

在body中对该样式进行使用：

id叫做UserName的元素的样式是{font-size：xx-large;}

4、更多选择器
（1）、关联选择器（必须是相互关联之下的样式才可以有变化）

　　代码如下：

<head>
<style type="text/css">
p strong{background-color:Yellow;}
</style>
</head>

上面代码的意思就是p标签和strong标签相关的内容使用的样式（也就是表示p标签中的strong标签内的内容使用的样式）

<body>
<strong>aaaaaaa</strong>
<p><strong>bbbbbbb</strong></p>
</body>

我们看到上面的代码中仅有<strong>标签的字体没有任何变化，而<p><strong>中的字体可以使用上面的css样式
(2)、组合选择器：同时为多个标签设定同一个样式；

<head>
<style type="text/css">

H1,H2,input{background-color:Green;}
</style>
<head>

上面的代码是将h1,h2,input的样式都设置成为{background-color:Green},当我们使用这三个标签的时候有同样的样式显现；

代码如下：

(3)、伪选择器：为标签的不同状态设定不同的样式：如：A：visited 超链接点击过的样式；A:active超链接被选中的样式;A:link：超链接已被访问时的状态

A:hover:鼠标移到超链接时的样式

现在我们来用这些样式给超链接设置样式；把这些样式放在CSS文件中，因为这些样式都是基本固定的只要你使用超链接的时候就把这些样式引入即可；

代码如下：

A：visited
{
text-decoration:none
}
A:active
{
text-decoration:none
}
A:link
{
text-decoration:none
}
A:hover
{
text-decoration:underline
}

在html页面中对该样式进行引用即可；

下面我们来创建连超链接：

本文链接