前端工程师
主流浏览器
shell && 内核
①有市场 ②必须有独立开发的内核
IE trident
Firefox Gecko
Google chrome webkit \ blink
safair webkit
opera presto
html 代码
1 <html lang="en"> 2 <head> 3 <meta charset="utf-8"> 4 <title>Document</title> 5 6 <!-- 3.外部css文件--> 7 <link rel="stylesheet" type="text/css" href="class1.css"> 8 9 10 <!-- 2.页面及标签 11 <style type="text/css"> 12 div{ 13 width: 100px; 14 height: 100px; 15 background-color: green; 16 } 17 </style> --> 18 </head> 19 <body> 20 cascading style sheet 层叠样式表 21 层叠 样式 表格 22 <!--1.引入css 23 css可以加在div里，叫做行间样式 24 <div style=" 25 26 width: 100px; 27 height: 100px; 28 background-color: red; 29 30 "></div> --> 31 <h1>1.style加在div里 行间样式</h1> 32 <h2>2.页面级标签</h2> 33 <h3>3.外部css文件</h3> 34 35 <!-- 1.id选择器 --> 36 <div id="cold">123</div> 37 38 <!-- 2.class选择器--> 39 <div class="demo">123</div> 40 41 <!-- 3.标签选择器 --> 42 <div>123</div> 43 44 <!-- 4.通配符 --> 45 <!-- 5.属性选择器 --> 46 47 <!-- 按优先级比较 --> 48 <!-- 行间样式style > id > class > 标签选择器 > 通配符 --> 49 <!-- 属性选择器和class选择器优先级一样 --> 50 <!-- 当在属性后面加 ！importent 后，优先级最高 --> 51 52 css权重 53 ！importent Infinity 54 行间样式 1000 55 id 100 56 class | 属性 | 伪类 10 57 标签 | 伪元素 1 58 通配符 0 59 采用的是 250进制 60 </body>
css 代码
1 #cold{ 2 /*id选择器*/ 3 background-color: hotpink; 4 } 5 6 .class{ 7 /*class选择器*/ 8 background-color: yellow; 9 } 10 11 .class{ 12 color: hotpink; 13 } 14 15 div{ 16 /*标签选择器*/ 17 background-color: red!important; 18 } 19 20 *{ 21 /*通配符*/ 22 background-color: yellow; 23 } 24 25 [id="only"]{ 26 /*属性选择器*/ 27 background-color: yellow; 28 }