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属性的值不能以数字开头

热门文章

优秀文章