将段落设置为红色(字体)
元素选择器
作用:根据标签名来选中指定元素
语法:标签名{}
例子:p{}选中页面中所有p元素
h1{}同上
div{}同上
p{
color: red;【需要用什么颜色,选择什么颜色】
}
h1{【想设置哪个元素,选择哪个】
color:yellow;
}
id选择器
作用:根据元素的id属性值选中一个元素(id是不能重复的,有且只有一个)
语法:#id属性值{}
例子:#box{} #red{}
#red{
color: red;
}
下边的例子,自己动手打出来是可以看到的。
<body>
<p>少小离家老大回</p>
<p id=“red”>乡音无改鬓毛衰</p>
<p>人有悲欢离合</p>
<p>月有阴晴圆缺</p>
</body>
类选择器
作用,根据元素的class属性值选中一组元素
语法,class属性值
如果将 人有悲……月有阴……设置为蓝色
class(html的属性)是一个标签的属性,他和id类似。 不同的是class可以重复使用
可以通过class属性来为元素分组
可以同事为一个元素指定多个class属性
.blue{
color: blue;
}
<body>
<p>少小离家老大回</p>
<p>乡音无改鬓毛衰</p>
<p class=“blue”>人有悲欢离合</p>
<p class=“blue”>月有阴晴圆缺</p>
</body>
通配选择器
作用:选中页面中的所有元素
语法:*
*{
color: red;
}
【注意!!】网页编写的结果会显示所有字体都是红色的
<body>
<p>少小离家老大回</p>
<p >乡音无改鬓毛衰</p>
<p>人有悲欢离合</p>
<p>月有阴晴圆缺</p>
</body>