css入门知识,我所知道的css基础知识梳理

css语法：css样式由选择符和声明组成，而声明又由属性和值组成。

选择符，又称选择器，指明网页中要应用样式规则的元素；声明，在英文大括号“{ }”中的就是声明，属性和值之间用“:”分隔。当有多条声明时，中间可以用英文分号“;”分隔。

如下：

p{color:blue;font-size:20px}

说明：p为选择符。{}里面的为声明，color为属性，blue是值。

CSS的三种样式

1、内联式：css样式表就是css代码直接写在现有的html标签中

2、嵌入式：就是把css样式代码写在之间。

3、外部式css样式(即外联式)：就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在

内。

如

PS:1、css样式文件名字以有意义的英文名字命名；

2、rel="stylesheet" type="text/css"是固定写法，不可修改。

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

例子：

等于

CSS选择器

形式：选择器{

样式；

}

三种：

1、标签选择器:标签选择器其实就是html代码中的标签，如、

、

、

、

2、类选择器:格式：.类选择器名称{css样式代码}，其中类选择器名称可以任意起英文名。

用法：①使用合适的标签把要修饰的内容标记起来；②使用class="类选择器名称"为标签设置一个类。

3、ID选择器：类似于类选择器，区别在于：①为标签设置id="ID名称"，而不是class="类名称"。②ID选择符的前面是(#)，而不是(.)

另三种

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;}。浏览器默认的样式

CSS常用属性

字体：funt-family。值有"Microsoft Yahei"

字体大小: font-size。

字体粗细: font-weight。

字体样式: font-style。

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

段落缩进：text-indent:2em;

行间距：line-height:1.5em;

文字间隔、字母间隔：letter-spacing；单词间距:word-spacing。

段落排版——对齐：text-align:center/left/right。