<!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title>css选择器</title> <style type="text/css"> /* HTML 文档css :root{ border: solid 1px red ; }; */ /*字选择器 带>号 也可以不用带*/ /*ul > li{ color: red; }*/ /*ul > li:first-child{ color: red; } ul > li:last-child{ color: red; } */ /*输入框的启用和禁止输入的CSS*/ /*input:enabled{ border: 1px solid red; } input:disabled{ border: 1px solid blue; }*/ /*验证成功就显示blue,验证不成功显示green*/ /*input:valid{ border: 1px solid blue; } input:invalid{ border: 1px solid green; }*/ /*必填表单 和 不必填表单*/ /*input:required{ } input:optional{ }*/ /*1. 显示 2.访问过后的显示 3.鼠标移动 4.点击不动后的显示*/ /*a:link{ } a:visited{ } a:hover{ } a:active{ }*/ /*获取光标时 谷歌不兼容*/ /*input:focus{ border: 1px solid red; }*/ /*a标签 href!=baidu 的a元素*/ /*a:not([href*="baidu"]){ color: red; }*/ /*em是相对的 跟字号大小挂钩,很灵活*/ p{ margin: 0; padding: 0; background: gray; font-size: 20px; width: 50%; } </style> </head> <body> <ul> <li>ul第1个子元素</li> <li>ul第2个子元素</li> <li>ul第3个子元素</li> <li>ul第4个子元素</li> </ul> <input type="text" /> <input type="email" /> <br/> <a href="http:www.baidu.com" >baidu</a> <a href="http:www.google.com" >google</a> <a href="http:www.haosou.com" >haosou</a> <p>em单位的讲解 em单位的讲解em单位的讲解em单位的讲解em单位的讲解 </p> </body> </html>
/*
display重要的概念
块级元素(display: block;) 1.能设置大小（height,width）2. 能自动的换行 div p
内联元素(display: inline;) 1.不能设置大小 2.不能自动换行 span b
内联-块(display: inline-block;) 1.能设置大小 2.不能自动换行 img
float浮动 理解：如果有div A,B。 A浮动B不浮动，相当于水下面的物体A浮动起来，然后在A后面的B就会跑到A的位置，A就会浮动到水面上，则就会挡住B。就相当于div A凸起来了，B就跑到A原来的位置了、
clean 为了下面的元素不受上面元素的浮动干扰，可以使用
clean:left|right|both; (清除浮动)
*/
div{ width: 400px; height: 300px; /*css3中的透明度*/ opacity: 0.5; border: 10px solid green; /* 阴影效果 1. 左右阴影 正是右边 负是左边 2. 上下 3. 阴影的模糊值 默认是0 4. 阴影的延伸半价 5. 颜色（可选） 6. inset值 （可选，内阴影） */ box-shadow: 5px 5px 5px 5px; /*轮廓*/ outline: red solid 1px; } /* em 和 rem单位的用法，都是相对的 */ html{ font-size: 10px; // 等价于 6.25% (默认字体大小16px,10/16) } .p1{ font-size: 1.7em; // em 相对于父元素的字体大小 } .p2{ font-size: 17px; } .p3{ font-size: 1.7rem; // rem 直接相对于根目录（设置html的字体大小） }