最近在自学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{}