前端小白学习------css初级篇-css引入css基础选择器选择器权重
主流浏览器css 装修html引入css ：1.行间样式引入css ：2.页面级css引入css ：3.外部css文件
选择器id选择器class 选择器标签选择器通配符选择器属性选择器
主流浏览器
主流浏览器内核
IEtridentFirefoxGeckoGoogle chromeWebkit/bilnkSafariWebkitOperapresto
<html lang="en">
<head>
<meta charset="utf_8">
<title>document
</title>
</head>
<body>
//注释：1备注，2.调试bug
//快捷键：ctrl + ?
</body>
</html>
css 装修html
cascading style sheet
引入css ：1.行间样式
<html lang="en">
<head>
<meta charset="utf_8">
<title>document
</title>
</head>
<body>
//1、引入css
行间样式：
<div style="
width:100px;
height:100px;
background-color:red;
"></div>
</body>
</html>
引入css ：2.页面级css
<html lang="en">
<head>
<meta charset="utf_8">
<title>document
</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div> <div>
</body>
</html>
引入css ：3.外部css文件
lesson3.css里的代码：
div{
width:100px
;
height:100px
;
border-radius:50%
;
background-color:red
;
}
lesson3.html里的代码
<html lang="en">
<head>
<meta charset="utf_8">
<title>document
</title>
<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
<div> </div>
</body>
</html>
异步：同时执行 同步：一个执行完在执行另一个。
选择器
id选择器
#only {
background-color: red
;
}
<html lang="en">
<head>
<meta charset="utf_8">
<title>document
</title>
<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
<div id="only">123
</div>
<div id="only">123
</div>//这样就不行。id是一一对应的。
</body>
</html>
class 选择器
css代码：
.demo{
background-color:yellow
;
}
.demo1{
color:#f40
;
}
html代码：
<html lang="en">
<head>
<meta charset="utf_8">
<title>document
</title>
<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
<div class="demo demo1">123
</div>
</body>
</html>
id是一一对应
class和元素也是多对多的关系
标签选择器
div{
width:100px
;
height:100px
;
border-radius:50%
;
background-color:red
;
}
<html lang="en">
<head>
<meta charset="utf_8">
<title>document
</title>
<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
<div>123
</div>
</body>
</html>
通配符选择器
css代码：
*{
background-color:green
;
}
html代码：
<html lang="en">
<head>
<meta charset="utf_8">
<title>document
</title>
<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
<div>123
</div>//*是通配符，全屏都会绿。
</body>
</html>
属性选择器
[id] {
background-color: red
;
}
或
[id="only"] {//加上值的也可以
background-color: red
;
}
<html lang="en">
<head>
<meta charset="utf_8">
<title>document
</title>
<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
<div id="only">123
</div>//凡是用到id的就都会用到上面的css
<div id="">123
</div>//凡是用到id的就都会用到上面的css
//class属性也是同理
</body>
</html>
！important > 行间样式>id选择器>class选择器=属性选择器（谁在下面就是谁）>标签选择器>通配符选择器 上面这些值是有css权重的。
标签权重值 （256进制）IE6.0
！importantINFINITY行间样式1000id100class,，属性，伪类10标签，伪元素1通配符0
