Html（7）css样式定义器

每一条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  一直在慕课网学习，感觉不错。