字体属性:(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)“Courier New”, Courier, monospace, “Times New Roman”, 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:#000 url(…) repeat fixe辅助图片一律用背景处理d left top;
区块属性:(Block)
字间距:letter-spacing: normal; 数值
对齐:text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
缩进:text-indent:数值px;
垂直对齐:vertical-align: baseline;(基线) sub;(下标) super;(下标) op; text-top; middle; bottom; text-bottom;
词间距:word-spacing: normal; 数值
空格: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;(表格标题)
方框属性:(Box)
宽度:width:120px;
高度:height:120px;
浮动:float:15px;
清除:clear:both;
外边距:margin:3px;
内边距:padding:3px;
边框属性:(Border)
边框样式:border-style: dotted(点线); dashed(虚线); solid(实线); double(双线); groove(槽线); ridge(脊状);inset(凹陷) outset;
边框宽度:border-width:;
边框颜色:border-color:#;
简写方法:border:width style color;
列表属性:(List-style)
类型: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)
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; | 下标字 |
vertical-align:super; | 上标字 |
text-decoration:line-through; | 加删除线 |
text-decoration: overline; | 加顶线 |
text-decoration:underline; | 加下划线 |
text-decoration:none; | 删除链接下划线 |
text-transform : capitalize; | 首字大写 |
text-transform : uppercase; | 英文大写 |
text-transform : lowercase; | 英文小写 |
text-align:right; | 文字右对齐 |
text-align:left; | 文字左对齐 |
text-align:center; | 文字居中对齐 |
text-align:justify; | 文字分散对齐 |
vertical-align | 属性 |
vertical-align:top; | 垂直向上对齐 |
vertical-align:bottom; | 垂直向下对齐 |
vertical-align:middle; | 垂直居中对齐 |
vertical-align:text-top; | 文字垂直向上对齐 |
vertical-align:text-bottom; | 文字垂直向下对齐 |
CSS边框空白
属性名称 | 属性解释 |
---|---|
adding-top:10px; | 上边框留空白 |
padding-right:10px; | 右边框留空白 |
padding-bottom:10px; | 下边框留空白 |
padding-left:10px; | 左边框留空白 |
CSS符号属性
属性名称 | 属性解释 |
---|---|
list-style-type:none; | 不编号 |
list-style-type:decimal; | 阿拉伯数字 |
list-style-type:lower-roman; | 小写罗马数字 |
list-style-type:upper-roman; | 大写罗马数字 |
list-style-type:lower-alpha; | 小写英文字母 |
list-style-type:upper-alpha; | 大写英文字母 |
list-style-type:disc; | 实心圆形符号 |
list-style-type:circle; | 空心圆形符号 |
list-style-type:square; | 实心方形符号 |
list-style-image:url(/dot.gif); | 图片式符号 |
list-style-position: outside; | 凸排 |
list-style-position:inside; | 缩进 |
CSS背景样式
属性名称 | 属性解释 |
---|---|
background-color:#F5E2EC; | 背景颜色 |
background:transparent; | 透视背景 |
background-image : url(/image/bg.gif); | 背景图片 |
background-attachment : fixed; | 浮水印固定背景 |
background-repeat : repeat; | 重复排列-网页默认 |
background-repeat : no-repeat; | 不重复排列 |
background-repeat : repeat-x; | 在x轴重复排列 |
background-repeat : repeat-y; | 在y轴重复排列 |
指定背景位置
属性名称 | 属性解释 |
---|---|
background-position : 90% 90%; | 背景图片x与y轴的位置 |
background-position : top; | 向上对齐 |
background-position : buttom; | 向下对齐 |
background-position : left; | 向左对齐 |
background-position : right; | 向右对齐 |
background-position : center; | 居中对齐 |
CSS连接属性
属性名称 | 属性解释 |
---|---|
a | 所有超链接 |
a:link | 超链接文字格式 |
a:visited | 浏览过的链接文字格式 |
a:active | 按下链接的格式 |
a:hover | 鼠标转到链接 |
鼠标光标样式
属性名称 | 属性解释 |
---|---|
CURSOR: hand | 链接手指 |
cursor:crosshair | 十字体 |
cursor:s-resize | 箭头朝下 |
cursor:move | 十字箭头 |
cursor:move | 箭头朝右 |
cursor:help | 加一问号 |
cursor:w-resize | 箭头朝左 |
cursor:n-resize | 箭头朝上 |
cursor:ne-resize | 箭头朝右上 |
cursor:nw-resize | 箭头朝左上 |
cursor:text | 文字I型 |
cursor:se-resize | 箭头斜右下 |
cursor:sw-resize | 箭头斜左下 |
cursor:wait | 漏斗 |
p {cursor:url(“光标文件名.cur”),text;} | 光标图案(IE6) |
CSS框线一览表
属性名称 | 属性解释 |
---|---|
border-top : 1px solid #6699cc; | 上框线 |
border-bottom : 1px solid #6699cc; | 下框线 |
border-left : 1px solid #6699cc; | 左框线 |
border-right : 1px solid #6699cc; | 右框线 |
注:以上是建议书写方式,但也可以使用常规的方式如下:
属性名称 | 属性解释 |
---|---|
border-top-color : #369 | 设置上框线top颜色 |
border-top-width :1px | 设置上框线top宽度 |
border-top-style : solid | 设置上框线top样式 |
其他框线样式
属性名称 | 属性解释 |
---|---|
solid | 实线框 |
dotted | 虚线框 |
double | 双线框 |
groove | 立体内凸框 |
ridge | 立体浮雕框 |
inset | 凹框 |
outset | 凸框 |
CSS边界样式
属性名称 | 属性解释 |
---|---|
margin-top:10px; | 上边界 |
margin-right:10px; | 右边界值 |
margin-bottom:10px; | 下边界值 |
margin-left:10px; | 左边界值 |
CSS 属性:字体样式(Font Style)
中文说明 | 标记语法 |
---|---|
字体样式 | {font:font-style font-variant font-weight font-size font-family} |
字体类型 | {font-family:“字体1”,“字体2”,“字体3”,…} |
字体大小 | {font-size:数值(inherit/medium/large/larger/x-large/xx-large/small/smaller/x-small/ xx-small)} |
字体风格 | {font-style:inherit/italic/normal/oblique} |
字体粗细 | {font-weight:100-900/bold/bolder/lighter/normal;} |
字体颜色 | {color:数值;} |
阴影颜色 | {text-shadow:16位色值} |
字体行高 | {line-height:数值/inherit/normal;} |
字间距 | {letter-spacing:数值/inherit/normal} |
单词间距 | {word-spacing:数值/inherit/normal} |
字体变形 | {font-variant:inherit/normal/small-cps } |
英文转换 | {text-transform:inherit/none/capitalize/uppercase/lowercase} |
字体变形 | {font-size-adjust:inherit/none} |
字体 | {font-stretch:condensed/expanded/extra-condensed/extra-expanded/inherit/narrower/normal/semi-condensed/semi-expanded/ultra-condensed |
文本样式(Text Style)
中文说明 | 标记语法 |
---|---|
行间距 | {line-height:数值/inherit/normal;} |
文本修饰 | {text-decoration:inherit/none/underline/overline/line-through/blink} |
段首空格 | {text-indent:数值/inherit} |
水平对齐 | {text-align:left/right/center/justify} |
垂直对齐 | {vertical-align:inherit/top/bottom/text-top/text-bottom/baseline/middle/sub/super} |
书写方式 | {writing-mode:lr-tb/tb-rl} |
背景样式
中文说明 | 标记语法 |
---|---|
背景颜色 | {background-color:数值} |
背景图片 | {background-image: url(URL)/none} |
背景重复 | {background-repeat:inherit/no-repeat/repeat/repeat-x/repeat-y} |
背景固定 | {background-attachment:fixed |
背景定位 | {background-position:数值/top/bottom/left/right/center} |
背影样式 | {background:背景颜色/背景图象/背景重复/背景附件/背景位置} |
框架样式(Box Style)
中文说明 | 标记语法 |
---|---|
边界留白 | {margin:margin-top margin-right margin-bottom margin-left} |
补白 | {padding:padding-top padding-right padding-bottom padding-left} |
边框宽度 | {border-width:border-top-width border-right-width border-bottom-width border-left-width} |
宽度值: | thin/medium/thick |
边框颜色 | {border-color:数值 数值 数值 数值} |
数值: | 分别代表top、right、bottom、left |
颜色值: | color |
边框风格 | {border-style:none/hidden/inherit/dashed/solid/double/inset/outset/ridge/groove} |
边框 | {border:border-width border-style color} |
上边框 | {border-top:border-top-width border-style color} |
右边框 | {border-right:border-right-width border-style color} |
下边框 | {border-bottom:border-bottom-width border-style color} |
左边框 | {border-left:border-left-width border-style color} |
宽度 | {width:长度/百分比/auto} |
高度 | {height:数值/auto} |
漂浮 | {float:left/right/none} |
清除 | {clear:none/left |
分类列表
中文说明 | 标记语法 |
---|---|
控制显示 | {display:none/block/inline/list-item} |
控制空白 | {white-space:normal/pre/nowarp} |
符号列表 | {list-style-type:disc/circle/square/decimal/lower-roman/upper-roman/lower-alpha/upper-alpha/none} |
图形列表 | {list-style-image:URL} |
位置列表 | {list-style-position:inside/outside} |
目录列表 | {list-style:目录样式类型/目录样式位置/url} |
鼠标形状:
{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
word-wrap是控制换行的。使用break-word时,是将强制换行。中文没有任何问题,英文
语句也没问题。但是对于长串的英文,就不起作用。break-word是控制是否断词的。normal是默认情况,英文单词不被拆开。break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)
ie下:使用word-wrap:break-word;所有的都正常。
ff下:如这2个都不用的话,中文不会出任何问题。英文语句也不会出问题。但是,长串英文会出问题。为了解决长串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式会导致,普通的英文语句中的单词会被断开(ie下也是)。
目前主要的问题存在于长串英文和英文单词被断开。其实长串英文就是一个比较长的单词而已。即英文单词应不应该被断开那?
那问题很明显了,显然不应该被断开了。对于长串英文,就是恶意的东西,自然不用去管了。
但是,也要想些办法,不让它把容器撑大。用:overflow:auto;
ie下,长串会自动折行。
ff下,长串会被遮盖。
所以,综上,最好的方式是word-wrap:break-word;overflow:hidden;
而不是word-wrap:break-word;word-break:break-all;。