跳到主要内容

级联样式表:关注内联样式

  • 作者:
  • 更新日期:

内联样式

在web文档中添加样式的方法有很多,因此了解每种方法的细节可能会让人感到困惑。

在本文中,我们将讨论使用CSS的内联样式。我们还将创建一个文档,设置它的样式,并将其视为一个网页。

什么时候穿衣

内联样式方法是为小的、孤立的文本样式保留的。内联样式受雇为一页文字设计样式。对于整个页面,可以使用内部样式表(对于多个页面使用外部样式表)。因此,如果您想要更改该页上的一个单词或属性,您可以在希望更改的项上以内联样式输入更改。

我们将创建两个文档。我们创建的第一个文档将是一个纯文本HTML5文档,可以在web浏览器页面上看到。接下来,我们将在文档中放置一个内联元素并查看它。

对于我们创建的第二个文档,我们将在文档中写入一个内部样式和一个内联样式。您将在本文档中观察到样式的层次结构是如何工作的。

如果您一直在学习其他CSS文章,并且已经完成了下面的练习,那么您可以继续练习,或者跳过插入内联元素。

让我们从纯文本文档开始!

  1. 在记事本或写字板中打开空白页(任何文档作者都可以工作)。
  2. 复制下面我创建的代码到你的页面…

普通的HTML5

<!文档类型超文本标记语言><超文本标记语言><身体><h1>纯文本Web文档!h1><p>这是一个HTML5文档或页面,非常简单。无聊,枯燥,文字。让我们改变这一切!p>身体>超文本标记语言>

保存HTML文档

现在,通过单击文件—>另存为—>在弹出窗口中将文件类型更改为HTML文档所有文件——>命名你的文档和保存它. html。例如:mycss.html或myblankcode.html。记下你保存它的地方。

找到刚才保存的文档,双击它,这样它就会在浏览器中打开。它应该如下图所示…

纯HTML

纯HTML

插入内联元素

现在,让我们添加一些内联元素来突出这个文档!和优秀!

测试下面方框中的代码看起来非常像你已经在记事本文档中写的代码,但真的是这样吗?仔细查看代码,看看是否有任何更改。

同样,将下面的内容复制到你的记事本文档中,保存为.html文件。

内联样式添加代码

<!文档类型超文本标记语言><超文本标记语言><身体><h1风格“颜色:橙色;text-align:中心;”>内联样式的Web文档!h1><p>这是一个HTML5文档或页面,您在其中输入了内联样式。您已经告诉浏览器,“我想让h1行显示为橙色,它会服从您的命令!”p>身体>超文本标记语言>

显示它!

找到刚刚保存到电脑中的文件,双击它。下面是您应该在浏览器上看到的内容。

HTML5样式与内联代码

使用内联代码样式化的文档。

使用内联代码样式化的文档。

内联CSS的进一步工作

让我们进一步研究这个内联工作。如果你在这个文档上有一个内部(或外部)CSS代码,但你决定把背景换成橙色,而不是h1元素的橙色,但h1仍然会居中。

如何编写代码,使内联样式覆盖内部(或外部)代码,而使本文其余部分保持由其他代码编写的状态?

将下面的代码复制到记事本文档中,并将其保存为.html。在你的电脑上找到并打开它。

<!文档类型超文本标记语言><超文本标记语言><><风格>身体背景颜色:橙色;}风格>><身体><h1风格“text-align:中心;”>内联样式的Web文档!h1><p>这是一个HTML5文档或页面,您在其中输入了内联样式。您已经告诉浏览器,“我想让h1行显示为橙色,它会服从您的命令!”p>身体>超文本标记语言>

内联和内部样式一起工作!

内联样式表与内部样式表和内联样式代码一起工作

内联样式表与内部样式表和内联样式代码一起工作

一切就绪

现在这是一个引人注目的,令人兴奋的网页!这两种风格完美地结合在一起!

当在一个文档中使用两种CSS代码样式时,内联样式必须写在内部样式代码之后。否则,内联元素将无法工作。

Baidu