成语大全网 - 汉语词典 - html中class id style 等写法和技巧

html中class id style 等写法和技巧

技巧很多的说,简单介绍几个,想知道更详细的一定要多做练习才能发现问题,更英语是一样的,有问题解决不了的可以私下再问我

1.css选择符的应用:

一般要写css不是要先定义id或者class才能用么,其实定义了id或者class的元素可以后面跟后代标签的,比如,

<div id="test">

<p>xxxxxxxxxx<span>xxxxxxxxx</span>xxxxxxxxxxxxxxxxx<a href="#">xxxxxxxx</a></p>

</div>

这样的结构,div下面的各个元素可以用

#test p

#test span

#test a

这样的方式来定义,和写class是一样的,还省得给各个元素起名字了,很方便

2.css的级别:

css的级别关系挺多的,简单的说几个

行内样式 > 用id定义的样式 > 用class定义的样式

什么意思呢,就是比如下满这个

<style>

#test{font-size:16px}

.test{font-size:14px}

</style>

<p id="test" class=“test” style="font-size:12px">xxxxxxxxxxxxxx</p>

最后执行的样式是font-size:12px相同的样式会被级别最高的覆盖掉,不相同的没影响,利用这点可以对样式进行细致的分类。

另一个比较有用的级别规则是定义的越详细级别越高,比如还是刚才那个例子

<div id="test">

<p>xxxxxxxxxx<span>xxxxxxxxx</span>xxxxxxxxxxxxxxxxx<a href="#">xxxxxxxx</a></p>

</div>

如果我写css:

a{font-size:16px}

#test a{font-size:14px}

#test p a{font-size:12px}

那么上面那段代码中a标签的字体大小就是12px,所谓定义的详细,就是说你写出的要定义的元素的父标签的详细程度

3.class的覆盖:

这个是说你在写class的时候可以写多个,比如

<p class="class01 class02 class03">xxxxxxxxx</p>

这个p标签就定义了3个class这三个class都会生效,而后面的会覆盖前面的

比如这三个class是

.class01{font-size:16px;color:#333}

.class02{font-size:14px;font-weight:bold}

.class03{font-size:12px;font-family:"SimSun"}

最后color,font-weight,font-family这三个属性都会实现,而font-size会实现12px这个,以为class03是写在最后的,这个可以用来实现多个样式搭配,组合出新的样式来

个人认为比较重要的就这些了,至于兼容性和css3神马的一两句话也说不清楚,总之要想学就是多学多练,没其他辙