脚本巴巴 www.jiaoben88.com

CSS常用属性和值

发布时间:2014-09-13 17:06:27编辑:脚本巴巴

  css常用属性和值(思维导图总结)

  1.字体


<html>
  <head>
    <title>font</title>
    <style>
      h1{
       font-family:times,courter;
       font-size:150%
       font-style:italic;
       font-variant:normal;
       font-weight:normal;
      }
      h2{
       font-family:serif,times;
       font-size:1cm;
       font-style:normal;
       font-variant:small-caps;
       font-weight:900;
      }
      p{
       
       font:oblique small-caps bold 1cm sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>this is header one</h1>
    <h2>this is header two</h2>
    <p>this is a paragraph </p>
  </body>
</html>

  运行结果:

  2.文本


<html>
  <head>
    <title>text</title>
    <style>
       h1{
        letter-spacing:-3px;
        text-align:right;
        text-decoration:overline;
       }
       h2{
        letter-spacing:0.5cm;
        text-align:center;
        text-decoration:line-through;
       }
       p{
        text-align:left;
        text-decoration:underline;
        text-indent:1cm;
        text-transform:lowercase;
       }
       a{
        /*去掉链接下划线*/
        text-decoration:none;

        text-indent:0.8cm;
        text-transform:uppercase;
       }

    </style>
  </head>
  <body>
    <h1>this is header one</h1>
    <h2>this is header two</h2>
    <p>this is a paragraph </p>
    <a href="http://www.baidu.com">baidu</a>
  </body>
</html>

  运行结果:

  3.背景

  由于博主懒的去找背景的素材,所以运行之后,丑的不堪入目,不过重点没有错误嘛,大家关注代码所对应的效果就好了。


<html>
  <head>
    <title>background</title>
    <style>
       body{
        background-color:yellow;
        background-image:url(a.png);
        background-repeat:repeat;
        background-attachment:fixed;
      }
       h1{
        background-color:green;
        background-image:url(bb.png);
        background-repeat:repeat-x;
        background-position:bottom;
       }
       h2{
        background-color:blue;
       }
       p{
        background-image:url(bb.png);
        background-repeat:no-repeat;
        height:100px;
        background-position:center;
       }
       a{
        background:red url(bb.png) no-repeat left center;
        padding:10px;
       }
b
    </style>
  </head>
  <body>
    <h1>this is header one</h1>
    <h2>this is header two</h2>
    <p>this is a paragraph </p>
    <a href="http://www.baidu.com">aaaaaaaaaaaaaaaaa</a>
   


  </body>
</html>

  运行结果:

  这张截图有点,看起来乱七八糟的,但是根据代码来找效果,也是很快的。很容易搞明白,每一句代码的意思。url就是自己随便哦添加的路径,大家不必在意。

  4.边框(PS:加几句关于鼠标指针的代码)


<html>
  <head>
    <title>border</title>
    <style>
     div{
       width:80px;
       height:25px;
       border-style:solid dotted;
       cursor:move;
     }
     h1{
       border-style:solid double dashed inset;
       border-top-style:solid;
       border-right-style:double;
       border-bottom-style:dashed;
       border-left-style:inset;
       border-width:1px 2px 3px 4px;
       /*
       设置边框第二种方式:
       border-top-width:1px;
       border-right-width:2px;
       border-bottom-width:3px;
       border-left-width:4px;
       */
       border-color:red yellow green blue;
       cursor:wait;
     }
     h2{
       border:3px solid green;
       /*会覆盖上面的border设置*/
       border:1px dashed red;
       cursor:pointer;

     }
      
    </style>
  </head>
  <body>
    <div>
      aaaaaa
    </div>
    <h1>this is header one</h1>
    <h2>this is header two</h2>
  </body>
</html>

  运行结果:

  当鼠标移到三个边框上时,鼠标指针会发生相应变化:分别变成移动,等待,还有小手的状态。具体参考<style>标签内的代码。

  5.列表

<html>
  <head>
    <title>list</title>
    <style>
      
    </style>
  </head>
  <body>
    <ul style="list-style-type:none; list-style-image:url(bb.png)">
      <li>aaaaaaaaaaaaa</li>
      <li>aaaaaaaaaaaaa</li>
      <li>aaaaaaaaaaaaa</li>
      <li>aaaaaaaaaaaaa</li>
      <li>aaaaaaaaaaaaa</li>
      <li>aaaaaaaaaaaaa</li>
    </ul>
    <ol style="list-style-type:upper-roman">
      <li>aaaaaaaaaaaaa</li>
      <li>aaaaaaaaaaaaa</li>
      <li>aaaaaaaaaaaaa</li>
      <li>aaaaaaaaaaaaa</li>
      <li>aaaaaaaaaaaaa</li>
      <li>aaaaaaaaaaaaa</li>
    </ol>
  </body>
</html>

  运行结果:

  截图中所显示的两个列表分别是一个无序列表和一个有序列表。

  但是在以后的开发中,我们基本不会使用默认的图像,都是自定义列表前面的图像。style="list-style-type:none.这句代码就是将列表前的符号风格设置为空,然后我们就可以自行添加自己需要的图像了。

上一篇:CSS样式选择器
下一篇:用一张图告诉你 只会CSS远远不够

相关文章