HTML+CSS 轻松入门之C...LOGIN

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>
提交重置代码
章节课件