首页 > 网站建设 >

网站制作之什么是CSS语言之“CSS选择器”(五)

发布时间:2018-09-03 作者:深圳网站制作

 深圳网站制作公司接上篇文章网站制作之什么是CSS语言之“CSS选择器”(四),继续编辑实操案例,本文为连载文章,如果您需要这方面的知识,请您接上篇文章衔接浏览。
【示例】新建文档,保存为test3.html。输入下面代码,分别使用不同的方式定义3个子选择器:div>span表示div元素包含的所有span子元素的样式,div>.font24px表示div元素包含的所有命名font24px类的子元素,#box>.font24px表示#box元素包含的类名为font24px的所有子元素的样式,演示效果如图所示
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>示例代码</title>
<styletype="text/css">
span{font-size:12px;}
div>span{font-size:16px;}
div>.font24px{font-size:20px;}
#box>.font24px{font-size:24px;}
</style>
</head>
<body>
<h2><span>HTML文档树状结构</span>
</h2><divid="box"><spanclass="font24px">问君能有几多愁,恰似一江春水向东流。</span></div>
<div><spanclass="font24px">问君能有几多愁,恰似一江春水向东流。</span></div>
<div><span>问君能有几多愁,恰似一江春水向东流。</span></div>
</body>
</html>
【示例】新建文档,保存为test4.html。输入下面代码,利用相邻选择器递进控制并列显示的几个元素的显示样式:h2+div表示标题元素h2后面相邻的div元素的样式,div+p表示div元素后面相邻的p元素的样式,p+div表示p元素后面相邻的div元素的样式,而div+div表示div元素后面相邻的div元素的样式。显示效果如图1.15所示。
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>示例代码</title>
<styletype="text/css">
h2{font-size:12px;}
h2+div{font-size:16px;}
div+p{font-size:20px;}
p+div{font-size:24px;}div+div{font-size:28px;}
</style>
</head>
<body>
<h2>HTML文档树状结构</h2><div>问君能有几多愁,恰似一江春水向东流。
</div><p>问君能有几多愁,恰似一江春水向东流。
</p><divclass="class1">问君能有几多愁,恰似一江春水向东流。
</div><div>问君能有几多愁,恰似一江春水向东流。
</div>
</body>
</html>
【示例】新建文档,保存为test5.html。输入下面代码,定义<divid="header">包含框内的段落文本字体大小为14像素,然后定义<divid="main">包含框内的段落文本字体大小为12像素。提示:也可以使用子选择器来定义它们的样式:
<styletype="text/css">#header>p{font-size:14px;}#main>p{font-size:12px;}
</style>
深圳网站制作公司博纳网络,对关于网站设计前端静态语言方面的基础经验分享,今天就到这里。如果您认为本站的文章对您有所帮助,敬请持续关注本站。
 
文章标题:网站制作之什么是CSS语言之“CSS选择器”(五)
本文地址:https://www.198bona.com/news/1306.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯