文档章节

CSS(一) CSS背景

年少爱追梦
 年少爱追梦
发布于 2016/06/08 19:47
字数 1094
阅读 66
收藏 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文件,

© 著作权归作者所有

年少爱追梦
粉丝 34
博文 187
码字总数 118751
作品 0
杭州
程序员
私信 提问
css sprites精灵图、css图片整合、css贴图定位案例教程

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

智能机器人蓝梓轩
2018/07/03
0
0
CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式

前言: 通过前 8 篇文章基础知识的铺垫,我们也算是见识了 CSS 的“神通广大”。 这篇文章,我们就把实际工作中最高频用到的“CSS 加样式”挨个列一列,用一行行代码来展示 CSS 是如何给“盒...

OliZhao
04/26
0
0
【BS学习】精通CSS.DIV网页样式与布局总结

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

yym15732626210
2018/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

没有更多内容

加载失败,请刷新页面

加载更多

资深架构师带你从JVM层面了解线程的启动和停止

文章简介 这一篇主要围绕线程状态控制相关的操作分析线程的原理,比如线程的中断,线程的通信等,内容比较多,可能会分两篇文章 内容导航 线程的启动的实现原理 线程停止的实现原理分析 为什...

Java-飞鱼
40分钟前
3
0
uditor上传图片

注意图片的配置路径 "imageUrlPrefix": "/blog", //blog代表我的项目名 "imagePathFormat": "/{rand:6}", 图片的名称6位随机数组成,每个人的不一样,要看自己的存在哪 查controller.jsp ......

南桥北木
46分钟前
0
0
Java线程安全策略与多线程并发最佳实践

线程安全策略 不可变对象 不可变对象(Immutable Objects)是指对象一旦被创建它的状态(对象的数据,也即对象属性值)就不能改变,任何对它的改变都应该产生一个新的对象。 不可变对象需要满足...

Java干货分享
53分钟前
3
0
阿里最强Dubbo面试28题答案详解:核心功能+服务治理+架构设计等

1.Dubbo是什么? Dubbo 是一个分布式、高性能、透明化的 RPC 服务框架,提供服务自动注册、自动发现等高效服务治理方案, 可以和 Spring 框架无缝集成。 RPC 指的是远程调用协议,也就是说两...

别打我会飞
56分钟前
7
0
在优麒麟中运行英雄联盟LOL

sudo apt install wine-stable sudo add-apt-repository ppa:lutris-team/lutris sudo apt install lutris 在lutris官网的game分类里找到英雄联盟这个游戏,然后进去那个页面, https://lutr......

gugudu
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部