行内样式
1 2 3 4 5 6 7 8 9
| <html> <head> <meta charset="utf-8"> <title>css行内样式</title> </head> <body> <div style="width:100px;height:100px;background:red;"></div> </body> </html>
|
行内样式为在标签<>内插入style=”你想要的样式;”。
内嵌样式
1 2 3 4 5 6 7 8 9 10 11 12
| <html> <head> <meta charset="utf-8"> <title>css内嵌样式</title> </head> <body> <style type="text/css"> div{width:100px;height:100px;background:red;} </style> <div id="div"></div> </body> </html>
|
内嵌样式为把所有css设置写在内,一般放在后。
外部样式
html文件、css文件分别为
1 2 3 4 5 6 7 8 9 10 11
| <!doctype html> <html> <head> <meta charset="utf-8"> <title>css外部样式</title> <link rel="stylesheet" type="text/css" href="css.css"> //href="你所存的css文件名.css" </head> <body> <div id="div"></div> </body> </html>
|
1
| div{width:100px;height:100px;background:red;}
|
需要注意的是,在使用外部样式时,html文件和css文件必须在同一根目录下。
通常来说,为了使标签语义化,我们一般采用外部样式来引入css。
什么是标签语义化?为什么要实现标签语义化