怎么学css样式表

贡献者: 嘿sunnyboy

通过这篇文章初学者,可以轻松了解掌握css的三大选择器,对灵活运用css可以带来一定的帮助

1许多初学者在学三大选择器总分不清这三大选择器的区别和用处是什么,首先我介绍一下第一大选择器:第一大学选择器,派生选择器,他的的语法特点是:标记名称{ }接下来举个例子body{babackground-image: url("img/5.jpg");background-color: graybackground-repeat:no-repeat;}这是一个简单的背景派生选择器的运用,从这个例子也可以看出这个样式只能用于body标记,当然不止如此,派生选择器还可以这样用,在看一个例子dl dd{ background-color: gray; di lay: none; width: 80px; height: 30px; }在这里的意思dl 内的dd标签的样式是这样的

2接下来我们来说下id 选择器吧,他的语法特点是:#id名称{ }我们在来看一个例子#logo { color: ue; font-style: inherit; font-size:60px width: 100; height: 60px; background-color: gray; }下面的是引用id选择器<div id="logo" ><center style="font-size: 50px;">我的网页设计</center> </div>从这个简单的实例也可以轻易的看出,只有id为logo的标记,才能使用#logo的样式

3最后我们来看一下类选择器,它的语法特点是:.类名{ }接下来在来看一个简单实例吧.back{background-image: url("img/5.jpg");background-color: graybackground-repeat:no-repeat;}接下来的类选择器的引用<div class="back"></div>从这里也可以看出id选择器和类选择器的区别,类选择器只要是class="back",都能引用类选择器,也即是id选择器是只能用在一个标记里,因为每个标记的id是不能重复的,然而类选择器可以用在每个标记里。

4在来看下三种选择器的混合使用#menu dl dd{ background-color: gray; di lay: none; width: 80px; height: 30px; }接下来它的引用<div id="menu">在这里使用了id选择器和派生选择器,也即是id为menu 的标记div内的dd样式如上。.menu dl dd{ background-color: gray; di lay: none; width: 80px; height: 30px; }接下来它的引用<div class="menu">这个是类选择器和派生选择器的混合使用,也即是类名为menu 的标记div内的dd样式如上。

1 2 3 4 5