两大重点
属性:通过属性的复杂叠加才能做出漂亮的网页。
选择器:通过选择器找到对应的标签设置样式
一.标签选择器
标签选择器:就是用标签名来当选择器
1>所有的标签都能做选择器,例如:div、p、 ul、 li、 a、 span、body等等
2>不管这个标签藏的多深,都能够被选择上。
3>选择的整个界面所有的标签,而不是某个,是共性而不是特性
比如说火狐浏览器中的li
里面所有的a
标签去掉下划线
a{
/*去掉下划线:*/
text-decoration: none;
}
二.id选择器
#
表示选择id
选择器
1>任何标签都可以有id
,命名方式要以字母开头,区分大小写
2>同一页面内id
不可重复,即使是不一样的标签,也不允许相同的id
#content{
font-size: 60px;
font-weight: bold;
color:black;
}
三.类选择器
.
表示类选择器 与id
选择器类似,但是类选择器可以重复,比如说很多标签都有aa
这个类
<h4 class="aa">怎么啦</h4>
<p class="aa">怎么啦</p>
<div class="aa">你们怎么啦怎么啦</div>
css里面用.
来表示类
.aa{
color: orange;
font-size: 20px;
}
同一标签,可能同时属于多个类,用空格隔开.说明div
同时属于bb
和cc
类
<div class = @"bb cc">我是bbcc</div>
错误方式:
<div class = @"bb" class="cc">我是bbcc</div>
思路:提供公共类,再根据相应的类名,去设置相应的样式。
在根据每个标签,去选取自己想要的类。
总结
1️⃣class可以重复,即同一页面可能有多个标签同时属于一个类。id不 可以重复,既同一页面不能有多个相同的id。
2️⃣不用去视图用一个类名,把某个标签的所有样式写完,这个标签要多携带几个类,共同造成这个标签的样式每个类要尽可能小,能够让更多的标签使用
3️⃣到底使用id还是class???
尽可能用class,除非特殊的情况可以用id
理由:id是js用的,js要通过id属性得到标签,所以我们css层面尽量不用使用id,要不然js就别扭了,另一方面,我们会认为有一个id的元素,有动态效果。