CSS 的一些记录

sucn| 阅读:3375 发表时间:2005-08-09 经验技巧




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
     

任意pa

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. 背景和颜色




    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




  3. 文本属性




    1. 定义间距




      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





    2. 链接: 伪元素

         //*定义伪类元素(a:),大括号内定义了前景色属性和文本装饰属性,

         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*//





  4. 容器属性


    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 是否允许环绕




  5. 项目符号和编号



    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
      一次定义列表||




  6. 鼠标:
    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


*文章为原作者独立观点,不代表网站的立场
本文由网站发表并编辑,转载此文章须经作者同意,并请附上出处及本页链接。如有侵权,请联系本站删除。

友情连接