css常用背景属性

来源：互联网发布：数据串传送和查表程序编辑：程序博客网时间：2024/06/14 13:12

css常用背景属性

* 1、background-color:背景色

* 2、background-image:背景图 。使用URL("")选择背景图。背景图和背景色同时存在时，背景图覆盖背景色。

* 3、background-repeat：背景图的重复方式。

* no-repeat-不平铺、repeat-平铺、repeat-x-延x轴平铺、repeat-y-延y轴平铺

* 4、background-size:背景图的大小

*[指定宽度高度]

* >>> 宽度高度的指定，可以写px，也可以写%（父容器宽高的百分比）

* >>> 当写两个属性时，分别表示宽度、高度

* 当写一个属性时，表示宽度高度将会等比缩放；

* [其他属性值]

* contain：图片等比缩放，直到宽或高中较大的一边缩放到100%为止。（可能导致较短的一边<100%，图片无法覆盖住全部区域）

* cover：图片等比缩放，直到款或高中较小的一边缩放到100%为止。（可能导致较大的一边>100%，图片超出区域显示不全）

* 5、background-position：背景图偏移量

* >>> 指定位置：left/center/right top/center/bottom

* 当只写一个值时，另一个值默认居中、

* >>> 指定坐标：两个属性分别表示，水平位移、垂直位移

* ① 坐标的值，可以是像素单位，也可以是百分数

*② 当写像素单位时：

* 水平方向：正数右移 负数左移 ；垂直方向：正数下移 负数上移；

* （左负右正 上负下正）

* ③ 当写百分数时：

* 一般只能是正数。表示是的是，去掉图片的宽高，剩余空白区域的分布比例。

* eg：background-position: 30%; 水平方向去掉图片宽度，剩余区域3：7分。

*

*

*

*/

#gouwuche{

width: 22px;

height: 25px;

background-image: url(img/4566.gif);

background-position: -130px 0px;

white-space: nowrap;

text-indent: 25px;

line-height: 25px;

}

#help{

width: 25px;

height: 30px;

background-image: url(img/4566.gif);

background-position: 0px -165px;

white-space: nowrap;

text-indent: 25px;

line-height: 30px;

}

#login{

width: 45px;

height: 25px;

background-image: url(img/4566.gif);

background-position: 0px -26px;

font-size: 12px;

line-height: 25px;

text-align: center;

}

#ul li{

/*list-style：修改小黑点的样式；

* none 去掉小黑点；

* url（）：可以使用url导入一个小图片，作为作为列表的标识符号

*/

list-style: none;

/*float: 浮动，可以实现块级元素，可以在一行显示

*/

width: 50px;

font-size: 12px;

color: #7F7F7E;

height: 30px;

}

</style>

</head>

<body>

<!--<div id=div>-->

<ul id="ul">

<li>第一项</li>

<li>第二项</li>

<li>第三项</li>

<li>第四项</li>

</ul>

<div id="gouwuche">

购物车

</div>

<br />

<div id="help">

帮助中心

</div>

<br />

<div id="login">

登录

</div>

css伪类及练习

.a:link{

color: blue;

text-decoration: none;

}

.a:visited{

color: red;

text-decoration: overline;

}

.a:hover{

color: yellow;

text-decoration: underline;

}

.a:active{

color: green;

text-decoration: line-through;

}

.input:link{

color: green;

text-decoration: none;

}

.input:hover{

color: blue;

text-decoration: underline;

}

/*[伪类选择器]

*1、写法：为类选择器，在选择器后面，用：分隔紧接伪类状态

* eg：.a：link

* 2、 超链接的伪类状态;

* :link-未访问状态 ：visited-已访问状态

* ：hover-鼠标指上状态 :active-激活选定状态（鼠标点下未松）

*

*

*

* 注意：当超链接多种伪类状态同时存在时 ，必须按照link-wisited-hover-active的顺序，否则会导致部分选择器不生效

*

* 3、input的伪类状态：

* ：hover ：focus-获得焦点状态：active

* 注意input的多种状态同时存在时必须按照上面的顺序；

* 4、其它标签只用hover事件

*/

盒模型

#div{

width: 200px;

height: 200px;

background-color: red;

/*margin 外边距：

* 1、只有一个值：表示四周的外边距均为指定的值；

*

* 2、写两个值：第一个数为上下外边距，第二个数为左右外边距；

*

* 3、写三个值：分别表示上、右、下三个方向，左边默认=右边；

*

* 4、写四个值：表示上、右、下、左四条边顺时针方向；

*

* 5、margin:0 suto;设置块级元素，在父容器中水平居中!1!!

* */

margin:0 auto;

/*

* padding 内边距

* 设置方式，与margin完全相同

* 注意padding，将会导致div区域被撑大！！！使用时必须注意div实际高宽多少！！！

*

*

* */

padding: 100px;

/*边框

* 1、设置边框需要三个属性：宽度 样式 颜色

* 原则上，三个属性缺一不可，顺序可以随便修改

* 2、可以使用top、right、bottom、left分别设置四个边

* dotted 虚线

* solid 实线

*/

border: 10px solid #008000;

}

</style>

</head>

<body>

<div id="div">这是div</div>

阅读全文

0 0