网站制作教程:CSS class选择器

你的网络首码项目网 网站建设来源:你的网络首码项目网评论107字数 959阅读模式

CSS类为您提供了额外的灵活性,用于指定要接收特定样式的元素。

前几节课,我们了解了选择器。您可能还记得,选择器是我们应用样式所针对的东西。在我们的示例中,我们的选择器都是HTML元素。例如,我们决定将<h1>元素设置为蓝色。文章源自你的网络首码项目网-https://www.youranweb.com/252.html

现在,如果您希望所有标题都为蓝色,则效果很好。但是,如果您只想将某些标题设置为蓝色,该怎么办?也许您希望标题的颜色反映您所在的网站部分。文章源自你的网络首码项目网-https://www.youranweb.com/252.html

听起来你需要使用类!文章源自你的网络首码项目网-https://www.youranweb.com/252.html

CSS中,类允许您将样式应用于元素的给定类。为此,可以通过声明类的样式,然后将该类分配给该元素,将元素链接到样式。文章源自你的网络首码项目网-https://www.youranweb.com/252.html

类语法

通过使用点(.)后跟类名来声明CSS类。您自己编造类名。在类名之后,您只需输入要分配给类的属性/值。文章源自你的网络首码项目网-https://www.youranweb.com/252.html

.class-name { property:value; }

如果要对多个元素使用相同的类名,但每个元素具有不同的样式,则可以在点前面加上HTML元素名称。文章源自你的网络首码项目网-https://www.youranweb.com/252.html

例如:文章源自你的网络首码项目网-https://www.youranweb.com/252.html

p.large { font-size: 2em; }

示例

<!DOCTYPE html>
<title>Example</title>
<style>
  div.css-section { 
    border:1px dotted red; 
    padding: 20px;
    }
  p.css-section { 
    color:green; 
    }
</style>
<div class="css-section">CSS Class</div>
<p class="css-section">CSS classes can be very useful</p>

还可以选择嵌套在另一个元素或类中的元素(或类)。例如,将选择嵌套在使用该类的<div>元素中的所有<p>元素。div.css-section p.css-section文章源自你的网络首码项目网-https://www.youranweb.com/252.html

这样做的一个主要好处是,当元素嵌套在使用类的另一个元素中时,不需要将类应用于元素的每个实例。文章源自你的网络首码项目网-https://www.youranweb.com/252.html

下面是一个示例:文章源自你的网络首码项目网-https://www.youranweb.com/252.html

<!DOCTYPE html>
<title>Example</title>
<style>
  div.css-section { 
    border:1px dotted red; 
    padding: 20px;
    }
  div.css-section p { 
    color:green; 
    }
</style>
<div class="css-section">CSS Class
  <p>CSS classes can be very useful</p>
</div>
文章源自你的网络首码项目网-https://www.youranweb.com/252.html文章源自你的网络首码项目网-https://www.youranweb.com/252.html
相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网

发表评论