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文件,
来源:oschina
链接:https://my.oschina.net/u/2285811/blog/688913