HTML+CSS 轻松入门之CSS 基础知识

下面我们开始讲解css 的基础知识：

在讲基础知识前，我们要知道css中的注释怎么写

/*注释内容*/

字体：font

对字体我们有哪些操作：

字体颜色 color 字体大小 size 字体样式 font-family 斜体 font-style 字体粗细 font-weight 下划线 text-decoration 行高line-height

通过实例我们来讲解：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body{
			font-size: 20px;	  /*字体大小*/
			color: red;			  /*字体颜色*/
			font-weight: bold;	  /*字体粗细*/
			font-style: oblique;   
			/*italic:斜体。对于没有斜体变量的特殊字体，将应用 oblique
			  normal:默认值。正常的字体
			  oblique倾斜的字体 
			*/
			text-decoration:none;   /*none         :　 默认值。无装饰 
									  blink        :　 闪烁 
									  underline    :　 下划线 
									  line-through :　 贯穿线 
									  overline     :　 上划线 
									*/
			font-family:隶书;		/*什么样的字体。宋体，隶书等*/

		}
	</style>
</head>
<body>
		中华名族伟大复兴
</body>
</html>

文本 text

文本对齐 text-align

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body{
			text-align:center;
		}
	</style>
</head>
<body>
		中华名族伟大复兴
</body>
</html>

背景background

背景颜色 background-color 背景图片 background-image

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body{
			background-color:red;
			background-image:url("1.jpg");
		}
	</style>
</head>
<body>
		中华名族伟大复兴
</body>
</html>

尺寸

宽度 width 高度height

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div{
			background-color: red;
			width: 100px;
			height:100px;
		}


	</style>
</head>
<body>
		<div></div>

</body>
</html>

margin 与padding

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

margin:10px 5px 15px 20px;

上边距是 10px

右边距是 5px

下边距是 15px

左边距是 20px

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

padding:10px 5px 15px 20px;

上填充是 10px

右填充是 5px

下填充是 15px

左填充是 20px

注：如果都没有写到4个参数默认是0px

边框border

给边框设置粗细，并且有颜色

border:1px solid red; 边框线是1个像素的实线，线是红色

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">

		*{
			margin: 0px;
			padding: 0px;
		}

		div{
			margin-left:50px;
			margin-top:50px;
			background-color:#ccc;
			width:150px;
			height:150px;
			border:1px solid red;
		}


	</style>
</head>
<body>
		<div>测试</div>

</body>
</html>

这样运行完，字在div的左上角如何让字到中间呢，其实也很简单

在div的css 中加入俩句样式即可

text-align: center;

line-height: 150px;

继续学习

新建文件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ font-size: 20px; /*字体大小*/ color: red; /*字体颜色*/ font-weight: bold; /*字体粗细*/ font-style: oblique; /*italic:斜体。对于没有斜体变量的特殊字体，将应用 oblique normal:默认值。正常的字体 oblique倾斜的字体 */ text-decoration:none; /*none :　默认值。无装饰 blink :　闪烁 underline :　下划线 line-through :　贯穿线 overline :　上划线 */ font-family:隶书; /*什么样的字体。宋体，隶书等*/ } </style> </head> <body> 中华名族伟大复兴 </body> </html>

提交重置代码

自动运行

章节

笔记

提问

课件

反馈

捐赠