CSS学习笔记＋小练习
CSS简介
CSS（Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式分离，提高了显示功能。
CSS与html的结合方式
（1）在每个html标签上面都有一个属性style，把css和html结合在一起
<div style="background-color:pink;color:green;">西安欧亚学院</div>
运行结果
（2）使用html的一个标签实现<style>标签，现在head里面
格式：
<style type="text/css">
css代码；
</style>
<meta charset="UTF-8">
<style type="text/css">
div{
background-color:blue;
color:red;
}
运行结果
（3）在style标签里面使用语句
@import url（css文件路径）；
-第一步，创建一个css文件
div{
background-color:black;
color:yellow;
}
-第二步，在头文件中使用
<head>
<style type="text/css">
@import url(div.css)
</style>
</head>
运行结果
（4）使用头标签link，引入外部css文件
- 格式：
-第一步，创建一个css文件
div{
background-color:gray;
color:yellow;
}
-第二步，在头文件中使用
<link rel="stylesheet" type="text/css" href="div.css">
</head>
运行结果
注意：第三种结合方式有一些浏览器下不起作用，一般使用第四种方式！
CSS样式优先级和代码规范
*样式优先级
由上到下，由内到外。优先级由低到高。
一般情况下，后加载的优先级高
*代码规范
选择器名称{ 属性名:属性值; 属性名:属性值;......}
-属性与属性直接用封号隔开
-属性与属性名直接用冒号连接
-如果一个属性有多个值的话，那么多个值用 空格 隔开
CSS的基本选择器
（1）标签选择器
div{
background-color:gray;
color:yellow;
}
（2）class选择器
*每个html标签都有一个属性 class
-<div class="类名"> 进行操作的数据</div>
<html>
<head>
<title>Insert title here</title>
<style type="text/css">
div.haha{
background-color:yellow;
}
p.haha{
background-color:red;
}
</style>
</head>
<body>
<div class="haha">西安欧亚学院</div>
<p class="haha">物联网工程1701</p>
</body>
</html>
运行结果
（3）id选择器
*每个html标签上面都有一个属性标签 id
- <div id="hehe">hehehehe</div>
<html>
<head>
<title>Insert title here</title>
<style type="text/css">
#hehe{
background-color:gray;
}
</style>
</head>
<body>
<div id="hehe">物联网工程</div>
<p id="hehe">物联网工程1701班</div>
</body>
</html>
运行结果
优先级：
style>id选择器>class选择器>标签选择器
未完待续。。。
