乐趣区

关于css:CSS的三种基础选择器

  • 标签选择器
  • 类选择器
  • ID 选择器

标签选择器

一个 HTML 页面是通过很多标签组成的,CSS 标签选择器就是用来申明这些标签的,因为每一个 HTML 标签的名称都能够作为相应的标签选择器的名称。

示例:

上面是一段 html 代码:

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS 学习 </title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h3> 学习 </h3>
        <p> 我爱学习,学习使我高兴。</p>
    </body>
</html> 

如果咱们要为这两个标签定义 CSS 款式,就能够间接在 .css 文件内通过标签选择器来申明款式:

h3{color: red ;}
p{color: green;} 

CSS 语法就是由 选择器 申明块 {}组成,每个申明块中能够蕴含一个或多个款式申明,并且每条申明前面以分号 ; 结尾。

除了上述例子中的 ph3 标签能够作为标签选择器,其余的例如 htmlbodyaimg 等标签都是能够作为标签选择器的。

类选择器

类选择器用于形容一组标签的款式,一个类选择器能够在多个标签上应用。
语法:

.class_name{属性:属性值;} 

类选择器后面必须有一个点 .,这个点必不可少,是类选择器的标记。类选择器的名称 class_name 是自定义的,选择器中的属性和属性值跟标签选择器中一样。

示例:
html 代码:

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS 学习 </title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h3> 动物园 </h3>
        <p class="rabbit"> 小白兔 </p>
        <p> 小狮子 </p>
        <p> 小老虎 </p>
        <p> 小猴子 </p>
    </body>
</html> 

要给“小兔子”字体款式设置为粉色加粗,能够自定义一个类选择器:

.rabbit{
    color: pink;
    font-weight: bold;
} 

而后在 HTML 标签上通过 class 属性来应用定义好的类款式,格局为:

< 标签名 class="类名称"> 标签内容 </ 标签名 > 

类选择器有一个益处就是,咱们 能够在同一个页面中多个 HTML 标签上,应用同一个类选择器

ID 选择器

  • ID 选择器的是以井号 # 结尾来定义的。而类选择器是以点 . 来定义的。
  • ID 选择器在 HTML 中是能够通过 id 属性来应用。而类选择器是通过 class 属性来应用的。
  • 同一个页面中一个 ID 选择器只能在中呈现一次,是惟一的。而类选择器能够在屡次呈现,所以 ID 选择器的针对性更强。

示例:

通过 # 来定义一个 ID 选择器,设置背景色彩为粉色的款式:

#only{background-color: pink;} 

而后在 HTML 中通过 id 属性应用这个 ID 选择器:

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS 学习 </title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h3> 动物园 </h3>
        <p class="rabbit"> 小白兔 </p>
        <p> 小狮子 </p>
        <p> 小老虎 </p>
        <p id="only"> 小猴子 </p>
    </body>
</html> 
退出移动版