1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > CSS级联样式表-css选择器

CSS级联样式表-css选择器

时间:2022-12-06 09:52:21

相关推荐

CSS级联样式表-css选择器

CSS概念

Cascading Style sheet 级联样式表

表现HTMl或XHTML文件样式的计算机语言

包括对字体,颜色,边距,高度,宽度,背景图片,网页定位等设定

建议:把表示样式的代码从html中分离出来,并且创建一种规则来定义html标签要显示成什么样子。

选择器:

类型选择器:不带尖括号的标签名。 如给段落标签加下划线 p{text-decoration:underline;} 可以设置多个属性

派生选择器:作用在某些标签的子标签上。 如只给ul 中的li标签加20px的字号ul li{ font-size:20px;}

伪类选择器:在原有选择器的基础上添加一个限定的条件,当某种情况发生时在选择这个标签。如给超链接加上鼠标悬浮改变红色 ,下划线a:hover{ color:red; text-decoration:underline;}

:first-child:缩小标签的选择范围。如给ul中的第一个li标签加上红色ul li:first-child{ color:red;} 只选择第一个li标签。

1 <style type="text/css"> 2 /*超链接取消下划线,改变颜色为红色*/ 3 a{4 text-decoration: none; 5 color:red; 6 } 7 /*当鼠标移动到a上显示下划线,改变颜色为绿色*/ 8 a:hover{9 text-decoration: underline;10 color:green;11 }12 /*给li标签改变内链模式*/13 ul li{14 display: inline;15 }16</style>

View Code

其中a标签还有其他的伪类选择器:

a:link{} 为访问的链接,和a{}相同并且同时存在时会覆盖a{}。

a:hover{} 鼠标移动到超链接上时。

a:active{},被选定的超链接。

a:visited{} 已访问的超链接。

类选择器:给HTMl标签增加一个class属性,然后给class属性填写一个值,这个值叫做类型。(在类名前面加“.”)

<body><ul class="shihua"><li>中国需要你</li><li>美国需要你</li><li>世界需要你</li></ul><ul><li>世界美好</li><li>中国美好</li><li>美国美好</li><li>全都美好</li></ul><!--这里我把上面的ul加上了类,下面的没加,这样使用使用类选择器的时候下面的ulstyle不会改变-->.shihua{text-decoration: none;color: #FF0000;}.shihua li{display: inline;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。