网页设计课件ch11css的属性

第11章 CSS的属性,11.1 设置字体样式 11.2 控制图文布局 11.3 颜色及背景 11.4 美化网页与超链接的设置 11.5 CSS定位,11.1 设置字体样式,11.1.1 字体属性font-family,利用CSS的font-family属性，设置要使用的字体 语法： font-family:,., 对比：font的face属性,说明： 浏览器将在字体列表中依次寻找有效字体。若浏览器完全找不到指定的字体时，则使用默认字体。 应该将一种常见的字体列在字体列表的最后。 在对英文字体进行设置时，如果两个英文单词之间有空格时必须使用单引号（'）或双引号（“）。,利用font-style属性，达到字体风格的变化。 语法： font-style:normal|italic|oblique 对比：标签 font-style参数值说明,11.1.2 字体风格font-style,11.1.3 字体变形font-variant,语法： font-variant:normal|small-caps font-variant参数值说明,11.1.4 字体加粗font-weight,在HTML里，可以利用标签，将文字设置为粗体。在CSS内，则可利用font-weight属性，设置字体的粗细。 语法： font-weight:normal|bold|bolder|lighter| 100|200|300|400|500|600|700|800|900 font-weight参数值说明,利用HTML的标签只能设定7种字号，在CSS中可以使用font-size属性对文字的字号进行随心所欲的设置。 语法： font-size:| |,11.1.5 字号的控制font-size, 绝对尺寸可以使用的单位有： in（英寸）、cm（厘米）、mm（毫米）、pt（磅）和px（像素）。,说 明,11, 用关键字来说明文字大小，共有7种关键字，相对应于HTML标签中所用的数字参数。这7种关键字如下： xx-small x-small small medium large x-large xx-large 利用这些参数，浏览器可以自由决定每一种关键字所适合的尺寸（在不同浏览器中它的大小是有区别的）。, 相对尺寸 相对尺寸只有两种larger和smaller。 smaller参数告诉浏览器将当前文字在关键字规格基础上“缩小一级”。而larger参数的作用与smaller相反。,说 明, 比例尺寸 还可以使用比例参数来设定文字大小，例如： pfont-size:15pt bfont-size:300% 这些规则的含义为：使所有包含在中的被标识的文字的尺寸为尺寸设定值的3倍，即45pt。比例参数常用于从母体对象继承参数值。,说 明,14,注意： 1在CSS中设置文字尺寸的单位很多，但有些浏览器对有些尺寸单位是不支持的 2Px(像素）单位所有的操作平台都支持它，但因为访问者的屏幕分辨率的不同，网页的显示将可能不稳定，字体可能大也可能小。 3Pt(磅)是确定文字尺寸最好的单位，因为它在所有的浏览器和操作平台上都适用。 4关键字这种尺寸单位在不同浏览器中它的大小是有区别的。 5低版本的浏览器不支持相对尺寸这种单位。,15,text-transform属性可以控制字母的大小写。 语法： text-transform:uppercase|lowercase| capitalize|none text-transform参数值说明如下,11.1.6 文字的更改 text-transform,16,text-transform参数值说明,17,语法： text-decoration:underline|overline| line-throungh|none text-decoration参数值说明,11.1.7 文字修饰 text-decoration,18,其中none参数也非常有用，它可以使链接的文字不以下划线的形式显示。 如，取消超级链接时带下划线的形式。 A:linktext-decoration:none A:activetext-decoration:none A:visitedtext-decoration:none,none参数,19,font属性，可以同时设置许多跟文字有关的属性。例如：字体、字体效果、字号、字体粗细等。 语法： font:font-family|font-style| font-variant|font-weight|font-size,11.1.8 字体属性font,20,说明： 可以同时设置多种属性。 属性与属性之间必须利用空隔隔开。 实例： pfont:bold 12pt/14pt 隶书,宋体 指定该段为bold（粗体）和隶书或宋体，12点大小，行高为14点。,11.1.8 字体属性font,21,11.2 控制图文布局,样式表中对图文布局的控制是指字符、单词和行与行之间是如何定位的，包括如何设定字与字之间、字母之间的距离，以及行距（垂直间距）、文字的对齐方式、边距、边框及浮动对象等。,22,11.2.1 设置字间距 及字母间距,语法： word-spacing:normal|长度单位 letter-spacing: normal|长度单位 说明： Word-spacing：设置英文单词之间的距离； letter-spacing：设置英文字母之间的距离。 两者可以使用前面讲到的任何一种长度单位。 如果使用normal参数，将按照浏览器默认设置显示。,23,11.2.2 设置行距line-height,语法： line-height:normal|数字|长度单位|比例 说明： 设置相邻两行的基准线之间的垂直距离。 （基准线就是英文小写字母如x，a的下阶线，但不包括诸如y，g等字母超过下阶线的部分）,24,实例： 用数字设定行距 bfont-size=12pt;line-height:2 表示将利用字号来确定行距，将字号乘以设定的参数值，即12X2=24，所以在本例中行高将是24点。 用长度单位设定行距 bline-height:11pt 用比例设定行距 bfont-size:10pt;line-height:140% 表示行距是文字的基准大小10pt的140%，即14pt。,25,语法： text-align:left|right|center|justify vertical-align:top|bottom|text-top| text-bottom|baseline|middle|sub|super,11.2.3 文字对齐,26,说明： text-align属性用于文字的水平对齐，但这项属性只用于整块的内容，如、到和等。 text-align参数值说明,27, vertical-align属性用于控制文字或其他网页对象相对于母体对象的垂直位置。 vertical-align参数值说明,28,11.2.4 首行缩进属性 text-indent,首行缩进属性用来指定段文字的第一行文字缩进的距离，而浏览器的默认值不缩进。 语法： text-indent:数字|百分比 说明： 在IE浏览器中使用比例参数时，是相对于整个浏览器窗口的宽度，而不是相对于段落的宽度。,11.3 颜色及背景,30,11.3.1 颜色属性color,语法： color： 实例： h1color:blue h2color:#000080,31,利用backgroud-color属性设置背景颜色。 语法： background-color：|transparent（透明） 说明：初始值为transparent（透明）。 实例： bodybackground-color:white h1background-color:#000080,11.3.2 背景颜色属性,32,11.3.3 背景图像属性,在CSS里，可利用background-image属性，将网页背景以图片的方式显示。 语法： background-image：|none（无）,33,11.3.4 背景图片重复属性,设定一个指定的背景图片如何被重复。 语法： background-repeat：repeat| repeat-x|repeat-y|no-repeat,34,background-repeat 属性参数值说明,35,11.3.5 固定背景图片属性,设置指定的背景图片是跟随内容滚动，还是保持固定。 语法： background-attachment：scroll|fixed 说明： scroll表示滚动，fixed表示固定。初始值为scroll。,36,11.3.6 背景图片的位置属性,background-position设置背景图片的最初位置 这个属性只能应用于块级元素和替换元素(替换元素仅指一些已知原有尺寸的元素。HTML替换元素包括 IMG, INPUT, TEXTAREA, SELECT, 和 OBJECT。) 语法： background-position：|,37, 以百分比方法设置 background-position属性的语法如下： background-position：x% y% 其中x%代表设置图片的水平位置；y%代表图片的垂直位置。初始值为0% 0%。 实例： Pbackground-position:70% 50%;repeat-y;url(picsky.jpg) 表示背景图片的水平位置为70%，垂直位置为50%。,38, 以长度单位设置 background-position属性的语法如下： background-position：x y 使用长度单位可以对背景图片的位置作出更精确的控制，可以设定水平和垂直定位起点。 实例： background-position:70px 10px;url(picsky.jpg) 表示从左起70像素、垂直10像素的位置开始显示图像。,39, 以关键字设置 background-position属性的语法如下： background-position： top|center|bottom|left|center|right （注：|表示或的意思，|表示二者同时使用， 表示可搭配使用） 实例： background-position:right top;url(picsky.jpg),40,11.3.7 背 景,语法：background： 允许值：| 初始值：未定义 以下是一些背景的声明： bodybackground:white url(tree.jpg) h1background:#7fffd4 pbackground:url(tree.jpg) #f0f8ff fixed tablebackground:#0c0 url(tree.jpg) no-repeat bottom right,11.4 美化网页与 超链接的设置,42,11.4.1 网页链接属性anchor,在CSS里，可以通过网页链接属性anchor来设置网页链接文字的效果。,网页链接属性anchor语法说明 a:link 尚未链接过的超链接文字的样式。 a:visited 已链接过的超链接文字的样式。 a:active 当鼠标点击超链接后，超链接文字所显示的样式。 a:hover 当鼠标移到超链接文字上方时， 超链接文字所显示的样式。,43,11.4.2 设置滚动条属性 scrollbar,在CSS里，可以通过滚动条属性scrollbar来美化滚动条。,44,滚动条scrollbar的参数说明,45,11.4.3 光标属性的 设置cursor,光标属