【WEB基础】HTML & CSS 基础入门(5)边框与背景
前面(HTML图片)
漂亮的网页肯定少不了边框与背景的修饰,本篇笔记就是说明如何为网页上的元素设置边框或者背景(背景颜色和背景图片)。
之前,先了解一下HTML中的图片元素,因为图片标签的使用非常简单,所以就插在这里说明一下。
HTML中的图片,我们只需要掌握它的标签写法以及它的三个属性就基本OK了。
写法格式:<img src="图像源文件的路径"/>
主要属性:
说明:图片<img/>标签跟段落<p></p>标签不太一样,<img/>是一个自闭合标签,不是成对出现的。另外,src属性指明的图片文件路径可以为相对路径也可以为绝对路径。
相对路径:以当前网页文件所在的文件夹为基准定位,如当前网页所在的文件夹里面有个images文件夹,该文件夹里有一张图片“风景1.jpg”,那么,这张图片的相对路径就是:“images/风景1.jpg”
绝对路径:绝对路径是指文件的完整路径,如:D:/学习/HTML/images/风景1.jpg。
另外,我们可以在CSS中使用width和height来定义图片的大小。这样,不管图片的实际大小是多少,我们都可以按照网页的实际需求来定义图片的显示大小。
一个例子:
<!DOCTYPE html>
<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">
/*设置ID为img1的图片的宽:80px;高:111px*/
#img1{width:80px;height:111px;}
</style>
</head>
<body><!--alt:图片未正常显示时提示文字,title:当鼠标移入图片时提示文字-->
<img src="data:images/汽车人1.jpg" alt="汽车人" title="擎天柱"/>
<img id="img1" src="data:images/汽车人1.jpg" alt="汽车人" title="擎天柱"/>
</body>
</html>
CSS 边框
我们可以为网页上的元素设置边框,比如图片、表格、文本块等等。要为某个元素加上边框,一般只需设置三个属性即可。
注意:上表中的三个属性写起来很麻烦,因此CSS提供了一个简洁的写法:
一个例子:
<!DOCTYPE html>
<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">
img
{ /*未采用简写方式,边框为红色虚线*/
border-width:2px;
border-style:dashed;
border-color:red;
}
span
{ /*采用简写方式,边框为绿色实线*/
border:2px solid green;
}
</style>
</head>
<body>
<img src="data:images/汽车人1.jpg" alt="擎天柱"/>
<span>左边是擎天柱</span>
</body>
</html>
CSS 背景
背景也是网页设计中最常用的样式之一,要想页面美观,漂亮的背景是必须的。在CSS中,主要通过背景颜色和背景图像两种方式来设置背景样式。
背景颜色 background-color
在CSS中,可以通过 background-color 属性来定义元素的背景颜色。颜色的取值可以是关键字(如:red、blue、green等,基本上都是颜色的英文名称),也可以是一个16进制的RGB值。
color 和 background-color:color是前景色(就是元素文本的颜色),background-color是背景色。
例子:
<!DOCTYPE html>
<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:180px;
height:60px;
background-color:red;
}
span
{
color:white; /*文字颜色:白色*/
background-color:blue; /*背景颜色:蓝色*/
}
</style>
</head>
<body>
<div>我是div元素,红色背景</div>
<span>我是span元素,蓝底白字</span>
</body>
</html>
背景图像
如果背景颜色已经满足不了需求,那么就可以使用漂亮的图片做背景,如果需要设置背景图像,需要掌握以下四个属性设置:
background-image:设置背景图像的地址路径,这是个必选属性。
background-repeat:设置背景的重复方式,属性取值repeat表示水平垂直方向上都平铺,repeat-x 和 repeat-y只在水平或垂直方向上重复,no-repeat表示不平铺。
background-position:定义背景图片的位置。
background-attachment:当文档比较长,该属性可定义背景图像是否随文档滚动。scroll表示背景图像随对象滚动而滚动,是默认选项;fixed可以固定背景图像。
例子:
<!DOCTYPE html>
<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
{/*为所有的DIV元素设置同样的大小和边框*/
width:280px;
height:150px;
border:2px solid red;
}
#div1
{
background-image:url("images/背景.png");
background-repeat:no-repeat;
background-position:center;
}
#div2
{
background-image:url("images/背景.png");
background-repeat:repeat;
}
</style>
</head>
<body>
<div id="div1">第一个DIV,背景图片位置居中,不平铺。</div>
<div id="div2">第一个DIV,背景图片重复平铺。</div>
</body>
</html>
【WEB基础】HTML & CSS 基础入门(5)边框与背景的更多相关文章
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- CSS3入门之边框与背景
CSS3入门之边框与背景 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !im ...
- Web前端开发css基础样式总结
颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值 ...
- web前端之css快速入门
css简介 css概述 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与 ...
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- web开发:css基础
一.w3c架构分析 二.css三种引入 三.三种引入的优先级 四.基础选择器 五.长度单位与颜色 六.文件样式操作 七.display 一.w3c架构分析 <!DOCTYPE html> ...
- Web前端开发CSS基础
CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
- 好程序员web前端分享CSS基础篇
学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML.CSS注释 ...
- 前端基础之CSS快速入门
前一篇写了我们的Html的常用组件,当然那些组件在我们不去写样式的时候都是使用的浏览器的默认样式,可以说是非常之丑到爆炸了,我们肯定是不能让用户去看这样丑到爆炸的样式,所以我们在这里需要使用css样式 ...
- web前端之css基础
CSS选择器 元素选择器 p{color:red;} ID选择器 #li{ background-color:red; } 类选择器 .c1{ font-size:15px; } 注意: 样式类名不要 ...
随机推荐
- 易混淆的table列表和dl表格
dl列表是使用了HTML dl.dt.dd标签的数据列表.首先我们使用dl(definition list-自定义列表)标签来容纳整个数据结构,然后我们使用dt(自定义标题)标签和dd(自定义描述)标 ...
- python之道07
2.用户输入一个数字,判断一个数是否是水仙花数. 水仙花数是一个三位数, 三位数的每一位的三次方的和还等于这个数. 那这个数就是一个水仙花数, 例如: 153 = 1******3 + 5****** ...
- kubernetes添加不了google apt-key
转自icepoint的博客 key来源 我的百度云盘 密码:v3wo 下载kube_apt_key.gpg到本地,上传到服务器后执行下面的命令 apt-get update && ap ...
- 初识 Hibernate
Hibernate 框架 1.1 什么是框架? 框架是一个提供了可重用的公共结构半成品. 2.1 关于Hibernate Hibernate是数据持久层的一个轻量级框架.数据持久层的框架有很多 ...
- java常用流处理工具StreamTool 常见的InputStream流转字符串, 转字节数组等等
ava 常用流处理工具 StreamTool ,常见的InputStream 流转字符串, 转字节数组等等 **应用场景: ** 1. 文件上传 2. js / css / img 等文件读取输出. ...
- 详解Mac睡眠模式设置
详解Mac睡眠模式设置 原文链接:http://www.insanelymac.com/forum/index.php?showtopic=281945 需要说明的是,首先这篇文章是针对已经能够成功睡 ...
- UVa-10474-大理石在哪
lower_bound()的作用是查找"大于或等于x的第一个位置",但是返回的是地址,所以减去数组的首地址就是偏移量了,也就是整型数字. #include <iostream ...
- docker-compose volumes指令路径映射问题
背景:最近在自学docker容器知识,在跟着<Docker - 从入门到实践>进行 docker-compose 搭建django/postgreSQL 实例.在搭建过程中由于自己操作失误 ...
- Python中变量的命名与使用(个人总结)
与众多编程语言一样,Python变量的命名有一定的规范: 变量名只能包含字母.数字.下划线且不能以数字开头.例如,num_1 为正确命名,而 1_num 则错误. 变量名不允许含空格,但是可以用下划线 ...
- 组队赛Day1第一场 GYM 101350 F. Monkeying Around(线段树)
[题目大意] 有n只猴子坐在树上,m个笑话. 给出每个讲这个笑话的猴子的编号,笑话的编号,和笑话的影响半径. 如果一个树上的猴子听了没听过的笑话,会掉到树下.如果听过并且在树下,就会爬到树上. 问最后 ...