class引用html元素的css样式类,类在html中有ID属性类和CLASS属性类,其中ID类是用"#"来识别,CLASS类则是用"."来识别。ID在一个网页中只能被引用一次,而CLASS类可以被多次引用。
比如一个仓库,里面有颜料和放大镜等工具,工具好比是各个类,用来改变html文字颜色或者是大小。具体引用什么就用什么类,所以就给每个样式定义了一个编号也就是#a或.a中的a就是编号。然后在引用时就可以用ID=a 或CLASS=a来引用。
<元素名 class='样式类名'>
必须以字母 A-Z 或 a-z 开头
可以是以下字符: (A-Za-z), 数字 (0-9), 横杆 ("-"), 和 下划线 ("_")
在 HTML 中, 类名是区分大小写的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>炫代码(www.xuandaima.com)</title> </head> <style> h1.title {color:blue;} p.paragraph {color:green;} </style> <body> <h1>没加class标题</h1> <h1>加了class标题</h1> <p>没加class段落。</p> <p>加了class的段落</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>炫代码(www.xuandaima.com)</title> </head> <style> p.paragraph {color:green;} </style> <body> <p>我加了paragraph类的段落</p> <p>我没加任何类的段落。</p> <p>我也加了paragraph类的段落</p> </body> </html>
使用多个class 在类名和类名之间中间用空格隔开,class属性的空格是“且”的关系。实现叠加效果。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>炫代码(www.xuandaima.com)</title> </head> <style> .paragraph {color:green;} .background {background-color:yellow;} </style> <body> <p>我加了paragraph类的段落</p> <p>我没加任何类的段落。</p> <p class="paragraph background">我也加了paragraph和 background类的段落</p> </body> </html>