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

随机推荐

typescript之初学习
ts的优势: 支持ES6规范强大的IDE支持(类型检测.语法提示.重构等) Angular的开发语言 ts的新特性: 一.字符串 1.多行字符串,使用反引号`` 2.字符串模板,使用表达式传入变量和 ...
关于Java 去除空格，换行的代码
public static String replaceBlank(String str) { String dest = ""; if (str != null) { //Pat ...
Linux指令压缩与解压
打包: 格式:tar -cvf 压缩后的名称.tar 压缩的文件1 压缩的文件2 ```压缩的文件n(压缩多个文件为一份时各个文件以空格隔开) 例子:tar -cvf tomcats.tar ...
依赖注入[8]: .NET Core DI框架[服务消费]
包含服务注册信息的IServiceCollection对象最终被用来创建作为DI容器的IServiceProvider对象.当需要消费某个服务实例的时候,我们只需要指定服务类型调用IServicePr ...
最小可用id
题目:在非负数组(乱序)中找到最小的可分配的id(从1开始编号),数据量10000000. 题目解读:在一个不重复的乱序的自然数组中找到最小的缺失的那个数,比如1,2,3,6,4,5,8,11.那么最 ...
SpringBoot 集成 Swageer2
添加Maven依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox ...
如何解决http请求返回结果中文乱码
如何解决http请求返回结果中文乱码 1.问题描述 http请求中,请求的结果集中包含中文,最终以乱码展示. 2.问题的本质乱码的本质是服务端返回的字符集编码与客户端的编码方式不一致. 场景的如服务 ...
被BAT疯抢的工程师，都是怎么拿到50万年薪Offer的？
许多工程师换工作常会出现这种情况:工作能力和潜力都不错,却在面试时无法充分地表现自己,铩羽而归.据拉勾数据调研显示,约有80%的工程师简历通不过初筛,进入终面的不到5% . 技术面试到底应该如何准备? ...
Java进阶——带你入门分布式中的Nginx
如何实现服务器之间的协同功能呢? 通过 Nginx 提供的反向代理和负载均衡功能,可以合理的完成业务的分配,提高网站的处理能力:同时利用缓存功能,还可以将不需要实时更新的动态页面输出结果,转化为静态网 ...
Python内置函数(42)——memoryview
英文文档: class memoryview(obj) memoryview objects allow Python code to access the internal data of an o ...

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

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

随机推荐

热门专题