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;

    }

CSS构造颜色、背景与图像的更多相关文章

  1. 22 , CSS 构造颜色、背景与图像

    1. 设定颜色 2. 背景使用 3. 图像使用 1.设定颜色 红色的几种合法定义; #f00; #ff0000; Red; Rgb(255,0,0); Rgb(100%,0%,0%); 2.十六进制三 ...

  2. 23 , CSS 构造列表与导航

    1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: ...

  3. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  4. css构造块级元素

    css 1. 宽高width:数值;height:数值;也可用百分比!长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparen ...

  5. 第 17 章 CSS 边框与背景[下]

    学习要点: 1.设置背景 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一.设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...

  6. 第七十四节,css边框与背景

    css边框与背景 学习要点: 1.声明边框 2.边框样式 3.圆角边框  本章主要探讨HTML5中CSS边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 声明边框 边框的声明有三个属性设 ...

  7. 24, CSS 构造超链接

    1. 超链接边框 2. 派生超链接 3. 属性选择器超链接 4. 动态超链接 5. 图像翻转超链接 6. CSS 工具提示 1.给链接加上边框 A:link { Color: #f00; Text-d ...

  8. 复习-css边框和背景属性

    css边框和背景属性 border:所有边框属性 border-width:四条边框的宽度 border-style:设置边框样式,主要有dotted.solid.double border-colo ...

  9. 【CSS学习】--- 背景

    一.前言 元素的背景区域包括:元素的内容.内边距和边框区域. CSS中用于设置背景的属性有: background-color 设置背景颜色 background-image 设置背景图片 backg ...

随机推荐

  1. spring 异常管理机制

    三.异常处理的几种实现: 3.1.在经典的三层架构模型中,通常都是这样来进行异常处理的: A.持久层一般抛出的是RuntiomeException类型的异常,一般不处理,直接向上抛出. B.业务层一般 ...

  2. VMware 11完全安装Mac OS X 10.10

    本文已迁移到我的个人网站 http://www.wshunli.com 文章地址: http://www.wshunli.com/2016/03/17/VMware-12安装Mac-OS-X-10-1 ...

  3. P143、面试题25:二叉树中和为某一值的路径

    题目:输入一棵二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.从树的根结点开始往下一直到叶结点所经过的结点形成一条路径.二叉树结点的定义如下:struct BinaryTreeNode ...

  4. poj 1426 Find The Multiple( bfs )

    题目:http://poj.org/problem?id=1426 题意:输入一个数,输出这个数的整数 倍,且只有0和1组成 程序里写错了一个数,结果一直MLE.…… #include <ios ...

  5. java.lang.ClassNotFoundException: javax.persistence.EntityListeners

    Exception in thread "main" java.lang.NoClassDefFoundError: javax/persistence/EntityListene ...

  6. ORACLE【1】:触发器详解

    转自:http://blog.csdn.net/indexman/article/details/8023740 ORACLE PL/SQL编程之八: 把触发器说透 本篇主要内容如下: 8.1 触发器 ...

  7. Java 简单登录MVC

    构建一个简单的基于MVC模式的JavaWeb 零晨三点半了,刚刚几个兄弟一起出去吼歌,才回来,这应该是我大学第二次去K歌,第一次是大一吧,之后每次兄弟喊我,我都不想去,因为我还是很害怕去KTV,或许是 ...

  8. 【转】特斯拉CEO马斯克:关于创业的几件重要事情

    特斯拉电动汽车联合创始人兼CEO,私人太空发射公司SpaceX CEO伊隆马斯克(Elon Musk)于5月16日在南加大商学院毕业典礼上发表演讲,他谈到了关于创业的几件重要的事情:一是努力工作;二是 ...

  9. SharePoint2010 自定义代码登录方法

    转:http://yysyb123.blog.163.com/blog/static/192050472011382421717/ SharePoint2010 自定义代码登录方法 (自定义Form验 ...

  10. [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.5.9

    (Schur's Theorem) If $A$ is positive, then $$\bex \per(A)\geq \det A. \eex$$ Solution. By Exercise I ...