CSS 入门学习篇 - 2

来源:互联网 发布:超级优化孙菲菲 编辑:程序博客网 时间:2024/06/09 14:49

IMOOC 学习笔记
选择器的种类:
(1)标签选择器:HTML中的标签作为选择器。

p{  font-size:12px;  height:1.6em;}

(2)类选择器:类选择器在css样式编码中是最常用到的。
语法:
.类选器名称{css样式代码;}
注意:
1、英文圆点开头
2、其中类选器名称可以任意起名(不要起中文)

.name{     color:green;}

(3)ID选择器:跟类选择器类似,区别:
1、为标签设置id=”ID名称”,而不是class=”类名称”。
2、ID选择符的前面是井号(#)号,而不是英文圆点(.)

#nav{     font-size:12px;}

ID选择器与类选择器的区别:
相同:可以应用于任何元素
不同:
1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。

.stress{    color:red;}.bigsize{    font-size:25px;}<h2 class="stress bigsize">开学了</h2>

子选择器:大于符号(>),用于选择指定标签元素的第一代子元素。

.food>li{border:1px solid red;}

包含(后代)选择器:即加入空格,用于选择指定标签元素下的后辈元素。

.food li{border:1px solid red;}

总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
通用原则器:使用一个(*)号指定,它的作用是匹配html中所有标签元素。

* {font-size:20px;}

伪类选择符:允许给html不存在的标签(标签的某种状态)设置样式。

a:hover{color:red;font-size:15px;}

分组选择符:为html中多个标签元素设置同一个样式。

h1,span{color:red;}
0 0