元素:
用法:
标签名:{style的内容}
特点:
全局性,使用后,所有的相同标签都是同一种样式。
举例:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {color: blue;}</style> </head><body><p>p1</p><p>p2</p><p>p3</p> </body></html>
class:
用法:
在style内使用 .名称 来定义,不可以使用数字做开头,只能是'_'或者'-'这两个符号,其他的符号不可以,一个class里面可以有多个属性值
特点:
可以让多个标签来使用同一个class,也可以让同一个标签使用不同的类
举例:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one{color: rgb(255, 127, 227);}.two{color: blue;}</style> </head><body><p class="two">p1</p><p class="one">p2</p><div class="one">div</div> </body></html>
id选择器:
用法:
#id名 id名不可以数字开头
特点:
具有唯一性
举例:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#one{color: rgb(226, 43, 43);}#two{color: rgba(0, 255, 234, 0.989);}</style> </head><body><p id="one">p1</p><p id="two">p2</p><div id="one">div</div> </body></html>
通用符选择器:
用法:
定义是是那个用 *{} 来定义 通常用来解决行距等问题
特点:
对页面内的所有标签都有效
举例:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{color: rgb(226, 43, 43);}</style> </head><body><p >p1</p><p >p2</p><div>div</div> </body></html>