第10章 CSS网页元素设计

第10章

CSS网页元素设计本章学习要点：

CSS中的字体设置

CSS中的段落排版CSS中的背景和颜色设置CSS中的边框和边距设置设置字体系列在CSS中，使用font-family属性定义文本的字体系列。该属性可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family属性的值是用于某个元素的字体名称的一个优先表。浏览器会使用它可识别的第一个值。设置字体大小在CSS中，使用font-size属性设置文本的大小，其属性值可以是绝对或相对值。对于相对值来说，是将文本设置为指定的大小，并不允许用户在浏览器中改变文本大小；对于相对值而言，是相对于周围的元素来设置大小，并允许用户在浏览器改变文本大小。设置字体样式在CSS中，使用font-style属性来设置文本的字体样式。该属性有3个值，分别是：normal：文本正常显示italic：文本斜体显示oblique：文本倾斜显示该属性非常简单，就是用于在normal样式、italic样式和oblique样式之间选择。唯一有点复杂的是明确italic样式和oblique样式之间的差别。斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。设置字体粗细在CSS中，使用font-weight属性设置文本字体的粗细。该属性用于设置显示元素的文本中所用的字体加粗。其属性值可以是关键字或者数字值。关键字包括：normal、bold、bolder和lighter，数字值由100到900。其中数字值400相当于关键字normal，700等价于关键字bold。设置字体变体在CSS中，font-variant属性用来设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。调整字符间距letter-spacing属性用来调整字符间距，即增加或减少字符间的空白。该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。该属性默认的关键字是normal，normal就相当于值为0。输入的长度值会使字母之间的间隔增加或减少指定的量。调整单词间距word-spacing属性可以改变单词之间的标准间隔，该属性与letter-spacing属性的设置和使用方法完全相同，该属性也是接受一个正长度值或负长度值。如果提供一个正长度值，那么单词之间的间隔就会增加。为其设置一个负值，则会把单词之间的距离拉近。设置文字修饰text-decoration属性是用来对文字进行修饰的。该属性有5个可选值，分别是：none、underline、overline、line-through和blink。underline表示对元素加下划线，就像HTML中的标签<u>一样。overline的作用恰好相反，会在文本的顶端画一个上划线。line-through则表示在文本中间画一个贯穿线，等价于HTML中的<strike>标签。blink则会让文本闪烁。none会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。设置段落缩进把HTML页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。CSS提供了text-indent属性，该属性可以方便地实现文本的段落缩进。设置背景颜色设置背景颜色，是HTML页面中最经常需要用到的功能。可以使用background-color属性为元素设置背景色。这个属性接受任何合法的颜色值。该属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。设置背景图片要把图像作为背景，就需要使用background-image属性。该属性的默认值是none，表示背景上没有放置任何图像。元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。设置重复背景图片如果需要在页面上对背景图像进行平铺，可以使用background-repeat属性。而且根据background-repeat的值，图像可以无限平铺、沿着某个轴（x轴或y轴）平铺或者不平铺。该属性的属性值repeat导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。属性值repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。设置背景图片位置可以利用background-position属性改变图像在背景中的位置。为background-position属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right和center。通常，这些关键字会成对出现。此外，还可以使用长度值，例如100px或5cm，最后也可以使用百分数值。设置边框样式在HTML中，使用表格来创建文本周围的边框，但是通过使用CSS边框属性，可以创建出效果出色的边框，并且可以应用于任何元素。样式是边框最重要的一个方面，这不是因为样式控制着边框的显示，而是因为如果没有样式，将根本没有边框。CSS中的border-style属性定义了边框的样式。设置边框宽度通过border-width属性可以为边框指定宽度。该属性为边框指定宽度有两种方法：可以指定长度值，例如2px或0.1em，或者使用3个关键字之一，分别是thin、medium（默认值）和thick。除了使用border-width属性直接设置边框全部边的宽度之外，还可以使用border-top-width、border-right-width、border-bottom-width和border-left-width分别设置边框各边的宽度。设置边框颜色设置边框颜色非常简单。CSS使用border-color属性一次可以接受最多4个颜色值。该属性可设置一个元素的所有边框中可见部分的颜色，也可以为4个边分别设置不同的颜色。设置边距和填充设置边距的最简单的方法就是使用margin属性。该属性接受任何长度单位，可以是像素、英寸、毫米或em。该属性可以有1到4个值。一个属性表示元素所有外边距的宽度，4个属性则分别表示各边上外边