DHTML【7】--CSS

简介:     本节将要介绍CSS的选择器,CSS有三种常用的选择器,还有三种扩展选择器,说到选择器,那么选择器是做什么用的呢?       上一节我们介绍CSS常用属性的时候,我们都是通过在标签内定义Style属性来介绍的,但是如果Style中的属性有很多,并且...

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

 

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

 

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

 

 

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

    1.标签选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< 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.类选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<styletype= "text/css" >
  .waring{ background :Blue;}
  .highlight{ font-size : xx-large ; cursor : help ;}
</style>
</head>
  
<body>
<div>
<h 1 >我是h 1 </h 1 >
<h 2 class= "waring" >我是h 2 </h 2 >
<h 3 class= "highlight" >我是h 3 </h 3 >
</div>
</body>
</html>

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

    3.ID选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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.关联选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<styletype= "text/css" >
   div h 1 { background : #00ff00 }
</style>
</head>
<body>
<div>
<p>我是p</p>
<h 1 >我是h 1 </h 1 >
</div>
<h 1 >我也是h 1 </h 1 >
</body>
</html>

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

    5.组合选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<styletype= "text/css" >
   div,h 1 ,p{ background : #00ff00 }
</style>
</head>
<body>
<div>我是div</div>
<h 1 >我也是h 1 </h 1 >
<p>我是p</p>
<h 2 >我是h 2 </h 2 >
</body>
</html>

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

    6.伪元素选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
<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的结合方式。

目录
相关文章
|
Web App开发 前端开发 程序员
DHTML【6】--CSS
    从今天开始,我们迎来了一个新的面孔---CSS,二者这也是一个漂亮的面孔,为什么说这是一个漂亮的面孔呢?因为CSS是做特效的,可以美化HTML页面,我们看到淘宝网、网易首页等网站都非常好看,那都是一些专业的设计者用CSS美化出来的,那么这和程序员有什么关系呢?       程序员的确不用深入的研究CSS,但是程序员要读得懂设计者的代码,并且能灵活运用CSS操作HTML页面,做到和设计者完美的配合,只有合作好了,网站项目才能趋近于完美,诸葛亮很牛,但是他一个上战场打仗也肯定失败,就是这个道理,要合作,很好的合作。
1202 0
|
JavaScript 前端开发 程序员
DHTML【8】--CSS
    在讲HTML时说过,有个Style标签是在CSS里用的,是的,在HTML中添加CSS样式必须要用到Style,在标签里单独定义标签属性时用的是Style属性。
1048 0
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
123 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
28天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
1月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
79 33
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
116 24
|
4月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。

热门文章

最新文章