CSS构造颜色、背景与图像

  1. 设定颜色
  2. 背景使用
  3. 图像使用

    1.设定颜色

    红色的几种合法定义;

        #f00;

        #ff0000;

        Red;

        Rgb(255,0,0);

        Rgb(100%,0%,0%);

     

    2.十六进制三元组

     

        第一个字节:红色的值;

        第二个字节:绿色的值;

        第三个字节:蓝色的值;

        简化写法:#cccccc 可写成 #ccc, #ff6633可以写成 #f63

     

    3.使用17种具名颜色

        黑色(black)     000000

        藏蓝色(navy) 000080

        绿色(green) 008000

        海蓝色(teal) 008080

        银色(silver)     0c0c0c

        蓝色(blue) 0000ff

        酸橙色(lime) 00ff00

        浅绿色(aqua) 00ffff

        绛紫色(maroon) 800000

        紫色(purple) 800080

        橄榄绿(olive) 808000

        灰色(gray)        808080

        红色(red)            ff0000

        紫红色(fuchsia) ff00ff

        黄色(yellow)        ffff00

        橙色(orange)        ffa500

        白色(white)        ffffff

     

    4.使用span更好的控制文本中局部区域的文本

        <span>文本内容</span>

     

  4. 使用display属性提供区块转换

    inline 转换成内联,

    block 转换成区块,

    none 不占位的隐藏

     

    6.背景图象渐变的制作

        Body {

            Background: #ccc url(bg.gif) repeat-x;

    }

     

    7.给一个区块加上一个背景

        #branding {

            Width: 700px;

            Height: 200px;

            Background: url(branding.gif) no-repeat;

    }

     

    8.给标题加上一个小图标

        H1 {

            Padding-left: 20px;

            Background: url (bullet.gif) no-repeat left center;

    }

    如果希望使用百分比而不使用关键字,则 0 50%这样就实现了垂直居中

     

    9.圆顶角

        <div class="box">

            <h2>Headline</h2>

            <p>Content</p>

        </div>

     

        .box {

            Width: 418px;

            Background: #ccc url(bottom.gif) no-repeat left bottom;

    }

     

    .box h2 {

        Background:url(top.gif) no-repeat left top;

    }

     

    如果不希望碰到边界,加上填充.

    .box h2 {

        Padding:10px 20px 0 20px;

    }

    .box p {

        Padding:0 20px 10px 20px;

    }

     

    10.简单的CSS阴影效果

    <div class="img-wrapper">

    <img src="data:images/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard" />

    </div>

     

    .img-wrapper {

    background: url(images/shadow.gif) no-repeat bottom right;

    clear: right;

    float: left;

    position: relative;

    margin: 10px 0 0 10px;

    }

    .img-wrapper img {

    display: block; /*这个属性到列表再进行解释*/

    margin: -5px 5px 5px -5px;

    position: relative;

    }

上一篇:实数---Currency讲解


下一篇:Springboot学习记录1--概念介绍以及环境搭建