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页面,做到和设计者完美的配合,只有合作好了,网站项目才能趋近于完美,诸葛亮很牛,但是他一个上战场打仗也肯定失败,就是这个道理,要合作,很好的合作。
1178 0
|
JavaScript 前端开发 程序员
DHTML【8】--CSS
    在讲HTML时说过,有个Style标签是在CSS里用的,是的,在HTML中添加CSS样式必须要用到Style,在标签里单独定义标签属性时用的是Style属性。
1030 0
|
11天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
56 0
|
16天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
23天前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js
|
23天前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战
|
28天前
|
前端开发
HTML+CSS练习小项目——百叶窗
HTML+CSS练习小项目——百叶窗
|
26天前
|
XML 前端开发 JavaScript
HTML、CSS、JavaScript有什么区别
HTML、CSS、JavaScript有什么区别
|
1月前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
38 5
|
1月前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
31 2