首页 > 代码库 > CSS使用
CSS使用
CSS介绍
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
语法：style = ‘key1:value1;key2:value2;‘
存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点:
- 在标签中使用 style=‘xx:xxx;‘,优先级最高
- 在页面中嵌入 < style type="text/css"> 块
- 引入外部css文件,优先级最低
css选择器
标签选择器
div{ background-color:red; }
<div > </div>class选择器
.bd{ background-color:red; }
<div class=‘bd‘> </div>ID选择器
#idselect{ background-color:red; }
<div id=‘idselect‘ > </div>关联选择器
空格隔开关联的标签即可
#idselect p{ background-color:red; }
<div id=‘idselect‘ > <p> </p> </div>组合选择器
input,div,p{ background-color:red; } 属性选择器
将属性统一处理
input[type=‘text‘]{ width:100px; height:200px; }
栗子如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--<link rel="stylesheet" href="http://www.mamicode.com/common.css" />--> <style> /*标签选择器，找到所有的标签应用以下样式*/ div{ color: green; } /*id选择器，找到标签id等于i1的标签，应用以下样式*/ #i1{ font-size: 56px; /* color: green; */ } /*class选择器，找到class=c1的所有标签，应用一下样式*/ .c1{ background-color: red; } /*层级选择器，找到 class=c2 下的div下的p下的class=c3标签，应用以下样式*/ /*.c2 div p a{*/ /**/ /*}*/ .c2 div p .c3{ background-color: red; } /*组合选择器，找到class=c4,class=c5,class=c6,的标签，应用以下样式*/ .c4,.c5,.c6{ background-color: aqua; } </style> </head> <body> <div class="c4">1</div> <div class="c5">1</div> <div class="c6">1</div> <div class="c2"> <div></div> <div> <p> <span>oo</span> <a class="c3">uu</a> </p> </div> </div> <div class="c3">sdfsdf</div> <span class="c1">1</span> <div class="c1">2</div> <a class="c1">3</a> <a id="i1">baidu</a> <div>99</div> <div>99</div> <div>99</div> <div> <div>asdf</div> </div> </body> </html>
常用属性
background
background-color
code:
<div style="background-color: chartreuse"> hello,world!</div>background-image
这里需要注意下:url中为单引号
<div style="background-image: url(‘4.gif‘);height: 80px;"></div>background-position
直接看全部代码吧:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>PIC_test</title> <style> .img{ background: url(1.png); height: 20px; width: 20px; background-position: 0px -141px; background-repeat: no-repeat; } .img1{ background: url("4.gif"); height: 500px; width: 500px; background-repeat: no-repeat; } </style> </head> <body> <div class="img"></div> <div>登录</div> <div class="img1"></div> <div style=" padding: 0px;">>hello,world!</div> <div style="background-image: url(‘4.gif‘);height: 80px;"></div> </body> </html>
background-repeat
设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像
repeat | no-repeat | repeat-x | repeat-y
- repeat : 背景图像在纵向和横向上平铺
- no-repeat : 背景图像不平铺
- repeat-x : 背景图像在横向上平铺
- repeat-y : 背景图像在纵向平铺
border
边框:分为三类
- solid 实线
- dotted 点虚线
- dashed 断点虚线
代码:
<div style="height: 100px;border: 1px solid red;"> <div style="margin-top: 30px;margin-left: 100px;"> <input /> <input /> <input /> </div> </div>
margin padding区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。
一、padding
1、语法结构
（1）padding-left:10px; 左内边距
（2）padding-right:10px; 右内边距
（3）padding-top:10px; 上内边距
（4）padding-bottom:10px; 下内边距
（5）padding：10px; 四边统一内边距
（6）padding:10px 20px; 上下、左右内边距
（7）padding:10px 20px 30px; 上、左右、下内边距
（8）padding:10px 20px 30px 40px; 上、右、下、左内边距
2、可能取的值
（1）length 规定具体单位记的内边距长度
（2）% 基于父元素的宽度的内边距的长度
（3）auto 浏览器计算内边距
（4）inherit 规定应该从父元素继承内边距
3、浏览器兼容问题
（1）所有浏览器都支持padding属性
（2）任何版本IE都不支持属性值“inherit”
二、margin
1、语法结构
（1）margin-left:10px; 左外边距
（2）margin-right:10px; 右外边距
（3）margin-top:10px; 上外边距
（4）margin-bottom:10px; 下外边距
（5）margin:10px; 四边统一外边距
（6）margin:10px 20px; 上下、左右外边距
（7）margin:10px 20px 30px; 上、左右、下外边距
（8）margin:10px 20px 30px 40px; 上、右、下、左外边距
2、可能取的值
（1）length 规定具体单位记的外边距长度
（2）% 基于父元素的宽度的外边距的长度
（3）auto 浏览器计算外边距
（4）inherit 规定应该从父元素继承外边距
3、浏览器兼容问题
（1）所有浏览器都支持margin属性
（2）任何版本IE都不支持属性值“inherit”区别图:
display
四种:
- none 隐藏,元素不会被显示
- block 占据浏览器的一整行,此元素将显示为块级元素，此元素前后会带有换行符。
- inline 内联,默认。此元素会被显示为内联元素，元素前后没有换行符
- inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
none
什么都看不到,但我确实写了,code:
<div style="display:none;">none</div>
block
- 总是在新行上开始;
- 高度，行高以及顶和底边距都可控制；
- 宽度缺省是它的容器的100%，除非设定一个宽度
<div>, <p>,<h1>, <form>, <ul> 和 <li>是块元素的例子。
code:
<span style="">content</span>
<span style="display: block; ">content</span>可将内联标签转为块级标签显示
inline
- 和其他元素都在一行上；
- 高，行高及顶和底边距不可改变；
- 宽度就是它的文字或图片的宽度，不可改变
code:
<div style="">content</div> <div style="display:inline;">content</div>
inline-block
准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性
code:
<span style="height: 50px;width: 200px;">asdfasdf</span> <span style="display: inline-block;height: 50px; ">asdsfsdf</span>
cursor
定义鼠标的动作,有5个值:
pointer |
help |
wait |
move|
crosshair
code:
<span style="cursor:pointer;">pointer</span> | <span style="cursor:help;">help</span> | <span style="cursor:wait;">wait</span> | <span style="cursor:move;">move</span>| <span style="cursor:crosshair;">crosshair</span>
可以伪造一个链接,点到鼠标坏也打不开:
code:
<span style="cursor:pointer;color:blue;">pointer</span>
float
漂浮,可以有left,right,但是,如果多窗口漂浮的话,会出现漂出边界的情况,漂得太淫荡了...
所以,为了防止漂出边界,我们可以用clear:both;把窗口给拽下来!
code:
<div style="width: 500px;height: 50px;border: 1px solid red"> <div style="width: 20%;float: left">asdf</div> <div style="width: 30%;float: right">sdfdsf</div> <div style="clear: both;"></div> </div>
code:
<div style="width: 500px;border: 1px solid red;"> <div style="width: 20%;float: left">f</div> <div style="width: 30%;float: right">a</div> <div style="width: 30%;float: right">a</div> <div style="clear: both;"></div> </div>
我是分割线------------
下面的多了一行<div style="clear: both;"></div>
position
有4个属性值:
- relative 相对
- absolute 绝对
- fixed 固定
- static 默认静态
更多的东西请点我
relative
如果设定 position:relative，就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置移动了】,它是按照原来自己应该所在的位置进行相对移动的
relative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中，sub1和sub2是同级关系，如果设定sub1一个relative属性，比如设置如下CSS代码：
#sub1
{
position: relative;
padding: 5px;
top: 5px;
left: 5px;
}我们可以这样理解，如果不设置relative属性，sub1的位置按照正常的文档流，它应该处于某个位置。但当设置sub1为的position为relative后，将根据top，right，bottom，left的值按照它理应所在的位置进行偏移，relative的“相对的”意思也正体现于此。
对于此，您只需要记住，sub1如果不设置relative时它应该在哪里，一旦设置后就按照它理应在的位置进行偏移。
随后的问题是，sub2的位置又在哪里呢？答案是它原来在哪里，现在就在哪里，它的位置不会因为sub1增加了position的属性而发生改变。
如果此时把sub2的position也设置为relative，会发生什么现象？此时依然和sub1一样，按照它原来应有的位置进行偏移。
注意relative的偏移是基于对象的margin的左上侧的。
absolute
当指定 position:absolute 时，元素就脱离了文档【即在文档中已经不占据位置了】，可以准确的按照设置的 top,bottom,left 和 right 来定位了。
#div-1a { position:absolute; top:0; right:0; width:200px; }这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是fixed属性的特点。
当sub1的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：
（1）当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时sub1按照这个parent来进行定位。
注意，对象虽然确定好了，但有些细节需要您的注意，那就是我们到底以parent的哪个定位点来进行定位呢？如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。
接下来的问题是，sub2的位置到哪里去了呢？由于当position设置为absolute后，会导致sub1溢出正常的文档流，就像它不属于 parent一样，它漂浮了起来，在DreamWeaver中把它称为“层”，其实意思是一样的。此时sub2将获得sub1的位置，它的文档流不再基于 sub1，而是直接从parent开始。
（2）如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解。
relative+ absolute
如果我们给 div-1 设置 relative 定位，那么 div-1 内的所有元素都会相对 div-1 定位。如果给 div-1a 设置 absolute 定位，就可以把 div-1a 移动到 div-1 的右上方。
#div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 500px;height: 600px;border: 1px solid red;position: relative"> <div style="height: 200px"> <!--固定在某个窗口的固定位置,其实也是相对的--> <div style="position: absolute;bottom: 0;right: 0">1111</div> </div> </div> <div style="height: 1000px;"></div> <!--固定在浏览器窗口某个固定位置--> <div style="position: fixed;right: 200px;bottom: 100px">xxxxx</div> </body> </html>
fixed
fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。
static
position的默认值，一般不设置position属性时，会按照正常的文档流进行排列
透明度
类似于一共三层图片,中间一层是透明层,底层的东西无法点击.
关键词:
- z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。数值越高越在前面
- opacity 设置透明度的,0-1以内的值
- padding: 0px 5px !important; line-height: 1.8; vertical-align: middle; display: inline-block; font-family: ‘Courier New‘, sans-serif !important; font-size: 12px !important; border: 1px solid rgb(204, 204, 204) !important; border-radius: 3px !important; background-color: rgb(245, 245, 245) !important;">background-color: black;opacity: 0.4;
思路:先用fixed将图像固定在窗口,再使用position移动图片到,然后margin调整到正中间,然后再调整透明度.
将一张图搞得透明,我直接上代码了:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide { display: none; } .modal{ width: 400px; height: 300px; background-color: #dddddd; position: fixed; top: 50%; left: 50%; margin-left: -200px; margin-top: -150px; z-index: 10; } .shadow{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; /*background-color: black;*/ /*opacity: 0.4;*/ background-color: rgba(0,0,0,.6); z-index: 9; } </style> </head> <body> <input type="button" value="添加" /> <div class="shadow"></div> <div class="modal"> <input type="text"/> <input type="text"/> <input type="text"/> <input type="text"/> </div> <div style="height: 2000px;"> </div> </body> </html>
img标签
注意路径叫src
<img src="2.jpg" style="height: 500px;width: 20px;">
改造默认样式
- 首页
- 菜单1
- 菜单2
我是分割线
code:
<div id="t80"> <!-- <h2>默认样式改造</h2> <ul> <li>首页</li> <li>菜单1</li> <li>菜单2</li> </ul>--> <style type="text/css"> .changeul{ margin: 0px; padding-top: 0px; } .changeul li{ list-style-type: none; float: left; background-color: #ddd; } .changeul li a{ display: block; padding: 19px 20px; } .changeul li a:hover{ background-color: red; } </style> <ul class="changeul"> <li><a href="http://www.baidu.com">首页</a></li> <li><a href="http://www.baidu.com">菜单1</a></li> <li><a href="http://www.baidu.com">菜单2</a></li> </ul> </div>
CSS使用