20150418 CSS属性

一、层叠样式表的分类:
1.外部——.css文件
2.内嵌——<head></head>
3.内联——放在标记的style属性上

二、选择器。
(一)基本选择器
1.ID选择器:"#"
2.class选择器:"."
3.标签选择器:标签名

(二)组合选择器
1.用逗号隔开。并列关系
2.用空格隔开。后代关系。
3.筛选:选择器.class选择器。

“层叠”的意思?
1.样式表类型的层叠。——例子。
2.选择器的层叠。——例子
3.父子元素的层叠。——例子。

优先级:
1.一般来说,ID选择器优先级要高于class选择器的优先级,class选择器的优先级高于标签选择器的优先级。
2.对于同一类型的选择器,内联样式的优先级要高于内嵌,内嵌样式的优先级要高于外部的。

三、样式表的属性:
(一)前景与背景
1.背景:
background-color:背景色。
background-image:url(路径) 背景图
background-attatchment: fixed-背景固定;scroll-背景与文字一起滚动
background-repeat: repeat:平铺;no-repeat:不平铺; repeat-x,repeat-y.
background-position: right 100px bottom 200px;


2.前景:
font-family:
font-size:
color:
font-weight:
font-style:
text-decoration: underline,overline,line-through
text-align: left,center,right
vertical-align: top,middle,bottom
line-height:行高。一般是font-size的1.5-2倍。

(二)边界与边框
1.边框:二维表格。
2.外边距:margin,margin-top,....
3.内边距:padding,padding-top......

(三)列表与方块
方块:
width:
height:
top:
left:
列表:
list-style-type:
list-style-position:
list-style-image:

dispaly: none-不显示;block-块显示(独占一行) ;inline-不独占一行(width,height不管用);inline-block:不独占一行(width,height管用)。
visibility:是否可见。 visible-可见;hidden-隐藏。如果隐藏起来,但位置依然是占用的。
overflow:溢出处理。 hidden-隐藏超出部份;scroll-超出就显示滚动条。

(四)格式与布局
位置布局。
position:
配合的样式属性:top,left,right,bottom.........

fixed:绝对定位。以浏览器可见区域为坐标系进行定位。不是页面为坐标系定位。通常用来做浮动层。ie6不支持。
relative:相对定位。相对的意思是:相对于该元素原本应当在的那个位置。虽然元素显示的位置变化了,但原来的空间是依然占用的。
absolute:绝对定位。如果元素外围的元素没有设置postion样式,那么它以整个页面为坐标系进行定位。如果这个元素外围有一个元素具有postion样式属性,那此它是以这个外围元素为坐标系进行定位。

流式布局。
float:
配合的样式属性:margin-top,margin-right,margin-bottom,margin-left
clear:清除浮动。

例子:
例一:几个并列的层用float布局的规律。
例二:嵌套的层,使用float布局的规律。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。