css解释
css样式:
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化，CSS的可以使页面更加的美观。基本上所有的html页面都或多或少的使用css。
存在方式有三种：元素内联、页面嵌入和外部引入
语法：style = ‘key1:value1;key2:value2;‘
在标签中使用 style=‘xx:xxx;‘
在页面中嵌入 < style type="text/css"> </style > #在头部指定CSS样式
引入外部css文件
优先级：标签>页面镶入>外部，这个仅限同样的样式冲突是才有用
元素内联：
直接在标签上应用：代码如下
<p style="background-color: aqua">
shuaige
</p>
效果图如下：
页面嵌入
在头部写好css样式然后应用：代码如下
<head>
<meta charset="UTF-8">
<title>luotianshuai_study</title>
<!--在头部指定好CSS样式然后，在标签里使用class="样式名应用"-->
<style>
.css_test{
background-color: darkorchid;
}
</style>
</head>
<body>
<div>
<p class="css_test">
<!--这里应用指定好的CSS样式名即可-->
shuaige
</p>
</div>
</body>
效果图如下：
外部引用
写一个独立的文件存储css样式代码如下：建议（在样式文件里加上标注防止出现遗忘）
html代码如下：
<head>
<meta charset="UTF-8">
<title>luotianshuai_study</title>
<!--这里通过link导入样式，有点类似与python导入模块中的import *-->
<link rel="stylesheet" href="study_html_css.css">
</head>
<body>
<div>
<p class=page_color>
<!--这里直接应用指定好的CSS样式名即可-->
shuaige
</p>
</div>
</body>
效果图如下：
CSS样式应用中通过class应用CSS样式即可，还有两种知道即可代码如下：
id应用，"#",这个调用CSS样式的方法，就是在头部<style>#name{....}</style> #name意思就是所有id为name的都会使用这个Css样式，代码如下：
<head>
<meta charset="UTF-8">
<title>luotianshuai_study</title>
<style>
#name{
background-color: red;
}
</style>
</head>
<body>
<div>
<p id="name">
<!--这里不需要指定，只要id=name的就会自动应用头部指定的CSS样式-->
shuaige
</p>
<p id="name">
luotianshuai
</p>
</div>
</body>
效果图如下：
标签应用，为指定标签统一设置格式：在头部<style>p{....}</style> 这里的p是标签的名称，也可以是div这样就会给所有的div设置格式，代码如下
<head>
<meta charset="UTF-8">
<title>luotianshuai_study</title>
<style>
p{
background-color: lightskyblue;
width: 100px;
height:100px;
}
</style>
</head>
<body>
<div>
<p>
<!--这里不需要指定，只要id=name的就会自动应用头部指定的CSS样式-->
shuaige
</p>
<p>
luotianshuai
</p>
</div>
</body>
效果图如下：
CSS常用属性
background 【背景】
background-color 背景颜色 代码如下：
<div style="background-color: red">
Hello,html
</div>
显示效果：
background-image 背景图片 代码如下：
<div style="background-image: url(favicon.ico);height: 80px;" >
</div>
显示效果如下：
首先确认，div是块级别的标签，我们的图片仅仅是一个小的图片，但是现在是平铺，所以看下面的代码：
<div style="background-image: url(favicon.ico);height: 80px;background-repeat: no-repeat" >
</div>
显示效果如下图：
border 【边框】
设置边框，效果图如下图：
代码如下：
<!--border:有3个参数：线的粗细、线的样式（实线、点、虚线等）、线的颜色-->
<!--第一种：线的粗细为1像素，实线、红色-->
<div style="border:1px solid red;height:10px" ></div>
<!--第二种：线的粗细为1像素，点、蓝色-->
<div style="border:1px dotted blue;height:10px" ></div>
<!--第三种：线的粗细为1像素、虚线、紫色-->
<div style="border:1px dashed purple;height:10px" ></div>
边框可以单独的设置一边的边框、上、下、左、右
<!--在左边设置边框，3px、实线、红色-->
<div style="border-left: 3px solid red">Luotianshuai</div>
效果图如下：
Display
代码如下：
<!--display 为none将隐藏标签-->
<div style="display: none;">Luotianshuai</div>
<!--display 为inline会将块级别标签调为内联标签-->
<div style="background-color:red;display:inline">Luotianshuai</div>
<!--display 为block会将内联标签调为块级别标签-->
<a style="background-color:red;display:block">Luotianshuai</a>
cursor 鼠标停放所显示的效果
代码如下（实际效果自己写看）：
<div style="cursor:pointer">停放在这里显示小手(pointer)</div>
<div style="cursor:help">停放在这里显示问号(help)</div>
<div style="cursor:wait">停放在这里显示问号(wait)</div>
<div style="cursor:move">停放在这里显示移动(move)</div>
<div style="cursor:crosshair">停放在这里显示定位(crosshair)</div>
浮动 float （用的比较多，用来布局使用）
效果图如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>luotianshuai_study</title>
<style>
.float-left{
width:20%;
background-color:red;
height: 500px;
float: left;
/*这里长和宽，可以用百分比或者直接指定像素来指定*/
}
.float-right{
width: 80%;
background-color:blue;
height: 500px;
float:left;
/*这里长和宽，可以用百分比或者直接指定像素来指定*/
}
</style>
</head>
<body>
<div class="float-left"></div>
<div class="float-right"></div>
</body>
</html>
float