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="images/pic7.jpg"/>还没有学好
</div>
</body>
</html>

原文地址：https://www.cnblogs.com/liu-zhijun/p/10630177.html

时间： 2024-08-28 20:23:10

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

CSS构造颜色、背景与图像

设定颜色背景使用图像使用 1.设定颜色红色的几种合法定义; ????#f00; ????#ff0000; ????Red; ????Rgb(255,0,0); ????Rgb(100%,0%,0%); ? 2.十六进制三元组 ? ????第一个字节:红色的值; ????第二个字节:绿色的值; ????第三个字节:蓝色的值; ????简化写法:#cccccc 可写成 #ccc, #ff6633可以写成 #f63 ? 3.使用17种具名颜色 ????黑色(black)???? 000000 ?

22.CSS边框与背景【上】

第十七章 CSS边框与背景[上] 一.声明边框属性值说明 CSS版本 1.border-width 长度值设置边框的宽度(可选) 1 2.border-style 样式名称设置边框的样式(必选) 1 3.border-color 颜色值设置边框的颜色(可选) 1 //@charset "utf-8" div{

css 渐变颜色背景gradient 浏览器兼容

兼容当前五大浏览器的渐变颜色背景gradient的写法<style type="text/css" media="screen"> #gradient { width: 200px; height: 200px; /* 如果浏览器不支持渐变,使用图像作为背景 */ background: url(gradient.jpg); /* Webkit: Safari 4-5, Chrome 1-9 */ background: -webkit-gradient

23 , CSS 构造列表与导航

1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: 0; Padding:0; Width: 200px; List-style-image:url(images/list.gif); Line-height: 150%; } 3. 以背景图片作为项目列表图标 Ul { List-style-type:none; } Li { Background:

CSS基础（背景、文本、列表、表格、轮廓）

CSS 背景属性属性描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其余部分滚动. background-color 设置元素的背景颜色. background-image 把图像设置为背景. background-position 设置背景图像的起始位置. background-repeat 设置背景图像是否及如何重复. CSS 文本属性属性描述 color 设置文本颜色 directi

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

学习要点: 1.设置背景主讲教师:李炎恢本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．设置背景盒模型的尺寸可以通过两种方式实现可见性,一种就是之前的边框,还有一种就是背景. CSS 背景设置的样式表如下: 属性说明 CSS 版本 background-color 背景的颜色 1 background-image 背景的图片 1/3 background-repeat 背景图片的样式 1/3 background-size 背景图

第17章 CSS边框与背景（下）

第 17章 CSS边框与背景[下]学习要点:1.设置背景本章主要探讨 HTML5中 CSS边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观.一．设置背景盒模型的尺寸可以通过两种方式实现可见性,一种就是之前的边框,还有一种就是背景.CSS背景设置的样式表如下: 属性值说明 CSS版本background-color 颜色背景的颜色 1background-image none或 url 背景的图片 1/3background-repeat 样式名称背景图片的样式 1/3bac

23.CSS边框与背景【下】

第十七章 CSS边框与背景[下] 一.设置背景属性值说明 CSS版本 background-color 颜色背景的颜色 1 background-image none或url 背景的图片 1/3 background-repeat 样式名称背景图片的

CSS初识- 选择器 &背景& 浮动& 盒子模型

CSS初识 CSS:cascading style sheets,css样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. CSS以HTML为基础,提供丰富的功能,如字体.颜色.背景的控制及整体排版等,而且还针对不同的浏览器设置不同的样式. 引入CSS样式(书写位置) 内部样式表内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并用style标签定义,语法就是在行内式