DHTML【7】--CSS

本节将要介绍CSS的选择器,CSS有三种常用的选择器,还有三种扩展选择器,说到选择器,那么选择器是做什么用的呢?


上一节我们介绍CSS常用属性的时候,我们都是通过在标签内定义Style属性来介绍的,但是如果Style中的属性有很多,并且我们还要把相同类型的标签用同一个CSS样式来美化,我们总不能Copy代码吧,首先页面太乱,再者代码量大,在大型的网站开发中会影响执行效率,最后自己操作起来也很麻烦,遇到这个问题,我们改怎么解决呢?


这就是选择器要做的事情,我们可以先定义好一个样式,然后再指定给那些需要美化的标签,这样难道不好吗?好,从美学角度讲,一个页面的同类事物只有一个风格会给用户整体舒服感,那么选择器该怎么用呢?下面先请看下图:

此图看和想5分钟,好好体会一下。了解了分类和用途之后,下面我们就结合代码,看看你的体会对吗?

1.标签选择器

<html>

<head>

<styletype="text/css">

div{background:#FF0000}

</style>

</head>

<body>

<div >我是div</div>

<div >我也是div</div>

<p>我是p</p>

<p>我也是p</p>

<inputtype="text" value="我是TXT"/>

</body>

</html>

在浏览器中查看发现所有的div标签全被美化了,其他标签都是默认状态,<style type="text/css"></style>这段代码可以先不用管,下一节会介绍,主要看红色标记的部分,标签选择要写在head标签内,写法格式要好好掌握。

2.类选择器

<html>

<head>

<styletype="text/css">

.waring{Blue;}< /span>

.highlight{font-size:xx-large;cursor:help;}

</style>

</head>


<body>

<div>

<h1>我是h1</h1>

<h2>我是h2</h2>

<h3 class="highlight">我是h3</h3>

</div>

</body>

</html>

在浏览器中查看发现,只有在class属性被定义的标签被相应美化了,其他标签仍为默认样式,类选择器的名称是自定义的。

3.ID选择器

<html>

<head>

<styletype="text/css">

#myTxt

{

 font-size:36px;

 background-color:#00ff00;

}


</style>

</head>


<body>

<div>

<p>我是p</p>

<input id="myTxt" type="text"value="我是text"/>

</div>

</body>

</html>

ID选择器和我们平时开发取对象很相似,最具有针对性。

对于以上的三种选择器,三种选择器可以结合使用,但是浏览器会给他们排个优先级,就是标签的样式被定义多次,该显示哪个样式,浏览器会其中优先级最高的样式,样式优先级:ID>class>标签。

4.关联选择器

<html>

<head>

<styletype="text/css">

div h1{background:#00ff00}

</style>

</head>

<body>

<div>

<p>我是p</p>

<h1>我是h1</h1>

</div>

<h1>我也是h1</h1>

</body>

</html>

在浏览器中查看,我们发现,只有div标签内的h1标签被修饰了,div标签内的其他标签,甚至div外的h1标签都没有被修饰,这就是关联组合器的作用,神奇吧。

5.组合选择器

<html>

<head>

<styletype="text/css">

div,h1,p{background:#00ff00}

</style>

</head>

<body>

<div>我是div</div>

<h1>我也是h1</h1>

<p>我是p</p>

<h2>我是h2</h2>

</body>

</html>

在浏览器中查看,我们会发现,只有div,h1,p这三种标签被修饰了,其他标签没有被修饰,这也是标签选择器的组合用法,达到页面效果统一。

6.伪元素选择器

<html>

<head>

<styletype="text/css">

 a:active{color:Green};

 a:hover{cursor:help};

 a:link{color:Red};

 a:visited{color:Blue};

</style>

</head>

<body>

<ahref="www.baidu.com">百度网首页</a>

</body>

</html>

这是我介绍的最后一个选择器了,上面代码在浏览器中查看,发现超链接默认的颜色变为了绿色,鼠标放上去的时候鼠标指针形状为问号帮助样式,当我们鼠标按下时超链接的颜色变为红色,访问完再回到页面,发现超链接的颜色变为蓝色,我说完这些你也大概知道上面的代码是什么意思了,为选择器不仅可以用于a标签,还可以用于p等标签,具体怎么用就去查帮助文档吧,怎么查呢?

DHTML->HTML元素->a标签->样式。


好了,关于选择器我就介绍到这里,之所以举这么简单的例子,是因为我主要讲的是原理,不想因为初学者突然看到其他难点而忽略了重点。好了,本节就到这里,下一节将继续HTML与CSS的结合方式。


你可能感兴趣的:(css,css选择器)