class选择器
class选择器的格式:
类选择器名{
属性名:属性值;
…
}
注意:使用时需要使用class
- 需求
实现该效果: 字体粗体,设置字体大小,设置字体背景。
分析:需要通过css设置 字体,字体大小,字体背景颜色.。这里可以使用类选择器:
- 实现
Css文件:
.style1 {
font-size: 30px;
font-family: 宋体;
background-color: pink;
}
Html代码.,在head中引入css 并在每个<span标签中使用了css样式>
注意,引用类选择器通过:class
例如:
<span class="style1">新闻1</span>
<html>
<head>
<link rel="stylesheet" href="HtmlPage1.css" type="text/css"></link>
</head>
<body>
<span class="style1">新闻1</span>
<span class="style1">新闻2</span>
<span class="style1">新闻3</span>
<span class="style1">新闻4</span>
<span class="style1">新闻5</span>
</body>
</html>
总结:
- 优点: 可以对指定的元素进行修饰
- 缺点: 如果修饰相同,就要指定class属性
- 注意: class属性的值不能以数字开头
热门文章
优秀文章