css基础知识精华篇

颜色

 

1.前景颜色

{color: # } #=rrggbb 为十六进制数字, 或颜色名:Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

<DIV STYLE="color:red">今天天气不错</DIV>

今天天气不错

2.背景颜色{background: # }#=rrggbb 为十六进制数字, 或颜色名:Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, 

99彩开户|99彩平台|http://99caipiao.com.cn/

99彩注册|99彩|http://99caiw.com/

Purple, Silver, Yellow, Aqua

<DIV STYLE="color:white; background:blue">
今天天气不错
</DIV>

今天天气不错

 

文本

1.文本修饰{text-decoration: # } #=none, underline, line-through

<DIV STYLE="text-decoration:none">今天天气不错</DIV>
<DIV STYLE="text-decoration:underline">今天天气不错</DIV>
<DIV STYLE="text-decoration:line-through">今天天气不错</DIV>

今天天气不错

今天天气不错

今天天气不错

2.文本对齐{text-align: # }#=left, center, right

<DIV STYLE="text-align:left">今天天气不错</DIV>
<DIV STYLE="text-align:center">今天天气不错</DIV>
<DIV STYLE="text-align:right">今天天气不错</DIV>

今天天气不错

今天天气不错

今天天气不错

3.空边{margin-left: # }{margin-right: # }{margin-top: # }{margin-bottom: # }#=margin size (px, pt, in, cm, %)

<DIV STYLE="margin-left:100pt; margin-right:100pt">
今天天气不错。
早在电视天气预报出现以前，人们就会用一种放在桌上的类似球状玻
璃瓶的装置来预报天气即将发生的变化。
</DIV>

今天天气不错。

99彩开户|99彩平台|http://99caipiao.com.cn/

99彩注册|99彩|http://99caiw.com/

早在电视天气预报出现以前，人们就会用一种放在桌上的类似球状玻 璃瓶的装置来预报天气即将发生的变化。

字的属性

字体 (Font Face)

{font-family: # }{font-family: #, #, ..., # } #=font name#=serif, sans-serif, cursive, fantasy, monospace

<FONT STYLE="font-family:楷体,仿宋">
今天天气不错
</FONT>

今天天气不错

大小

{font-size: # } #=font size (px, pt, in, cm, %)#=xx-small, x-small, small, medium, large, x-large, xx-large

<FONT STYLE="font-size:35pt">
今天天气不错
</FONT>今天天气不错 

字重

{font-weight: # } #=extra-light, light, demi-light, medium, demi-bold, bold, extra-bold

<FONT STYLE="font-weight:extra-light">今天天气不错</FONT><BR>
<FONT STYLE="font-weight:light">今天天气不错</FONT><BR>
<FONT STYLE="font-weight:demi-light">今天天气不错</FONT><BR>
<FONT STYLE="font-weight:medium">今天天气不错</FONT><BR>
<FONT STYLE="font-weight:demi-bold">今天天气不错</FONT><BR>
<FONT STYLE="font-weight:bold">今天天气不错</FONT><BR>
<FONT STYLE="font-weight:extra-bold">今天天气不错</FONT><BR>今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错

物理字体

{font-style: # } #=normal, italic

<FONT STYLE="font-style:normal">今天天气不错</FONT><BR>
<FONT STYLE="font-style:italic">今天天气不错</FONT><BR>今天天气不错今天天气不错

行距

{line-height: # } #=line height (px, pt, in, cm, %)

<DIV STYLE="line-height:24pt">
今天天气不错<BR>
明天也应该不错<BR>
后天....
</DIV>

今天天气不错明天也应该不错后天....

属性集合

{font: font-wight font-style font-size/line-height font-family}

<DIV STYLE="font: bold italic 18pt/24pt 'Times New Roman'">
今天天气不错<BR>
明天也应该不错<BR>
后天....
</DIV>

今天天气不错明天也应该不错后天....图象

1.背景图象图象例子 (back.gif) --->

{background: URL(#) }#=image-url

<DIV SIZE=5 STYLE="

99彩开户|99彩平台|http://99caipiao.com.cn/

99彩注册|99彩|http://99caiw.com/

background: URL(back.gif)">
今天天气不错。
早在电视天气预报出现以前，人们就会用一种放在桌上的类似球状玻
璃瓶的装置来预报天气即将发生的变化。
</DIV>

今天天气不错。 早在电视天气预报出现以前，人们就会用一种放在桌上的类似球状玻 璃瓶的装置来预报天气即将发生的变化。

2.背景重复

{background: URL(image-url) # }#=repeat, no-repeat, repeat-x, repeat-y

<TABLE WIDTH=200 HEIGHT=100 BORDER
STYLE="background: URL(back.gif) repeat">
<TR><TD>
今天天气不错
</TABLE>

 

今天天气不错    

 

<TABLE WIDTH=200 HEIGHT=100 BORDER STYLE="background: URL(back.gif) no-repeat"> ....

 

今天天气不错    

 

<TABLE WIDTH=200 HEIGHT=100 BORDER STYLE="background: URL(back.gif) repeat-x"> ....

 

今天天气不错明天也应该不错    

 

<TABLE WIDTH=200 HEIGHT=100 BORDER STYLE="background: URL(back.gif) repeat-y"> ....

 

今天天气不错    

 

3.背景位置

{background: URL(image-url) #1 #2}#1=%, left, center, right#2=%, top, middle, bottom

<TABLE WIDTH=200 HEIGHT=100 BORDER
STYLE="background: URL(back.gif) no-repeat 50% 50%">
<TR><TD>
今天天气不错
</TABLE>

 

今天天气不错    

 

<TABLE WIDTH=200 HEIGHT=100 BORDER STYLE="background: URL(back.gif) no-repeat left bottom"> ...

 

今天天气不错    

 

<TABLE WIDTH=200 HEIGHT=100 BORDER STYLE="background: URL(back.gif) no-repeat center middle"> ...

 

今天天气不错    

 

<TABLE WIDTH=200 HEIGHT=100 BORDER STYLE="background: URL(back.gif) no-repeat right top"> ...

 

今天天气不错    

样式的定义

 

样式群定义　

群定义可将样式一次定义给不同的元素（如：H1,H2,P...)

例：

<HEAD>
<STYLE TYPE="text/css">
H1, H2, H3 {font-family: Arial; font-size: 40pt; Color:red}
</STYLE>
</HEAD>
<BODY>
<H1>今天天气不错</H1>
<H2>今天天气不错</H2>
<H3>今天天气不错</H3>
</BODY>

样式多元定义同一元素

例：

<HEAD>
<STYLE TYPE="text/css">
H1.red {font-family: Arial; font-size: 40pt; Color:red}
H1.green {font-family: Times New Roman; font-size: 20pt; Color:green}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="red">今天天气不错</H1>
<H1 CLASS="green">今天天气不错</H1>
</BODY>

样式定义多元不同元素

例：

<HEAD>
<STYLE TYPE="text/css">
.red {font-family: Arial; font-size: 40pt; Color:red}
.green {font-family: Times New Roman; font-size: 20pt; Color:green}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="red">今天天气不错</H1>
<H2 CLASS="green">今天天气不错</H2>
<H1 CLASS="green">今天天气不错</H1>
</BODY>

样式定义超连接

A:link {PROPERTY: VALUE}A:visited {PROPERTY: VALUE}A:active {PROPERTY: VALUE}

例：

<HEAD>
<STYLE TYPE="text/css">
A:link {font-family: Arial; font-size: 40pt; Color:red}
A:visited {font-family: Arial; font-size: 20pt; Color:darkred}
</STYLE>
</HEAD>
<BODY>
<A href="back.html">返回</A><BR>
<A href="fore.html">前进</A>
</BODY>样式单的声明

样式单的声明　

例：{font-family: Arial; Color:red}

样式单声明的引用

三种方法：

超连接样式单声明文件

嵌入样式单

插入样式单

超连接样式单声明文件

1.样式单声明文件的内容 　

例：文件名 samp.css

H1 {font-family: Arial; font-size: 40pt; Color:red}
P {font-size:12pt; line-height:20pt}

2.样式单声明文件的引入

a.样式单声明文件的超连接引入　

例：

<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="samp.css">
</HEAD>
<BODY>
<H1>今天天气不错</H1>
<P>
早在电视天气预报出现以前，人们就会用一种放在桌上的类似球状玻
璃瓶的装置来预报天气即将发生的变化。
</P>
</BODY>

b. 嵌入样式单

例：

<HEAD>
<STYLE TYPE="text/css">
H1 {font-family: Arial; font-size: 40pt; Color:red}
P {font-size:12pt; line-height:20pt}
</STYLE>

99彩开户|99彩平台|http://99caipiao.com.cn/

99彩注册|99彩|http://99caiw.com/

</HEAD>
<BODY>
<H1>今天天气不错</H1>
<P>
早在电视天气预报出现以前，人们就会用一种放在桌上的类似球状玻
璃瓶的装置来预报天气即将发生的变化。
</P>
</BODY>