posts - 262,  comments - 221,  trackbacks - 0

【1】CSS的背景属性设置包括:


①背景颜色:background-color:可以使用名字、RGB模式、十六进制数表示
②背景图片:background-image:使用url{...}表示
③背景图片重复:background-repeat:可以设置水平重复、垂直重复、双向重复、不重复
④背景图片附着:background-attachment:可以设置黏着、滚动
⑤背景图片位置:background-position:可以设置左(上中下)、右(上中下)、中(上下),坐标、百分比

为了使用简便,我们可以使用background这个综合属性一次性设置所有属性:

body{
  background: yellow url{"logo.jpg"} repeat scroll center
}

注意我们必须按照上面介绍的①~⑤的顺序来定义

【2】CSS的文本属性设置包括:


①文本颜色:color:可以使用名字、RGB模式、十六进制数表示
②字符间距:letter-spacing:可以使用像素、厘米表示
③字母间距:word-spacing:可以使用像素、厘米表示
④每行间距:line-height:可以使用像素、厘米、百分比(相等于默认行宽)表示
⑤文本缩进:text-indent:可以使用厘米、百分比表示
⑥文本对齐:text-align:可以设置左对齐、右对齐、居中对齐、两端对齐
⑦文本强调:text-decoration:可以设置上划线、删除线、下划线、闪烁
⑧文本格式:text-transform:可以设置大写、小写、首字母大写

注意对文本的CSS定义不能像背景那样采用一站式定义,因为有很多属性的值都是同样形式的。

p.poem {
  color:red;
  letter-spacing:2px;
  word-spacing:0.1cm;
  line-height:200%;
  text-indent:none;
  text-align:center;
  text-decoration:underline;
  text-transform:capitalize
}

注意:CSS中对于文本属性的设置没有顺序的要求

【3】CSS的字体属性设置包括:
①字体类型:font-style:可以设置normal、italic、oblique
②字体粗细:font-weight:可以设置normal、bold、boler、lighter、数字
③字体大小:font-size:可以设置small、medium、large、百分比
④字体类型:font-family:可以设置一系列的字体名称

body{
    font-style: normal;
    font-weight:bold;
    font-size: 200%
    font-family: vendar
}

【4】CSS的边框属性设置包括:
CSS中边框的设置包括上、下、右、左四种设置,每种设置包括边框宽带、样式、颜色

①边框宽度:border-xxx-width:可以选择thin、medium、thick、数字表示
②边框样式:border-xxx-style:可以选择hidden、dotted、dashed、solid、dobule、groove、
                ridge、inset、outset
③边框颜色:border-xxx-color:可以选择名字、RGB模式、十六进制数

假如需要对边框的每个边都进行特别设置,可以使用border-top、border-bottom、border-right、border-left对各个边框进行一站式设置。

如果对每个边框的设置都一样,则直接使用border属性进行一次性设定即可。

table.tr{
   border-top: medium solid red;
   border-bottom: thin hidden;
   border-left: thick dotted yellow;
   border-right: 1cm inset blue
}

【5】CSS的边缘属性设置包括:
CSS中关于空白区的设置包括:上、右、下、左四个区域,提供了一个一站式设置的属性:margin

p{
   margin: 2cm 4cm 3cm 5cm
}

Note: Netscape and IE give the body tag a default margin of 8px. Opera does not! Instead, Opera applies a default padding of 8px, so if one wants to adjust the margin for an entire page and have it display correctly in Opera, the body padding must be set as well!


【6】CSS的填充属性设置包括:
CSS中关于填充区的设置包括上、右、下、左四个部分,并且提供了一个一站式设置属性:padding

在设置padding属性时,即可以指定一个值(即应用于各个边框),也可以指定二个值(即上、右,下和左和上、右一样),也可以指定全部四个值。

td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm}

注意:margin是设置HTML元素边框与页面之间的空白部分,而padding是设置HTML元素内容和HTML元素边框之间的空白部分

【7】CSS的表格属性设置包括:
①表格边框样式:border-collapse:是用单竖线还是标准的HTML样式显示表格边框
②表格边框距离:border-spacing:设置分离表格边框的距离,仅对separated border样式有用
③表格标题对齐:caption-side:可以设置top、bottom、left、right
④空单元格是否显示:empty-cells:可以设置show、hide
⑤单元格大小自适应:table-layout:可以设置auto、fixed.

注意:如果table-layout的值为fixed,则超出单元格长度的内容将被截取

table{
 
   border-collapse:collapse;
   border-sapcing: 10px, 50px;
   caption-side: bottom;
   empty-cells: show;
   table-layout: auto
}


【8】CSS的维度属性设置:
①宽度:width
②高度:height
③最大宽度:max-width
④最大高度:max-height
⑤最小宽度:min-width
⑥最小高度:max-height

注意:CSS中关于height与width的设置会覆盖原有的element的height和width设置

【9】CSS的分类属性设置包括:
CSS的分类属性允许你设置如何显示一个HTML元素,设置如何将图像放置在文本的周围,使用绝对位置、相对位置放置一个元素,如何控制元素的显示或隐藏。

①清除漂浮元素:clear:清除指定元素周围的漂浮元素
②鼠标形状:      cursor:可以选择多种鼠标的形状
③显示属性:      display:可以选择多种显示属性,例如指定表格的表头/脚、行、列、单元格
④漂浮属性:      float:设置文本和图片如何周围的元素的位置关系
⑤元素定位:      position:可以使用相对、绝对、固定属性
⑥可见性设置:   visibility:可以选择可见、隐藏

在这些属性中,比较常用的就是display、float、visibility属性。使用这三个属性可以定制出类似水平、垂直菜单,图文混排的效果。

<style type="text/css">

img {
    display:inline;
    visibility: visible
    float:right;
    border:1px dotted black;
    margin:0px 0px 15px 20px;
}

</style>

【10】CSS的方位属性设置包括:
①方位:     left/righ/top/bottom:设置元素的位置,可以使用相对位置(如:-20px)
②决定位置:position: 设置方位的基准,可以选择绝对、相对、固定
③溢出处理:overflow:设置溢出时可见、隐藏、滚动、自动调整
④Z轴位置: z-index:设置当存在多个重叠元素时,显示的优先级

注意:positiion属性经常和方位属性搭配使用,指明在某一方位上的相对位置设置

<style type="text/css">
h2.pos_left {
    position:relative;
    left:-20px
}
h2.pos_right {
    position:relative;
    left:20px
}
</style>

注意:当元素的overflow属性设置为hidden时,一旦元素的内容超过其显示区域将被截取

注意:z-index的默认值是0,数值越小表示在显示越在底层。这一点可以用于透明背景设置



-------------------------------------------------------------
生活就像打牌,不是要抓一手好牌,而是要尽力打好一手烂牌。
posted on 2008-08-17 10:56 Paul Lin 阅读(1105) 评论(0)  编辑  收藏 所属分类: Web基础

只有注册用户登录后才能发表评论。


网站导航:
 
<2008年8月>
272829303112
3456789
10111213141516
17181920212223
24252627282930
31123456

常用链接

留言簿(21)

随笔分类

随笔档案

BlogJava热点博客

好友博客

搜索

  •  

最新评论

阅读排行榜

评论排行榜