css里面的CLASS怎么用

Posted 2023-04-13

RT

先看下面的html，两个p 一个div ，都定义了style，设置字体大小，颜色等，这三者的样式都一样，假若所有的html标签都这么写，是不是很麻烦？而且html文档很长，影响下载的效率。
<p style="font-size:20px; color:#333">this is a p!</p>
<p style="font-size:20px; color:#333">this is another p!</p>
<div style="font-size:20px; color:#333">this is another div!</div>
于是，css出现了：
如下.font定义了个类。
<style type="text/css">
.font
font-size:20px;
color:#333;

</style>
于是就可以如下定义样式，和上面的样式的结果相同。
<p class="font">this is a p!</p>
<p class="font">this is another p!</p>
<div class="font">this is another div!</div>
这样更加简介有效率。这就是所谓的“类”，拿出共性。 参考技术A

在要追加样式的元素里面加入一条属性  class='a' 这样意味着这个对象有了一个名叫a的样式


然后写css 写 <style>

a  width:300px





</style>   这样去写css就行

参考技术B 一个点+CLASS名称！
CLASS可以有很多个元素同名!而ID只可以有一个！同名的CLASS使用相同有CSS样式！
如：
<div id="qwe"></div>
<div class="asd"></div>
<div class="asd"></div>
<div class="asd"></div>
<div class="asd"></div>
#qwe这里定义ID＝“qwe”的样式！
.asd这里定义所有CLASS＝“ASD”的样式！ 参考技术C .开头的，用CLASS
#开头的，用ID本回答被提问者采纳

怎么用js触发css3动画

参考技术A 你用CSS3的方式预先写好动画样式，不调用这个class,前端中设置鼠标经过增加一个class，这样鼠标指向的时候就有CSS3的动画，鼠标离开去除样式动画结束