XML与Web_6 CSS(一)

添加方式

• 使用@import引入：跟link用法很像，但必须放在<style>…</style>中

<style type="text/css">
@import url("example.css");
</style>

5种文字属性

• font-family：定义文字的字体
• font-size：定义字体的大小

h1{font-size:6pt;}
p{font-size:60%}
li{font-size:+1pt}
strong{font-size:large}

• font-style：定义文字的显示风格
  italic，斜体显示文字
  Normal，正常显示文字（默认值）
  oblique，倾斜显示文字
• font-variant：定义字体的变形方式，即用来设定字体是正常显示还是以大写字母显示；normal是默认值，small-caps是将所有小写字母替换为大写字母
• font-weight：定义书写字体的粗细；lighter、normal、bold、bolder

段落属性

• letter-spacing：定义文本字间距(mm)
• line-height：定义文本行间距(px)
• text-align：定义文本在页面中的水平对齐方式；属性值为left（左对齐）、right
  （右对齐）、center（居中对齐）、justify（两端对齐）。默认值为left。
• text-decoration：定义文本属性；属性值为underline（加底线）、overline（加顶线）、line-through（加删除线）、blink（文本闪烁）、none（无效果）中的一个或多个，默认值为none
• text-indent属：定义文本块第一行的缩进量
• text-transform：定义大小写之间的转换规则。属性值为capitalize(文本中每个单词的第一个字母显示为大写)、uppercase（文本中每个字母显示为大写）、lowercase（文本中每个字母显示为小写）、none（取消任何转换）。默认值为none。
• word-spacing：定义词与词之间的间隔。

背景属性

• background-color：定义元素的背景颜色
• background-image：定义元素的背景图片
• background-repeat：定义图片将采用什么方式填充多余空间。属性值如下：
  repeat-x，背景图片只在水平方向重复
  repeat-y，背景图片只在垂直方向上重复
  no-repeat，背景图片不重复
  repeat，背景图片在水平和垂直方向都重复（默认值）
• background-attachment：定义移动网页滚动条时背景图像的显示方式。属性值为默认值scroll（表示背景图像随滚动条的移动而移动）和fixed（表示背景图像固定不动）
• background-position：定义背景图片的位置，背景所涉及的是content和padding区域

background-image:url('/i/eg_bg_03.gif'); 
background-repeat:no-repeat; 
background-position:50% 20%;

表格属性

• border-collapse：用于设定表格的行和列的边框是合并成单边框，还是分别有各自的边框
• caption-side：用于设置或检索表格的caption对象是在表格的哪一边
• empty-cells：用于设置或检索当表格的单元格无内容时，是否显示该单元格的边框
• table-layout用于设置或检索表格的布局算法。属性如下：
  auto，默认设置布局
  fixed，固定布局

边框属性

• border-style：用于设置元素所有边框的样式
• border-color：用来设定边框的颜色，颜色值的设置方法和border-style属性相同
• border-width：用来设定边框的宽度，宽度值的设置方法和border-style属性相同
  • border：该属性是border-style、border-color和border-width属性的一种综合快捷写法，语法格式如下：

 border:[<border-width>||<border-style>||<border-color>]

定位属性

定位属性是position，该属性具有4个值：

• static：默认值
• relative：相对定位
• absolute：绝对定位
• fixed：固定定位