- CSS
1.概述：CSS全称(Casading Style Sheets)层底样式表，在html基础上引入css样式，css就是相当于在给“房子”装修
2.引入CSS样式
//行内写法：
<h1 style = "color:red ; font-size:20px;">hello</h1>
//内嵌：body列表看起来相对整洁
<head>
<style>
h1{
color: deeppink;
font-size: 200px;
}
</style>
</head>
<body>
<h1> hello</h1>
</body>
//外联：html文件相对于干净
<link rel="stylesheet" type="text/css" href="../css/first.css">
//在建一个以.css结尾的文件
h1{
color: deeppink;
font-size: 200px;
}
优先级： 行内写法>内嵌>外联
3.CSS选择器：
id选择器： 语法结构
#id值{
}
标签选择器：语法结构
标签名div{
}
类选择器：语法结构
.class属性{
}
层级选择器：
+相邻的兄弟（同级关系）
~所有兄的（同级关系）
>所有子标签（包含关系）
所有选择器可在一起使用
#a,div,.class{
}
4.伪类：只针对超链接标签a使用
:hover 鼠标悬停
:active 点住不松开
:visitd 访问过的
:link 为访问过的
5.CSS盒子模型(Box Model)
margin: 外边距 边框 到 浏览器的 距离
border: 边框
padding: 内边距 内容到 边框的距离
padding\margin-top 上
padding\margin-left 左
padding\margin-right 右
padding\margin-bottom 下
margin：0 auto 居中
margin：10px 所有边距为
margin：10px 20px 30px 40px 上右下左
margin：10px 20px 10px 上 左右 下
6.定位position
1.绝对定位：absolute 以浏览器边缘为参照物
2.相对定位：relative 已统计元素为参照物
- 案例
1.导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
float: left;
position: relative;
margin-left: 30px;
}
a{
text-decoration: none ;
color: black;
font-weight: 800;
}
a:hover{
font-size: 60px;
color: red;
}
</style>
</head>
<body>
<ul type="none">
<li><a href="#" >北京</a></li>
<li><a href="#">上海</a></li>
<li><a href="#">广州</a></li>
<li><a href="#">哈尔滨</a></li>
</ul>
</body>
</html>
2.页面布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
background-color: lightgray;
text-align: center;
font-size: 40px;
position: relative;
}
#head{
height: 120px;
font-size: 40px;
padding-top: 50px;
}
#hah{
height: 60px;
font-size: 40px;
margin-top: 10px;
}
#left,#center,#right{
float: left;
height: 460px;
}
#left{
width:575px;
margin-top: 10px;
}
#center{
margin-top: 10px;
margin-left: 9px;
width:600px;
}
#right{
width:600px;
margin-top: 10px;
margin-left: 10px;
}
#foot1{
margin-top: 480px;
height: 200px;
background-color: lightgray;
}
</style>
</head>
<body>
<div id = "head">头部区域</div>
<div id ="hah">标题栏</div>
<div id = "left">左标题区域</div>
<div id = "center">中间区域</div>
<div id = "right">右标题区域</div>
<div id = "foot1" style="background-color: lightgray;">尾部区域</div>
</body>
</html>