当前位置:文档之家› css属性列表 和 属性值含义

css属性列表 和 属性值含义

css属性列表和属性值含义css属性列表属性名称字体属性(Font)font-familyfont-stylefont-variantfont-weightfont-size颜色和背景属性ColorBackground-color Background-image Background-repeat Background-attachment Background-position文本属性Word-spacingLetter-spacingText-decoration Vertical-alignText-transformText-alignText-indentLine-height边距属性Margin-topMargin-rightMargin-bottomMargin-leftMargin 属性含义使用什么字体字体是否斜体是否用小体大写字体的粗细字体的大小定义前景色定义背景色定义背景图案重复方式设置滚动初始位置单词之间的间距字母之间的间距文字的装饰样式垂直方向的位置文本转换对齐方式首行的缩进方式文本的行高分别设置上右下左,一个值属性值所有的字体Normal、italic、obliqueNormal、small-capsNormal、bold、bolder、lithter等Absolute-size、relative-size、length、percentage等颜色颜色路径Repeat-x、repeat-y、no-repeatScroll、FixedPercentage、length、top、left、right、bottom等Normal <length>同上None|underline|overline|line-through|blinkBaseline|sub|super|top|text-top|middle|bottom|text-bottom|Capitalize|uppercase|lowercase|noneLeft|right|center|justify<length>|<percentage>Normal|<number>|<length>|<percentage>Length|percentage|auto同上同上同上填充距属性Padding-top Padding-right Padding-bottom Padding-left Padding边框属性Border-top-width Border-right-width Border-bottom-width Border-left-width Border-width Border-color Border-style Border-topBorder-rightBorder-bottom Border-leftWidthHeightFloatClear分级属性DisplayWhite-spaceList-style-typeList-style-imageList-style-position List-style鼠标(Cursor)属性设置全部顶端边距右侧边距底端边距左侧边距同Margin顶端填充距右侧填充距底端填充距左侧填充距顶端边框宽度右侧边框宽度底端边框宽度左侧边框宽度一次定义宽度设置边框颜色设置边框样式一次定义顶端一次定义右侧一次定义底端一次定义左侧定义宽度属性定义高度属性文字环绕哪一边环绕定义是否显示怎样处理空白加项目编号加图案第二行起始位置一次定义列表自动定位“十”字默认指针Length|percentage同上同上同上同MarginThin|medium|thick|length同上同上同上同上ColorNone|dotted|dashed|dash|solid|double|groove|ridge|inset|outset等Border-top-width|color等同上同上同上Length|percentage|autoLength|autoLeft|right|noneLeft|right|none|bothBlock、inline、list-item、noneNormal、pre、nowrapDisc、circle、square等<url>|noneInside、outside<keyword>|<position> |<url>AutoCrosshairDefaultHandMovee-resizeNe-resizeNw-resizen-resize手形移动箭头朝右方箭头朝右上方箭头朝左上方箭头朝上方箭头朝右下方箭头朝左下方箭头朝下方箭头朝左方文本“I”形等待帮助Se-resize Sw-resize s-resize w-resize TextWait HelpCSS属性:1、媒体(Media)类型样式单的一个最重要的特点就是它可以作用于多种媒体,比如页面、屏幕、电子合成器等等。

特定的属性只能作用于特定的媒体,如"font-size"属性只对可卷动的媒体类型有效(屏幕)。

声明一个媒体属性可以用@import或@media引入:@import url(loudvoice.css) speech;@media print {/* style sheet for print goes here */}也可以在文档标记中引入媒体:<LINK rel="stylesheet" type="text/css" media="print" href="foo.css">可以看出,@import和@media的区别在于,前者引入外部的样式单用于媒体类型,后者直接引入媒体属性。

@import的使用方法是@import加样式单文件的URL地址再加媒体类型,可以多个媒体共用一个样式单,媒体类型之间用","分割符分开。

@media用法则是把媒体类型放在前面,其他规则和rule-set基本一样。

下面列出各种媒体类型:SCREEN:指计算机屏幕。

PRINT:指用于打印机的不透明介质。

PROJECTION:指用于显示的项目。

BRAILLE:盲文系统,指有触觉效果的印刷品。

AURAL:指语音电子合成器。

TV:指电视类型的媒体。

HANDHELD:指手持式显示设备(小屏幕,单色)ALL:适合于所有媒体。

2、BOX模型(BOX Model)属性什么是BOX?CSS把HTML中以<somesign>……</somesign>的部分称为BOX(容器),BOX有三类属性:padding、margin和border。

Margin属性:Margin属性分为margin-top、margin-right、margin-bottom、margin-left和margin五个属性,分别表示BOX里内容离边框的距离,它的属性值是数值单位,可以是长度、百分比或auto,margin甚至可以设为负值,造成BOX与BOX之间的重叠显示,关于margin的属性详见下表:属性名称: 'margin-top'、'margin-right'、'margin-bottom'、'margin-left'属性值: <margin-width>初始值: 0适合对象: 所有元素是否继承: no百分比备注: 相对于BOX的宽度例如:H1 { margin-top: 2em }H2 { margin-right: 12.3% }Margin还有一个快捷的书写方法,就是直接用margin属性,例如:BODY { margin: 1em 2em 3em 2em}等同于:BODY {margin-top:1em;margin-right:2em;margin-bottom:3em;margin-left:2em;}margin属性后面可以有四个值,中间用空格隔开(记住不是逗号),顺序是"上右下左",当然margin后面可以不足四个值,例如:BODY { margin: 2em } /* 所有的margin都设为2em */BODY { margin: 1em 2em } /* 上下margin为1em,右左margin为2em */BODY { margin: 1em 2em 3em } /* 上margin为1em,右左margin为2em,下margin为3em*/ Padding属性:Padding属性用来描述BOX的边框和内容之间插入多少空间,和margin属性类似,它也分为上右下左和一个快捷方式padding,关于padding的属性详见下表:属性名称: 'padding-top'、'padding-right'、'padding-bottom'、'padding-left' 、'padding'属性值: <padding-width>初始值: 0适合对象: 所有元素是否继承: no百分比备注: 相对于BOX的宽度例如:BLOCKQUOTE { padding-top: 0.3em }padding属性和margin类似此处略去。

Border属性:平时我们在查看HTML文档时,看到一段文字,并不会把它当作一个BOX,实际上BOX是有边框的,只是平时不显示出来罢了,而border属性就是用来描述BOX边框的。

Border属性分为border-width、border-color和border-style,而这些属性下面又有分支。

border-width属性:border-width属性又分为:border-top-width、border-right-width、border-bottom-width、border-left-width和border-width属性,border-width用长度表示为"thin/medium/thick"或长度单位表示,下面是border-width属性的详细列表:属性名称: 'border-top-width'、'border-right-width'、'border-bottom-width'、'border-left-width'、'border-width' 属性值: <border-width>初始值: medium适合对象: 所有元素是否继承: no百分比备注: 被禁止border-width为快捷方式,顺序为上右下左,值之间用空格隔开。

相关主题