下面我们开始讲解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;