CSS不完全手册-2

■ FONT-VARIANT：

　　FONT-VARIANT 可以将正常文字尺寸缩小一半后转为大写：

• h2 {font-variant:small-caps}

　　完全控制字母大小写：

• 全部大写：h2 {text-transform:uppercase};
• 全部小写：h2 {text-transform:lowercase};
• 单词第一个字母大写：h2 {text-transform:capitalize};
• 取消所有设定：h2 {text-transform:none};

　　哪天你突发奇想，希望链接没有下划线，现在你可以做到：

• 文字下划线：A:link{text-decoration:underline};
• 文字上划线：A:link{text-decoration:overline};
• 文字删除线：A:link{text-decoration:line-through};
• 文字闪烁：A:link{text-decoration:blink};
• 不要任何效果：A:link{text-decoration:none}

■ 字间距：

　　利用字间距属性word-spacing，可以调整单词间的距离。

• h2 {word-spacing:5pt}
 ■ 字母间距：

　　利用字母间距属性letter-spacing，可以调整单词中每个字母间的距离。

• h2 {letter-spacing:10pt};
 ■ 行高：

　　与字距不同的是行距line-height，它调整的是行与行间垂直方向的距离，有三种方法设置：

• 数值：h3 {font-size:12pt; line-height:2};/*此处line-height=2x12pt=24pt */
• 长度单位：h3 {font-size:12pt; line-height:24pt};
• 比例：h3 {font-size:12pt; line-height:200%};

　　无论是字距或字母间距或行距都有一个共同的参数：normal，一旦设为normal就是要浏览器使用默认值。

■ 水平对齐：

　　利用文字对齐属性text-align，可以控制段落的水平对齐：

• h2 {text-align:center}
• h2 {text-align:left}
• h2 {text-align:right}

　　这项属性可作用于<P>,<h1>-<h6>,<blockquote>和<ul>标记。



 ■ 垂直对齐：

　　利用垂直对齐属性vwrtical-align，可以控制对象（包括文字或图形）相对于母体的垂直位置：

• h2 {vertical-align:top}
• h2 {vertical-align:text-top}
• h2 {vertical-align:bottom}
• h2 {vertical-align:text-bottom}
• h2 {vertical-align:baseline}
• h2 {vertical-align:middle}
• h2 {vertical-align:sub}/*上标*/
• h2 {vertical-align:super}/*下标*/

　　这些属性具体对齐效果如何，希望大家自已去试验。



 ■ 首行缩进：

　　首行缩进text-indent，在文档排版中经常用到：

• h3 {text-indent:24pt};
■ 容器的概念：

　　根据CSS对网页样式的定义，页面上的所有元素都放在一个容器里，这个容器叫BOX。BOX也就包括：

• 元素本身；
• 围绕元素的空格；(padding)
• 围绕元素空格外的边框；(border)
• 边框外的边距。(margin)
 ■ 四个边距：

　　margin用于设定上，右，下，左，边距：

• body {margin-top:10px;margin-right:20px;margin-bottom:30px;margin-left:40px}
• body {margin:10px 20px 30px 40px}/*效果与上面方式相同*/

　　以上参数值同样可以是其他长度单位（如：pt,em等）或比例。



 ■ 顶，底，左，右空格填充：

　　padding用于设置空格填充范围，用法与边距属性相同：

• h3 {margin-top:10px;margin-right:20px;margin-bottom:30px;margin-
  left:40px};
• h3 {margin:10px 20px 30px 40px}
 ■ 边框：

　　border可设定的属性很多，包括颜色和宽度，关键是可以指定每个边的宽度和每个边的颜色 。

• 边框宽度border-width可以是thin,medium,thick或长度值：
  • h3 {border-top-width:2px;border-right-width:4px;border-bottom-width:6px;border-left-width:8px};
  • h3 {border-width:2px 4px 6px 8px}/*与上面相同*/

  • p {border-top-width:thin;border-right-width:medium;border-bottom-
    width:thick;border-left-width:none};
  • p {border-width:thin medium thick none}/*与上面相同，左边框将不显示*/
    
    

• 边框颜色border-color定义方法与宽度定义相似，颜色值也可以用RGB值（如#ff00ff）：
  • h3 {border-color:red blue yellow green}/*上:红；右：蓝；下：黄；左：绿*/
  • h3 {border-color:red blue }/*上，下:红；右，左：蓝；*/
  • h3 {border-color:#ff00ff }/*所有边框为#ff00ff色*/
    
    

• 边框线的线条式样border-style，有九个关键字来描述：
  • none /*不画边框，不论边框厚度是多少*/
  • dotted /*由点组成的虚线*/
  • dash /*由短线组成的虚线*/
  • solid /*实线 */
  • double /*双实线*/
  • groove /*3D沟状*/
  • ridge /*3D脊状*/
  • inset /*3D内嵌*/
  • outset /*3D外嵌*/
  其使用方法与厚度、颜色相似，不再多讲。

• 一条边框的颜色，厚度，线条式样可以在一条语句中定义。例：
  • h1 {border-top:5px solid red}
　　这么多的参数，这么多的组合，要想得心应手，不下一番功夫去练习是不可能达到的。

■ 背景颜色：



　　background-color，用它可以指定整个网页的背景颜色，也可以是某一个单词。在传统的HTML中要将背景颜色应用到一段文字上是一件麻烦事，要将文字放在表格中再设置表格的背景。CSS使之变得非常容易。

　　P.colorback {background-color:#ff0000}

　　颜色可以是颜色名(如red)、十六进制数(如#ff0000)、RGB值(如RGB(255,0,0))。

■ 背景图片：

　　background-image，用它可以指定整个网页的背景图片(将它放在BODY标签内)，也可以是某一个单词。

• background-repeat 是否循环背景
  • p {background-repeat:no-repeat;background-image:url(background.gif)}/*不循环*/
  • p {background-repeat:repeat;background-image:url(background.gif)}/*循环*/
• background-attachment 是否固定背景
  • body {background-attachment:scroll;background-image:url(background.gif)}/*随文字一起滚动*/
  • body {background-attachment:fixed;background-image:url(background.gif)}/*固定不动*/

　　P.colorback {background-color:#ff0000}

　　颜色可以是颜色名(如red)、十六进制数(如#ff0000)、RGB值(如RGB(255,0,0))。



 ■ 背景定位：

　　background-position用于设置背景的位置：



• p {background-position:top;background-image:url(background.gif)};


　　background-position其参数可以是关键字、长度数、比例值。



• 关键字;
  • top /*背景图像与前景对象的顶部对齐*/
  • bottom /*背景图像与前景对象的底部对齐*/
  • left /*背景图像与前景对象的左边对齐*/
  • right /*背景图像与前景对象的右边对齐*/
  • center /*与前面四个任一个组合，变成水平或垂直居中*/
    
    
• 长度数；
  • 可以是任何一种以前学过的长度单位(pt,px,ems...)，例如：
    p{background-position:100px 50px;
    background-image:url(background.gif)}表示从左上角起水平100像素，垂直50像素的位置摆放。
    
    
• 比例值；
  • 例如：p{background-position:85% 50%;
    background-image:url(background.gif)}
    表示从距离段落的右边85%，垂直距离段落顶端50%的位置摆放。