从此王子和公主幸福的生活在了一起:)
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
一、外部样式表(常用)
通过 <link />标签引入样式表:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>外联样式</title> <link rel="stylesheet" type="text/css" href="style.css" media="all" /> <!--在link标记中rel和href属性是必须的,type属性和media属性可省略--> <link rel="stylesheet" href="style.css" /> </head> <body> </body> </html>
注意:1)在link标记中rel和href属性是必须的,type属性和media属性可省略;
2)样式表中不能包含HTML标记语言,只能有CSS规则和CSS注释,否则导致在该标记后面的CSS样式将无法被识别。
二、内联样式表
1、通过 <style></style>标签引入样式表:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>内联样式</title> <style> body{ background-color: blue; } </style> </head> <body> </body> </html>
2、通过@import指令引入样式表:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>@import</title> <style> /*将@import放置在CSS规则前*/ @import url(style.css); body { background-color: blue; } </style> </head> <body> </body> </html>
注意:1)将@import url(style.css);写在<style>标签内;
2)@import放置在CSS规则之后将不起使用。
三、行间样式
写在某个元素自身的样式,使用HTML的style属性实现。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>行间样式</title> </head> <body> <div style="background-color: red; 100px;height:100px;" style="background-color: yellow;"></div> </body> </html>
注意:行间样式若存在多个style属性,只能识别第一个。