文档章节

CSS(一) CSS背景

年少爱追梦
 年少爱追梦
发布于 2016/06/08 19:47
字数 1094
阅读 53
收藏 8
点赞 1
评论 0

                                                  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文件,

© 著作权归作者所有

共有 人打赏支持
年少爱追梦
粉丝 30
博文 184
码字总数 117928
作品 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
CSS清除浮动_清除float浮动

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

单线程生物
2016/04/07
38
0
CSS 框模型(Box Model)

CSS 框模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实...

toddler
2014/12/28
0
2
CSS3 备受期待的 8 大功能

CSS3仍遥遥无期,还是指日可待,这不是一个技术问题,而是人们什么时候可以彻底放弃那些不符合W3C标准的旧浏览器的问题。CSS3备受期待是肯定的,CSS Tricks 网站做了一次投票调查,票选备受期...

红薯
2009/05/06
568
0
Google LOGO的CSS Sprite

css-sprite 为纪念美国现代舞舞蹈家玛莎·葛兰姆诞辰,Google Doodle推出了一款极其炫酷的LOGO,整个LOGO使用CSS Sprite技术,利用一个初始图片和一张画满各个动作的拼接图片,实现了动画,而...

bestvist
2017/11/11
0
0
html5中关于背景的介绍

一:背景颜色 背景颜色一共有四种取值方式,分别为具体颜色值单词,rgb,rgba以及十六进制具体如下所示: 二:背景图片 如何设置背景图片呢?? CSS中有一个叫做background-image:url();的属...

随风流年
2017/07/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

win10 上安装解压版mysql

1.效果 2. 下载MySQL 压缩版 下载地址: https://downloads.mysql.com/archives/community/ 3. 配置 3.1 将下载的文件解压到合适的位置 我最终将myql文件 放在:D:\develop\mysql 最终放的位...

Lucky_Me
11分钟前
0
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

问题终结者
25分钟前
0
0
expect脚本同步文件expect脚本指定host和要同步的文件 构建文件分发系统批量远程执行命令

expect脚本同步文件 在一台机器上把文件同步到多台机器上 自动同步文件 #!/usr/bin/expectset passwd "123456"spawn rsync -av root@192.168.133.132:/tmp/12.txt /tmp/expect {"yes...

lyy549745
26分钟前
0
0
36.rsync下 日志 screen

10.32/10.33 rsync通过服务同步 10.34 linux系统日志 10.35 screen工具 10.32/10.33 rsync通过服务同步: rsync还可以通过服务的方式同步。那需要开启一个服务,他的架构是cs架构,客户端服务...

王鑫linux
34分钟前
0
0
matplotlib 保存图片时的参数

简单绘图 import matplotlib.pyplot as pltplt.plot(range(10)) 保存为csv格式,放大后依然很清晰 plt.savefig('t1.svg') 普通保存放大后会有点模糊文件大小20多k plt.savefig('t5.p...

阿豪boy
38分钟前
0
0
java 8 复合Lambda 表达式

comparator 比较器复合 //排序Comparator.comparing(Apple::getWeight);List<Apple> list = Stream.of(new Apple(1, "a"), new Apple(2, "b"), new Apple(3, "c")) .collect(......

Canaan_
昨天
0
0
nginx负载均衡

一、nginx 负载均衡 拓扑图: 主机信息: 1、负载均衡器1(lb1):192.168.10.205 RHEL7.5 2、负载均衡器2(lb2):192.168.10.206 RHEL7.5 3、web服务器1(web01):192.168.10.207 Centos...

人在艹木中
昨天
0
0
做了一个小网站

做了一个小网站 www.kanxs123.com

叶落花开
昨天
0
0
继社会佩奇之后,又尝试了可爱的蓝胖子,有趣 Python

#哆啦A梦# !/usr/bin/env python3# -*- coding: utf-8 -*-# @Author: dong dong# @Env: python 3.6from turtle import *# 无轨迹跳跃def my_goto(x, y): penup(...

Py爱好
昨天
0
0
shell及python脚本方式登录服务器

一、问题 在工作过程中,经常会遇见需要登录服务器,并且因为安全的原因,需要使用交互的方式登录,而且shell、python在工作中也经常用到,并且可以提供交互的功能。都是利用了expect、spawn...

yangjianzhou
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部