1.CSS的应用优先级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--<style>--> <!--div{--> #中间 <!--background-color: red;--> <!--color: black;--> <!--}--> <!--</style>--> <link href="commons.css" rel="stylesheet"/> #最低 </head> <body> <div> <p>This is a segment</p> <p style="background-color: white;color:red">This is a another segment</p> #最高 </div> </body> </html>
2.CSS选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div{ #标签选择器 background-color: red; color: black; } #i1{ #id选择器 background-color: green; color: black; } .i2{ #类选择器 background-color: yellow; color: black; } .i3,.i4,.i5{ #组合选择器 background-color: blue; color: black; } div div .i3{ #层级选择器 background-color: darkgray; color: black; } </style> <!--<link href="commons.css" rel="stylesheet"/>--> </head> <body> <div> <p>This is a segment</p> <p id="i1">This is a another segment</p> <div> <p class="i3">层级选择器</p> </div> <p class="i2">新开的一个段</p> <p class="i2">新开的一个段</p> <p class="i2">新开的一个段</p> </div> <div> <p class="i3">这里也有一个i3选择器</p> <p class="i4">这里也有一个i4选择器</p> <p class="i5">这里也有一个i5选择器</p> </div> </body> </html>
CSS的样式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .c1{ #定义图片必须定义高度和宽度，这就是定义了窗口，有了窗口才可以看到后面的内容，而background-position是定义图片位置 background-color: blue; color: red; font-size: 50px; height: 150px; width: 100%; } .img{ background-image: url("back.gif"); height: 300px; width: 500px; background-repeat: no-repeat; } .img2{ background-image: url("back.gif"); height: 100px; width: 150px; background-position: -132px -155px; } .img3{ height: 300px; width: 4000px; background: red url("back.gif") -132px -155px no-repeat; } </style> </head> <body> <div class="c1">HELLO WORLD</div> <div style=" 500px"> <div style=" 20%;background-color: aliceblue;float: left">DIV width</div> <div style=" 80%;background-color: aqua;float: left" >DIV width</div> <div class="img"></div> </div> <!--<div class="img2"></div>--> <div class="img3"></div> </body> </html>
效果如下：
将京东的购物车模块放置在网站的右上角
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .icon{ background-image: url("jd2015img.png"); height: 30px; width: 30px;; background-color: chartreuse; background-repeat: no-repeat; background-position: 6px -83px; } </style> </head> <body> <div style=" 500px;"> <div style=" 90%;height:500px;background-color: blue;float: left">DIV width</div> <div style=" 10%;height:500px;background-color: red;float: left" > <div class="icon"></div> </div> </div> </body> </html>
border的相关属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .bstyle{ border: dashed red; height: 50px; width: 60px; background-color: aqua; } </style> </head> <body> <div style="border-left: solid;height: 40px; 40px;background-color: red">test border</div> <div class="bstyle">HELLO</div> </body> </html>
display属性
div块级标签，display:block那么块级标签换行，如果display:inline-block，那么块级标签也不换行，display:inline那么定义的高度无效了。
display:none不显示，还有visibility:hidden也是隐藏的参数。
纯内联标签，宽度高度都不生效。加上display:inline-block，高度和宽度都生效了。
cursor属性：当鼠标放在相应的字体上的时候，图标发生相应的变化
<span style="cursor:auto">Auto</span><br /> <span style="cursor:crosshair">Crosshair</span><br /> <span style="cursor:default">Default</span><br /> <span style="cursor:pointer">Pointer</span><br /> <span style="cursor:move">Move</span><br /> <span style="cursor:e-resize">e-resize</span><br /> <span style="cursor:ne-resize">ne-resize</span><br /> <span style="cursor:nw-resize">nw-resize</span><br /> <span style="cursor:n-resize">n-resize</span><br /> <span style="cursor:se-resize">se-resize</span><br /> <span style="cursor:sw-resize">sw-resize</span><br /> <span style="cursor:s-resize">s-resize</span><br /> <span style="cursor:w-resize">w-resize</span><br /> <span style="cursor:text">text</span><br /> <span style="cursor:wait">wait</span><br /> <span style="cursor:help">help</span>
margin: 外边距，相对于里面的<div>在移动的过程中是外部的。
padding: 内边距，增加<div>边框的高度，宽度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border: 1px solid red;height: 100px; 150px"> <div style="border: 1px solid;background-color: red;height: 40px; 50px"></div> </div> <div style="border: 1px solid red;height: 200px;"> <div style="margin-top: 30px;margin-left: 30px"> 用户名：<input type="text"/><br /><br /> 密码：<input type="password"/><br /><br /> 邮箱：<input type="email"/><br /><br /> </div> </div> </body> </html>
float标签：不加float，默认在一个行里面，如果加上float就按漂浮指定的方向来堆叠，但是默认漂浮之后就不在父边框里面了，因而支撑不起父边框，需要加上clear参数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style=" 300px;border: 1px red solid"> <div style=" 20%;background-color: aqua;float: left">FLOAT1</div> <div style=" 20%;background-color: yellow;float: left">FLOAT2</div> <div style="clear: both"></div> </div> </body> </html>
position标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--<div style="height: 1000px;background-color: azure">--> #fixed将标签位固定 <!--<div style="position: fixed;top: 0;right:100px;">返回标签</div>--> <!--</div>--> <div style="height: 300px; 400px;border: 1px solid red;position: relative"> #absolute和relative通常匹配使用，absolute是相对于整个页面是绝对 <div style="position: absolute;bottom: 0;right: 0">相对位置的返回</div> #的位置，配置relative可将位置移动到父标签的relative<div>里面 </div> </body> </html>
opacity:透明度
z-index:层级关系
用伪类清除float
当我们使用clear:both的时候，实现的效果是这样的：
如果不加clear:both,效果就是下面的,因为float都撑不起来这个块:
<div style="background-color: green" class="item">dddddd <div class="left" style="background-color: mediumvioletred;height: 100px">1</div> <div class="left">2</div> <div style="clear: both"></div>
下面我们不用clear:both，而用其他的方法来实现这样的这样的需求，用下面的代码可以达到同样的效果：
.item{
color: orange;
font-size: 30px;
}
.item:after{
content: '.';
clear: both;
display: block;
visibility: hidden;
height: 0;
}
小尖角的制作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .icon{ display: inline-block; border-top: 15px solid transparent; border-right: 15px solid green; border-bottom: 15px solid transparent; border-left: 15px solid transparent; } </style> </head> <body> <div class="icon"></div> </body> </html>