css（层叠样式表）快速入门
1.网页的组成
html(网页的结构)+css(网页的外观)+javascript(驱动网页的脚本)
2.css引入方法
（1）行内样式
<p style="color:red">新年，我要红</p>
效果图如下:
行内.png
（2）内嵌样式
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.big{
font-size: 48px;
color: #FF0000;
}
</style>
</head>
<body>
<p class="big">样式的内容写在style标签内</p>
</body>
</html>
效果图如下:
内链.png
（3）外链样式
<!-- html文件 -->
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<p id="myp">我要又大又红</p>
</body>
</html>
<!-- css文件 -->
#myp{
color: red;
font-size: 48px;
}
效果图如下:
外链.png
（4）导入（.css文件/style标签）
<!-- html文件 -->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@import url("./sheet.css");
</style>
</head>
<body>
<p id="orange">活力橙</p>
</body>
</html>
/* sheet.css文件 */
#orange{
color: orange;
}
效果图如下:
导入.png
(注意：行内样式使用范围当前元素；内嵌样式使用范围为当前的html文件；外链样式，使用范围为引用他的html文件)
3.css层叠样式
（1）当属性一致时
后面的覆盖前面的（从上自下排布，靠近标签的属性生效）
行内样式优先级最高
<html>
<head>
<meta charset="utf-8">
<title>css优先级</title>
<style>
.red{
color: red
font-size: 48px;
color: gold;
}
</style>
<link rel="stylesheet" type="text/css" href="style2.css"/>
</head>
<body>
<p class="red" style="color: pink;">北国风光，千里冰封，万里雪飘</p>
</body>
</html>
效果图如下:
层叠样式.png
（1）当属性不一致（相加）
<html>
<head>
<meta charset="utf-8">
<title>css优先级</title>
<style>
.color{
color: gold;
font-size: 48px;
}
</style>
</head>
<body>
<p class="color" style="color: pink;">北国风光，千里冰封，万里雪飘</p>
</body>
</html>
效果图如下:
不一致.png
（3）！important 权限最高声明最重要，不可覆盖
<html>
<head>
<meta charset="utf-8">
<title>css优先级</title>
<style>
.color{
color: gold !important;
font-size: 48px;
}
</style>
</head>
<body>
<p class="color" style="color: pink;">北国风光，千里冰封，万里雪飘</p>
</body>
</html>
效果图如下:
！important.png
4. css选择器
（1）css组成
选择器+属性名 （color）+属性值 （red）
（2）通配符选择器* {color:red}
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 通配符选择器，代表是页面中的任意元素 */
*{
color: red;
}
</style>
</head>
<body>
<h1>css 选择器</h1>
<p>选择到html元素 应用css样式</p>
<ul>
<li>包含的先择器</li>
<li >id选择器</li>
<li>class选择器</li>
<li>类型 选择器</li>
<li>通配符选择器</li>
</ul>
</body>
</html>
效果图如下:
css选择器.png
（3）id 选择器 #myid{color:red}
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 通配符选择器，代表是页面中的任意元素 */
*{
color: red;
}
#myli{
background-color: blue;
}
</style>
</head>
<body>
<h1>css 选择器</h1>
<p>选择到html元素 应用css样式</p>
<ul>
<li>包含的先择器</li>
<li id="myli">id选择器</li>
<li>class选择器</li>
<li>类型 选择器</li>
<li>通配符选择器</li>
</ul>
</body>
</html>
效果图如下:
id选择器.png
（4）class 选择器.myc{color:red}
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 通配符选择器，代表是页面中的任意元素 */
*{
color: red;
}
/* 通过标签名作为选择器，选择到一个类型的元素 */
.odd{
background-color: orange;
}
</style>
</head>
<body>
<h1>css 选择器</h1>
<p>选择到html元素 应用css样式</p>
<ul>
<li class="odd">包含的先择器</li>
<li>id选择器</li>
<li>class选择器</li>
<li>类型 选择器</li>
<li>通配符选择器</li>
</ul>
</body>
</html>
效果图如下:
css选择器.png
（5）类型 标签名 p{color:red}
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 通配符选择器，代表是页面中的任意元素 */
*{
color: red;
}
/* 通过标签名作为选择器，选择到一个类型的元素 */
p{
color: green;
}
</style>
</head>
<body>
<h1>css 选择器</h1>
<p>选择到html元素 应用css样式</p>
<ul>
<li>包含的先择器</li>
<li>id选择器</li>
<li>class选择器</li>
<li>类型 选择器</li>
<li>通配符选择器</li>
</ul>
</body>
</html>
效果图如下:
标签.png
（6）包含选择器 .myc p{color:red}
选择器1 选择器2{}
选择器2必须是选择器1的后代
<html>
<head>
<meta charset="utf-8">
<title>包含选择器</title>
<style type="text/css">
/* 选择的li标签是ul的后代 */
ul li{background-color: gold;}
/* .gold li{background-color: green;} */
/* 尽量在包含选择器中，父辈用类名，或者id */
/* 一般选择器层级不超过3层 */
.gold li span{background-color: red;}
</style>
</head>
<body>
<h1>包含选择器</h1>
<p>通常用来缩小选择范围</p>
<ul class="gold">
<li>ul <span>中的</span>li1</li>
<li>ul中的li2</li>
<li>ul中的li3</li>
</ul>
<ol>
<li>ol中的li1</li>
<li>ol<span>中的</span>li2</li>
<li>ol中的li3</li>
</ol>
<span>hahahh</span>
</body>
</html>
效果图如下:
包含选择器.png
5.选择器的优先级
* 0.5;类型 1;class 10;id 100;包含 权限相加
<html>
<head>
<meta charset="utf-8">
<title>选择器的优先级</title>
<style type="text/css">
*{
color: red;
}
/* 0.5 */
p{
color: green;
}
/* 1 */
.myp{
color: gold;
}
/* 10 */
#myid{
color: deeppink;
}
/* 100 */
.parent #myid{
color: orange;
}
</style>
</head>
<body>
<div clss="parent">
<p class="myp" id="myid">你好我是一个p标签</p>
</div>
</body>
</html>
效果图如下:
优先级.png
(ps:读者将代码复制，将部分代码注释进行试验)
