css常用属性初总结第一弹:id和class选择器

程序员文章站 2022-05-01 17:16:13

...

前言：这是我第二次写博客，记录自己所学的点点滴滴，希望大家一起共勉！

说到选择器大家都不陌生，估计用的最多的还是id选择器和类选择器，至于其他的选择器，今天在这里我避而不谈。

类选择器：将html元素取一个响亮的名字，用class来标记，就可以使用类选择器了，如<p class="p1">这是段落1</p>,这里我将p元素class设置
为"p1",然后再写css样式就可以直接使用了，

举个栗子：

<style type="text/css"> 　　p.p1{color:red;}
</style>

</head>
<body>
　　<p class="p1"> 　　　　This paragraph will also be center-aligned. 　　</p>
</body>
</html>

运行上一段代码，就将类名为p1的p元素的文字颜色设置为红色了，是不是很简单，说明一下，非p元素的类名为p1时没有效果哦，要想所有
的class类名为p1的元素有效果，则需要把前面的结构元素名去掉。现在的项目都是敏捷开发，所以用类名就得小心了，刚开始大家经常抱怨的
就是类名冲突，结果就是样式相互冲突了，所以我们项目上定下了约定，以页面功能来命名类名，从而避免类名冲突。

另外要提一下的就是多类名：如上面的

<p class="p1 center">
This paragraph will also be center-aligned.
</p>

一个class值中是可以有一个此列表了，各个词之间用空格来分开。然后写样式就一个个写就ok了，这里估计会有人会问：如果多个类之间有
相同的css样式会出现什么情况！这里就要阅读后面的有关css层叠的问题了！今天的文章就到这里了，第一次写的可能语无伦次，可能是想到
什么就写什么，期待以后慢慢提高吧！