- 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>