CSS学习笔记（基本知识）

   最近在自学web前端的一些知识。

第一章 ：

几个常识如下

1  html中注释是<!--    -->   css中注释/*        */

2  <link>元素可以利用里面的title属性来制作备选样式表，也可以通过将title属性设置为相同的值将样式表分组。

3  在外部样式表中不可以有任何的标记元素，如果外部样式表想引用其他的样式表可以使用@import url（） media；来引用其他的样式表，注意，import命令必须放在css语句的最前面，<style>元素中也是一样。

 

第二章 选择器

规则结构

元素选择器

例如p{background：black}

选择器分组

p，li{}

通配选择器

*{}

类选择器  用.表示  例如*.className{font-weight：bold；}   类选择器也可以和其他选择器结合使用，例如和元素选择器p.classname{font-weight：bold；}  class属性值可以有多个，中间用空格分隔，顺序无关 。可以将类选择器连接起来使用例如.waring.urgent{background:siliver;}，顺序无关。

id选择器  用#表示  例如*#classname{font-weight：bold；}，通配符同样可以省略  id选择器不能结合使用，因为id属性不允许用空格分隔的词列表。

属性选择器  公有四种属性选择器  简单属性选择 例如h1【class】{color：siliver；}   也可连接使用例如a[href][title]{font-weight:bold};只有在a同时有href 和title属性是才满足条件。  根据具体值选择，例如h1【title=“zxw”】{font-weight：bold；}，要求字符串完全匹配， 同时也可以连接使用。根据部分属性值选择，当属性的值是用空格分隔的词列表时，可以使用部分属性选择，类似与class选择器那样，例如，其他的部分属性选择如下图所示

    最后一类属性选择器即特定属性选择器。例如，这个规则会选择lang属性等于en或者是以en-开头的所有元素。可以用于任何属性及其值例如。

父子关系是祖先-后代关系的特例。祖先后代关系中间必须得隔一代。有了这个关系后，可以定义后代选择器，例如h1 em{}，选出的是作为h1后代的em元素，不仅限于两个选择器，例如h1 em strong{}。选择子元素，例如h1>strong{}，strong是h1的子元素。选择相邻兄弟元素，例如h1+p{}，选择的是p元素。举个结合的例子，html>body  table+u{}l选出的是这样的ul，ul是table的相邻兄弟元素，table包含在一个body元素中，同时这个body元素是html的子元素。

伪类和伪元素   伪类选择器，例如a:link{}    a;visited{}。

举个伪类的例子，伪类选择器还可以与其他选择器结合使用，例如，

a.external:link a.external:visited{}

动态伪类如下图所示

:focus    :hover   :active

a:link{}

a:visited{}

a:hover{}

a:active{}

例如，推荐使用这个顺序。

选择第一个子元素，例如:first-child，选择的是作为一个子元素的p，li。

结合伪类，例如。

a:link:hover{}