文档章节

CSS(一) CSS背景

年少爱追梦
 年少爱追梦
发布于 2016/06/08 19:47
字数 1094
阅读 53
收藏 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
博文 184
码字总数 117969
作品 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
【京东商城首页实战10】添加通栏背景图片及布局技巧

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

sinat_34647836
2017/05/04
0
0
CSS Sprites(精灵/雪碧)技术原理和使用

摘自:http://blog.lehu.shu.edu.cn/hikui/A359743.html 雪碧图,其实就是背景采用一张大图,通过背景的定位来修改使用的背景,这样做可以提高网站的速度(加载一张图对比加载一批图)。 下面...

红羊在北京
2016/07/27
29
0

没有更多内容

加载失败,请刷新页面

加载更多

docker run 创建一个新的容器并运行一个命令

docker run常用命令 docker run :创建一个新的容器并运行一个命令 语法:docker run [OPTIONS] IMAGE [COMMAND] [ARG...] 1.OPTIONS说明 -t:为容器重新分配一个伪输入终端,通常与 -i 同时使...

lwenhao
5分钟前
0
0
安装Win出现无法创建新的分区也找不到现有的分区解决方案

无法创建新的分区也找不到现有的分区 ### 首先在安装界面按下 Shift+F10### 在出现的CMD界面输入: diskpart 进入磁盘管理工具diskpart### 可以输入 : list disk 查看磁盘列表l...

Kxvz
7分钟前
0
0
关于 @ngrx/Store 下 obj 的扩展问题

昨天做 task 的时候,遇到了一个问题。 TypeError: can't define property "x": "obj" is not extensible 而我的代码是 public txTiles: Array<TransactionFilterTile>; constructor(priv......

IrisHuang
9分钟前
0
0
presto内存管理及调优

内存池 Presto有三种内存池,分别为GENERAL_POOL、RESERVED_POOL、SYSTEM_POOL。这三个内存池占用的内存大小是由下面算法进行分配的: builder.put(RESERVED_POOL, new MemoryPool(RESERVED...

张欢19933
10分钟前
0
0
Mysql5.7服务版安装

步骤1: 勾选同意协议 步骤2:选择Server only模式 步骤3:选择安装目录 步骤4:执行文件 步骤5:端口号与用户配置 步骤6:选择标准系统用户 Finish后,安装完成。...

lyle_luo
10分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部