二、选择器

<1>元素选择器语法格式：元素名称{

样式申明；

}

特点：适用于相同元素的样式设置

<2>类选择器语法格式： .类属性值{ class属性：属性值

样式申明；

}

特点：适用于不相同元素的样式设置

例如：通过类选择器查找h1元素

.h1class{

}

<3>id选择器语法格式： #id属性值{

样式申明；

}

特点：使用于一个具体的元素的样式设置

例如：通过id选择器查找一个具体的h1标签

#idvalue{

}

<4>选择器组语法格式：选择器1，选择器2，...{

样式申明；

}

特点：可以在多个不同的选择器中重用样式

例如：

#idvalue , h1 , .classvalue,p,#idvalue2,.classvalue2{

background-color:yellow;

}

<5>派生类选择器语法格式1：父元素名称 > 子元素名称 {

样式申明；

}

特点：子元素选择器，只作用于指定儿子辈的元素

语法格式2：父元素名称 子元素名称 {

样式申明；

}

特点：后台选择器，作用于指定的所有后辈元素

例如：

<6>属性选择器语法格式：元素名称[属性="属性值"]{

样式申明；

}

例如：

input[type="text"]{

background-color:orange;

}

<7>伪类选择器当一个元素的状态发生改变的时候，更改元素的样式

语法格式：

:link 适用于超链接

:visited 适用于超链接

:active 通常适用于按钮

:focus 通常适用于输入框

:hover 鼠标悬浮在元素上时

例如：

请点击我1

请点击我2

请点击我3

#a1:link{

样式申明；

}

#a1:visited{

样式申明；

}

三、样式和属性

<1>背景的样式background-color:颜色值，设置背景颜色

background-image:图片的url，设置背景图片

background-repeat:排列方式，设置背景图片的排列方式

repeat;

repeat-x;

repeat-y;

no-repeat;

background-attachment:方式，设置背景图片是否跟随内容移动

scroll;

fixed;

<2>边框border: 宽度 样式 颜色

border: 样式值，( 设置四个边框的样式 )

border-left/right/top/bottom:样式值 (设置各个边框的样式)

<3>浮动的设置和取消(重点)将元素脱离文档的普通流中，可以向左或者向右浮动，直到他的边框遇到其父边框或者其他浮动元素的边框时停止。

添加元素：

#clearp{

clear:both;

}

<4>盒子模型(重点)外边距：margin

margin-left/right/top/bottom:距离；

margin:距离；

margin:auto; //居中效果

内边距：padding

padding-left/right/top/bottom:距离；

padding:距离；

<5>文本样式color:颜色

font-size:字体大小

font-fimaily:字体

font-weight:粗体

<6>表格属性border:边框

border-collapse:collapse;去除单元格之间的间距

<7>列表属性list-style-type: 样式； 列表显示的样式

list-style-image:url(“图片资源位置”)； 列表显示的样式

<8>鼠标样式cursor:help;

wait;

default;

pointer;

... ...

<9>显示方式display属性，更改元素的显示方式：

block ,将行内元素的显示方式转换成块级元素的显示方式；(上下显示)

inline，将块级元素的显示方式转换成行内元素的显示方式；(左右显示，不能设置宽高)

inline-block，将元素转换成行内块元素；(左右显示，设置宽高的)

p{

display:inline;

}

作业：使用p+重css构简易的商城首页