css基础知识一看即通.docxVIP

Csscss三种方法的优先级：内联式??嵌入式 外部式类选择器.类选器名称{css样式代码;}注意：1、英文圆点开头2、其中类选器名称可以任意起名（但不要起中文噢）使用方法：第一步：使用合适的标签把要修饰的内容标记起来，如下：span胆小如鼠/span第二步：使用class=类选择器名称为标签设置一个类，如下：span class=stress胆小如鼠/span第三步：设置类选器css样式，如下：.stress{color:red;}/*类前面要加入一个英文圆点*/ID选择器在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：1、为标签设置id=ID名称，而不是class=类名称。2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。右侧代码编辑器中就是一个ID选择符的完整实例。！ 类和ID选择器相同点：可以应用于任何元素不同点：1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。子选择器还有一个比较有用的选择器子选择器，即大于符号(),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：.foodli{border:1px solid red;}包含(后代)选择器包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：.first span{color:red;}这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“”进行选择。总结：作用于元素的第一代后代，空格作用于元素的所有后代。通用选择器通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素.伪类选择符更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：a:hover{color:red;}上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。关于伪选择符： 关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。分组选择符当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：h1,span{color:red;}它相当于下面两行代码：h1{color:red;}span{color:red;}特殊性有的时候我们为同一个元素设置了不同的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*/重要性我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。p{color:red!important;}p{color:green;}p class=first三年级时，我还是一个span胆小如鼠/span的小女孩。/p这时 p 段落中的文本会显示的red红色。注意：!important要写在分号的前面这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 网页制作者样式 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。元素分类在讲解CSS布局之前，我们需要提前知道一些知识，在