文档章节

CSS(一) CSS背景

年少爱追梦
 年少爱追梦
发布于 2016/06/08 19:47
字数 1094
阅读 56
收藏 8

                                                  CSS背景

                                   ----------   既有css3之前的用法也有css3的用法,没有区分出来哈,我想要速成就没有管这个。

  CSS设置背景颜色:属性background-color,这个属性的作用范围是,background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。这个器是很关键的。验证如下:margin是没有效果的。

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/backgroud-color.css" />
	</head>
	<body>
		<div id="div1"><p>this is p</p></div>
		<div id="div2"><p>this is p</p></div>
		<div id="div3"><p>this is p</p></div>
	</body>
</html>

//css内容
p {
	margin: 0px;
}

div {
	background-color: red;
}
#div2 {
	padding: 10px;
}

#div3 {
	padding: 10px;
	border-style: solid; //设置边框 
	border-width: 5px; //设置大小
	border-color: transparent; //设置透明
}

CSS 内边距属性

属性 描述
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。

CSS 边框属性

属性 描述
border 简写属性,用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
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 设置元素的上边框的宽度。

CSS 外边距属性

属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。

CSS设置背景图片:

CSS 背景属性(Background)

属性 描述 CSS
background 在一个声明中设置所有的背景属性。 1
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1
background-color 设置元素的背景颜色。 1
background-image 设置元素的背景图像。 1
background-position 设置背景图像的开始位置。 1
background-repeat 设置是否及如何重复背景图像。 1
background-clip 规定背景的绘制区域。 3
background-origin 规定背景图片的定位区域。 3
background-size 规定背景图片的尺寸。 3

早期只能这样使用,这个时候设置图片的时候有两个问题,图片小和图片太大怎么设置。

太小的图片只能从设置背景图像是否及如何重复入手,太大的图片只有设置图片的起始位置入手。到了css3过后,我们对图片的大小其实是可以控制的。

body {
	background-image: url(../img/56e13c46c23ed.jpg);
	background-repeat:no-repeat ;
	background-size:cover;//适应比例的缩放
    background-repeat:repeat-y;
    background-attachment: fixed;//固定了背景图片,就算图片没有图片长也不会出问题。
}

最后说一个新特性:CSS3可以使用多张背景图片,有些图片的阴影就是这样制作的:

body
{ 
background-image:url(xxx.gif),url(xxxx_2.gif);
}

试试当一个页面来操作一下:

博客并不能写css文件,

© 著作权归作者所有

共有 人打赏支持
年少爱追梦
粉丝 31
博文 185
码字总数 118529
作品 0
杭州
程序员
私信 提问
css sprites精灵图、css图片整合、css贴图定位案例教程

一、 什么是css sprites CSS Sprites通常被称为css精灵图,在国内也被意译为css图片整合和css贴图定位,也有人称他为雪碧图。就是将导航的背景图,按钮的背景图等有规则的合并成一张背景图,...

智能机器人蓝梓轩
07/03
0
0
【BS学习】精通CSS.DIV网页样式与布局总结

第一课 初探CSS 1.1 CSS的概念 CSS:层叠样式表,用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 标记的概念 HTML的缺陷 CSS的引入 1.2使用CSS控制页面 1.2.1行内样式 ...

yym15732626210
02/28
0
0
CSS样式有哪些常用的属性?

一般的一个DIV的CSS设置属性有:margin,padding,width,height,font-size,text-align,background,float,border CSS样式有哪些常用的属性 附:《 css样式属性大全(中文注释)》 一 CSS文字属性...

inw3cschool
2017/05/27
0
0
CSS清除浮动_清除float浮动

CSS清除浮动方法集合 一、浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。 浮动产生样式效果...

单线程生物
2016/04/07
38
0
【京东商城首页实战10】添加通栏背景图片及布局技巧

上一解已经完成了京东页面的导航条和下拉列表,至此,京东首页上部分的公共部分已经做完了。首页特有部分今天开始做京东首页的轮播图。CSS代码要写在index.css文件里面了。效果样图如下: 由...

sinat_34647836
2017/05/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

在PC上测试移动端网站和模拟手机浏览器的5大方法

总结很全面,保存下来以备不时之需。原文地址:https://www.cnblogs.com/coolfeng/p/4708942.html

kitty1116
14分钟前
0
0
分布式Session共享解决方案

分布式Session一致性? 说白了就是服务器集群Session共享的问题 Session的作用? Session 是客户端与服务器通讯会话跟踪技术,服务器与客户端保持整个通讯的会话基本信息。 客户端在第一次访...

Java干货分享
19分钟前
3
0
开源软件和开源模式面临的生存危机

导读 开源模式可能正面临一场危机。越来越多的开源软件和平台被大型云计算服务商融入自家的云服务体系,并以此获利颇丰,但并不支付费用,也没有对开源社区做出相应的回馈。而实际上,大部分...

问题终结者
21分钟前
2
0
让看不见的AI算法,助你拿下看得见的广阔市场

人工智能技术的飞速发展给各行各业都带来了深远的影响,AI已被视为企业提升运营效能、应对市场竞争的必经之路。然而对于一些企业而言,让AI真正实现落地和应用,并且创造价值,仍是一件需要努...

个推
26分钟前
1
0
用SAN还是NAS?我来告诉你

存储区域网络(SAN)是以一种结构连接的存储,通常通过交换机连接,使许多不同的服务器能够轻松访问存储设备。从服务器应用程序和操作系统的角度来看,访问SAN中的数据存储或直接连接的存储之间...

linux-tao
29分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部