欢迎加入QQ讨论群258996829
苹果6袋
麦子学院
入门css，先看这篇教程
发布时间：2016-08-14 19:29 回复:0 查看:2766 最后回复：2016-08-14 19:29
|
这篇css教程主要为小白讲解css样式，css选择器，css的继承,层叠和特殊性等，希望可以帮助大家快速
入门css 。
1.css 样式基本知识
内联式:
写在元素的开始标签里，并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。
<p style="color:red;font-size:12px">这里文字是红色。</p>
嵌入式:
嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。如右边编辑器中的代码。
<style type="text/css">span{color:red;
}</style>
外部式:
css样式文件名称以有意义的英文字母命名，如 main.css。
rel="stylesheet" type="text/css" 是固定写法不可修改。
<link>标签位置一般写在<head>标签之内。
<link href="base.css" rel="stylesheet" type="text/css" />
注:在使用的过程中遵循:内联式 > 嵌入式 > 外部式和就近原则,这两个排布选取方式.
2.css选择器.
标签选择器:
标签选择器其实就是 html 代码中的标签
p{
font-size:12px;line-height:1.6em;
}
类选择器:
类选择器在 css 样式代码中是最常见的.
.类选器名称{css样式代码;}
.stress{
color:red;
}/*类前面要加入一个英文圆点*/
<span class="stress">练习</span>
注:
1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文噢）
ID 选择器
ID 选择器类似于类选择符,但也有一些区别:
1、为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。
#setGreen{
color:green;
}<span id="setGreen">练习文本</span>
注意:
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
子选择器:用于选择指定标签元素的第一代子元素.
."class">标签{border:1px solid red;}
.first>span{
border:1px
solid red;
}<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p><h1>食物</h1>
包含(后代选择器):
."class" 标签{color:red;}
请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
通用选择器:通用选择器是功能强大的选择器,他使用一个(*)号指定,它的作用是匹配 html 所有标签元素.
* {
color:red;
font-size:18px;
}
伪类选择符:它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{
color:red
} <a >百度</a>
为 a 标签鼠标滑过的状态设置字体颜色变红。“百度”文字加入鼠标滑过字体颜色变为红色特效。
注:
关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
分组选择符:当你想为 html 中多个标签设置同一样式,可以使用分组选择符(,).
h1,span{
color:red;
}<!--相当于-->
h1{
color:red;
}
span{
color:red;
}
<h1>练习文本</h1><span>段落</span>
3.css的继承,层叠和特殊性
继承:CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。
p{color:red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
p中的文本与span中的文本都设置为了红色。但注意有一些css样式是不具有继承性的。如border:1px solid red;
特殊性:有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码：
p{color:red;}
.first{color:green;}<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。
下面是权值的规则：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} /*权值为1*/p span{color:green;} /*权值为1+1=2*/.warning{color:white;} /*权值为10*/p span.warning{color:purple;} /*权值为1+1+10=12*/#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
层叠:在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。如下代码"
p{color:red;}
p{color:green;}<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。所以这就是之前提到的就近原则.
所以前面的css样式优先级就不难理解了：
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
重要性:为某些样式设置具有最高权值.
p{color:red!important;}
p{color:green;}<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
这时 p 段落中的文本会显示的red红色。
注意：!important要写在分号的前面
这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。
原文来自：简书／A_sura |