千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > HTML中的内联样式–CSS内联样式

HTML中的内联样式–CSS内联样式

来源:千锋教育
发布人:syq
时间: 2022-09-20 11:50:28 1663645828

  级联样式表 (CSS) 是一种标记语言,用于确定网页的显示方式。它管理网站元素的颜色,字体和布局,并允许您向页面添加效果或动画。

CSS内联样式

  我们可以通过三种方式设置HTML文件/页面的样式:外部样式,内部样式和内联样式。在本文中,我们将重点介绍内联样式。

  如何在 HTML 中使用内联样式

  使用 style 属性,我们可以将样式应用于具有内联样式的单个 HTML 标记内的 HTML。

15

  样式属性的工作方式与任何其他 HTML 属性相同。我们使用 ,后跟等号 (=),然后是一个引号,其中所有样式值都将使用标准 CSS 属性值对 - 存储。style"property: value;"

  注意: 我们可以拥有任意数量的属性-值对,只要我们用分号(;)分隔它们。

  值得注意的是,该属性通常用于开始的 HTML 标记中,因为这是 HTML 元素的一部分,可以包含文本、数据、图像或根本不包含任何内容。内联样式的示例如下:style

16

  这类似于:

17

  唯一的区别是内联样式仅适用于应用它的标记,而第二个代码示例会影响 html 页上的所有标记。p

  何时使用内联样式

  但是,使用内联样式不被认为是最佳做法,因为它会导致大量重复 - 因为这些样式不能在其他地方重用。

  但有时内联样式是最佳(或唯一)选项,例如在设置HTML电子邮件,CMS内容(如WordPress,德鲁帕尔等)的样式时。您还可以在设置动态内容的样式时使用它们,动态内容是由 HTML 创建的或由 JavaScript 更改的。

  除声明外,内联样式具有高特异性/最高优先级,这意味着它们将覆盖内部和外部样式表中的大多数其他规则。!important

  假设我们有两个段落文本,其中内联样式设置为,内部样式设置为 :red green

18

  来自我们内联样式的 CSS 将覆盖内部样式中的 CSS,因此两个段落都将是 。red

  内联样式的优缺点

  到目前为止,我们已经了解了什么是内联样式以及如何在HTML标记中使用它。现在,让我们看一下优缺点,看看何时应该使用内联样式,何时不应该使用内联样式。

  内联 CSS 的优点:

  内联优先于所有其他样式。在内部和外部样式表中定义的任何样式都将被内联样式覆盖。

  您可以快速轻松地将 CSS 规则插入到 HTML 页面中,这对于测试或预览更改以及在网站上执行快速修复非常有用。

  无需创建其他文件。

  要在 JavaScript 中应用样式,请使用 该属性。style

  内联 CSS 的缺点:

  向每个 HTML 元素添加 CSS 规则需要时间,并且会使 HTML 结构无组织。很难跟上、重用和扩展。

  设置多个元素的样式可能会影响页面的大小和下载时间。

  内联样式不能用于设置伪元素和伪类的样式。例如,可以使用外部和内部样式表设置定位标记的已访问、悬停、活动和链接颜色的样式。

  结论

  在本文中,我们学习了如何在HTML中使用内联样式,何时使用它,以及这样做的一些优点和缺点。

  由于内联样式优先于所有其他样式,因此使用它的最佳时间之一是在测试或预览更改以及在网站上执行快速修复时。

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT