css body的背景颜色设置
一:使用标签类型定义样式
1.内部样式
body的背景颜色设置的一个代码样例
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> css背景</title> </head> <style> body{ background-color:green; } h1{ color:orange; text-align:center; } </style> <body> <h1>css3 实例</h1> </body> </html>
第二种写法
这个是内联样式,直接对标签操作
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> css背景</title> </head> <body style="background-color:green"> <h1 style="color:orange;text-align:center">css3 实例</h1> </body> </html>还可以放在外面,如同茴香豆的茴有好几种写法一样
第三种写法
放在外面,是外部样式,相当于第一种内部样式把<style></style>变成文件名称
编写style.css文件
body{ background-color:green; } h1{ color:orange; text-align:center; }编写index.html文件
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> css背景</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body > <h1 >css3 实例</h1> </body> </html>
二:使用标签id制定样式
使用#表示对id的样式,其实和内联样式一样,就是可能在style代码很多的时候放在外面增加可读性
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> css背景</title> </head> <style> #e1{ text-align:center; color:red; } </style> <body > <h1 id="e1">css3 实例 1</h1> <h1 id="e2">css3 实例 2</h1> </body> </html>
三:使用.class定义一般样式
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> css背景</title> </head> <style> .classhh{ text-align:center; color:red; } </style> <body > <h1 id="e1" class="classhh">css3 实例 1</h1> <h1 id="e2">css3 实例 2</h1> </body> </html>
总结:
1.指定样式类型有三种方式:
1.根据标签类型指定:label_tyle{}
2.根据标签名制指定:#id_name{}
3.根据类名制定:.class_name{}
2.样式的存放有三个地方
1.内联,直接放在<,style:"">
2.内部,head中<style></style>
3.外部,最常见