css代码添加背景图片常用代码

合集下载

css代码大全

背景头效果1. <style type="text/css">2: 28: </style>html:1: 2: <div class="alpha1">3: <div class="ap2">4: <p>背景为红色(#FF0000)，透明度20%。

</p>5: </div>6:  <divclass="alpha2"></div>  7: </div><style type="text/css">a{color:blue;text-decoration:none;}a:hover{color:red;}.boxBorder{//文本框border-width:5px;border-style:solid;}.picButton{ //按钮class=“”background-color:#00FF00;color: #6600FF;border:0px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px;}</style>鼠标移动图片的变动<form action="" method="get" ><input name="" type="button" value="提交"style="width:82px;height:23px; background-image:url(images/DSC00231.JPG );" onMouseover="this.style.backgroundImage='url(images/DSC00231.JPG)'" onMouseOut="this.style.backgroundImage='url(images/lo.jpg)'"></form>鼠标移动图片的变动<style type="text/css">.ni{backgroundImage='url(images/DSC00231.JPG);color:#990033;border::5px;margin::0px;padding:0px;height:23px;width:82px;font-size:14px;}.nihao{backgroundImage='url(images/lo.JPG);color: #0000FF;border::5px;margin::0px;padding:0px;height:23px;width:82px;font-size:14px;}</style><form action="" method="get" ><input name="" type="button" value="提交" class="nihao"height:23px; background-image:url(images/DSC00231.JPG );"in="this.classname='ni'"nihao="this.classname='nihao'"></form>常用代码控制横向和纵向滚动条的显隐？<body style="overflow-y:hidden"> 去掉x轴<body style="overflow-x:hidden"> 去掉y轴<body scroll="no">不显表格变色<TD style="CURSOR: hand">禁止复制，鼠标拖动选取<body ondragstart=window.event.returnV alue=false oncontextmenu=window.event.returnV alue=falseonselectstart=event.returnV alue=false>普通iframe页面<iframe name="name" src="main.htm" width="450" height="287" scrolling="Auto" frameborder="0"></iframe>iframe自适应高度<iframe name="pindex" src="index.asp" frameborder=false scrolling="auto" width="100%" height="100%" frameborder=no ></iframe>IE地址栏前换成自己的图标&可以在收藏夹中显示出你的图标<link rel="Shortcut Icon" href="favicon.ico"><link rel="Bookmark" href="favicon.ico">字号缩放越来越多的人长时间的泡网，眼镜的普及率也越来越高，让文字大点，让更多的用户看的更清楚。

css3实现背景图片颜色修改的多种方式

css3实现背景图⽚颜⾊修改的多种⽅式css3可以改变图⽚的颜⾊了。

从此再也不⽤设计出多张图，⽽且随时可以修改。

下⾯就简单介绍下css3中是如何做到改变背景图⽚的颜⾊效果的。

⽅式⼀：利⽤css3滤镜filter中的 drop-shadow代码如下：<style>.icon{display: inline-block;width: 180px;height: 180px;background: url('img/XXX.png') no-repeat center cover;overflow: hidden;}.icon:after{content: '';display: block;height: 100%;transform: translateX(-100%);background: inherit;filter: drop-shadow(144px 0 0 #fff); //需要修改的颜⾊值}</style><i class="icon"></i>说明：drop-shadow 滤镜可以给元素或图⽚⾮透明区域添加投影将背景透明的 PNG 图标施加⼀个不带模糊的投影，就等同于⽣成了另外⼀个颜⾊的图标再通过 overflow:hidden 和位移处理将原图标隐藏mix-blend-mode 取值情况：【除了最后3个，⼤体和ps效果⼀样】mix-blend-mode: normal; // 正常mix-blend-mode: multiply; // 正⽚叠底mix-blend-mode: screen; // 滤⾊mix-blend-mode: overlay; // 叠加mix-blend-mode: darken; // 变暗mix-blend-mode: lighten; // 变亮mix-blend-mode: color-dodge; // 颜⾊减淡mix-blend-mode: color-burn; // 颜⾊加深mix-blend-mode: hard-light; // 强光mix-blend-mode: soft-light; // 柔光mix-blend-mode: difference; // 差值mix-blend-mode: exclusion; // 排除mix-blend-mode: hue; // ⾊相mix-blend-mode: saturation; // 饱和度mix-blend-mode: color; // 颜⾊mix-blend-mode: luminosity; // 亮度mix-blend-mode: initial; // 默认mix-blend-mode: inherit; // 继承mix-blend-mode: unset; // 还原⽅式⼆：利⽤css3的mix-blend-mode 和 background-blend-mode代码如下：<style>.icon{display: inline-block;width: 180px;height: 180px;background-image: url($'img/XXX.png'), linear-gradient(#f00, #f00);background-blend-mode: lighten;background-size: cover;}</style><i class="icon"></i>说明：lighten这个混合模式：变亮、变亮模式与变暗模式产⽣的效果相反，⿊⾊⽐任何颜⾊都要暗，所以⿊⾊会被任何⾊替换掉。

cssbeforeafter用法

cssbeforeafter用法CSS的::before和::after伪元素是在元素的内容之前和之后插入的内容。

它们是一种非常强大的CSS特性，可以用于添加额外的装饰效果、生成字体图标、创建复杂的布局结构等等。

在本篇文章中，我将一步一步地讲解::before和::after伪元素的用法，以及如何灵活运用它们来实现各种效果。

第一步：基本语法要使用::before和::after伪元素，我们需要用CSS选择器来选择要添加伪元素的元素。

通常，我们会使用一个类选择器或者ID选择器来选择元素。

基本的语法如下：selector::before {content: "";/* 添加其他样式属性*/}selector::after {content: "";/* 添加其他样式属性*/}在上面的代码中，selector是你要选择的元素的选择器，::before和::after 分别表示在元素的内容前面和后面插入伪元素。

第二步：添加内容要添加内容到::before和::after伪元素中，我们需要使用content属性。

content属性的值可以是一个字符串、一个图片的URL，或者是一个计数器。

如果要插入一个字符串，只需将字符串包含在引号中即可，如：selector::before {content: "前置文字";}selector::after {content: "后置文字";}如果要插入一个图片，我们可以使用CSS的background-image属性来设置伪元素的背景图，如：selector::before {content: url(image.png);}如果要插入一个计数器，我们可以使用CSS的counter-increment属性来实现。

首先，在要进行计数的元素上设置counter-reset属性，然后在::before或::after伪元素中使用counter-increment属性来实现计数，如：/* 设置计数器*/ul {counter-reset: my-counter;/* 使用计数器*/li::before {content: counter(my-counter);counter-increment: my-counter;}第三步：样式设置除了添加内容，我们还可以为::before和::after伪元素添加其他的样式设置，例如修改字体样式、调整大小和位置、改变背景颜色等等。

css3实现一个div设置多张背景图片及background-image属性实例演示

css3实现⼀个div设置多张背景图⽚及background-image属性实例演⽰引⼦以前做⽹页布局的时候，⼀个div只能设置⼀张背景图⽚，设置多个背景的话，要⽤多个div嵌套才能实现，这样兼容性⽐较好。

若您的⽹站要求兼容浏览器低版本，建议⽤这种⽅法。

css3的出现，解决了⼀个div只能设置⼀个背景的问题，使⼀个div 可以设置多个背景图⽚。

background-image还可以设置线性渐变，等效果。

题外话关于css3的background，功能很强⼤，有很多属性，像background-size等等，这些属性都可以写⼀篇博客来讲述。

< url >：使⽤绝对或相对地址指定背景图像。

< linear-gradient>：使⽤线性渐变创建背景图像。

（CSS3）< radial-gradient>：使⽤径向(放射性)渐变创建背景图像。

（CSS3）< repeating-linear-gradient>：使⽤重复的线性渐变创建背景图像。

（CSS3）< repeating-radial-gradient>：使⽤重复的径向(放射性)渐变创建背景图像。

css教程菜鸟

css教程菜鸟CSS（层叠样式表）是一种用于描述网页上的元素布局和样式的语言，它能够使网页更加美观和易于阅读。

本文将介绍一些CSS的基础知识和常用属性，以帮助菜鸟入门。

首先，让我们了解一下CSS的基本语法。

CSS由选择器和声明块组成。

选择器指定了要应用样式的HTML元素，而声明块则包含了一系列属性-值对，用于描述要应用到元素上的样式。

下面是一个简单的示例：```p {color: red;font-size: 20px;}```上述代码中，选择器“p”表示要应用样式的HTML段落元素。

声明块中的属性-值对指定了段落的文本颜色为红色，字体大小为20像素。

接下来，我们将介绍一些常用的CSS属性。

1. 字体属性：用于设置文本的字体样式，如字体大小、字体族等。

例如：```p {font-size: 16px;font-family: Arial, sans-serif;}```上述代码将段落的字体大小设置为16像素，字体族为Arial或者sans-serif。

2. 背景属性：用于设置元素的背景样式，如背景颜色、背景图片等。

例如：```body {background-color: lightblue;background-image: url("bg.jpg");}```上述代码将页面的背景颜色设置为浅蓝色，背景图片为名为“bg.jpg”的图片。

3. 边框属性：用于设置元素的边框样式，如边框宽度、边框颜色等。

例如：```div {border: 1px solid black;}```上述代码将`<div>`元素的边框宽度设置为1像素，边框颜色为黑色。

4. 盒模型属性：用于调整元素的尺寸和定位，如元素的宽度、高度、外边距等。

例如：```img {width: 200px;height: 150px;margin-top: 10px;}```上述代码将图片的宽度设置为200像素，高度设置为150像素，并且向上外边距10像素。

用css控制背景图片的位置,大小

a.基本语法:
background-position : length || length
background-position : position || position
background-position-x : length | left | center | right
background-position-y : length | top | center | bottom
说了这么多例子，我想你对于定位，有一定的了解了吧。
(5)、背景图片的透明设置：
有的时候，我们总想着去将图片设置成透明的。
(6)、多幅背景图片的设置：
对于多幅背景图片的设置，我是在《超越CSS：WEB设计艺术精髓》里看到的。不过，却又让我很遗憾，因为，目前支持一个标签内有多幅背景图片的浏览器太小了，我知道的也只有Apple Safari 。以许你会问，这怎么可能。当你看完这个实例之后，我想你会惊讶，“天啊，CSS3之前都只能给每个元素使用一幅图片。”如果想研究一下的话，就快快安装一个SAFARI浏览器吧。对我而言，我相信，这是发展的趋势。总之一句话，谁解释CSS能力越强，它就将是发展的潮流，谁俱有完美的WEB准标，谁就是明日浏览器之星。
body { background-image: url("d:\images\04.jpg"); background-position: 50% center; background-repeat:no-repeat; } /*设置双向坐标，这时相当于中下*/
body { background-image: url("d:\images\04.jpg"); background-position: 60px center; background-repeat:no-repeat; } /*设置双向坐标，这时相当于距左60像素下*/

淘宝店铺装修代码大全-店铺装修代码

淘宝店铺装修代码大全-店铺装修代码随着电子商务的快速发展，越来越多的商家开始进入淘宝平台进行销售，个性化的店铺装修成为许多商家必不可少的一部分。

在淘宝店铺装修中，代码的使用是非常重要的，能够有效地提升店铺的美观度和用户体验。

本文将为大家整理淘宝店铺装修常用的代码，供大家参考。

一、头部代码头部代码是网页头部的一部分，位于HTML代码的<head>标签之间。

下面是部分头部代码的示例。

1.设置网页标题，即在浏览器标签栏中显示的文字。

```html<title>XXX淘宝店铺</title>```2.设置网页的编码格式，这通常使用UTF-8编码格式。

```html<meta charset="UTF-8">```3.设置网页的关键字，方便搜索引擎收录网页。

```html<meta name="keywords" content="XXX,淘宝店铺,XXX店铺"> ```4.设置网页的描述信息，方便搜索引擎了解网页内容。

```html<meta name="description" content="我是XXX店铺，提供高品质的商品和优质的服务。

">```二、JS代码JS代码可以用来实现一些动态效果和交互功能，例如图片幻灯片、选项卡切换等。

下面是部分常用的JS代码示例。

1.实现图片幻灯片代码示例：```html<div class="carousel"><img src="img/1.jpg"><img src="img/2.jpg"><img src="img/3.jpg"><img src="img/4.jpg"></div><script>$('.carousel').slick({dots: true,infinite: true,speed: 500,fade: true,cssEase: 'linear'});</script>```上述代码中，我们使用了slick插件来实现图片幻灯片效果。

用CSS把背景图片平铺

用CSS把背景图片平铺笔记2010-01-20 16:58:02 阅读1265 评论0 字号：大中小body{background:url(图片) repeat}背景{}中添加background: url(图片地址)repeat详细讲解：repeat 背景图像在纵向和横向上平铺no-repeat 背景图像不平铺repeat-x 背景图像在横向上平铺repeat-y 背景图像在纵向平铺repeat:3/*重复3次*/注意:只能在原图的基础上进行重复！而不能像我们的桌面一样进行扩大填充。

代码如下:默认代码为：body{background-color:#FFFFFF}换成以下代码body{background:url(背景图片地址) background-position: center;background-attachment: fixed;repeat-x #FFFFFF}这是全屏的背景代码~在中把背景图片拉伸body{background-image:url('a.jpg');background-repeat:repeat}body{background:#FFF url(背景图片地址) no-repeat 50% 0;} no-repeat不重复50% 0(水平位置垂直位置) 水平50%既居中,垂直0pxcenter 也可DIV+CSS如何让图片文字混排的情况下垂直居中<style> div{padding:40px 0px 40px 0px;border:1px solid #ccc;}</style><div>测试一下</div>自制U盘背景when you believe 2009-10-30 17:36:27 阅读52 评论0字号：大中小首先，将自己打算作为背景的图片放入U盘的根目录。

将图片命名为一个由字母或数字的名字。

DIV+CSS中让布局、背景图片、文字内容居中的方法

DIV+CSS中让布局、背景图⽚、⽂字内容居中的⽅法在DIV CSS布局的页⾯⾥，从布局内容到页⾯⾥⽂章⽂字居中都是⾮常重要的，⽽css来设置居中也是⾮常简单的。

1、⾸先介绍使⽤css属性让整体布局的居中：设置对象的⽗级内容居中，这⾥⼀个页⾯的为⽗级是什么呢？我们可以想象整个页⾯的内容是由<html></html>和<body> </body>这两个包含，那根据较近⽗级我们就设置body的CSS来实现居中问题，可以向在内容⾥居中有text-align:center;具体css的居中代码为： body{text-aligh:center; } 但是即使这样也会出现问题，因为你没有设置布局有多宽“width ”，⼀旦你内容布局中在最外层css控制中，设置了float:属性，那布局将会向你设置的float:⽅向靠，解决⽅法，除了设置body的居中的css属性外，还需对布局对象设置居中，⽽且或定义宽度是多少，假如⽹页宽度为700px，最外层css样式为的class="weicheng"，那设置应该这样“.weicheng{margin:0 auto; width:700px;} ”即可⽽这个元素在IE下有⽤，经过试验在⽕狐等浏览器下只除了此⽗级（body）设置text-aligh:center;居中是⽆法让布局居中，那我们还需要对该对象设置个“margin:0 auto ; ”这个是什么意思呢，意思是内容上下为0距离，⽽左右为“auto ”⾃动，这样就可以设置实现⽹页布局居中(这⾥设置margin:5px auto; ⼀样效果不影响实验)。

完整实例为（可将代码拷贝新建html⽂件浏览观看效果）：复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>www.jb51.nte的CSS div的布局居中实例</title> <style type="text/css">  </style> </head> <body> <div class="waicheng">我是css中的居中的实验;我的布局外层有⼀个边为1px⿊⾊边，我宽700px，⾼为200px,设置了与顶部内容距离为5PX</div> </body> </html> 2、介绍使⽤css属性让⽹页的背景居中：这⾥居中就包括了左右居中与上下居中，居中代码如下： 3、css让介绍⽂字、图⽚内容左右上下居中⽅法教程：我们知道左右就中好办，直接⽤text-align:center; 即可让⽂字与图⽚内容居中，但是垂直呢，假如我们在⾼度为120px的⾼度下垂直居中，图⽚居中是vertical-align:middle;css属性，⽂字居中就要靠设置⾏⾼⽅法居中⽂字内容，这⾥我们设置为120px的⾼度这需要设置个line-height:120px;这样就通过css属性类样式来实现⽂字与图⽚的上下左右居中。

CSS3background分别设置多个背景图片

1 2 3 4 5 6 7 #example1{width:500px;height:250px;background-image:url(sheep.png),url(betweengrassandsky.png); background-position:center bottom,left top;background-repeat:no-repeat;}它是如何工作的呢？1 2 3 4 background-image: <bg-image> [ , <bg-image> ]*<bg-image> = <image> | none<strong>Note: a value of ‘none’ still generates a layer.</strong> 1 background-image:url(sheep.png),url(betweengrassandsky.png);CSS3 中加以此逗号同样支持以下属性：1. background-repeat2. background-attachment3. background-position ,4. background-clip ,5. background-origin6.background-size . 源码例子：XHTML1 background-position:center bottom,left top;1 23 4 5 6 7 background: [ <bg-layer> , ]* <final-bg-layer><bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> ||<attachment> || <box>{1,2} <final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> ||<attachment> || <box>{1,2} || <background-color> <spanstyle="color: #993300;"><strong>Note: background-color is only permitted in the final background layer.</strong></span>1 background:url(sheep.png)center bottom no-repeat,url(betweengrassand sky.png)left top no-repeat;浏览器兼容性：支持目前主流浏览器及支持css3标准的所有浏览器。

cascading style sheet手册

cascading style sheet手册Cascading Style Sheet（层叠样式表）是一种用于定义网页样式和布局的标记语言。

通过CSS，网页设计师可以轻松地控制网页的外观和风格，使网页更具吸引力和一致性。

本手册将为您介绍CSS的基本语法、常用属性以及实际应用技巧。

一、CSS基本语法CSS基本语法由选择器和声明块组成。

选择器用于选中要应用样式的HTML元素，而声明块则由一条或多条声明构成，每条声明由属性和对应的属性值组成。

例如，要为所有段落元素设置字体颜色为红色，可以使用以下CSS 代码：```p {color: red;}```二、CSS常用属性1. 字体属性- font-family：设置字体系列；- font-size：设置字体大小；- font-weight：设置字体粗细；- font-style：设置字体样式。

2. 背景属性- background-color：设置背景颜色；- background-image：设置背景图片；- background-size：设置背景图片尺寸；- background-repeat：设置背景图片是否平铺。

3. 盒模型属性- width：设置元素宽度；- height：设置元素高度；- margin：设置外边距；- padding：设置内边距；- border：设置边框样式。

4. 定位属性- position：设置元素定位方式；- top、right、bottom、left：设置元素相对于其父元素的位置偏移。

三、CSS实际应用技巧1. 选择器嵌套CSS允许选择器进行嵌套，提高样式定义的灵活性和可读性。

例如，要设置类名为"container"的div元素下的所有段落元素字体颜色为蓝色，可以使用以下CSS代码：```.container p {color: blue;}```2. 伪类和伪元素CSS提供了伪类和伪元素的功能，用于选中并添加样式到特定的元素。

HTML+CSS常用代码（笔记）

HTML+CSS常⽤代码（笔记）注释标签：对代码进⾏说明常⽤格式标签<b>加粗</b><i>斜体</i><u>下划线</u><s>删除线</s><p>段落标签</p><hr>：分割线<br>：换⾏<sup>上标</sup><sub>下标</sub><pre>保留当前格式样式</pre><strong>(粗字体)强调⽂本</strong>../：返回上⼀级（⽗级）⽬录标题标签<h1>我是⼀级标题标签(最⼤)</h1><h2>我是⼆级标题标签</h2><h3>我是三级标题标签</h3><h4>我是四级标题标签</h4><h5>我是五级标题标签</h5><h6>我是六级标题标签(最⼩)</h6>列表标签⽆序列表：<ul type="disc"> <li>列表项1</li><li>列表项2</li><li>列表项3</li></ul>有序列表：<ol type="1"> <li>列表项1</li><li>列表项2</li><li>列表项3</li></ol>⾃定义列表：图⽂混排<dl><dt>标题，图⽚</dt><dd>描述</dd></dl>CSS样式内嵌样式:放在<head>标签之间语法：<style type="text/css">选择器名 {属性名:属性值;}</style>所有标签（*）* {padding:0px; /*清除默认内边距*/margin:0px; /*清除默认外边距*/}⽂本属性line-height:20px; /*⾏⾼*/text-align:center; /*对齐：Left|right|center|justify*/text-decoration:none; /*⽂本修饰None：默认|underline：定义⽂本下的⼀条线|overline：定义⽂本上的⼀条线|line-through：定义穿过⽂本下的⼀条线*/ Letter-spacing:5px; /*字母之间的间距*/Text-indent:40px; /*⾸⾏的缩进⽅式：px/%*/字体标签及属性<font>字体标签</font><style type="text/css">font-size:字体⼤⼩（常⽤单位：px/%/em...）;color:颜⾊;font-style:字体样式;font-family:字体系列;font-weight:字体粗细;</style>例：<font size="6" color="#FF0000" face="微软雅⿊">我是字体标签</font>背景相关的属性background-color: red; /*设置背景颜⾊*/background-image: url(图⽚路径); /*设置背景图⽚（图⽚路径没有引号包裹）*/background-repeat: no-repeat; /*设置背景的平铺⽅式：Repeat-x、repeat-y、no-repeat*/Background-attachment: Fixed; /*设置滚动：Scroll、Fixed*/background-position: center; /*设置背景的坐标，偏移量,如left、right、center、button*/background-position:100px -100px;/*第⼀值：左右偏移量，正：向右偏移，负：向左偏移；第⼆值：上下偏移量，正：向下偏移，负：向上偏移*//*可以为px、%、cover、continuecover: 不会造成图⽚失真，会铺满整个标签。

css背景和边框标签实例详解

css背景和边框标签实例详解⼀、css背景标签1，设置背景颜⾊back-ground-color 属性指定元素的背景⾊。

⼩实例如下图所⽰：运⾏结果如下：可以通过选择器给不同的标签设置不同的颜⾊，在这⾥h1,div,和p标签将拥有不同的背景⾊：实例：运⾏结果如下图所⽰：2.设置背景图像background-image属性指定⽤作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

⽤url来引⼊外部图⽚。

具体实例如下所⽰：运⾏结果如下图：注意事项：使⽤背景图⽚时，要注意背景图⽚的样式，不要有⼲扰到⽂本的图像，以免影响效果。

css背景重复的问题默认情况下，background-repeat属性在垂直和⽔平⽅向上都重复图像。

某些图像应只适合⽔平或垂直⽅向上重复，若想仅在⽔平⽅向上重复，需要⽤（background-repeat：repeat-x；），则背景看起来更好；若想要仅在垂直重复图像，需设置background-repeat：repeat-y；属性还可以指定只显⽰⼀次背景图像：⽤background-repeat：no-repeat标签即可。

4、指定背景图像的位置指定背景图像的位置需要使⽤background-position标签具体实例如下图所⽰：下⾯将会展⽰把背景图⽚放在右上⾓的代码：运⾏结果如下图所⽰：5、设置背景图像固定background-attachment 属性来设置背景图像固定，其属性值scroll图像随页⾯元素⼀起滚动（默认值），fixed图像固定在屏幕上，不随页⾯元素滚动。

6、设置背景图像⼤⼩background-size 属性可以设置背景图像的⾼度和宽度。

第⼀个值设置宽度，第⼆个值设置⾼度。

如果设⼀个值，则第⼆个值会默认auto。

其格式如下所⽰：background-size：属性1 属性2；实例如下：运⾏结果如下：7、设置图像透明效果使⽤opacity属性能够使任何元素能够使任何元素呈现出透明效果，透明度在0~1之间，其格式如下：opacity：opacityValue；⼆、css边框标签1.设置边框颜⾊（1）设置边框样式（border-style）边框样式⽤于定义边框的风格，常⽤属性值如下：none：没有边框即忽略所有边框的宽度（默认值）。

css代码大全

css代码大全css属性代码大全一 CSS文字属性： color : #999999; /*文字颜色*/ font-family :宋体，sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*力口删除线*/ text-decoration: overline; /*力口顶线*/ text-decoration:underline; /*力口下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白*/padding-left:10px; /*左边框留空白三、CSS 符号属性：list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/ list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/ list-style-type:upper-alpha; /*大写英文字母*/list-style-type:disc; /*实心圆形符号*/ list-style-type:circle; /*空心圆形符号*/ list-style-type:square;/*实心方形符号*/ list-style-image:url(/; /*图片式符号*/list-style-position: outside; /*凸排*/ list-style-position:inside; /*缩进*/四、CSS 背景样式： background-color:#F5E2EC; /*背景颜色*/ background:transparent; /*透视背景*/ background-image : url(/image/; /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ repeat; /*重复排列-网页默认*/ no-repeat; /*不重复排列*/ repeat-x; /*在x 轴重复排列*/ repeat-y; /*在y 轴重复排列*/90% 90%; /*背景图片x 与y 轴的位置*/top; /*向上对齐*/ buttom; /*向下对齐*/ left; /*向左对齐*/ right; /*向右对齐*/ center; /*居中对齐*/ 五、CSS 连接属性: a /*所有超链接*/a:link /*超链接文字格式*/background-repeat background-repeatbackground-repeatbackground-repeat指定背景位置background-position background-position background-position background-positionbackground-positionbackground-positiona:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/a:hover /*鼠标转到链接*/鼠标光标样式：链接手指CURSOR: hand 十字体 cursor:crosshair 箭头朝下 cursor:s-resize 十字箭头cursor:move 箭头朝右cursor:move 力口一问号cursor:help 箭头朝左 cursor:w-resize 箭头朝上 cursor:n-resize 箭头朝右上 cursor:ne-resize 箭头朝左上 cursor:nw-resize 文字I型cursor:text箭头斜右下 cursor:se-resize 箭头斜左下 cursor:sw-resize 漏斗cursor:wait光标图案（IE6） p {cursor:url（"光标文件名.cur"）,text;} 六、CSS框线一览表：border-top : 1px solid #6699cc; /*上框线*/ border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/ border-right : 1px solid #6699cc; /*右框线*/ 以上是建议书写方式，但也可以使用常规的方式如下： border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/ 其他框线样式 solid /*实线框*/ dotted /*虚线框*/double /*双线框*/groove /*立体内凸框*/ridge /*立体浮雕框*/inset /*凹框*/outset /*凸框*/七、CSS表单运用：文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、CSS边界样式：margin-top:10px; /*上边界*/margin-right:10px; /*右边界值*/margin-bottom:10px; /*下边界值*/margin-left:10px; /*左边界值*/CSS属性：字体样式(Font Style)序号中文说明标记语法1 字体样式 {font:font-style font-variant font-weight font-size font-family)2字体类型{font-family:〃字体1〃，〃字体2〃，〃字体3〃，...)3字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small)4字体风格 {font-style:inherit|italic|normal|oblique)5字体粗细{font-weight:100-900|bold (粗体)|bolder (特粗)|lighter (细体)|normal (正常);)6字体颜色{color:数值;)7阴影颜色{text-shadow:16位色值)8字体行高 {line-height:数值|inherit|normal;)9字间距 {letter-spacing:数值|inherit|normal)10单词间距 {word-spacing:数值|inherit|normal)11字体变形 {font-variant:inherit|normal|small-cps )12英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13字体变形 {font-size-adjust:inherit|none)14字体 {font-stretch:condensed|expanded|extra-condensed|extra- expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra- condensed|ultra-expanded|wider)文本样式(Text Style)序号中文说明标记语法1行间距 {line-height:数值|inherit|normal;}2文本修饰 {text-decoration:inherit|none|underline|overline|line- through|blink)3段首空格{text-indent:数值1inherit}4水平对齐 {text-align:left|right|center|justify}5垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6书写方式 {writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1背景颜色{background-color:数值}2背景图片 {background-image: url(URL)|none}3背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4背景固定 {background-attachment:fixed|scroll}5背景定位 {background-position:数值|top|bottom|left|right|center}6背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1边界留白{margin:margin-top margin-right margin-bottom margin-left} 2补白 {padding:padding-top padding-right padding-bottom padding-left}3边框宽度｛border-width:border-top-width border-right-width border-bottom-width border-left-width)宽度值：thin|medium|thick|数值4边框颜色｛border-color:数值数值数值数值) 数值：分别代表top、right、bottom、left颜色值5边框风格｛border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groo ve)6 边框｛border:border-width border-style color)上边框｛border-top:border-top-width border-style color)右边框｛border-right:border-right-width border-style color)下边框｛border-bottom:border-bottom-width border-style color)左边框｛border-left:border-left-width border-style color)7宽度｛width:长度|百分比| auto)8高度｛height:数值|auto)9漂浮｛float:left|right|none)10清除｛clear:none|left|right|both)分类列表序号中文说明标记语法11制显示｛display:none|block|inline|list-item)2控制空白｛white-space:normal|pre|nowarp)3符号列表｛list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none)4图形列表｛list-style-image:URL)5位置列表｛list-style-position:inside|outside)6目录列表｛list-style:目录样式类型|目录样式位置|url)7 鼠标形状｛cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize)CSS属性大全［背景］属性共有六项：「背景颜色」（background-color）,设置背景颜色。

css常用代码大全

字体属性：(font)大小{font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)行高{line-height: normal;}(正常) 单位：PX、PD、EM粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常)变体{font-variant: small-caps;}(小型大写字母) normal;(正常)大小写{text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写)none;(无)修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常用字体：(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana背景属性：(background)色彩{background-color: #FFFFFF;}图片{background-image: url();}重复{background-repeat: no-repeat;}滚动{background-attachment: fixed;}(固定) scroll;(滚动)位置{background-position: left;}(水平) top(垂直);简写方法{background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现，要认真的研究*/区块属性：(Block) /*这个属性第一次认识，要多多研究*/字间距{letter-spacing: normal;} 数值/*这个属性似乎有用，多实践下*/对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进{text-indent: 数值px;}垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top;middle; bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)显示{display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分)compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header- group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/方框属性：(Box)width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左边框属性：(Border)border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线)ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度border-color:#;简写方法border：width style color; /*简写*/列表属性：(List-style)类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字)lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside;图像list-style-image: url(..);定位属性：(Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)css属性代码大全一CSS文字属性：color : #999999; /*文字颜色*/font-family : 宋体,sans-serif; /*文字字体*/font-size : 9pt; /*文字大小*/font-style:itelic; /*文字斜体*/font-variant:small-caps; /*小字体*/letter-spacing : 1pt; /*字间距离*/line-height : 200%; /*设置行高*/font-weight:bold; /*文字粗体*/vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/text-decoration:line-through; /*加删除线*/text-decoration: overline; /*加顶线*/text-decoration:underline; /*加下划线*/text-decoration:none; /*删除链接下划线*/text-transform : capitalize; /*首字大写*/text-transform : uppercase; /*英文大写*/text-transform : lowercase; /*英文小写*/text-align:right; /*文字右对齐*/text-align:left; /*文字左对齐*/text-align:center; /*文字居中对齐*/text-align:justify; /*文字分散对齐*/vertical-align属性vertical-align:top; /*垂直向上对齐*/vertical-align:bottom; /*垂直向下对齐*/vertical-align:middle; /*垂直居中对齐*/vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白padding-top:10px; /*上边框留空白*/padding-right:10px; /*右边框留空白*/padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白三、CSS符号属性：list-style-type:none; /*不编号*/list-style-type:decimal; /*阿拉伯数字*/list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/list-style-type:upper-alpha; /*大写英文字母*/ list-style-type:disc; /*实心圆形符号*/list-style-type:circle; /*空心圆形符号*/list-style-type:square; /*实心方形符号*/list-style-image:url(/dot.gif); /*图片式符号*/list-style-position: outside; /*凸排*/list-style-position:inside; /*缩进*/四、CSS背景样式：background-color:#F5E2EC; /*背景颜色*/background:transparent; /*透视背景*/background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/指定背景位置background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/background-position : buttom; /*向下对齐*/background-position : left; /*向左对齐*/background-position : right; /*向右对齐*/background-position : center; /*居中对齐*/五、CSS连接属性：a /*所有超链接*/a:link /*超链接文字格式*/a:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/a:hover /*鼠标转到链接*/鼠标光标样式：链接手指CURSOR: hand十字体cursor:crosshair箭头朝下cursor:s-resize十字箭头cursor:move箭头朝右cursor:move加一问号cursor:help箭头朝左cursor:w-resize箭头朝上cursor:n-resize箭头朝右上cursor:ne-resize箭头朝左上cursor:nw-resize文字I型cursor:text箭头斜右下cursor:se-resize箭头斜左下cursor:sw-resize漏斗cursor:wait光标图案(IE6) p {cursor:url("光标文件名.cur"),text;} 六、CSS框线一览表：border-top : 1px solid #6699cc; /*上框线*/border-bottom : 1px solid #6699cc; /*下框线*/border-left : 1px solid #6699cc; /*左框线*/border-right : 1px solid #6699cc; /*右框线*/以上是建议书写方式,但也可以使用常规的方式如下: border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/border-top-style : solid/*设置上框线top样式*/其他框线样式solid /*实线框*/dotted /*虚线框*/double /*双线框*/groove /*立体内凸框*/ridge /*立体浮雕框*/inset /*凹框*/outset /*凸框*/七、CSS表单运用：文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、CSS边界样式：margin-top:10px; /*上边界*/margin-right:10px; /*右边界值*/margin-bottom:10px; /*下边界值*/margin-left:10px; /*左边界值*/CSS 属性：字体样式(Font Style)序号中文说明标记语法1 字体样式{font:font-style font-variant font-weight font-size font-family}2 字体类型{font-family:"字体1","字体2","字体3",...}3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large|small| smaller| x-small| xx-small}4 字体风格{font-style:inherit|italic|normal|oblique}5 字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色{color:数值;}7 阴影颜色{text-shadow:16位色值}8 字体行高{line-height:数值|inherit|normal;}9 字间距{letter-spacing:数值|inherit|normal}10 单词间距{word-spacing:数值|inherit|normal}11 字体变形{font-variant:inherit|normal|small-cps }12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形{font-size-adjust:inherit|none}14 字体{font-stretch:condensed|expanded|extra-condensed|extra- expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}文本样式(Text Style)序号中文说明标记语法1 行间距{line-height:数值|inherit|normal;}2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格{text-indent:数值|inherit}4 水平对齐{text-align:left|right|center|justify}5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6 书写方式{writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色{background-color:数值}2 背景图片{background-image: url(URL)|none}3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定{background-attachment:fixed|scroll}5 背景定位{background-position:数值|top|bottom|left|right|center}6 背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白{margin:margin-top margin-right margin-bottom margin-left}2 补白{padding:padding-top padding-right padding-bottom padding-left}3 边框宽度{border-width:border-top-width border-right-width border-bottom-widthborder-left-width}宽度值：thin|medium|thick|数值4 边框颜色{border-color:数值数值数值数值}数值：分别代表top、right、bottom、left颜色值5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}6 边框{border:border-width border-style color}上边框{border-top:border-top-width border-style color}右边框{border-right:border-right-width border-style color}下边框{border-bottom:border-bottom-width border-style color}左边框{border-left:border-left-width border-style color}7 宽度{width:长度|百分比| auto}8 高度{height:数值|auto}9 漂浮{float:left|right|none}10 清除{clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示{display:none|block|inline|list-item}2 控制空白{white-space:normal|pre|nowarp}3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}4 图形列表{list-style-image:URL}5 位置列表{list-style-position:inside|outside}6 目录列表{list-style:目录样式类型|目录样式位置|url}7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w- resize|s-resize|se-resize|sw-resize}。

background复合属性详解（上）：background-image

background复合属性详解（上）：background-imagebackground复合属性是个很复杂的属性，花样⾮常多，⽐较神奇的是css3中⽀持多图⽚背景了，这篇⽂章先讲讲background-image属性，其他背景属性会在后续的⽂章综合总结。

⼀、最基本的情况是指定⼀张图⽚的url作为背景：<style>.parent{height:200px;width:500px;border: 10px solid rgb(125, 125, 123);background-color: #bff;background-image:url(halfRombes.png);}</style>效果如下（浏览器默认背景图⽚重复平铺）：⼆：将渐变指定为背景：background-image: linear-gradient(to left top, red, blue);效果如下（由右下⾓到左上⾓，由红⾊渐变到蓝⾊）：除了线性渐变，还有径向渐变，径向渐变也就是由中⼼向外辐射的渐变。

现代浏览器（包括ie10+）⽀持。

具体的语法这⾥不讨论，因为篇幅实在太长，请移步获取更详细的信息：，三、使⽤base64编码的图⽚：以本⽂第⼀个例⼦的图为例：该图的base64编码为："data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAeCAYAAAAcni9KAAAAaElEQVQ4jcXTMQ4AEBAEQH/yJ69Vq31CTSWRC26dDcVVu1NtzvkQq+VcyuUDP将图⽚url指向该图⽚编码，那么会得到和第⼀个例⼦⼀样的效果。

现代浏览器⽀持情况优秀，ie8+⽀持，对base64编码具体⽀持情况移步：可以看见，base64编码以data:开头，指明是什么类型的图⽚，如data:image/png;表⽰这串编码是png图⽚，接着是'base64;表⽰是base64编码格式，最后跟着的就是图⽚的编码信息了。

CSS常用样式–背景属性

CSS常⽤样式–背景属性⼀、背景颜⾊ background-color属性名：background-color作⽤：在盒⼦区域添加背景颜⾊的修饰加载区域：在 border 及以内加载背景颜⾊属性值：颜⾊名、颜⾊值<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 200px;height: 200px;padding: 30px;border: 5px dashed red;margin: 20px;background-color: slateblue;}</style></head><body><div class="box"> 背景颜⾊ </div></body></html>⼆、背景图⽚ background-image属性名：background-image作⽤：给盒⼦添加图⽚的背景修饰加载范围：默认的加载到边框及以内部分。

后期如果图⽚不重复加载，加载从 border 以内开始属性值：url(图⽚路径)url：uniform resource locator，统⼀资源定位符，⼩括号内部书写查找图⽚的路径.box {width: 200px;height: 200px;padding: 30px;border: 5px dashed red;margin: 20px;/* background-color: slateblue; 背景颜⾊ */background-image: url(images/lagouwang.jpg);}如果图⽚不重复，从 border 以内开始加载背景图和背景颜⾊可以同时设置，背景图会压盖背景颜⾊，没有背景图的区域会显⽰背景颜⾊三、背景重复 background-repeat属性名：background-repeat作⽤：设置添加的背景图是否要在盒⼦中重复进⾏加载根据属性值不同，有四种重复加载⽅式| 属性值 | 作⽤ || repeat | 重复，默认属性值，表⽰会使⽤背景图⽚重复加载填满整个盒⼦背景区域 || no-r epeat | 不重复，不论背景图是否⼤于盒⼦范围，都只加载⼀次图⽚ || repeat--x | ⽔平重复，使⽤背景图⽚⽔平重复加载铺满第⼀⾏，垂直⽅向不重复 || repeat--y | 垂直重复，使⽤背景图⽚垂直重复加载铺满第⼀列，⽔平⽅向不重复 |.box {width: 200px;height: 200px;padding: 30px;border: 5px dashed red;margin: 20px;/* background-color: slateblue; 背景颜⾊ */background-image: url(images/lagou_small.jpg);/* background-repeat: repeat; *//* background-repeat: no-repeat; *//* background-repeat: repeat-x; */background-repeat: repeat-y;}四、背景定位 background-position属性名：background-position作⽤：主要⽤于设置不重复的图⽚在背景区域的加载开始位置属性值：分为三种写法，单词表⽰法、像素表⽰法、百分⽐表⽰法。

background css用法

Background CSS用法什么是Background CSS？在CSS中，背景是指元素后面的区域。

通过使用Background CSS属性，我们可以设置元素的背景颜色、图片、位置等。

Background CSS提供了丰富的选项，使我们能够创建各种各样的背景效果。

基本语法在CSS中，通过以下语法来设置元素的背景：selector {background-color: value;background-image: value;background-repeat: value;background-position: value;background-size: value;background-attachment: value;}•background-color：用于设置元素的背景颜色。

•background-image：用于设置元素的背景图片。

•background-repeat：用于设置如何重复平铺背景图片。

•background-position：用于设置背景图片的位置。

•background-size：用于控制背景图片的尺寸。

•background-attachment：用于控制背景图片是否随滚动而移动。

背景颜色使用background-color属性可以为元素设置一个背景颜色。

可以使用颜色名称、十六进制值或RGB值来指定颜色。

selector {background-color: red; /* 使用颜色名称 */background-color: #ff0000; /* 使用十六进制值 */background-color: rgb(255, 0, 0); /* 使用RGB值 */}背景图片使用background-image属性可以为元素设置一个背景图片。

可以使用相对路径或绝对路径来指定图片的位置。

selector {background-image: url("image.jpg"); /* 使用相对路径 */background-image: url(""); /* 使用绝对路径 */}背景重复默认情况下，背景图片会在水平和垂直方向上平铺重复。