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;
