BGP 13条选路原则
2009-12-07 10:35
302 查看
1、CSS概览
CSS样式是由一个名称/值的属性对列表指定的,属性对之间用分号隔开,名字属性和值属性之间用冒号隔开。CSS样式属性和它们的值:
名称 | 值 |
background | [background-color||background-image||background-repeat||background-attachment||background-position] |
Background-attachment | scroll|fixed |
Background-color | color|transparent |
Background-image | url(url)|none |
Background-position | [[percentage|length]{1,2}|[[top|center|bottom]||[left|center|right]]] |
Background-repeat | repeat|repeat-x|repeat-y|no_repeat |
border | [border-width||border-style||color] |
Border-collapse | collapse|separate |
Border-color | Color{1,4}|transparent |
Border-spacing | length length? |
Border-style | [none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset]{1,4} |
Border-top | [border-top-width||border-style||[color|transparent]] |
Border-right | |
Border-bottom | |
Border-left | |
Border-top-color | color|transparent |
Border-right-color | |
Border-bottom-color | |
Border-left-color | |
Border-top-style | none|hidden|dotted|dashed|solid|double|groove|ridge|insert|outset |
Border-right-style | |
Border-bottom-style | |
Border-left-style | |
Border-top-width | thin|medium|thick|length |
Border-right-width | |
Border-bottom-width | |
Border-left-width | |
Border-width | [thin|medium|thick|length]{1,4} |
bottom | length|percentage|auto |
Caption-side | top|bottom |
clear | none|left|right|both |
clip | [rect([length|auto]{4})]|auto |
color | Color |
content | [string|url(url)|counter|attr(attribute-name)|open-quote|close-quote|no-open-quote|no-close-quote]+|normal |
Counter-increment | [identifier integer?]+|none |
Counter-reset | [identifier integer?]+|none |
cursor | [[url(url),]*[auto|crosshair|default|pointer|progress|move|e-resize|ne-resize|nw-resize|n-resize|se-resize|sw_resize|s-resize|w-resize|text|wait|help]] |
direction | ltr]rtl |
display | inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|none |
Empty-cells | show|hide |
float | left|right|none |
font | [[font-style||font-variant||font-weight]?font-size[/line-height]?font-family]|caption|icon|menu|message-box|small-caption|status-bar |
Font-family | [[family-name|serif|sans-serif|monospace|cursive|fantasy],]+ |
Font-size | xx-small|x-small|small|medium|large|x-large|xx-large|smaller|larger|length|percentage |
Font-style | normal|italic|oblique |
Font-variant | normal|small-caps |
Font-weight | normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900 |
height | length|percentage|auto |
left | length|percentage|auto |
Letter-spacing | normal|length |
Line-height | normal|number|length|percentage |
List-style | [list-style-type||list-style-position||list-style-image] |
List-style-image | url(url)|none |
List-style-position | inside|outside |
List-style-type | disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-alpha|lower-latin|upper-alpha|upper-latin|hebrew|armenian|georgian|cjk-ideographic|hiragana|katakana|hiragana-iroha|katakana-iroha|none |
margin | [length|percentage|auto]{1,4} |
Margin-top | length|percentage|auto |
Margin-right | |
Margin-bottom | |
Margin-left | |
Marker-offset | length|auto |
Max-height | length|percentage|none |
Max-width | length|percentage|none |
Min-height | length|percentage |
Min-width | length|percentage |
outline | [outline-color||outline-style||outline-width] |
Outline-color | color|invert |
Outline-style | none|hidden|dotted|dashed|solid|double|groove|ridge|insert|outset |
Outline-width | thin|medium|thick|length |
overflow | visible|hidden|scroll|auto |
padding | [length|percentage|auto]{1,4} |
Padding-top | length|percentage |
Padding-right | |
Padding-bottom | |
Padding-left | |
Page-break-after | auto|always|avoid|left|right |
Page-break-before | auto|always|avoid|left|right |
Page-break-inside | avoid|auto |
position | static|relative|absolute|fixed |
quotes | [string string]+|none |
right | length|percentage|auto |
Table-layout | auto|fixed |
Text-align | left|right|center|justify |
Text-decoration | none|[underline||overline||line-through||blink] |
Text-indent | length|percentage |
Text-transform | capitalize|uppercase|lowercase|none |
top | length|percentage|auto |
Unicode-bidi | normal|embed|bidi-override |
Vertical-align | baseline|sub|super|top|text-top|middle|bottom|text-bottom|percentage|length |
visibility | visible|hidden|collapse |
White-space | normal|pre|nowrap|pre-wrap|pre-line |
width | length|percentage|auto |
Word-spacing | normal|length |
Z-index | auto|integer |
1.1、给文档元素应用样式规则
把样式属性应用到文档元素的方法有很多。方法之一是在HTML标记的style属性中使用它们。CSS的一个重要目标是把文档内容和文档结构与文档外观分开。要实现文档结构和外观的分离,可以使用样式表(stylesheet),它把所有样式信息集中在一个地方。CSS样式表由样式规则的集合构成。每条规则以一个选择器开头,它指定要应用这条样式规则的文档元素,其后是用大括号括起来的样式属性和它们值的集合。最简单的规则是为一个或多个指定的标记名定义样式。
另一种样式表规则使用不同的选择器,指定要应用样式的元素的类。元素的类由HTML标记的class属性定义。
样式表还有只应用于具有指定的id属性的元素规则。
1.2、关联样式表和文档
可以把样式表放置在文档<head>部分中的<style>和</style>标记之间,使他们合并到HTML文档中。当一个样式表用于一个Web站点上的多个页面的时候,将它保存在一个自己的文件中,而不使用任何结束的HTML标记,这样通常会更好。这样,这个CSS文件就可以包含到一个HTML页面中。和<script>标记不同,style标记没有src属性。要把一个样式表包含到一个HTML页面中,要使用<link>标记。
也可以使用<link>标记来指定一个备用的样式表。有些浏览器允许用户选择所提供的一个备用样式表。
如果Web页面包含一个特定于页面的带有一个<style>标记的样式表,可以使用CSS@import指示符来在该特定于页面的样式表中包含一个共享的CSS文件。
1.3、层叠
CSS中的C代表“cascading”(层叠)。这个术语说明应用到文档中指定元素的样式规则来自不同资源的层叠。每个Web浏览器通常有自己的一套用于HTML元素的默认元素样式,而且允许用户使用自己定义的样式表覆盖这些默认样式。该样式表由另一个样式表链接或导入文档。1.4、CSS的版本
1.5、CSS示例
<head> <style type="text/css"> /* Specify that headings display in blue italic text. */ h1, h2 { color: blue; font-style: italic } /* * Any element of class="WARNING" displays in big bold text with large margins * and a yellow background with a fat red border. */ .WARNING { font-weight: bold; font-size: 150%; margin: 0 1in 0 1in; /* top right bottom left */ background-color: yellow; border: solid red 8px; padding: 10px; /* 10 pixels on all 4 sides */ } /* * Text within an h1 or h2 heading within an element with class="WARNING" * should be centered, in addition to appearing in blue italics. */ .WARNING h1, .WARNING h2 { text-align: center } /* The single element with id="P23" displays in centered uppercase. */ #P23 { text-align: center; text-transform: uppercase; } </style> </head> <body> <h1>Cascading Style Sheets Demo</h1> <div class="WARNING"> <h2>Warning</h2> This is a warning! Notice how it grabs your attention with its bold text and bright colors. Also notice that the heading is centered and in blue italics. </div> <p id="P23"> This paragraph is centered<br> and appears in uppercase letters.<br> <span style="text-transform: none"> Here we explicitly use an inline style to override the uppercase letters. </span> </p> </body>
2、用于DHTML的CSS:
属性 | 说明 |
position | 设置元素应用的定位类型 |
top,left | 设置元素上边界和左边界的位置 |
bottom,right | 设置元素下边界和右边界的位置 |
width,height | 设置元素的大小 |
z-index | 设置元素相对于其他重叠元素的“堆叠顺序”,定义元素位置的第三维 |
display | 设置如何和是否显示一个元素 |
visibility | 设置元素是否可见 |
clip | 定义元素的“裁剪区”,只显示元素在这个区域中的部分 |
overflow | 设置当元素比分配给它的空间大时应该采取什么操作 |
margin,border,padding | 设置元素的空白区和边框 |
background | 指定一个元素背景颜色或图像 |
opacity | 指定一个元素有多么不透明(或半透明)。 |
2.1、DHTML的关键:绝对定位
CSS的position属性设置了要应用到元素的定位类型。该属性有四个可用的值,如下所示static
这个是默认值,指定根据文档内容的正常流动对元素定位。静态定位元素不是DHTML元素,不能用top、left等属性定位。要对文档元素使用DHTML定位技术,必须把它的position属性设置为其他三个值之一。
absolute
用这个值可以设置元素相对于它的包含元素的位置。绝对定位的元素将独立于其他元素定位,但不属于静态定位的元素流。绝对定位的元素可以相对于文档的<body>标记进行定位。如果它嵌套在另一个绝对定位的元素中,则相对于那个元素定位。这是DHTML最常用的定位类型。
fixed
用这个值可以设置元素在浏览器窗口中的位置。具有fixed定位的元素总是可见的,并且不随文档其余的元素滚动。与绝对定位的元素一样,固定定位的元素独立于其他元素,并且不属于文档流。
relative
当position属性被设为relative时,将根据常规流布置元素,然后相对于它在常规流中的位置进行调整。在常规文档流中分配给元素的空间仍然分配给它,它两边的元素不会向它靠近来填充那个空间,但它们也不会从元素的新位置被挤走。