web前端开发基本知识——css篇

CSS代码语法

从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。

内联式css样式<span style="color:blue"></span>
嵌入式css样式：<style type="text/css"> span{ color:red; } </style>
外部式css样式：<link href="base.css" rel="stylesheet" type="text/css">

三种方法的优先级

有的小伙伴问了，如果有一种情况：对于同一个元素我们同时用了三种方法设置css样式，那么哪种方法真正有效呢？
这三种样式是有优先级的，记住他们的优先级：内联式 > 嵌入式 > 外部式
但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下。

选择器
标签选择器：html中的标签。

类选择器：class命名，前面加圆点

ID选择器：标签中以ld来区分命名的，前面加#

ID只有一个，但是类可以有很多个相同。

<ul class="s">

    <li><li>

    <li><li>

    <li><li>

</ul>

子类选择器：ul中的li    .s>li{样式；}

包含（后代）选择器：加入空格,用于选择指定标签元素下的后辈元素     .s li{样式；}
通用选择器：通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素
伪类选择符

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

a:hover{color:red;}

继承
继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。

p{border:1px solid red;}不具有继承的性质。

特殊性

对同一个标签进行不同的样式编辑，那么用哪个样式？依据权值来定

标签的权值为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*/

层叠

如果html文件中对于同一个元素可以有多个css样式并且这多个css样式具有相同的权重值怎么办？

重要性

我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式

文字排版

字体：font-family：“”；
字号、颜色：font-size：20px；color：red；

粗体：font-weight：bold；

斜体：font-style：italic；
下划线：text-decoration:underline；
删除线：text-decoration：line-through；
缩进：text-indent：2em；
行间距：line-height：1.5em；
文字间距：letter-spacing：20px；
字母间距：word-spacing：15px；
对齐：text-align:center；