CSS样式表 HTML

发表于2008年08月18日 00:12 阅读(0) 评论(0)

 

一样式表使用
1.    使用嵌入式样式表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
p{color:red}
h1{color:yellow}
div{color:green}
span{color:blue}
</style>
<title>无标题文档</title>
</head>
<body>
<p>
p
<h1>
h1
<div>div<span>span</sapn></div>
</h1>
</body>
</html>
2.    使用内联样式表：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<p style="text-decoration:overline; color:#FF0000" >
my red overline
</body>
</html>
3.    使用引用外部样式表放在<head>中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
@import url(mycss02.css);
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
body
<p>p</p>
<h1>h1</h1>
<div>div</div>
<span>span</span>
</body>
</html>
css文件
body{
color:#00FFFF;
background-color:#FFFFCC;
}
h1{
color:#FF0000;
background-color:#FFFFFF;
}
p{
color:#00FF00
}
div{
color:#0000FF
}
span{
color:#FFFF00
}
4.    使用链接外面样式表放在<head>中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="mycss02.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
body
<p>p</p>
<h1>h1</h1>
<div>div</div>
<span>span</span>
</body>
</html>
5.    使用类
CSS文件
div.classA{
color:#FF0000;
}
div.classB{
color:#0000FF;
}
XML文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="cssclass.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="classA">
classA red
</div>
<div class="classB">
classB blue
</div>
</body>
</html>
二样式表属性
1.    文本
       1-    text-indent             缩进块文本的首行              10px
       2-    text-transform        控制文本大小写
              none                            无
              capitalize               每单词首字母大写
              uppercase                     所有字母大写
              lowercase                     所有字母小写
              inherit                   和前面的文本相同
       3-    text-align               对齐方式
              left,center,right,inherit(与前面相同)
       4-    text-decoration       增加文本装饰
none       ; 无 underline; overline;blink; 文本内亮 line-through; 删除线 inherit;与前面相同
       5-    letter-spacing         字母间的空白
              nomal;  inherit;  10px
2.    颜色与背景
       1-    color
       2-    background-color
       3-    background-image
              background-image:URL(“logo.gif”)
       4-    background-repeat         背景图片的平铺方式
              repeat             横向和纵向平铺
              no-repeat        图片不重复
              repeat-x          横向平铺
              repeat-y          纵向平铺
       5-    background-attachment         图片在窗体的依附形式
              scroll;  fixed;   inhert
       6-    background-position      某一内容框的背景图片距离框左上角的位置
              top , center , bottom , left , right , inherit ,
长度单位或百分数
       7.    background    快捷属性，对以上属性的统一设置设
顺序要像以上一样
3.    字体
       1-    font-family     字体名称
              Times New Roman等
       2-    font-style        样式
              italic等
       3-    font-variant     设置为大写字母
              small-caps      小写
              normal ; inherit
       4-    font-weight     粗细程度  100 ~ 900
              normal = 400
              bold = 700
              bolder = 900
       5-    font-size         大小
              xx-small   x-small   small  medium  large  x-large  xx-large
       6-    font               快捷属性
4.    容器模型
       1-    margin-top  margin-right  margin-bottom  margin-left
       2-    margin           快捷属性
       3-    padding-top    padding-right  padding-bottom      padding-left
填充——容器元素距边框内部的空白区域
       4-    padding          快捷属性
       5-    border-top-width   border-right-width         border-left-width    border-bottom-width
       6-    border-width          快捷属性
       7-    border-top-color     border-right-color  border-bottom-color     border-left-color  
       8-    border-color          快捷属性
       9-    border-top-style  border-right-style  border-bottom-style border-left-style  边框样式
              none   hidden   dotted   dashed   solid   double  groove  ridge  insert  
              outset    inherit
       10-  border-style           快捷属性
       11-   border-top   border-right  border-bottom   border-left
可一次性设宽度，颜色，样式的快捷属性
       12-  border           快捷属性
四边所有属性,宽度，颜色，样式
5.    列表
       1-    list-style-type
无序       dic  circle   square
有序       decimal  decimal-leading-zero  lower-roman   lower-alpha  upper-alpha
       2-    list-style-image
       none   inherit   URL地址
       3-    list-style-position    列表标记的位置
       inside  outside  inherit
       4-    list-style
       type   position      image
6.    混合属性
       1-    display
       inline              内嵌如HTML中的 <i> <b>
       block             块如<h1>~<h7>  <p>
       list-item          列表项如  <li>
       2-    position          定位方法
       static       relative    相对所在元素的位置    absolute   相对浏览器边框    fixed
       3-    top   bottom    right left  和position 一起用，用来指定元素位置
       auto   inherit   及有效长度或百分数
       4-    height 和 width
指定容器元素的大小
       auto  inherit  px   %
       5-    float        位置在左边还是右边
       none   left  right  inherit
       6-    line-height       无素中文本的行间距
       normal   inherit   px  %   n(代表n倍)
       7-    visibility          元素的可见性
       visible    hidden   inherit
7.    设置链接属性
设置文件中链接的颜色和文本装饰
       1-    link         普通状态
       2-    hover      鼠标放到链接上
       3-    active      点击链接
       4-    visited     浏览器最近访问过该地址
              1:     各状态的颜色
              A:link {color:blue}
              A:hover {color:blue}
              A:active {color:blank}
              A:visited  {color:cyan}
              2:     去掉链接的下画线
              A:link {text-decoration:none}
              A: hover {text-decoration:none}
              A: active {text-decoration:none}
              A: visited {text-decoration:none}

///////////////////////////////////////////////////////////////////////

css 用来定义 html 如何显示