CSS的引用

1. 
   显示申明
   
   //*样式定义结束*//
   
   


2. 
   内嵌
   
   style="font-size：48;font-style：bold;
   
   　　 color:red;">hongen
   
   
   


3. 
   css文件
   
   href=“style.css”> ……
   
   

CSS的语法

CSS样例：

a.externalLink {

 
color:Red

｝

CSS的组件：

l
       
Class ：某类元素：

l
       
ID ： 某个元素：

n
       
所有的class：

.genericImage { border-color: black; }

n
       
所有的ID：

#specificImage { border-style: dashed; }

n
       
img元素中的class：

img.genericImage { border-color: black; }

n
       
img元素中的id：

img# specificImage { border-style: dashed; }

n
       
指定元素：

u
     
p中包含的a

p a { color: Green; } 

u
     
任意p和a

p, a { color: Black; }

u
     
p中直接包含的a

p + a { color: Yellow; }

CSS属性

1. 
   字体 Font
   
   “font-style”、“font-variant”、“font-weight”、“font-size”、“font-family”
   
   
   

   bold 36pt,GlitzyCurl”>Leaf

   
   


2. 
   背景和颜色
   


3. 
   
   
   
   1. 
      Color
      
   
   
   2. 
      background
      
   
   
   
   
   
   
   • 
     
     
   
   
   • 
     url()
     
     
     
   
   
   • 
     repeat-x
     repeat-y no-repeat
     
     
     
   
   
   • 
     fix
     scroll
     
     
     
   
   
   • 
     < background-position>
     percentage length left right top bottom
     
     
     
   
   
   • 
     background：url（ss01038.jpg）no-reapeat
     
   
   
   
   


4. 
   文本属性
   


5. 
   
   
   
   1. 
      定义间距
      
   
   
   2. 
      
      
      
      1. 
         word-spacing letter-spacing : 单词 字母的间距。normal
         <长度>
         
         
      
      
      2. 
         text-decoration :
         
         
      
      
      3. 
         vertical-align: baseline sub super top text-top middle
         bottom text-top percentage
         
         
      
      
      4. 
         text-tranform: capotalize uppercase lowercase none
         
         
      
      
      5. 
         text-align: left right center justify
         
         
      
      
      6. 
         text-indent
         
      
      
      7. 
         line-height
         
         
      
      
      
      
   
   
   3. 
      链接: 伪元素
      
      　　　//*定义伪类元素（ａ：），大括号内定义了前景色属性和文本装饰属性，
      
      　　　hover加上‘font-size’属性目的是让鼠标激活链接时改变字体*//
      
      　　　a：link{color：green;text-decoration：none}
      
      
      　　　//*未访问时的状态，颜色为绿色(green)，文本装饰属性(text-decoration)值
      
      
      　　　为没有(none)*//
      
      　　　a：visited{color：red;text-decoration：none}
      
      
      　　　//*访问过的状态，颜色为红色(red)，文本装饰属性值为没有*//
      
      
      　　　a：hover{color：blue;text-decoration：overline;font-size：20pt}
      
      
      　　　//*鼠标激活的状态，颜色为蓝色(blue)，
      文本装饰属性值为上划(overline)，
      
      　　　字体大小为20pt*//
      
   
   
   
   


6. 
   容器属性




1. 边框: margin
   
   边距顺序是上、右、下、左 top right bottom left
   
   

   　　body{margin：1em
   2em 3em 4em}
   
   　　//*定义文本的上、右、下、左的边距分别为1、2、3、4em*//

   
   


2. 填充距：padding


3. 边框：border




1. 宽度：border-top-width border-width ... thin medium think length


2. 颜色：border-color


3. style：none dotted dash solid double groove ridge inset outset




4. 图文混排：








1. width height：length / percentage /auto
   
   


2. float ： left/ right /none 漂浮
   
   


3. clear: left /right / none / both 是否允许环绕
   
   






7. 项目符号和编号




1. 
   Display
   定义是否显示 
   Block、inline、list-item、none


2. 
   White-space
   怎样处理空白
   Normal、pre、nowrap


3. 
   List-style-type
   加项目编号
   Disc、circle、square等


4. 
   List-style-image加图案|none


5. 
   List-style-position
   第二行起始位置
   Inside、outside


6. 
   List-style
   一次定义列表||





8. 
   鼠标：
   Auto  Crosshair Default Hand Move e-resize Ne-resize Nw-resize n-resize Se-resize Sw-resize s-resize w-resize Text Wait Help

定位

1. position 定义位置 absolute relate static
   
   


2. left top width height 坐标
   
   


3. clip 剪切 shape auto
   
   


4. overflow 内容超出部分的处理 visible hidden scroll auto
   
   


5. z-index auto | integer
   
   


6. visibility inherit visible hidden