WEB应用开发工程师 7CSS样式表.ppt

CSS属性－背景例 html headtitle背景附着属性 background-attachment/title style type=text/css body {background-image: url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed} /style /head body p这个HTML使用了CSS的background-attachment属性， 将背景图片固定，不随内容滚动而滚动。p p背景附着(background-attachment)属性有两个值。一个是scroll， 表示随内容滚动而动；一个是fixed，表示固定不动，不受内容滚动影响。 缺省值是scroll。/p pbackground-attachment要和background-image一起用/p …… /body /html CSS属性－颜色与背景 例 背景图案的显示效果 CSS属性－边框 属性名称 属性含义 属性值 Border-style 边框样式 none、solid实线、dotted点线、dashed虚线、double双实线、groove边缘凹陷 、ridge边缘凸起 、inset实现元素内凹效果的边框 、outset实现元素凸出效果的边框 。 Border-color 边框颜色 颜色 Border-width 边框宽度 in、cm、mm、pt（点）、px（像素） 边框名： 边框名：宽度 风格 颜色 Border 边框设置 Border-top 上边框设置 Border-right 右边框设置 Border-bottom 下边框设置 Border-left 左边框设置 CSS属性－边框 例 html head titleCSS边框属性/title style type=text/css !-- h1{border-top:blue solid 10pt; border-bottom:blue solid 10pt;} p{font-size: 20pt ; border:dashed red } -- /style /head body h1边框属性/h1 pWhere there is a will, there is a way./p /body /html CSS属性－设计超链接显示 在CSS中，可以为不同状态的超链接设置不同的显示属性，可设置的样式如下： a:link：未访问过的超链接文字的样式。 a:visited：已访问过的超链接文字的样式。 a:active：鼠标单击时超链接文字的样式。 a:hover：鼠标移动到超链接上方时超链接文字的样式。 可以为超链接文字设置颜色、字体等属性，改变显示效果。 CSS属性－设计超链接显示 例 html head title超链接属性设置/title style type=text/css !-- a:link {color: blue} /* 未被访问的链接 蓝色 */ a:visited {color: red} /* 已被访问过的链接 红色 */ a:hover {color: yellow} /* 鼠标悬浮在上的链接 黄色 */ a:active {color: green} /* 鼠标点中激活链接 绿色 */ -- /style /head body a href = 新浪网站/a brbrbr a href = /百度网站/a /body /html CSS属性 - 设置滚动条属性 属性 含义 scrollbar-3d-light-color 滚动条亮边框颜色 scrollbar-highlight-color 滚动条3D界面的亮边颜色 scrollbar-face-color 滚动条3D表面的颜色 scrollbar-arrow-color 滚动条方向箭头的颜色 scrollbar-shadow-color 滚动条3D界面的暗边颜色 scrollbar-dark-shadow-color 滚动条暗边框颜色 scrollbar-base-color 滚动条基准颜色 CSS定位 CSS用于定位的属性有： position：定位方法 取值“absolute”是绝对定位，取值“relative”是相对定位。 left和top： 指定网页元素最左边和最上边的位置。 width和height：指定宽度和高度。 overflow：指定显示内容超出时的处理方式。