HTML复习（二）

选择器

元素选择器/类型选择器（element选择器）

如div{width:100px;height:100px;background:red;}
语法：元素名称{属性:属性值}如：div,p,h1,img,a,span,i,em,strong,b,ul,li,ol,li…等
说明：

1. 元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body.
2. 所有的页面元素都可以作为选择符。

用法：

1. 如果想改变某个元素得默认样式时，可以使用类型选择符;
   (如：改变一个div、p、h1样式)
2. 当统一文档某个元素的显示效果时，可以使用类型选择符
   (如：改变文档所有p段落样式)
   div、p,img,em,strong,span…等。

class选择器/类选择器

语法：·class名{属性：属性值;}
说明：

1. 当我们使用class选择符时，应先为每个元素定义一个class名称
2. class选择符的语法格式是:
   如：

<div class="top"></div>
.top{width:200px; height:100px; background:green;}

用法：class选择符更适合定义一类样式。

id选择器

语法：#id名{属性：属性值;}
说明:

1. 当我们使用id选择符时，应该为每个元素定义一个id属性
   如：<div id="box"></div>
2. id选择符的语法格式是“#”加上自定义的id名
   如：#box{width:300px; height:300px;}
3. 起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)
   如：head标记
4. 一个id名称只能对应文档中一个具体的元素对象。(唯一性)

通配符/通配选择器

语法：*{属性：属性值；}
说明：通配选择符的写法是“*”，其含义就是所有元素。
*{margin:0; padding:0;}代表清除所有元素的默认边距值和填充值;

群组选择器

语法：选择符1，选择符2，选择符3…(属性：属性值;}
例：#top1,#nav1，h1{width:960px;}
说明：当有多个选择符应用相同的声明时，可以将选择符用“，”分隔的方式，合并为一组.
margin:0 auto;实现盒子的水平居中

包含选择器/后代选择器

语法：选择符1 选择符2(属性：属性值;}
说明：含义就是选择符1中包含的所有选择符2;
用法：当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。
如：结构：<ul class="list">

<li></li>
<li></li>
<li></li>

</ul>

样式：

.list li{background:red;}

伪类选择器

语法:
a:link{属性：属性值;}超链接的初始状态;只能给a标签
a:visited(属性：属性值;}超链接被访问后的状态;
a:hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态;
a:active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;
Link–visited–hover–active。
hover和active可以给所有标签
说明:

1. 当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为: a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效;
2. 为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中;

例如：a{color:red;} a:hover{color:green;}表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样。

选择器的权重

当多个选择器选中的是同一个元素，且都为他们定义了样式，如果属性发生冲突了，会选择权重高的来执行

文本属性

大小和字体

列表属性

背景属性

另：背景图片大小——background-size。
例：

1. <style> background-size:cover </style>（这里cover是把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，也许无法显示在背景定位区域中。）
2. <style> background-size:contain </style>（这里contain是把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。铺不满盒子，留白。）

浮动属性