CSS的背景属性和边框属性
CSS的背景属性：
background 简写属性，作用是将背景属性设置在一个声明中
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-color 设置元素的背景颜色
background-image 把图像设置为背景
background-position 设置背景图像的起始位置
background-repeat 设置背景图像是否如何重复
实例代码一：
<p style="background-color:pink;
width:1024px;
height:600px;
background-image:url('a.jpg');
background-repeat:repeat-x;
">
</p>
显示效果：
小结：
背景的属性有5个，可以直接放在background中．
background的属性顺序不是固定，但是建议顺序为:背景色，背景图，是否扩展，位置，是否固定
在默认情况下，背景图的原点是包含其父元素的左上角，但是设置background-attachment:fixed，则原点变成浏览器视窗的左上角
CSS的边框属性:
border 简写属性，用于把四个边的属性设置在一个声明
border-style 用于设置元素所有的边框，或者单独地为各边设置边框宽度
border-width 用于为元素的所有边框设置宽度，或者单独的为各边框设置宽度
border-color 设置元素的所有边框中可见部分的，或为四个边分别设置颜色
border-bottom 用于把下边框的所有属性设置到一个声明中
border-bottom-color 设置元素的下边框的颜色
border-bottom-style 设置元素的下边框的样式
border-bottom-width 设置元素的下边框的宽度
border-left 用于把左边框的所有属性设置到一个声明中
border-left-color 设置元素的左边框的颜色
border-left-style 设置元素的左边框的样式
border-left-width 设置元素的左边框的宽度
border-right 用于把右边框的所有属性设置到一个声明中
border-right-color 设置元素的右边框的颜色
border-right-style 设置元素的右边框的样式
border-right-width 设置元素的右边框的宽度
border-top 用于把上边框的所有属性设置到一个声明中
border-top-color 设置元素的上边框的颜色
border-top-style 设置元素的上边框的样式
border-top-width 设置元素的上边框的宽度
边框可以设置的样式有：
none 定义无边框
hidden 与"none"相同，对于表，hidden用于解决边框冲突
dotted 定义点状边框
dashed 定义虚线边框
soild 定义实线
double 定义双线，双线的宽度等于border-width的值
groove 定义3D凹槽边框，其效果取决于border-color的值
ridge 定义3D垄状边框，其效果取决于border-color的值
inset 定义3D inset边框，其效果取决于border-color的值
outset 定义3D outset边框，其效果取决于border-color的值
inherit 规定应该从父元素继承边框样式
实例代码二：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div-box{
width:300px;
height:150px;
/*border的三个属性值分别是：宽度，样式，颜色*/
border:3px solid red;
}
</style>
</head>
<body>
<div id="div-box">
hello world!
</div>
</body>
</html>
效果如下：
实例代码三：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;/*指定主页面距离父标签的距离*/
padding:0;
}
#div-box{
width:800px;/*指定灰色边框的宽度*/
height:500px;/*指定灰色边框匠高度*/
border:1px solid grey;/*定义边框为1px的实线灰色边框*/
margin:20px 0 0 20px;/*定义灰色边框距离上个标签20px的距离，距离浏览器边界20px*/
}
.img_list{
list-style:none;/*图像列表无样式*/
background-color:pink;
}
.img_list img{
width:125px;/*定义每个图像的宽度为125px*/
height:85px;/*定义每个图像的高度训85px*/
margin:10px 0 0 20px;/*定义每个图像距离红色边框上边10px,左边20px*/
}
.img_list li{
float:left;/*使用左浮动*/
border:1px solid red;/*定义每个图像的边框为１px的实线红色边框*/
width:165px;/*定义每个边框的宽度为165px*/
height:125px;/*定义每个边框的高度为125px*/
margin:10px 0 0 10px;/*定义红色边框距离上个标签和左边的标签的距离各为10px*/
}
.img_list a{
display:block;/*把字体转换为块元素*/
margin-left:60px;/*超链接的字体距离红色边距左边距离为60px*/
margin-top:-3px;/*超链接的字体距离红色边框下边距离为-3px*/
}
.img_list a:hover{
color:red;/*鼠标悬浮上超链接时，字体变成红色*/
text-decoration:underline;/*鼠标悬浮上超链接时，字体加下划线*/
}
</style>
</head>
<body>
<div id="div-box">
<ul class="img_list">
<li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
<li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
<li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
<li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
<li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
<li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
<li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
<li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
</ul>
</div>
</body>
</html>
效果显示为：
CSS的背景属性和边框属性的更多相关文章
- css的背景background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) ...
- CSS基础 背景图片的相关属性
属性名: background-size: 宽度 高度; 属性值 说明 数字+px 简单方便,常用 百分比 相当于盒子自身的百分比,如:百分百,就是就算是图片变形也要显示 contain 动比例缩放, ...
- Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置
目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...
- CSS边框-属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位
前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...
- CSS的 背景属性
㈠背景色 background-color ⑴background-color 属性设置元素的背景颜色. ⑵元素背景的范围: background-color 属性为元素设置一种纯色.这种颜色会填充 ...
- day67-CSS字体属性、文字属性、背景属性、css盒子模型
1. 字体属性 1.1 文字字体:font-family可以把多个字体名称作为一个“回退”系统来保存.如果浏览器不支持第一个字体,则会尝试下一个.浏览器会使用它可识别的第一个值. * {font-fa ...
- CSS下背景属性background的使用方法
背景颜色(background-color) CSS可以用纯色来作为背景,也可以将背景设置为透明,background相当于xhtml中的bgcolor. 它的两个值: transparent(默认值 ...
随机推荐
- JavaScript 模块化历程
这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生与变迁,展望ES6模块化标准的未来.经历过这段历史的人或许会感到沧桑,没经历过的人也应该知道这段历史. 无模块时代 在ajax还未提出 ...
- Wannafly模拟赛 A.矩阵(二分答案+hash)
矩阵 时间限制:1秒 空间限制:131072K 题目描述 给出一个n * m的矩阵.让你从中发现一个最大的正方形.使得这样子的正方形在矩阵中出现了至少两次.输出最大正方形的边长. 输入描述: 第一行两 ...
- 【Java学习笔记之十三】初探Java面向对象的过程及代码实现
理解Java面向对象的重要知识点: 一. 类,对象 类?首先举一个例子:小李设计了一张汽车设计图,然后交给生产车间来生产汽车,有黑色的.红色的.白色的... 这里,汽车设计图就是我们说的类(class ...
- BZOJ 2463: [中山市选2009]谁能赢呢？(新生必做的水题)
2463: [中山市选2009]谁能赢呢? Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 2372 Solved: 1750[Submit][Sta ...
- UEP-下拉
uep建立下拉 静态下拉: ①private Map<String,String> beanMap = new HashMap<String,String>(); //gett ...
- 应用fstream格式化输出
我举一个我应用的例子 file.open("shoroud.jrf" ,ios_base::trunc); //打开文件,清空文件内容 if(!file.good()) { pri ...
- EhCache 在集群环境中使用缓存系统
EhCache 分布式缓存/缓存集群 EhCache提供了很多种解决方案 这里只介绍一种最常用而且简单的RMI方式分布式缓存决绝方案 Automatic Peer Discovery 自动成员发现方 ...
- Oracle_复杂查询综合
Oracle_复杂查询综合 -- 1.列出所有员工的年工资,按年薪从低到高排序. select,) income from emp order by income; -- 2.列出薪金比" ...
- sql 中文转拼音首字母
http://blog.csdn.net/zhanglong_longlong/article/details/46772571 --可支持大字符集20000个汉字! create function ...
- {style}/index_article.htm {style}表示什么意思啊
LS有点安全意识好不好.... 在你的后台系统设置有个"模板默认风格:________ cfg_df_style " 默认是default也就是 {style}=模板路径+模板默 ...