css基础知识点整理

Posted 大忽悠爱忽悠

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;
}

在这里插入图片描述
在这里插入图片描述

以上是关于css基础知识点整理的主要内容,如果未能解决你的问题,请参考以下文章

CSS面试题总结 - 基础知识总结 - 复习专用 - 前端面试必备 - 吐血整理

大型编程电视剧连载 | CSS知识点硬核整理归纳

JavaScript就这么回事 (JS基础知识整理)

CSS378- [译]44个 CSS 精选知识点

html+css基础知识点

Javascript 基础知识整理