首页手记我所知道的css基础知识梳理

我所知道的css基础知识梳理

标签：

Html/CSS

css语法：css样式由选择符和声明组成，而声明又由属性和值组成。
选择符，又称选择器，指明网页中要应用样式规则的元素；声明，在英文大括号“{ }”中的就是声明，属性和值之间用“:”分隔。当有多条声明时，中间可以用英文分号“;”分隔。
如下：
p{color:blue;font-size:20px}
说明：p为选择符。{}里面的为声明，color为属性，blue是值。

CSS的三种样式
1、内联式：css样式表就是css代码直接写在现有的html标签中
2、嵌入式：就是把css样式代码写在<style type="text/css">...</style>之间。
3、外部式css样式（即外联式）：就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内。
如<link href="XX.css" rel="stylesheet" type="text/css" />

PS:1、css样式文件名字以有意义的英文名字命名；
2、rel="stylesheet" type="text/css"是固定写法，不可修改。

优先级:内联式>嵌入式>外联式。但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。（可根据覆盖来考虑）

例子：
<div style="text-align:center"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//3245.jpb" /></div>
等于
<head><style type="text/css">div{text-align:center;}</style></head>
<body><div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//3245.jpg" /></div></body>

CSS选择器
形式：选择器{
样式；
}
三种：
1、标签选择器:标签选择器其实就是html代码中的标签，如<html>、<body>、<h1>、<p>、<img>
2、类选择器:格式：.类选择器名称{css样式代码}，其中类选择器名称可以任意起英文名。
用法：①使用合适的标签把要修饰的内容标记起来；②使用class="类选择器名称"为标签设置一个类。
3、ID选择器：类似于类选择器，区别在于：①为标签设置id="ID名称"，而不是class="类名称"。②ID选择符的前面是（#），而不是（.）

注释：类选择器和ID选择器的区别：http://www.imooc.com/code/1585

另三种
1、子选择器：用大于符号（>），用于选择制定标签元素的第一代子元素。
2、后代选择器：加入空格，用于指定标签元素下的后背元素。

PS：请注意后代选择器和子选择器的区别，子选择器（child selector）仅指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代血案则其是作用于所有子后代选择器。后代选择器通过空格来进行选择，而子选择器是通过">"进行选择。

3、通用选择器：通用选择器是功能最强大的选择器，它使用一个（*）指定，它的作用是匹配html中所有的标签元素。

4、伪类选择符：参考http://www.imooc.com/code/2036。

5、分组选择符：当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（,）。如：h1,span{color:pink;}

CSS中的权值问题：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。还有一个权值比较特殊——继承也有权值但也很低，可以理解为继承的权值最低，有的设定它为0.1。

CSS样式层叠：就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。可以理解为后面的样式会覆盖前面的样式。

特殊样式：!important,如p{color:red!important;}。浏览器默认的样式<网页制作者样式<用户自己设置的样式<!important

CSS常用属性

字体：funt-family。值有"Microsoft Yahei"
字体大小: font-size。
字体粗细: font-weight。
字体样式: font-style。

文本修饰: text-decoration:underline(下划线)/line-through(删除线);