css常用的网页布局样式属性.docx
《css常用的网页布局样式属性.docx》由会员分享,可在线阅读,更多相关《css常用的网页布局样式属性.docx(13页珍藏版)》请在冰豆网上搜索。
css常用的网页布局样式属性
网页布局常用的样式属性
一、Position
Position有以下几个值:
static,relative,absolute,fixed。
Static:
静态定位。
如果你没有设置position属性,那么缺省就是static。
top,left,bottom,right等属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一。
Relative:
相对定位。
元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍然会分配给它,它两边的元素不会向它靠近来填充那个空间,但它们也不会从元素的新位置被挤走。
Absolute:
绝对定位。
元素将按照包含它的元素的位置进行调整,比如它嵌套在另一个绝对定位的元素中,那么就相对于那个元素定位。
Fixed:
固定定位。
元素将被设置在浏览器上一个固定位置上,不会随其他元素滚动。
形象点说,上下拉动滚动条的时候,fixed的元素在屏幕上的位置不变。
需要注意的是IE6并不支持此属性。
注意:
很多网页都是居中的,这样,当对元素进行绝对定位的时候,在不同的分辨率下显示会有偏差,这时,我们可以通过类似下面的方法来处理:
relative;">absolute;top:10px;left:10px;">
relative;">
absolute;top:10px;left:10px;">
absolute;top:
10px;left:
10px;">
Fixed;top:10px;left:10px;">//元素位置固定浏览器位置不变二、Floatfloat是css的定位属性,fload属性有四个可用的值:Left和Right分别浮动元素到各自的方向,None(默认的)使元素不浮动,Inherit将会从父级元素获取float值。Float的用处float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。浮动非替换元素要指定一个明确的宽度;否则,它们会尽可能地窄。注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。除了简单的在图片周围包围文字,浮动可用于创建全部网页布局。参考地址:三、margin(外边距)定义margin属性是用于在一个声明中设置四个外边距的所有属性的简写属性。注释:允许使用负值。继承性:No说明这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。例子四个边距均为10px:h1{margin:10px}顶边距和底边距为10px,左边距和右边距是父元素宽度的2%:h1{margin:10px2%}顶边距为10px,左边距和右边距是父元素宽度的2%,底边距是-10px:h1{margin:10px2%-10px}顶边距为10px,右边距是父元素宽度的2%,底边距是-10px,而左边距由浏览器设置:h1{margin:10px2%-10pxauto}可能的值设置针对边距的属性。margin-topmargin-rightmargin-bottommargin-left值可以是:百分比(基于父对象总高度或宽度的百分比)长度值(定义一个固定的边距)auto(浏览器设定的值)。默认值:未定义。例子:
Fixed;top:
//元素位置固定浏览器位置不变
二、Float
float是css的定位属性,fload属性有四个可用的值:
Left和Right分别浮动元素到各自的方向,None(默认的)使元素不浮动,Inherit将会从父级元素获取float值。
Float的用处
float属性定义元素在哪个方向浮动。
以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS中,任何元素都可以浮动。
浮动元素会生成一个块级框,而不论它本身是何种元素。
浮动非替换元素要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:
假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
除了简单的在图片周围包围文字,浮动可用于创建全部网页布局。
参考地址:
三、margin(外边距)
定义
margin属性是用于在一个声明中设置四个外边距的所有属性的简写属性。
注释:
允许使用负值。
继承性:
No
说明
这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。
行内元素的的左右外边距不会合并。
同样地,浮动元素的外边距也不会合并。
允许指定负的外边距值,不过使用时要小心。
例子
四个边距均为10px:
h1{margin:
10px}顶边距和底边距为10px,左边距和右边距是父元素宽度的2%:
10px2%}顶边距为10px,左边距和右边距是父元素宽度的2%,底边距是-10px:
10px2%-10px}顶边距为10px,右边距是父元素宽度的2%,底边距是-10px,而左边距由浏览器设置:
10px2%-10pxauto}
可能的值
设置针对边距的属性。
margin-top
margin-right
margin-bottom
margin-left
值可以是:
百分比(基于父对象总高度或宽度的百分比)
长度值(定义一个固定的边距)
auto(浏览器设定的值)。
默认值:
未定义。
例子:
p.margin{margin:
2cm4cm3cm4cm}
这个段落没有指定外边距。
这个段落带有指定的外边距。
四、padding(内边距)
CSS中定义了一个盒式模型,关于这个网上有很多文章。
主要有margin(外边距),border(边框),padding(内边距)这三个名词,用来设置这个盒子的空隙。
W3C定义的盒式模型定义的width和height是指内容实体的,而不包括margin,border和padding,而传统的盒式模型则不同,他的width是包括border和padding,可以看下图帮助理解。
五、border(边框)
border(边框)border-leftborder-rightborder-bottomborder-top
border-style:
dotted;(点线)dashed;(虚线)solid;double;(双线)groove;(槽线)ridge;(脊状)inset;(凹陷)outset;
border-width:
;边框宽度
border-color:
#;
六、lefttoprightbottom
这四个属性是设置一个偏移量,对于特定容器的一个偏移。
top是指元素的顶边相对于容器的顶边的偏移,right是元素的右边相对于容器的右边的便宜,但方向是从右到左。
正因为有方向,所以这四个属性也可以设置为负值,是向反方向偏移。
也可以设置百分比,这个值是相对于容器计算出来的,比如top:
50%,就是容器的height*50%。
这四个属性必须与position共同使用,不然就没有效果,position值为static时这四个属性也是无效的。
position还存在其他三个值absolute,relative,fixed,fixed和absolute类似,所以最大的区别还是absolute和relative。
absolute是相对于根容器偏移,而relative是相对于父级容器偏移。
偏移值指的是容器的内容实体到元素外边距的距离,就算说topleft定义的盒子左上角的坐标是margin-top和margin-left的交点,当然这个坐标是相对于容器来说的,传统模型也是如此。
七、(block)文字和字体相关
字间距letter-spacing:
normal;数值
对刘text-align:
justify;(两端对齐)left;(左对齐)right;(右对齐)center;(居中)
缩进text-indent:
数值px;
垂直对齐vertical-align:
baseline;(基线)sub;(下标)super;(下标)top;text-top;middle;bottom;text-bottom;
词间距word-spacing:
空格white-space:
pre;(保留)nowrap;(不换行)
显示display:
block;(块)inline;(内嵌)list-item;(列表项)run-in;(追加部分)compact;(紧凑)marker;(标记)table;inline-table;table-raw-group;table-header-group;table-footer-group;table-raw;table-column-group;table-column;table-cell;table-caption;(表格标题)
类型list-style-type:
disc;(圆点)circle;(圆圈)square;(方块)decimal;(数字)lower-roman;(小罗码数字)upper-roman;lower-alpha;upper-alpha;
位置list-style-position:
outside;(外)inside;
图像list-style-image:
url(..);
定位属性:
(Position)
Position:
absolute;relative;static;
visibility:
inherit;visible;hidden;
overflow:
visible;hidden;scroll;auto;
clip:
rect(12px,auto,12px,auto)(裁切)
八、box(方框)
width:
;height:
;float:
;clear:
both;margin:
;padding:
; 顺序:
上右下左
九、(font)字体属性
大小font-size:
x-large;(特大)xx-small;(极小)一般中文用不到,只要用数值就可以,单位:
PX、PD
样式font-style:
oblique;(偏斜体)italic;(斜体)normal;(正常)
行高line-height:
normal;(正常)单位:
PX、PD、EM
粗细font-weight:
bold;(粗体)lighter;(细体)normal;(正常)
变体font-variant:
small-caps;(小型大写字母)normal;(正常)
大小写text-transform:
capitalize;(首字母大写)uppercase;(大写)lowercase;(小写)none;(无)
修饰text-decoration:
underline;(下划线)overline;(上划线)line-through;(删除线)blink;(闪烁)
常用字体:
(font-family)
"CourierNew",Courier,monospace,"TimesNewRoman",Times,serif,Arial,Helvetica,sans-serif,Verdana
一十、(background)背景属性
色彩background-color:
#FFFFFF;
图片background-image:
url();
重复background-repeat:
no-repeat;
滚动background-attachment:
fixed;(固定)scroll;(滚动)
位置background-position:
left(水平)top(垂直);
简写方法background:
#000url(..)repeatfixedlefttop;
其他常用样式
一CSS文字属性:
color:
#999999;/*文字颜色*/
font-family:
宋体,sans-serif;/*文字字体*/
font-size:
9pt;/*文字大小*/
font-style:
itelic;/*文字斜体*/
font-variant:
small-caps;/*小字体*/
letter-spacing:
1pt;/*字间距离*/
line-height:
200%;/*设置行高*/
font-weight:
bold;/*文字粗体*/
vertical-align:
sub;/*下标字*/
super;/*上标字*/
text-decoration:
line-through;/*加删除线*/
overline;/*加顶线*/
underline;/*加下划线*/
none;/*删除链接下划线*/
text-transform:
capitalize;/*首字大写*/
uppercase;/*英文大写*/
lowercase;/*英文小写*/
text-align:
right;/*文字右对齐*/
left;/*文字左对齐*/
center;/*文字居中对齐*/
justify;/*文字分散对齐*/
vertical-align属性
top;/*垂直向上对齐*/
bottom;/*垂直向下对齐*/
middle;/*垂直居中对齐*/
text-top;/*文字垂直向上对齐*/
text-bottom;/*文字垂直向下对齐*/
二、CSS边框空白
padding-top:
10px;/*上边框留空白*/
padding-right:
10px;/*右边框留空白*/
padding-bottom:
10px;/*下边框留空白*/
padding-left:
10px;/*左边框留空白
三、CSS符号属性:
list-style-type:
none;/*不编号*/
decimal;/*阿拉伯数字*/
lower-roman;/*小写罗马数字*/
upper-roman;/*大写罗马数字*/
lower-alpha;/*小写英文字母*/
upper-alpha;/*大写英文字母*/
disc;/*实心圆形符号*/
circle;/*空心圆形符号*/
square;/*实心方形符号*/
list-style-image:
url(/dot.gif);/*图片式符号*/
list-style-;/*凸排*/
list-style-;/*缩进*/
四、CSS背景样式:
background-color:
#F5E2EC;/*背景颜色*/
background:
transparent;/*透视背景*/
background-image:
url(/image/bg.gif);/*背景图片*/
background-attachment:
fixed;/*浮水印固定背景*/
background-repeat:
repeat;/*重复排列-网页默认*/
no-repeat;/*不重复排列*/
repeat-x;/*在x轴重复排列*/
repeat-y;/*在y轴重复排列*/
指定背景位置
background-90%;/*背景图片x与y轴的位置*/
background-;/*向上对齐*/
background-;/*向下对齐*/
background-;/*向左对齐*/
background-;/*向右对齐*/
background-;/*居中对齐*/
五、CSS连接属性:
a/*所有超链接*/
a:
link/*超链接文字格式*/
visited/*浏览过的链接文字格式*/
active/*按下链接的格式*/
hover/*鼠标转到链接*/
鼠标光标样式:
链接手指CURSOR:
hand
十字体cursor:
crosshair
箭头朝下cursor:
s-resize
十字箭头cursor:
move
箭头朝右cursor:
加一问号cursor:
help
箭头朝左cursor:
w-resize
箭头朝上cursor:
n-resize
箭头朝右上cursor:
ne-resize
箭头朝左上cursor:
nw-resize
文字I型cursor:
text
箭头斜右下cursor:
se-resize
箭头斜左下cursor:
sw-resize
漏斗cursor:
wait
光标图案(IE6) p{cursor:
url("光标文件名.cur"),text;}
六、CSS框线一览表:
border-top:
1pxsolid#6699cc;/*上框线*/
border-bottom:
1pxsolid#6699cc;/*下框线*/
border-left:
1pxsolid#6699cc;/*左框线*/
border-right:
1pxsolid#6699cc;/*右框线*/
以上是建议书写方式,但也可以使用常规的方式如下:
border-top-color:
#369/*设置上框线top颜色*/
border-top-width:
1px/*设置上框线top宽度*/
border-top-style:
solid/*设置上框线top样式*/
其他框线样式
solid/*实线框*/
dotted/*虚线框*/
double/*双线框*/
groove/*立体内凸框*/
ridge/*立体浮雕框*/
inset/*凹框*/
outset/*凸框*/
七、CSS表单运用:
文字方块
按钮
复选框
选择钮
多行文字方块
下拉式菜单选项1选项2
八、CSS边界样式:
margin-top:
10px;/*上边界*/
margin-right:
10px;/*右边界值*/
margin-bottom:
10px;/*下边界值*/
margin-left:
10px;/*左边界值*/
字体样式(FontStyle)
序号中文说明标记语法
1字体样式{font:
font-stylefont-variantfont-weightfont-sizefont-family}
2字体类型{font-family:
"字体1","字体2","字体3",...}
3字体大小{font-size:
数值|inherit|medium|large|larger|x-large|xx-large|small|smaller|x-small|xx-small}
4字体风格{font-style:
inherit|italic|normal|oblique}
5字体粗细 {font-weight:
100-900|bold|bolder|lighter|normal;}
6字体颜色 {color:
数值;}
7阴影颜色{text-shadow:
16位色值}
8字体行高 {line-height:
数值|inherit|normal;}
9字间距 {letter-spacing:
数值|inherit|normal}
10单词间距{word-spacing:
11字体变形{font-variant:
inherit|normal|small-cps}
12英文转换{text-transform:
inherit|none|capitalize|uppercase|lowercase}
13字体变形{font-size-adjust:
inherit|none}
14字体{font-stretch:
condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}
文本样式(TextStyle)
1行间距{line-height:
2文本修饰{text-decoration:
inherit|none|underline|overline|line-through|blink}
3段首空格 {text-indent:
数值|inherit}
4水平对齐{text-align:
left|right|center|justify}
5垂直对齐{vertical-align:
inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6书写方式{writing-mode:
lr-tb|tb-rl}
背景样式
1背景颜色{background-color:
数值}
2背景图片{background-image:
url(URL)|none}
3背景重复{background-repeat:
inherit|no-repeat|repeat|repeat-x|repeat-y}
4背景固定{background-attachment:
fixed|scroll}
5背景定位{background-
6背影样式{background:
背景颜色|背景图象|背景重复|背景附件|背景位置}
框架样式(BoxStyle)
1边界留白{margin:
margin-topmargin-rightmargin-bottommargin-left}
2补 白{padding:
padding-toppadding-rightpadding-bottompadding-left}
3边框宽度{border-width:
border-top-widthborder-right-widthborder-bottom-widthborder-left-width}
宽度值:
thin|medium|thick|数值
4边框颜色{border-color:
数值数值数值数值} 数值:
分别代表top、right、bottom、left颜色值
5边框风格{border-style:
none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6边 框{border:
border-widthborder-stylecolor}
上边框{border-top:
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1