笔记02-Web-CSS

  • 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>
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值