css属性编(一)

css属性列表

属性名称 字体属性（Font） font-family font-style font-variant font-weight font-size 颜色和背景属性 Color Background-color Background-image Background-repeat Background-attachment Background-position 文本属性 Word-spacing Letter-spacing Text-decoration Vertical-align Text-transform Text-align Text-indent Line-height 边距属性 Margin-top Margin-right Margin-bottom Margin-left 填充距属性 Padding-top Padding-right Padding-bottom Padding-left 边框属性 Border-top-width Border-right-width Border-bottom-width Border-left-width Border-width Border-color Border-style Border-top Border-right Border-bottom Border-left Width Height Float Clear 分级属性 Display White-space List-style-type List-style-image List-style-position List-style 鼠标（Cursor）属性 属性含义 使用什么字体 字体是否斜体 是否用小体大写 字体的粗细 字体的大小 定义前景色 定义背景色 定义背景图案 重复方式 设置滚动 初始位置 单词之间的间距 字母之间的间距 文字的装饰样式 垂直方向的位置 文本转换 对齐方式 首行的缩进方式 文本的行高 顶端边距 右侧边距 底端边距 左侧边距 顶端填充距 右侧填充距 底端填充距 左侧填充距 顶端边框宽度 右侧边框宽度 底端边框宽度 左侧边框宽度 一次定义宽度 设置边框颜色 设置边框样式 一次定义顶端 一次定义右侧 一次定义底端 一次定义左侧 定义宽度属性 定义高度属性 文字环绕 哪一边环绕 定义是否显示 怎样处理空白 加项目编号 加图案 第二行起始位置 一次定义列表 自动 定位“十”字 默认指针 手形 移动 箭头朝右方 箭头朝右上方 箭头朝左上方 箭头朝上方 箭头朝右下方 箭头朝左下方 箭头朝下方 箭头朝左方 文本“I”形 等待 帮助 属性值 所有的字体 Normal、italic、oblique Normal、small-caps Normal、bold、bolder、lithter等 Absolute-size、relative-size、length、percentage等 颜色 颜色 路径 Repeat-x、repeat-y、no-repeat Scroll、Fixed Percentage、length、top、left、 right、bottom等 Normal <length> 同上 None|underline|overline|line- through|blink Baseline|sub|super|top|text-top|middle|bottom|text-bottom| Capitalize|uppercase| lowercase|none Left|right|center|justify <length>|<percentage> Normal|<number>|<length>| <percentage> Length|percentage|auto 同上 同上 同上 Length|percentage 同上 同上 同上 Thin|medium|thick|length 同上 同上 同上 同上 Color None|dotted|dash|solid等 Border-top-width|color等 同上 同上 同上 Length|percentage|auto Length|auto Left|right|none Left|right|none|both Block、inline、list-item、none Normal、pre、nowrap Disc、circle、square等 <url>|none Inside、outside <keyword>|<position> |<url> Auto Crosshair Default Hand Move e-resize Ne-resize Nw-resize n-resize Se-resize Sw-resize s-resize w-resize Text Wait Help

 字体属性

字体属性比较多，大致说来有字体族、风格、变形、加粗与大小等，我们在上几个单节中介绍了font属性可同时表示好几个字体的属性，所以要注意一下，它并不仅仅单独地表示字体某一方面的属性。 字体族科 字体风格 字体变形 字体加粗 字体大小 字体 字体族科 语法: font-family: [[<族科名称> | <种类族科>],]* [<族科名称> | <种类族科>] 允许值: <族科名称> 任意字体族科名称都可以使用 <种类族科> serif (e.g., Times) sans-serif (e.g., Arial or Helvetica) cursive (e.g., Zapf-Chancery) fantasy (e.g., Western) monospace (e.g., Courier) 初始值: 由浏览器决定 适用于: 所有对象 向下兼容: 是 字体族科可以用一个指定的的字体名或一个种类的字体族科。很明显，定义一个指定的字体名不会比定义一个种类的字体族科合适。多个族科的赋值是可以使用的，而如果确定了一个指定的字体赋值，就应该有一个种类族科名随后，以防第一个选择不存在。 字体族科声明的例子如下: P { font-family: "New Century Schoolbook", Times, serif } 留意头两个赋值指定了字体的类型: New Century Schoolbook和Times。可是，因为它们两者都是serif字体，字体族科的种类作为后备列了出来，以防系统没有两者但有另一个serif合资格的字体。 任何包含空格的字体名都必须用单引号或双引号引住。 字体族科也可以用字体属性给出。 字体风格 语法: font-style: <值> 允许值: normal | italic | oblique 初始值: normal 适用于: 所有对象 向下兼容: 是 字体风格属性以三个方法的其中一个来定义显示的字体: normal (普通)，italic (斜体) 或oblique (倾斜)。样式表的字体风格声明例子如下: H1 { font-style: oblique } P { font-style: normal } 字体变形 语法: font-variant: <值> 允许值: normal | small-caps 初始值: normal 适用于: 所有对象 向下兼容: 是 字体变形属性决定了字体的显示是normal (普通) 还是small-caps (小型大写字母)。当文字中所有字母都是大写的时候，小型大写字母(值)会显示比小写字母稍大的大写字符。稍后版本的CSS将会支持附加的变形，如收缩、扩张、小写数码或其它自定义的变形。字体变形的定义例子如下: SPAN { font-variant: small-caps } 字体加粗 语法: font-weight: <值> 允许值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 初始值: normal 适用于: 所有对象 向下兼容: 是 字体加粗属性用作说明字体的加粗。当其它值绝对时，bolder和lighter值将相对地成比例增长。 注意: 因为不是所有的字体都有九个有效的加粗显示，一些加粗的会在指定下组合。如果指定的加粗无效，会按以下原则选择: 500 会被 400代替，反之亦是 100-300 会被指定为下一较细的加粗，如果有的话，否则就是下一较粗的加粗 600-900 会被指定为下一较粗的加粗，如果有的话，否则就是下一较细的加粗 一些字体加粗的定义例子如下: H1 { font-weight: 800 } P { font-weight: normal } 字体大小 语法: font-size: <绝对大小> | <相对大小> | <长度> | <百分比> 允许值: <绝对大小> xx-small | x-small | small | medium | large | x-large | xx-large <相对大小> larger | smaller <长度> <百分比> (in relation to parent element) 　 初始值: medium 适用于: 所有对象 向下兼容: 是 字体大小属性用作修改字体显示的大小。绝对长度(使用的单位为pt-像素和in-英寸) 需要谨慎地考虑到其适应不同浏览环境时的弱点。对于一个用户来说，绝对长度的字体很有可能会很大，或很小。 一些大小指定的定义如下: H1 { font-size: large } P { font-size: 12pt } LI { font-size: 90% } STRONG { font-size: larger } 网页制作者需要清楚Microsoft Internet Explorer 3.x 会错误地将em 和ex单位当作像素，这很可能会令到使用了这些单位的文本不可读。浏览器还会错误地将百分比值视为相对于选中部分的缺省字体大小，而不是上级元素的字体大小。这种做法像 H1 { font-size: 200% } 这是危险的，其大小将被视为IE的一级标题的缺省字体大小的两倍，而不是两倍于上级元素的字体大小。在这种情况中，BODY 通常会被视为上级元素，而且很可能定义一个medium的字体大小，然而，在IE中一级标题的缺省字体大小可能被认为是xx-large。 注意到了这些错误后，网页制作者在使用字体大小属性时，应该小心使用百分比的值，而且应该尽量避免使用em和ex这两个单位。 字体 语法: font: <值> 允许值: [ <字体风格> || <字体变形> || <字体加粗> ] <字体大小> [ / <行高> ] <字体族科> 初始值: 未定义 适用于: 所有对象 向下兼容: 是 字体属性用作不同字体属性的略写，特别是行高。例如， P { font: italic bold 12pt/14pt Times, serif } 指定该段为bold(粗体)和italic(斜体)Times或serif字体，12点大小，行高为14点。

颜色与图像属性

color 功能：设置前景或元素的颜色。 数值：使用颜色关键字或RGB值。 background-color 功能：设置页面或页面元素的背景颜色。 数值： 颜色 - 可用颜色名或RGB值 transparent - 透明，使页面背景为缺省背景。 background-image 功能：定义背景图形。 数值： none - 不用图形作背景 url - 提供图形文件的URL地址 说明：也可以包括background-color属性以便在找不到图形时代用 background-repeat 功能：控制图形背景是否重复排列。 数值： repeat - 垂直和水平重复，缺省值 repeat-x - 水平重复 repeat-y - 垂直重复 no-repeat - 不重复 说明：这个属性和 background-image 和 background-position 属性一起使用。 background-attachment 功能：指定元素的背景是随元素一起滚动还是固定在页面某个位置上。 数值： scroll - 随元素一起滚动 fixed - 固定 说明： 缺省值是 scroll，这个属性和 background-image 属性一起使用。 background-position 功能：用于在空间中定位元素背景 数值： 长度 - 相对或绝对单位设置元素框边缘的起点，并给出单位下的坐标。 百分比 - 用百分比表示框边缘上浏览器开始放图的位置。可以重复这个值也提供垂直和水平起点 垂直位置 - 设置竖直方向的起点，关键字为 top, center, bottom 水平位置 - 设置水平方向的起点，关键字 left, center, right 例如：top left, left top和0% 0% 都表示图形左上角从元素框左上角开始 background 功能：简写属性，可以设置所有背景属性。 数值： background-attachment background-color background-image background-position background-repeat 有关上述数值的细节，见各个属性部分。 display 功能：改变元素的显示值，可以将元素类型线上，块和清单项目相互变换。 数值： none - 不显示元素 block - 块显示，在元素前后设置分行符 inline - 删除元素前后的分行符，使其并入其它元素流中 list-item - 将元素设置为清单中的一行 说明：可用 display 属性值生成插入标题和补加清单或让图形变成线上显示。

 

边框属性

{框填充属性 padding-bottom padding-left padding-top padding-right 功能：毎个容器都有边框，这些属性设置边框与框內元素间的距离。 数值： 长度 - 设置相对或绝对值。在数字后指定度量单位如下：mm, cm, in, pt, px, pc, ex, em。em 和 ex 设置产生相对于父字体的字体尺寸。 百分比 - 以父元素的百分比设置边框。 说明：填充值不能使用负值，但可以是小数。 框填充属性--- padding 功能：是个简写属性，用于设置上，下，左，右各个方向边框和内容元素的间距。 数值：同前。 说明：用单一值可以让毎边等距填充；如果用两个值，则第一个值用于上下填充，第二个值用于左右填充；如果用三个值，则赋于上边填充，左右填充和下边填充；如果用四个值，则分别用于上，右，下，左填充。可以混合数值类型。 框边框属性 border-top border-bottom border-right border-left 功能：这四个属性都是简写属性，分别设置上，下，右，左的边框属性。缺省情况下，边框没有样式设置。 数值：共有三个边框属性 border-width: 取值为 thin, medium, thick或指定长度。 border-style: 设置用于修饰边框的底纹。可以设置下列样式：none, dotted,doshed, solid, double, groove, ridge, inset, outset。 border-color: 设置边框颜色。 框边框属性 border-top-width border-bottom-width border-right=width border-left-width 功能：分别设置各个边框的厚度。 数值： thin - 细边框。 medium - 中等线宽。 thick - 粗线。 长度 - 用相对或绝对单位设置边框宽度。 框边框属性 border-color 功能：简写属性，设置四个边框的颜色值。 数值：可以用颜色名或RGB值。如果指定单个颜色，则四个边框都显示为这个颜色；如果指定两个颜色，则顺序为上下，左右；如果指定三种颜色，则顺序为上，左右，下；如果指定四种颜色，则顺序为上，右，下，左。 说明：颜色名如下 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. 对于RGB值，可用三种方法指定 #rrggbb; rgb(r,g,b); rgb(r%,g%,b%) 框边框属性 border 功能：简写属性，设置所有边框属性。 数值： border-width - 取值 thin, medium, thick 或指定长度。 border-style - 取值 none, dotted, dashed, solid, double, groove, ridge, inset, outset border-color - 可用颜色名或RGB值。 说明：与其它简写属性不同的是，每个设置只能取一个值，这个属性均匀作用于框的各边。 框边框属性 border-style 功能：用于显示边框和指定边框样式。 数值： none - 不显示边框，为缺省值 dotted - 点线 dashed - 虛线 solid - 实线 double - 双线 groove - 3D陷入线 ridge - 3D山脊狀线 inset - 使页面有沉入感 outset - 使页面有浮出感 说明：并非所有浏览器都能显示ridge, inset, outset 之类的样式，有些浏览器将所有边框都绘制成实线。 框边界属性 margin-bottom margin-left margin-right margin-top 功能：这四个属性用来设置元素与其相邻元素间的距离，可以用长度或相对于其父文本的宽度的百分比来定义，也可以自动处理。 数值： 长度 - 设置元素相应边与框边缘之间的相对或绝对距离，有效单位为：mm, cm, in, px, pt, pica,ex, em ... 百分比 - 以父元素宽度的百分比设置边界尺寸。 auto - 自动，这个设置取浏览器的缺省边界。 框边界属性 margin 功能：简写属性，用于設置元素的所有边界。这是用于描述元素的内容的边缘到框边缘的距离的。这个区总是透明的，可以看到下面的页面背景。 数值： 长度 - 同前 百分比 - 以父元素宽度的百分比设置边界尺寸。 auto - 自动，这个设置取浏览器的缺省边界。 框位置属性 height 功能：设置元素高度，浏览器按照这个高度调整图形。 数值： 长度 - mm, cm, px, pt, ..... auto - 自动。 框位置属性 width 功能：设置元素宽度，浏览器按照这个宽度调整图形。 数值： 长度 - mm, cm, in, px, pt, ...... 百分比 - 将图形尺寸设置为父元素宽度的百分比。 auto - 自动调整 框位置属性