CSS的引入方法、选择器
标签：
前端——CSS的引入方法、选择器 什么是CSS？层叠样式表（就是用来调治标签的样式）
CSS注释 /*单行注释*/ /*多行注释1 多行注释2 多行注释3 */ 注释的使用css应该是一个独立的文件
/*页面通用样式*/ /*顶部导航栏样式*/ /*侧边菜单栏样式*/ …… css语法布局 选择器 {属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;……} css三种引入方法外部css文件（最正规的书写方法）
/*mycss*/ /*这是一个非常牛逼的页面的css样式文件*/ /*大众样式*/ p { color: aquamarine; } /*外部引用css文件*/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href=http://www.mamicode.com/"mycss.css"> </head> <body> <p>秦时明月汉时关</p> </body> </html>head内style标签内部直接书写css代码
/*head内style标签内部直接书写css代码*/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { color: blue; } </style> </head> <body> <p>秦时明月汉时关</p> </body> </html>标签内部通过style属性直接书写对应的样式（不保举）
/*标签内部通过style属性直接书写对应的样式*/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p style="color: red">秦时明月汉时关</p> </body> </html> css选择器根基选择器
标签选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { /*将页面中所有的div标签内的文本酿成红色*/ color: red; } </style> </head> <body> <div class="c1">我是div我的class为c1 /*---> 变红色*/ <span>我是div内部的span</span> /*---> 变红色*/ </div> <p id="d1" class="c1">我是p我的id为d1我的class为c1</p> <div>我是div</div> /*---> 变红色*/ <span class="c1">我是span我的class为c1</span> <p>我是p</p> <span id="d2">我是span我的id为d2</span> </body> </html>类选择器：. 属性值 {css样式} 重点：必然记住是.号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*类选择器*/ .c1 { /*将页面中具有c1类属性值的标签内部文本全部酿成蓝色*/ color: blue; } </style> </head> <body> <div class="c1">我是div我的class为c1 /*---> 变蓝色*/ <br> <span>我是div内部的span</span> /*---> 变蓝色*/ </div> <p id="d1" class="c1">我是p我的id为d1我的class为c1</p> /*---> 变蓝色*/ <div>我是div</div> <span class="c1">我是span我的class为c1</span> /*---> 变蓝色*/ <p>我是p</p> <span id="d2">我是span我的id为d2</span> </body> </html>id选择器：#id值{css样式} 重点：必然记住是#号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { /*将页面中id为d1的标签内所有文本酿成黄色*/ color: yellow; } </style> </head> <body> <div class="c1">我是div我的class为c1 <br> <span>我是div内部的span</span> </div> <p id="d1" class="c1">我是p我的id为d1我的class为c1</p> /*---> 变黄色*/ <div>我是div</div> <span class="c1">我是span我的class为c1</span> <p>我是p</p> <span id="d2">我是span我的id为d2</span> </body> </html>通用选择器：{css样式} 重点：**** 号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*通用选择器*/ * { /*将当前页面内的所有标签内所有内容改为绿色*/ color: green; } </style> </head> <body> <div class="c1">我是div我的class为c1 /*---> 变绿色*/ <br> <span>我是div内部的span</span> /*---> 变绿色*/ </div> <p id="d1" class="c1">我是p我的id为d1我的class为c1</p> /*---> 变绿色*/ <div>我是div</div> /*---> 变绿色*/ <span class="c1">我是span我的class为c1</span> /*---> 变绿色*/ <p>我是p</p> /*---> 变绿色*/ <span id="d2">我是span我的id为d2</span> /*---> 绿色*/ </body> </html>组合选择器(重点记住特殊标记)
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/32979.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")