《Web前端开发》第5章 CSS常用样式.pptx

;5.1.1单位

CSS中常见的取值单位如表5-1所示。

;5.1.2颜色

CSS中常见的颜色值如表5-2所示。;5.1.2颜色

其中，网页呈现在发光媒介上，发光体的颜色是由红、绿、蓝三种基本颜色构成，即RGB三基色混合而成。如图5-1所示。;5.2文本与字体样式;1.文本居中对齐

文本水平居中设置text-align:center。单行文本垂直居中，可以设置line-height为父元素的高度。例如，页面有如下结构。

article

pweb前端开发课程/p

/article

设置段落文字垂直居中如图5-2所示，则CSS部分代码如下。

article{

background-color:#ccc;

height:40px;

}

p{

font-size:14px;

line-height:40px;/*等于父元素article高度*/

};5.2.1文本样式;5.2.2字体样式

CSS字体属性定义文本的字体系列、大小、加粗、斜体等，字体属性如表5-4所示。;其中：

（1）font-family属性需要注意。

①设置一系列字体，客户端第一项未安装导致无法显示则显示第二项字体，依此类推。

②中文字体名称有中英文两种，考虑到兼容性，可将字体中英文名称都列出来，例如。

font-family:MicrosoftYaHei,微软雅黑;

③当字体名包含空格和其他字符，需要在字体外加引号，单引号或双引号都可以。如果采用行内样式，则采用单引号，例如。

pstyle=font-family:MicrosoftYaHei,sans-serif;.../p

（2）font属性：属性值有先后顺序，字号与行高可用/分隔。;5.3背景样式;其中：

（1）背景颜色与背景图片同时设置时，背景图片覆盖背景颜色。

（2）重复填充的背景图片通常被处理为一个很小的图片，然后铺满整个元素。例如，背景图片宽1px，高30px，如图5-4（a）所示。背景图片横向铺满标题所在的区域，如图5-4（b）所示。代码如下。

#newstitle{

height:30px;

background:url(“images/title-bg.gif”)repeat-x;

};5.4超链接样式;例如，设置如图5-5所示的超链接状态，则代码如下。;5.5列表样式;1.list-style-position属性

list-style-position可以设置列表项标号可以位于列表区域之内或之外，如图5-6所示。;2.list-style-image属性

list-style-image可以将图片设置为列表项标号，增强页面效果，例如图片列表图标可以设???为，视频列表图标设置为。

例如，无序列表实现一组超链接，标号采用bullet.gif，如图5-6所示。;5.6表格样式;1.border-collapse属性

border-collapse：默认表格边框与单元格边框分开，将border-collapse属性取值设置为collapse则边框重合为一个。

（1）如下代码设置表格外边框实线，与单元格边框并重合，可以生成如图5-7（a）所示的表格。

table{

border:1pxsolid;

border-collapse:collapse;

}

（2）如下代码设置单元格和表格外边框，并重合，可以生成如图5-7（b）所示的表格。

table{

border-collapse:collapse;

}

td,th

{

border:1pxsolid;

} ;2.nth-child(n)选择器

:nth-child(n)选择器匹配该元素的其父元素的第n个子元素，不论元素的类型。tr:nth-child(odd|even)常设置表格隔行显示不同背景颜色，如图5-7所示，代码如下。;除基础样式外，表单还可以通过伪类进行样式设定。表单样式涉及的伪类如表5-9所示。;5.7表单样式