发表于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}
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 如何显示