css基础学习小结

在学习html之路上走了四天，之前分享的是关于学习html标签以及字体样式的学习心得，现在把今天的css学习心得做如下小结。。。

/*设置格式*/
p{ 
font-size:10px; /*设置字体大小*/
color:bule;
font-weight:bold;
}

内嵌式

<span >内嵌式</span>

嵌入式

<style type="text/css">
span{
color:red;
}
</style>

外部式

<link href="1.css" rel="stylesheet"  type="text/css"/>

三种方法的优先级--就近原则（离被设置元素越近优先级别越高）。

选择器{
样式;
}

类选择器
.类选器名称{css样式代码;}

.lxzq{
color:green; /*类选择器前有个点，可以随便命名别是中文。*/
}

<span class="lxzq">class命名类选择器</span>

ID选择器
ID选择器都类似于类选择符，但也有一些重要的区别：

1、为标签设置id="ID名称"，而不是class="类名称"。

2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

<style type="text/css">
#stress{
    color:red;          /* 使用#号 */
}

<span id="stress">胆小如鼠</span>

类和ID选择器的区别
相同点：可以应用于任何元素
不同点：ID选择器只能在文档中使用一次。而类选择器可以使用多次。
可以使用类选择器词列表方法为一个元素同时设置多个样式。ID选择器是不可以的

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}

<p>到了<span class="stress  bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

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

<style type="text/css">
.food>li{
.first>span{
    border:1px solid red;    /*添加边框样式（粗细为1px， 颜色为红色的实线）*/
｝

<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，

包含（后代）选择器
即加入空格,用于选择指定标签元素下的后辈元素
总结：子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。 ，>作用于元素的第一代后代，空格作用于元素的所有后代。

通用选择器

* {color:red;}          /*它使用一个（*）号指定，它的作用是匹配html中所有标签元素*/

伪类选择符
允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：

a:hover{color:red;}

分组选择符
为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）

h1,span{color:red;}