提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

css基础知识点整理

基础 CSS
2023-03-14 22:54:31 时间

css基础知识点整理

代码规范

放置规范

格式规范

代码规范

示例演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
     span{
		font-size: 120px;
		color: orangered;
		border: 5px solid royalblue;
	 }
</style>
	</head>
	<body>
		<span>大忽悠到此一游</span>
	</body>
</html>

基本选择器

元素选择器

示例演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
     span{
		font-size: 120px;
		color: orangered;
		border: 5px solid royalblue;
	 }
</style>
	</head>
	<body>
		<span>大忽悠到此一游</span><br/>
		<span>卧槽，无情！！！</span>
		<div>卧槽,残忍！！！</div>
	</body>
</html>

类选择器

示例演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
      .BLACK{
		  font-size: 50px;
		  color: black;
	  }
	  .RED{
		  font-size: 50px;
		  color: red;
	  }
</style>
	</head>
	<body>
        <span class="BLACK">span1:要求变成黑色</span><br/>
		<span class="RED">span2:要求变成红色</span><br/>
		<div class="BLACK">div1:要求变成黑色</div>
		<div class="RED">div2:要求变成红色</div>
	</body>
</html>

ID选择器

示例演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
   #d1{
	   font-size: 50px;
	 color: red;
 }
</style>
	</head>
	<body>
        <span >span1:要求变成黑色</span><br/>
		<span >span2:要求变成黑色</span><br/>
		<div >div1:要求变成黑色</div>
		<div id="d1">div2:要求变成红色</div>
	</body>
</html>

基本选择器的组合方式

层级关系

示例演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
        div font{
			font-size: 50px;
			color: blue;
		}
</style>
	</head>
	<body>
       <div>
		   <font>字体大小为50像素，字体演示为蓝色</font>
			不用管我
		   </div>
		   
	</body>
</html>

边框属性

所有html标签都有边框，默认边框都为不可见

border

width

用于设置标签的宽度

height

用于设置标签的高度

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
 div{
	 border: 1px solid blue;
	 width: 300px;
	 height: 300px;
 }
</style>
	</head>
	<body>
      <div>
		   大忽悠门派-----大忽悠掌门人
	  </div>		   
	</body>
</html>

backgroud-color

示例演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
 div{
	 border: 1px solid blue;
	 width: 300px;
	 height: 300px;
	 background-color: beige;
 }
</style>
	</head>
	<body>
      <div>
		   大忽悠门派-----大忽悠掌门人
	  </div>		   
	</body>
</html>

使用颜色代码，可以进行微调操作

布局

float—浮动属性

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
 #d1{
	 border: 1px solid blue;
	 width: 150px;
	 height: 150px;
	 background-color: beige;
	 float: right;
 }
 #d2{
 	 border: 1px solid blue;
 	 width: 150px;
 	 height: 150px;
 	 background-color: blue;
	  float: right;
 }
 #d3{
 	 border: 1px solid blue;
 	 width: 150px;
 	 height: 150px;
 	 background-color: red;
	  float: right;
 }
</style>
	</head>
	<body>
      <div id="d1"></div>		   
	    <div id="d2"></div>		
		  <div id="d3"></div>		
	</body>
</html>

转换

dispaly

未转换前:

转换后: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
    h1{
		display: inline;
	}
	div{
		display: inline;
	}
	span{
		display: block;
	}
	a{
		display: none;
	}
</style>
	</head>
	<body>
<h1>标题h1--块级元素</h1>
<div>默认占满一行---块级元素</div>
<span>行内元素</span>
<a>超链接----行内元素</a>
	</body>
</html>

字体

font-size 字体的大小

color 字体的颜色

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
div{
	font-size: 100px;
	color: green;
}
</style>
	</head>
	<body>
       <div>我想变大变Green</div>
	</body>
</html>

css中的盒子模型

什么是盒子模型

边框

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
div{
	border-top: 1px solid blue;
	border-bottom: 1px solid red;
}
	
a
{
	border: 5px solid red;
}
</style>
	</head>
	<body>
       <div>我想</div><br/>
	   <a>你想吗?</a>
	</body>
</html>

内边距 padding

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
div{
	border-top: 1px solid blue;
	border-bottom: 1px solid red;
	padding-top:10px;
	padding-bottom: 10px;
}
	
a
{
	border: 5px solid red;
	padding: 5px;
}
</style>
	</head>
	<body>
       <div>我想</div><br/>
	   <a>你想吗?</a>
	</body>
</html>

外边距—margin

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
div{
	border-top: 1px solid blue;
	border-bottom: 1px solid red;
	padding-top:10px;
	padding-bottom: 10px;
	margin-bottom: 20px;
}
	
a
{
	border: 5px solid red;
	padding: 5px;
	margin: 20px;
}
</style>
	</head>
	<body>
       <div>我想</div><br/>
	   <a>你想吗?</a>
	</body>
</html>

css和html的结合方式

行内样式

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
<a style="font-size: 100px; color: red;">大忽悠<a>
	</body>
</html>

< style > < /style >标签样式

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<style>
	a{
		font-size: 50px;
		color: red;
	}
	</style>
		
	</style>>
	<body>
<a>大忽悠</a>
<a>大忽悠</a>
<a>大忽悠</a>
<a>大忽悠</a>
	</body>
</html>

外部样式

linke标签样式

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
		<link rel="stylesheet" type="text/css" href="a.css">
	</head>
	<body>
<a>大忽悠</a>
<a>大忽悠</a>
<a>大忽悠</a>
<a>大忽悠</a>
	</body>
</html>

a.css

a{
	font-size: 100px;
	color: blue;
}

相关文章