飙血推荐
  • HTML教程
  • MySQL教程
  • JavaScript基础教程
  • php入门教程
  • JavaScript正则表达式运用
  • Excel函数教程
  • AngularJS教程
  • UEditor使用文档
  • ThinkPHP5.0教程

CSS 语法与选择器

时间:2021-12-21  作者:匿名  

CSS 包含由浏览器解释然后应用于文档中相应元素的样式规则。样式规则由三部分组成 -

  • Selector - 选择器是一个 HTML 标签,将在其中应用样式。这可以是任何标签,如 <h1> 或 <table> 等。

  • 属性- 属性是 HTML 标签的一种属性。简而言之,所有的 HTML 属性都被转换为 CSS 属性。它们可以是颜色、边框等。

  • 值- 值分配给属性。例如,颜色属性可以具有红色或#F1F1F1 等值。

您可以按如下方式放置 CSS 样式规则语法 -

selector { property: value ;}

CSS声明总是以分号(;)结束,声明总以大括号({})括起来:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

image.png

示例- 您可以按如下方式定义表格边框 

table{ border :1px solid #C00; }

这里 table 是一个选择器,意思是所有table表格都会根据这条语句改变,border 是一个属性-“边框”,给定值1px solid #C00是该属性的值。

p {color:red;text-align:center;}

为了让CSS可读性更强,你可以每行只描述一个属性:

实例

p{
color:red;
text-align:center;
}

CSS 注释

注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束, 实例如下:

实例

/*这是个注释*/
p{
   text-align:center;
    /*这是另一个注释*/
   color:black;
    font-family:arial;
}

您可以根据自己的需求以各种简单的方式定义选择器。下面来看看这些选择器。


类型选择器

这与我们在上面看到的选择器相同。同样,还有一个示例为所有 1 级标题赋予颜色 

h1 {    color: #36CFFF;  }
/*所有的html标签都可以作为选择器,例如 p、a、ul、li、div*/

使用类型选择器时,代表了html中所有的h1都会改变样式。

通用选择器

通用选择器不是选择特定类型的元素,而是简单地匹配任何元素类型的名称 

* {     color: #000000;  }

此规则将文档中每个元素的内容呈现为黑色。

后代选择器

假设您希望仅当特定元素位于特定元素内时才将样式规则应用于特定元素。如下例所示,样式规则仅在 <ul> 标签内时才适用于 <em> 元素。

ul em {    color: #000000;  }

假设有下面的元素

<p>一段文字<em>哈哈</em></p>
<ul>
  <li><em>我是黑色的</em></li>
</ul>

上面p中的<em>由于不在ul中,所以不会改变样式,只有下面<ul>中<li>下的<em>才会变更字体颜色为#000000。

类选择器

您可以根据元素的 class 属性定义样式规则。所有具有该类的元素都将根据定义的规则进行格式化。

.black {    color: #000000;  }

此规则将我们文档中class 属性设置为黑色的每个元素的内容呈现为黑色。你可以让它更特别一点。例如 -

h1.black {    color: #000000;  }

此规则仅将 class 属性设置为black 的<h1> 元素的内容呈现为黑色。

您可以将多个类选择器应用于给定元素。考虑以下示例 -

<p class = "center bold">    This para will be styled by the classes center and bold. </p>

ID 选择器

您可以根据元素的id属性定义样式规则。所有具有该id的元素都将根据定义的规则进行格式化。

#black {    color: #000000;  }

此规则将文档中id属性设置为黑色的每个元素的内容呈现为黑色。你可以让它更特别一点。例如 -

h1#black {    color: #000000;  }

此规则仅将id属性设置为black 的<h1> 元素的内容呈现为黑色。

id选择器的真正威力在于它们被用作后代选择器的基础,例如 -

#black h2 {    color: #000000;  }

在此示例中,所有 2 级标题将显示为黑色,当这些标题位于id属性设置为black 的标签中时。

子选择器

您已经看到了后代选择器。还有一种类型的选择器,它与后代非常相似,但具有不同的功能。考虑以下示例 -

body > p {    color: #000000;  }

如果它们是 <body> 元素的直接子元素,则此规则会将所有段落呈现为黑色。放在其他元素(如 <div> 或 <td> )内的其他段落不会受到此规则的任何影响。

属性选择器

您还可以将样式应用于具有特定属性的 HTML 元素。下面的样式规则将匹配所有具有文本值的 type 属性的输入元素-

input[type = "text"] {    color: #000000;  }

此方法的优点是 <input type = "submit" /> 元素不受影响,并且颜色仅应用于所需的文本字段。

以下规则适用于属性选择器。

  • p[lang] - 选择所有具有lang属性的段落元素。

  • p[lang="fr"] - 选择所有lang属性值为“fr”的段落元素。

  • p[lang~="fr"] - 选择所有lang属性包含单词“fr”的段落元素。

  • p[lang|="en"] - 选择所有lang属性包含正好为“en”或以“en-”开头的值的段落元素。

多种样式规则

您可能需要为单个元素定义多个样式规则。您可以定义这些规则以将多个属性和相应的值组合到一个块中,如以下示例中所定义 -

h1 {
    color: #36C;
    font-weight: normal;
    letter-spacing: .4em;
    margin-bottom: 1em;
    text-transform: lowercase;
}

这里所有的属性和值对都用分号 (;) 分隔。您可以将它们保存在一行或多行中。为了更好的可读性,我们将它们放在不同的行中。

有一段时间,不要理会上面块中提到的属性。这些属性将在接下来的章节中解释,你可以在 CSS References 中找到关于属性的完整细节

分组选择器

如果您愿意,您可以将样式应用于许多选择器。只需用逗号分隔选择器,如下例所示 -

h1, h2, h3 {
    color: #36C;
    font-weight: normal;
    letter-spacing: .4em;
    margin-bottom: 1em;
    text-transform: lowercase;
}

此定义样式规则也适用于 h1、h2 和 h3 元素。列表的顺序无关紧要。选择器中的所有元素都将应用相应的声明。

您可以将各种id选择器组合在一起,如下所示 -

#content, #footer, #supplement {
    position: absolute;
    left: 510px;
    width: 200px;
}
标签:CSS语法
湘ICP备14001474号-3  投诉建议:234161800@qq.com   部分内容来源于网络,如有侵权,请联系删除。