22 , 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 更好的控制文本中局部区域的文本

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

inline,block,none

6.背景图象渐变的制作

Body {

Background: #ccc url(bg.gif) rpeat-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.圆顶角

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

.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: -5px5px 5px -5px;

position: relative;

}

5使用 display 属性提供区块转换

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>使用 display 属性提供区块转换</title>

<style type="text/css">

	div {

		width: 200px;

		height: 200px;

		background: red;

		display: inline;

	}

	span{

		width: 200px;

		height: 200px;

		background: red;

		display:block;

	}

	/*

	block转换成区块

	inline转换成内联

	none不占位的隐藏

	*/

</style>

</head>

<body>

<div>使用 display 属性提供区块转换:区块转内联</div><br/><br/>

<span>内联转区块,使用 span 更好的控制文本中局部区域的文本</span>

</body>

</html>

　　6背景图象渐变的制作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>使用 display 属性提供区块转换</title>

<style type="text/css">

	Body {

Background: #ccc url(images/1.png) rpeat-x;

}

</style>

</head>

<body>

<div>背景图象渐变的制作</div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

</body>

</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>给一个区块加上一个背景</title>

<style type="text/css">

	div{

		width: 200px;

		height: 200px;

		background:red url(images/bg.jpg) no-repeat right bottom;

	}

</style>

</head>

<body>

<div>给一个区块加上一个背景</div>

</body>

</html>

　　8给标题加上一个小图标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>给一个区块加上一个背景</title>

<style type="text/css">

	H1 {

Padding-left: 20px;

Background:url(2.jpg) no-repeat left center;

}

</style>

</head>

<body>

<h1>给标题加上一个小图标</h1>

</body>

</html>

　　9圆顶角

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>给一个区块加上一个背景</title>

<style type="text/css">

	div{

		width:320px;

		height:180px;

		background:blue url(images/2.png) no-repeat left bottom;

}

	h1{

		background: url(images/3.png) no-repeat left top;

	}

</style>

</head>

<body>

<div>

<h1>圆顶角圆顶角圆顶角</h1>

<P>圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角</P>

</div>

</body>

</html>

　　10简单的 CSS 阴影效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>给一个区块加上一个背景</title>

<style type="text/css">

	body{

		background: #fff;

	}

	div{

		width:320px;

		height:180px;

		background:blue;

}

</style>

</head>

<body>

<div>

<img src="data:images/pic7.jpg"/>还没有学好

</div>

</body>

</html>

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

CSS构造颜色、背景与图像
设定颜色背景使用图像使用 1.设定颜色红色的几种合法定义; #f00; #ff0000; Red; Rgb(255,0,0); Rgb(100%,0%,0 ...
23 , CSS 构造列表与导航
1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: ...
CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
css构造块级元素
css 1. 宽高width:数值;height:数值;也可用百分比!长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparen ...
第 17 章 CSS 边框与背景[下]
学习要点: 1.设置背景主讲教师:李炎恢本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．设置背景盒模型的尺寸可以通过两种方式实现可见性, ...
第七十四节，css边框与背景
css边框与背景学习要点: 1.声明边框 2.边框样式 3.圆角边框本章主要探讨HTML5中CSS边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 声明边框边框的声明有三个属性设 ...
24, CSS 构造超链接
1. 超链接边框 2. 派生超链接 3. 属性选择器超链接 4. 动态超链接 5. 图像翻转超链接 6. CSS 工具提示 1.给链接加上边框 A:link { Color: #f00; Text-d ...
复习-css边框和背景属性
css边框和背景属性 border:所有边框属性 border-width:四条边框的宽度 border-style:设置边框样式,主要有dotted.solid.double border-colo ...
【CSS学习】--- 背景
一.前言元素的背景区域包括:元素的内容.内边距和边框区域. CSS中用于设置背景的属性有: background-color 设置背景颜色 background-image 设置背景图片 backg ...

随机推荐

算法与数据结构(六) 迪杰斯特拉算法的最短路径(Swift版)
上篇博客我们详细的介绍了两种经典的最小生成树的算法,本篇博客我们就来详细的讲一下最短路径的经典算法----迪杰斯特拉算法.首先我们先聊一下什么是最短路径,这个还是比较好理解的.比如我要从北京到济南,而 ...
再谈反向传播（Back Propagation）
此前写过一篇<BP算法基本原理推导----<机器学习>笔记>,但是感觉满纸公式,而且没有讲到BP算法的精妙之处,所以找了一些资料,加上自己的理解,再来谈一下BP.如有什么疏漏或 ...
[Swift]LeetCode955. 删列造序 II | Delete Columns to Make Sorted II
We are given an array A of N lowercase letter strings, all of the same length. Now, we may choose an ...
[Swift]LeetCode1000. 合并石头的最低成本 | Minimum Cost to Merge Stones
There are N piles of stones arranged in a row. The i-th pile has stones[i] stones. A move consists ...
Java Jvm运行机制原理
一:简介在学习Java虚拟机之前,也就是Jvm之前,我想大家能够带着问题去学习,这样的话,大家学习起来也会比较有所获! 1.Java虚拟机(Jvm)是什么? 2.Java虚拟机是用来干什么的? 3. ...
python批量启动多线程
还未了解多线程的请查看博文 python3多线程趣味详解 python3多线程趣味详解只是介绍了 python 多线程的使用,对于批量启动线程来说有些不适用,于是出现如下方法: 建立一个线程池,并将 ...
6.jQuery(实例)
1.开关灯效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
如何通过js调用接口
例如一个接口的返回值如下:var returnCitySN = {"cip": "221.192.178.158", "cid": &quo ...
BootStrap格栅系统
格栅参数分为超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) 栅格系统行为总是水平排列开始是 ...
redis 系列13 集合对象
一. 集合对象概述这里的集合是string类型的无序集合,在集合对象中集合成员是唯一的,这就意味着集合中不能出现重复的数据.集合是通过哈希表实现的,集合中最大的成员数为 232-1 (4294967 ...

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

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

随机推荐

热门专题