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 更好的控制文本中局部区域的文本
<span>文本内容</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.圆顶角
<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: -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 ...
随机推荐
- dijkstra算法解决单源最短路问题
简介 最近这段时间刚好做了最短路问题的算法报告,因此对dijkstra算法也有了更深的理解,下面和大家分享一下我的学习过程. 前言 呃呃呃,听起来也没那么难,其实,真的没那么难,只要弄清楚思路就很容易 ...
- muse-ui底部导航自定义图标和字体颜色
最近在鼓捣用vue.js进行混合APP开发,遍寻许久终于找到muse-ui这款支持vue的轻量级UI框架,竟还支持按需引入,甚合萝卜意! 底部导航的点击波纹特效也是让我无比惊喜,然而自定义图标和字体颜 ...
- Shell语言
1.shell脚本规范以.sh结尾 2.运行 3.赋予权限,查询shell的执行过程 输出时间的 输出日历 输出一年的日历 修改语言 计算机 read –t 3 –p “1111111111” # ...
- Devexpress Ribbon 动态生成菜单
/// <summary> /// 动态加载菜单 /// </summary> private void GetMenuBind() { //根据登录用户角色菜单动态创建 // ...
- [Swift]LeetCode80. 删除排序数组中的重复项 II | Remove Duplicates from Sorted Array II
Given a sorted array nums, remove the duplicates in-place such that duplicates appeared at most twic ...
- [Swift]LeetCode376. 摆动序列 | Wiggle Subsequence
A sequence of numbers is called a wiggle sequence if the differences between successive numbers stri ...
- redis 系列19 客户端
一. 概述 Redis服务器是可以与多个客户端建立网络连接,每个客户端可以向服务器发送命令请求,而服务器则接收并处理客户端发送的命令请求,并向客户端返回命令回复.通过使用I/O多路复用技术实现的文件事 ...
- C#版 - HDUoj 5391 - Zball in Tina Town(素数) - 题解
版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. HDUoj 5 ...
- C#版[击败98.85%的提交] - Leetcode717. 1比特与2比特字符 - 题解
版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...
- Java基础2：基本数据类型与常量池
本文会结合虚拟机对引用和对象的不同处理来介绍三大特性的原理. 三大特性:继承 封装 多态 继承 Java中的继承只能单继承,但是可以通过内部类继承其他类来实现多继承. public class Son ...