發表於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 如何顯示