CSS--background系列属性

2023-05-01 21:29:02html-css0151

CSS--background系列属性,第1张

css2.1中，颜色的表示方法有三种：（1）单词；（2）rgb表示法（十进制表示法）；（3）十六进制表示法。

能够用英语单词来表述的颜色，都是简单颜色。

红色：background-color: red

红色：background-color：rgb（255,0,0）；

rgb（red、green、blue）表示三原色“红”“绿”“蓝”。光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色。

用逗号隔开r，g，b的值，每个值的取值范围是0~255，一共256个值。

如果此项的值是255，那么就说明是纯色：

绿色：background-color：rgb（0,255，0）

蓝色：background-color：rgb（0,0,255）

黑色：background-color：rgb（0，0，0）

白色：background-color：rgb（255,255,255）

颜色可以叠加，比如黄色就是红色和黄色的叠加：

黄色：background-color：rgb（255,255,0）

紫色：background-color：rgb（255,0，255）

青色：background-color：rgb（0,255,255）

红色：background-color：#ff0000；

所有用#开头的值，都是16进制的。

#ff0000（ff表示r，00表示g，00表示b）

16进制表示法和rgb类似，也是两位两位的看，但是没有逗号隔开。

上述红色表示法中：ff就是10进制的255,00就是十进制的0，所以#ff0000相当于（255,0,0）

十六进制对照表：

任何一种十六进制表示法都能够换算成rgb表示法。也就是说，两个表示法能表示的颜色数量一样多，十六进制能够简化成3位，所有#rrggbb的形式，都可以写成#rgb；

比如，上述的红色可以写成background-color：#f00；

但是，如果要采用简化的方法，必须满足rrggbb格式才行。

几个特殊的要记住：

黑：#000

白：#fff

红：#f00

灰：#333

深灰：#222

浅灰：#ccc

background-image属性用于给盒子加上背景图片：

background-image：url（images/1.jpg）

url（）表示网址。、

images/1.jpg就是相对路径。

背景会默认循环，平铺满整个盒子，padding的区域也会有背景图。

background-repeat属性用来设置背景图是否重复以及重复方式。

“repeat”表示“重复”。

默认为铺满，不用设置。

不重复：background-repeat：no-repeat；

横向重复：background-repeat：repeat-x；

纵向重复：background-repeat：repeat-y；

background-position：背景定位属性。

格式：background-position：向右移动量（100px）向下移动量（200px）

向上向左移只需把移动量改成负数即可。

css精灵又叫“css雪碧”技术，是一种css图像拼合技术，该方法是将小图标和图像合并到一张图上，然后利用css背景定位来显示需要显示的图片部分。

css精灵的优点，就是减少了http请求。比如4张小图片，原本需要4个http请求。但是用了css精灵，小图片变为了一张图，http请求只有1个了。

background-position：描述左右的词描述上下的词；

比如：background-position：right bottom：（右下角）

background-position：center center；（居中）

背景固定属性。

格式：background-attachment：fixed；

背景就会被固定住，不会被滚动条滚走。

background属性和border一样，是一个综合属性：

background：red url（1.jpg） no-repeat 100px 100px fixed；

等价于：

background-color：red；

background-image：url（1.jpg）；

background-repeat：no-repeat；

background-position：100px 100px；

background-attachment：fixed；

可以任意省略部分：

background：red；

纠正一下，，

placeholder是HTML5的新属性，并不是CSS3，，，CSS3和CSS2都是一样的，是在<style></style>里，或者CSS文件里，或者style=""这里面的。

修改颜色，，这个网上倒是有几种办法，

一，使用伪类：

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

color: #f00

}

::-moz-placeholder { /* Mozilla Firefox 19+ */

color: #f00

}

input:-ms-input-placeholder,

textarea:-ms-input-placeholder {

color: #f00

}

input::-webkit-input-placeholder,

textarea::-webkit-input-placeholder {

color: #f00

}

二是使用JS来替换掉占位符：

$('[placeholder]').focus(function() {

var input = $(this)

if (input.val() == input.attr('placeholder')) {

input.val('')

input.removeClass('placeholder')

}

}).blur(function() {

var input = $(this)

if (input.val() == '' || input.val() == input.attr('placeholder')) {

input.addClass('placeholder')

input.val(input.attr('placeholder'))

}

}).blur()

$('[placeholder]').parents('form').submit(function() {

$(this).find('[placeholder]').each(function() {

var input = $(this)

if (input.val() == input.attr('placeholder')) {

input.val('')

}

})

CSS:

form .placeholder {

color: #222

font-size: 25px

/* etc */

}

三就是用最常用的onfocus：

<input type="text" value="placeholder text" onfocus="this.style.color='#000'

this.value=''" style="color: #f00"/>

1.boder-radis圆角的制作

2.linear-gradient渐变背景的制作

3.box-shadow阴影效果的制作

4.transition转换效果的制作

5.transparent透明效果

6.CCS3中before的作用

实现的效果图如下：

搭建HTML容器

一级菜单ul的样式修饰：

设置一级菜单的宽度、整体居中显示、用border设置颜色为#222的1像素宽的边框、用background-color设置背景颜色为#111、用background-image和linear-gradient设置背景图片为#444和#111的渐变效果、用border-radius设置圆角边框为6px、用before和after的方式给一级ul填充内容是清除二级浮动的一种方式保证背景能够包裹所有ul内的元素

.top-nav{width:969pxmargin:60px autoborder:1px solid #222background-color:#111 background-image:linear-gradient(#444,#111)border-radius:6pxbox-shadow:0 1px 1px #777 padding:0list-style:none} .top-nav:before,.top-nav:after{content: ""display: table} .top-nav:after{clear: both}

一级菜单内li的样式修饰：

用float将所有的li左浮动、用boder-right给每一个li制作一个左边框效果、用box-shadow制作阴影效果、position：relative是为了下面二级菜单的显示二级菜单会以absolute的方式定位

.top-nav li{float: leftborder-right:1px solid #222box-shadow:1px 0 0 #444position: relative}

一级菜单内li中a元素以及鼠标移动到a元素上之后的样式修饰

这些属性比较简单，就不作一一介绍了

.top-nav li a{float:lefttext-decoration: nonepadding:12px 30pxfont-size:12pxfont-weight:boldtext-shadow: 0 2px 0 #000color: #999} .top-nav li a:hover{color: #fafafa}

二级菜单ul的样式修饰

二级菜单默认是隐藏状态，用绝对定位的方式（相对于一级菜单）将二级菜单定位在top:38pxleft:0的位置上、同样给二级菜单设置渐变背景色和阴影的效果box-shadow中的rgba属性可以制作透明度的效果、用opacity这是透明级别为0、用transition制作一个过度显示和隐藏的效果

.top-nav li ul{visibility: hiddenposition: absolutelist-style: nonetop:38pxleft: 0z-index: 1padding: 0 background-color: #444background-image: linear-gradient(#444,#111)box-shadow: 0 -1px 0 rgba(255,255,255,.3)border-radius: 3pxopacity: 0margin: 20px 0 0 0transition: all .2s ease-in-out }

当鼠标移动到一级菜单栏的时候二级菜单栏显示

hover属性的应用

.top-nav li:hover >ul{opacity: 1visibility: visiblemargin: 0}

设置二级菜单li和a的样式

方法和一级菜单的li和a的修饰差不多，不做过多的解释

.top-nav ul li{float: nonedisplay: blockborder: 0box-shadow: 0 1px 0 #111,0 2px 0 #666} .top-nav ul a{padding: 10pxwidth: 130pxdisplay: blockfloat: none} .top-nav ul a:hover{background-color: #0186babackground-image: linear-gradient(#04acec,#0186ba)} .top-nav ul li:first-child >a{border-radius: 3px 3px 0 0} .top-nav ul li:last-child >a{border-radius: 0 0 3px 3px}

三角形的制作

用css3制作三角形的的方法就是四边设置同样宽度的border，将要保留的那一边的border设置颜色，其他三边的颜色设置为透明(transparent)，则保留颜色的那一边的三角形就制作出来了

.top-nav ul li:first-child >a:before{ content: ""position: absoluteleft:40pxtop: -6px display: blockwidth: 0border-bottom: 6px solid #444border-left: 6px solid transparent border-right: 6px solid transparent } .top-nav ul li:first-child >a:hover:before{border-bottom-color:#04acec}

三级菜单位置的变换

将三级菜单定位到二级菜单的右边显示

.top-nav ul ul{top:0left: 150pxmargin: 0 0 0 20pxbox-shadow: -1px 0 0 rgba(255,255,255,.3)} .top-nav ul ul li:first-child a:before{left: -6pxtop: 50%margin-top: -6pxborder-left: 0border-bottom: 6px solid transparent border-top: 6px solid transparentborder-right: 6px solid #3b3b3b} .top-nav ul ul li:first-child a:hover:before{border-right-color:#0299d3border-bottom-color:transparent}

完整代码(其中有针对IE6的兼容性处理)

<!DOCTYPE html><html><head> <meta charset="UTF-8">  <title>用CSS3实现动画效果的制作</title> <style type="text/css"> .top-nav{width:969pxmargin:60px autoborder:1px solid #222background-color:#111 background-image:linear-gradient(#444,#111)border-radius:6pxbox-shadow:0 1px 1px #777 padding:0list-style:none} .top-nav:before,.top-nav:after{content: ""display: table} .top-nav:after{clear: both} /*针对IE6,_margin，_height是针对IE6的,其他浏览器中不需要*/ .top-nav{z-index: 1} .top-nav li{float: leftborder-right:1px solid #222box-shadow:1px 0 0 #444position: relative} .top-nav li a{float:lefttext-decoration: nonepadding:12px 30pxfont-size:12pxfont-weight:bold text-shadow: 0 2px 0 #000color: #999} .top-nav li a:hover{color: #fafafa} .top-nav li ul{visibility: hiddenposition: absolutelist-style: nonetop:38pxleft: 0z-index: 1padding: 0 background-color: #444background-image: linear-gradient(#444,#111)box-shadow: 0 -1px 0 rgba(255,255,255,.3) border-radius: 3pxopacity: 0margin: 20px 0 0 0transition: all .2s ease-in-out _margin:0 } .top-nav li:hover >ul{opacity: 1visibility: visiblemargin: 0} .top-nav ul li{float: nonedisplay: blockborder: 0box-shadow: 0 1px 0 #111,0 2px 0 #666} .top-nav ul a{padding: 10pxwidth: 130pxdisplay: blockfloat: none_height:10px} .top-nav ul a:hover{background-color: #0186babackground-image: linear-gradient(#04acec,#0186ba)} .top-nav ul li:first-child >a{border-radius: 3px 3px 0 0} .top-nav ul li:last-child >a{border-radius: 0 0 3px 3px} .top-nav ul li:first-child >a:before{ content: ""position: absoluteleft:40pxtop: -6px display: blockwidth: 0border-bottom: 6px solid #444border-left: 6px solid transparent border-right: 6px solid transparent } .top-nav ul li:first-child >a:hover:before{border-bottom-color:#04acec} .top-nav ul ul{top:0left: 150pxmargin: 0 0 0 20px_margin:0box-shadow: -1px 0 0 rgba(255,255,255,.3)} .top-nav ul ul li:first-child a:before{left: -6pxtop: 50%margin-top: -6pxborder-left: 0border-bottom: 6px solid transparent border-top: 6px solid transparentborder-right: 6px solid #3b3b3b} .top-nav ul ul li:first-child a:hover:before{border-right-color:#0299d3border-bottom-color:transparent} </style> <script type="text/javascript"> // $(function () { // if($.browser.msie &&$.broswer.version.substr(0,1)<7){ // $("li").has("ul").mouseover(function () { // $(this).children("ul").css("visibility","visible")// }).mouseout(function () { // $(this).children("ul").css("visibility","hidden")// })// } // }) </script></head><body><ul> <li><a href="#">首页</a></li> <li><a href="#">课程大厅</a></li> <li><a href="#">学习中心 +</a> <ul> <li><a href="#">视频学习</a> <ul> <li><a href="#">css</a></li> <li><a href="#">js</a></li> <li><a href="#">jquery</a></li> </ul> </li> <li><a href="#">案例学习</a></li> <li><a href="#">交流平台</a></li> </ul> </li> <li><a href="#">关于我们</a></li></ul></body>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：用javascript实现将iso-8859-1的字符串转gb2312字符串

# 下一篇：html和css学习总结