七彩课堂[企业建站知识系列]
CSS对网页样式的定义
   ■ 容器的概念:
   根据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%的位置摆放。

信息推荐
资讯中心 | 电子商务 | 搜索营销 | 设计学院 | 中医养生 | 养生保健 | 节日祝福 | 民俗文化 | 奇闻趣事
建站知识 | 人世百态 | 网站导航 | 传统节日 | 搜索热点 | 星座运势 | 趣闻轶事 | 祝福的话 | 短信大全
© 2023 QicaiSpace.Com