样式表的位置:
1, 内联,放在标签的开始标记里面。
2, 内嵌,放在head元素中
3, 外部,就近原则,以子元素为主,内联最大,内嵌其次,外部最小
选择器:
1, ID选择器(#+ID名)
2, CLASS选择器(.+CLASS名)
3, TAG选择器(标签)(直接用标签名)
ID高于CLASS高于TAG
选择器的扩展类型:
1, 以逗号隔开:二者为并列关系,同时受样式影响
2, 以空格隔开:后代关系
3, CLASS筛选
层叠的三个含义:
1, 父,子元素之间的样式叠加。
2, 样式表的叠加,(外部,内嵌,内联)
3, 选择器的叠加(ID,CLASS,TAG)
“叠加”——互补&覆盖
覆盖遵循就近原则
P标签里面不可以放标题H1~H6
样式属性:
一,宽与高 :
width:100px; width:100%; height:100px;height100%
二,背景与前景:、
(1)背景
1,背景色
background-color:#FF0000;
2,背景图片
background-image:url(“路径”)
background-repeat:no-repeat/repeat-x/repeat-y;
background-position:top/left/bottom/right/100px 20px
取图片其中一部分做背景
(2)前景
font-family:字体名称
font-size:字体大小
color:字体颜色
font-weight:字体加粗
font-style:倾斜
text-decoration:下划线,中划线,上划线
text-align:水平对齐
vertical-align:垂直对齐
line-height:行高(可以利用黄金分割原理设置)
SPAN默认情况下宽与高不起作用,要与display:inline-block结合
三,边框与边界
1, 边框:border-color(颜色),border-width(宽度),border-style(样式):dashed(短线) ,dotted(点), double, solid(实线), groove(类似于相框的效果) etc.
border-top,border-left,border-right,border-bottom
2, 外边界
margin:边框与外面的距离 上 右 下 左 依次设置
也可以单独设置
IE默认双倍边距
3, 内边界
padding:边框与文字的距离 上 右 下 左 依次设置
也可以单独设置
四,总体布局(difficult)
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
</style>
*代表所有元素
1,float:left/right
如果父级没有设置float,则会出现DIV塌陷的问题,解决办法:在父级中写入 float:left,margin:auto.
clear:both(清除流)
2,position:absolute,relative,fixed
relative:在其本身存在的位置偏移。
fixed:对于浏览器的边界偏移(IE6不起作用)
absolute:默认情况下,以屏幕作为对照进行偏移,如果父级元素中有position属性,则以父级元素为对照。
3,list-style
设置UL或者OL前面的标记样式。