层叠样式表(CSS)允许您转换网页的外观。从字体和颜色到间距和整体布局,各种各样的设计工具就在您的指尖。尽管CSS是一门复杂的语言,但只有两个基本概念需要你理解才能开始。
这一切都是从准确地确定页面的哪一部分需要设置样式开始的。
CSS文件包含一系列规则,描述HTML文件的格式。每一条规则都由两部分组成:设置什么样式以及如何设置样式。第一部分使用一系列称为“选择器”的术语进行控制
本文中的示例包括样式声明,但它们不是重点:选择器本身就是。
历史上,有三个CSS选择器级别(或版本)具有不同程度的浏览器支持。到2020年,根据CaniUse的数据,全世界99%以上的用户都可以使用。
一级介绍了四种基本类型的选择器,这些选择器涵盖了大量的情况,甚至在今天。
Pattern | Matches |
---|---|
电子 | 所有E元素 |
c | class=“c”的所有元素 |
#粘虫 | id=“myid”的元素 |
埃弗 | E元素中的F元素 |
伪类 | |
E:链接 | 指向以前未访问过的页面的超链接 |
E:参观过吗 | 指向已访问页面的超链接 |
E:激活 | 当前选定的超链接 |
伪元素 | |
E::一线 | E元素的第一个格式化行 |
E:第一个字母 | E元素的第一个格式化字母 |
最简单的选择器是“类型选择器”。它针对元素的所有实例,例如段落或粗体文本:
p { margin-bottom: 0; }b { font-family: sans-serif; }class属性允许向HTML元素添加更多的语义,例如特定类型的段落。这些元素可以在CSS中选择,如下所示:
.intro { font-weight: bold; }此选择器将匹配:
<p class="intro">…</p>但请注意,它也会匹配:
<ul class="intro">…</ul>如果您只想将其应用于简介段落,可以将类型选择器和类选择器结合使用:
p.intro { font-weight: bold; }HTML id属性在文档中应该是唯一的,例如,如果您有:
<div id="contents">…</div>这应该是唯一具有“contents”id的元素。id选择器允许您将文档中的特定元素作为目标:
#contents { color: #333; }严格地说,这是一个“组合词”,因为这个选择符是关于两个其他选择符之间的空间的。HTML是分层的,正如我们在DOM概述中所解释的那样。子体选择器允许通过另一个元素中的上下文来标识元素:
table b { font-weight: normal; }伪选择器的目标是不显式存在但仍然可用的类或元素。将其视为特殊内容奖励:
p::first-line { text-transform: uppercase; }如果要将相同的规则集应用于每个规则,请使用逗号将选择器组合到列表中。而不是:
th { padding: 1em; }td { padding: 1em; }你可以写:
th, td { padding: 1em; }样式表是一系列使用选择器匹配元素的规则,但是当多个规则匹配给定元素时会发生什么?由此产生的行为由“特殊性”控制,该“特殊性”定义了在以下情况下使用的规则:
p.intro { color: black; }p { color: gray; }在这种情况下,优先权规则由其特殊性来定义,如下所示:
在计算特**时,只有两个选择者在较高级别上的得分相同时才考虑每个级别,因此“#contents”比“contents”更具体文章.新闻第。作者特别因为前者在ID选择器上“获胜”。
CSS选择器的下一个版本引入了属性选择器,扩展了伪类和伪元素,并添加了两个新的组合符。
Pattern | Matches |
---|---|
* | 任何元素 |
E>;F公司 | F元素E元素的子元素 |
E+F公司 | 紧跟在E元素前面的F元素 |
属性选择器 | |
E[foo] | 具有“foo”属性的E元素 |
E[foo=“bar”] | 一个E元素,其“foo”属性正好是“bar” |
E[foo~=“巴”] | 一种E元素,其“foo”属性是一组以空格分隔的值,其中一个是“bar” |
E[foo |=“en”] | 一种E元素,其“foo”属性具有以“en”开头的以连字符分隔的值列表 |
伪类 | |
E:第一个孩子 | E元素,其父元素的第一个子元素 |
E:lang(法语) | “fr”语言中E类元素 |
伪元素 | |
E::之前 | 在E元素的内容之前生成的内容 |
E::之后 | 在E元素的内容之后生成的内容 |
“*”匹配任何元素。它通常不是很有用,但是如果您想重置任何默认页边距,例如,您可以这样做:
* { margin: 0; }属性选择器允许通过元素的属性对样式进行非常明确的筛选:
a[title] { text-decoration: underline dotted; }类似于后代组合子,但此组合子只匹配直系子代,而不匹配树下面的任何子代。例如,“ul>li”将只匹配此处的“Section 1”文本,而不匹配“Section 1.1”:
<ul><li>Section 1<ul><li>Section 1.1</li><li>Section 1.2</li></ul><li></ul>此选择器通常用于控制边距或没有特定类的介绍性段落,仅当一个元素紧跟在另一个元素之后时才匹配该元素。在本例中,只匹配第一段,不匹配第二段:
<h1>Contents</h1>some extra text<p>Introductory paragraph</p><p>Following paragraph</p>注意,当决定下一个同级是什么时,此选择器只考虑元素而不是文本。
一些CSS属性从祖先元素继承其值。在实践中,这意味着例如设置“body”元素的字体面意味着每个段落、表等也使用相同的字体面。
当然,这正是您所期望的,但是考虑一个不继承的属性:“margin”,例如。您不希望每个段落或粗体文本的边距都与整个文档相同。
相关:简单的CSS代码示例,你可以在10分钟内学会
一个好的经验法则是尽可能地以元素为目标,当一个简单的“body”选择器可以做到时,不要以每个元素为目标。
在这个级别中添加了更多的伪类,以及一些属性选择器和一个新的组合器。
Pattern | Matches |
---|---|
东方不败 | 前有E元素的F元素 |
属性选择器 | |
E[foo^=“bar”] | 一个E元素,其“foo”属性以字符串“bar”开头 |
E[foo$=“吧台”] | 一个E元素,其“foo”属性以字符串“bar”结尾 |
E[foo*=“巴”] | 一个E元素,其“foo”属性包含子字符串“bar” |
伪类 | |
E:根 | 一个E元素,文档的根 |
E:第n个孩子(n) | 一个E元素,其父元素的第n个子元素 |
E:第n个孩子(n) | 一个E元素,其父元素的第n个子元素,从最后一个开始计算 |
E:第n种类型(n) | 一个E元素,它的第n个同级元素 |
E:类型(n)的第n个结尾 | 一个E元素,它的第n个同级元素,从最后一个元素开始计算 |
E:最后一个孩子 | E元素,其父元素的最后一个子元素 |
E:第一种 | 一个E元素,它的第一个同级元素 |
E:最后一种 | 一个E元素,它的最后一个同级元素 |
E:独生子女 | 一个E元素,它的父元素的唯一子元素 |
E:仅适用于 | 一个E元素,只有它的同级元素 |
E:空的 | 没有子元素的E元素(包括文本节点) |
E:目标 | 作为引用URI的目标的E元素 |
E:启用 | 启用的用户界面元素E |
E:禁用 | 禁用的用户界面元素E |
E:检查过了 | 一种被检查的用户界面元素E |
E:不是 | 与简单选择器s不匹配的E元素 |
您可以选择属性以给定值开头的元素:a[href^=“https:”],以给定值结尾的元素:img[src$=”.gif“],或包含值:a[*=”value“]。
附加的伪类包括“:last child”、“:empty”(用于匹配没有内容的元素)和“:checked”,它们与复选框输入之类的元素匹配,但仅在选中时匹配。
与级别2中相邻的兄弟组合符类似,它匹配任何紧随其后的兄弟,而不仅仅是下一个:
h1 ~ p { font-size: 110%; }现在您已经知道了关于如何使用CSS选择网页的一部分的所有内容。现在您已经准备好使用各种CSS属性来为页面样式,这些属性涵盖了从颜色到布局的所有内容。
图片来源:Pankaj Patel/Unsplash
...BarCampNYC发布的日子。JS还有些欠缺——浏览器都支持它的一部分,但为了符合要求,必须实施许多黑客和变通方法。 ...
firefox11为Firefox已经令人印象深刻的软件库添加了两个新的web开发工具。Tilt特性可以在3D中可视化网站结构,而样式编辑器可以动态编辑CSS样式表。 3D特性称为Tilt,是一种可视化网站DOM的方法。它与现有的文档检查器集成,并使...
...本Hello World 1和Hello World 2将以蓝色显示。 可以对多个元素使用同一类。因此,类选择器用于多个元素。 身份**(id)和css中的类(class in css)的区别 定义 id是CSS中的选择器,用指定的id设置元素的样式,而class是CSS中的选择器,用指定...
...CSS代表级联样式表。它很容易学习,可以与HTML或XHTML结合使用。它是一种简单的设计语言,有助于使网页更美观。 CSS有多种版本。CSS1是在1996年引入的,它是所有HTML标记的一个简单的可视化格式模型。css2包含特定于媒体的样式...
...包括SVG、地理位置、本地音频和视频支持等附加功能。仅使用HTML开发的网页是静态网页。程序员可以使用记事本轻松地创建一个HTML文件,并且可以在web浏览器上执行它。 HTML文件以文档类型声明开始。它指定HTML的版本。然后文...
在我们关于如何创建网站的夜校系列的第一部分中,我们学习了一些关于网页的基本知识:HTML。在今天的课程中,我们将开始使用样式和CSS将衣服放到我们的网站上。上面的视频将引导您了解将样式应用于HTML文档中元素的三种...
...reamweaver cc 2021可通过土砖的创意云作为月度或年度计划的一部分提供。 02 2007年 咖啡杯的html编辑器 咖啡杯软件在以低价提供客户所需方面做得很好。咖啡杯编辑器是一个为网页设计师提供的工具,它提供了大量的...
浏览器处理空白的方式一开始不是很直观,特别是当您比较超文本标记语言相对于文字处理程序处理空白的方式时。在文字处理软件中,您可以在文档中添加大量间距或制表符,这些间距将反映在文档内容的显示中。这种所见...
...绕,并将其样式设置为红色文本。该单词仍然是h3元素的一部分,但将显示为红色。
动态HTML实际上并不是一种新的HTML规范,而是一种查看和控制标准HTML代码和命令的不同方式。 在考虑动态HTML时,您需要记住标准HTML的特性,特别是一旦从服务器加载页面,它将不会更改,直到服务器收到另一个请求。动态HT...