每一条css样式定义由两部分组成,
选择器{
样式;
}
“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。
类选择器添加样式.
.setGreen{
color:green;
}
<span class=“setGreen">公开课</span>
<span class="stress bigsize">三年级</span>
class即为当前样式命名,在style里面使用点语法来设置样式具体内容。
ID选择器#
类似于类选择器,在很多方面,ID选择器都类似于类选择符,ID选择器只能在文档中使用一次。:
1、为标签设置id=“ID名称",而不是class="类名称"。
2、ID选择符的前面是井号(#)号
<style type="text/css">
#setGreen{
color:green;
}
</style>
<span id=“setGreen">公开课</span>
子选择器
还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的子元素。
.food>li{border:1px solid red;}
这段代码可以理解为,将food{}标注的格式赋给元素li。
包含(后代)选择器
加入空格,用于选择指定标签元素下的后辈元素。
.first span{color:red;}
表示所有带有span的,color属性都将是red。
>作用于元素的第一代后代,空格作用于元素的所有后代。
通用选择器
通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中任意标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色、字号变成20。
* {color:red;
font-size:20px;}
伪类选择符
它允许给html不存在的标签设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:
a:hover{color:red;}
上述选择符,会使下列代码中的文字变化:
<a href="http://www.imooc.com">胆小如鼠</a>
分组选择符
当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:
h1,span{color:red;}
它相当于下面两行代码:
h1{color:red;}
span{color:red;}
例子:
.first,#second span{color:green;}
将class为first的,和second中的span设置颜色。
http://www.imooc.com 一直在慕课网学习,感觉不错。