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, 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>

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

 

字的属性

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


c.插入样式单
例：

<BODY>
<H1 STYLE="font-family: Arial; font-size: 40pt; Color:red">今天天气不错</H1>
<P STYLE="font-size:12pt; line-height:20pt">
早在电视天气预报出现以前，人们就会用一种放在桌上的类似球状玻
璃瓶的装置来预报天气即将发生的变化。
</P>
</BODY>