侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130555 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

CSS(一) CSS背景

2024-05-16 星期四 / 0 评论 / 0 点赞 / 11 阅读 / 7361 字

CSS背景 ---------- 既有css3之前的用法也有css3的用法,没有区分出来哈,我想要速成就没有管这个。 CSS设置背景颜色:属性background-

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

广告 广告

评论区