2.css基础入门笔记_LongLiveTheCPC

未知 02-07 1540

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>    <style> div{ color: blue; } /* 2.外部样式，直接把css代码写在外部，用link标签来引用，rel和href属性一定要加上 */ /* type属性写不写都行*/ <link rel="stylesheet" type="text/css" href="../css/index.css"> <link rel="stylesheet" href="../css/2.div_color_red.css"> /*3.选择器优先级，默认情况下类选择器和id选择器优先级大于元素选择器*/ /*如果指定了标签id，那么他的选择器就会被确定下来*/ /*id选择器*/ #div1 { color: red; } /*元素选择器*/ div { color: blue; } /*类选择器*/ .clas1 { color: green; } /**/ /*（1）.选择所有元素*/ * { color: red; } /*（2）.并集选择器*/ /*也就是div和p标签都会被改变*/ div, p { color: blueviolet; } /*（3）.子选择器*/ /*也就是div标签下的p标签会被改变*/ div p { color: pink; } /*（4）.父选择器*/ div > p { color: purple; border: 1px solid; } /*（5）.属性选择器*/ input[type="text"] { } input[type="password"] { } /*5.伪类选择器*/ /*（1）鼠标移动到超链接之前*/ a:link { color: pink; } /*（2）鼠标放到超链接上*/ a:hover{ color: blueviolet; } /*（3）鼠标点击超链接时*/ a:active{ color: yellow; } /*（4）鼠标访问超链接之后*/ a:visited{ color: red; } /* 6.这里的属性指的是css对标签属性的设置*/ p{ color: red; font-size: 300px; text-align: center; border: 1px solid purple; line-height: 300px; } div{ border: 1px solid ; height: 2000px; width: 2000px; background: blue; background:url("https://dsfs.oppo.com/omp/1634182533170-_-38d8a954de6541dcbeea19368b8975cd.png?_w_=1080&_h_=1080"); } /*7.盒子模型*/ .clas1 { border: 1px solid; color: red; width: 300px; size: 300px; height: 300px; text-align: center; } .clas2 { border: 1px solid; color: red; width: 50px; size: 50px; height: 50px; text-align: center; margin-left: 125px; margin-right: 125px; margin-top: 125px; margin-bottom: 125px; } .clas3 { float: left; border: 1px solid; } .clas4 { float: left; border: 1px solid; } .clas5 { border: 1px solid; } /*依旧是h5的注册案例，此时用css美化了一下*/ * { margin: 0px; padding: 0px; } body { background-image: url("https://tse1-mm.cn.bing.net/th/id/R-C.dab436e6a9d23101d719c1f3dd1a76a4?rik=ecsSPgiqEPBeNQ&riu=http%3a%2f%2f·.bing.net/th/id/OIP-C.eaeOunC0HJmzAA0M9fU1LQAAAA?w=276&h=149&c=7&r=0&o=5&dpr=1.25&pid=1.7"> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit"id="login" name="submit"> </td> </tr> </table> </form> </div> </center> <div class="rg_right" align="right"> <p> 已有帐号 </p> <p> <a href="#">立即登录</a> </p> </div> </div> </div> </center> </body> </html>