web前段基础3

在css样式中选择符

id选择符的命名是唯一的，当把多个id选择符写在一起称为群组，用#来表示。

class选择符，可以重复使用同一命名，用.（点）来表示。class=“hyy  hyy1”表示同时拥有两个样式。

标签类型选择符，根据标签来设置样式。

包含选择符   div p 表示div里面的所有的p标签。

通配符 *，代表页面的所有元素。

样式优先级

同级样式，默认后者覆盖前者。（在样式中，样式名字的优先级不影响样式的优先级，优先级和样式表的书写顺序有关）

类型选择符<class选择符<id选择符<行间样式<js

a标签的四个伪类，伪类用于向北选中元素添加特殊效果

link  未访问（默认）

hover  鼠标悬停(鼠标滑过)

active  链接激活（鼠标按下）

visited  访问过后（点击过后）

四个伪类的顺序：

link  visited hover  active(love hate  )  如果不按顺序写，四个伪类的作用将不会持续触发

IE6不支持a以外的其他标签的的伪类

IE6以上的浏览器支持所有标签的hover伪类

去掉标签的默认边距(默认样式重置)，也称css reset;

body,p,h1,h2,h3,h4,h5,h6,dl,dt{margin:0; font-size:12px}

ol,ul{list-style:none;padding:0;margin:0}

a{text-decoration:none;}

img{border:none;}

内联、也称内嵌、也称行内属性标签

特点：（1）元素不换行显示，默认可以继续跟同类型标签

           （2）内容撑开宽度

           （3）不支持给元素设置宽高，换句话说，就算设置了宽高也没有效果

            （4）不支持上下的margin和padding,只支持左右方向的margin和padding

            （5）代码换行被解析。

属于内联标签的元素有：

a，span,strong,em,

块属性标签

特点：（1）默认元素独占一行显示

           （2）当没有设置元素宽度时，默认撑满一行

          （3）支持所有的css样式。

属于块属性标签的元素有：

div,p,ol,dl,h1~h6,dl,

display：block;可将内联元素变为块元素，dispaly：inline；可将块元素变为内联元素。

imgj既不是内嵌也不是块元素，属于inline-block（行内的块）；

display:inline-block;的特点：

   （1）可以让内联元素支持宽高的设置，可以让块元素在一行显示

     (2)没有设置宽度的时候内容撑开宽度。

网页中空格的间隙为文字大小的一半。

存在的问题：（1）代码换行被解析

                      （2）IE6和IE7不支持块属性的inline-block;而内联元素时支持的

cursor:text;将光标类型变成文本线，cursor:pointer;将光标类型变成手，

cursor:url(hand.cur),pointer;将光标设置为图片，如果图片不存在则设置为pointer，光标图片支持·png、·jpg等格式，但最好为.cur格式，因为其他格式的存在兼容性问题。

&nbsp表示空格

<abbr  title="Hypertext  Markup Language">html</abbr> 该标签用来定义缩写 ，text里面是缩写内容的全称。当鼠标放上这个文字上面时，会提示文字的全称信息。

<cite>啦啦</cite>表示引用

前段书写规范：

（1）所有书写应该在英文半角下的小写

（2）id,class必须以字母开头

（3）所有标签必须闭合

（4）html标签用tab键缩进

（5）属性值必须带引号

（6）<!-- html注释 -->

（7）/*  css注释  */

（8）ul、li/ ol、li/dl、dt、dd拥有父子级的标签，不能嵌套别的标签

（9）p,dt,h标签不能嵌套块属性标签

（10）a标签不能嵌套a标签

（11）内联元素不能嵌套块元素