避免css设计中的内联样式

层叠样式表已经成为设计网站样式和布局的标准方式。设计师使用样式表来告诉浏览器一个网站的外观应该如何显示,包括颜色、间距、字体等因素。...

层叠样式表已经成为设计网站样式和布局的标准方式。设计师使用样式表来告诉浏览器一个网站的外观应该如何显示,包括颜色、间距、字体等因素。

Laptop with CSS word on screen. Learn CSS, web development

CSS样式以两种方式部署:

  • 内联-在网页本身的编码中,以单个元素为基础,逐个元素
  • 在网站链接到的独立CSS文档中

css的最佳实践

“最佳实践”是设计和构建网站的方法,这些方法已被证明是最有效的,并能为所涉及的工作提供最大回报。在网页设计的CSS中遵循这些原则有助于网站的外观和功能。多年来,它们与其他web语言和技术一起发展,独立CSS样式表已成为首选的使用方法。

以下CSS最佳实践可以从几个方面改进您的站点:

  • 将内容与设计分离:CSS的主要目标之一是从HTML中删除设计元素,并将它们放置在另一个位置,以便设计师进行维护。这种做法也有助于将设计人员与开发人员分开,使他们能够专注于各自的专业领域。设计师不一定要成为开发者才能保持网站的外观。
  • 使维护变得容易:web设计中最容易被忽视的元素之一是维护。与印刷材料不同,网站从来都不是“一劳永逸”的。内容、设计和功能可以而且应该随着时间的推移而发展。将CSS放在一个中心位置,而不是分散在整个网站上,使维护变得更加容易。
  • 保持网站的可访问性:使用CSS样式有助于搜索引擎和残疾人与网站进行交互。
  • 使您的网站保持最新:通过使用CSS的最佳实践,您遵守了已被证明稳定但足够灵活的标准,以适应web设计环境中的变化。

内联样式不是最佳实践

内联样式虽然有其用途,但通常不是维护网站的最佳方式。它们与每一个最佳实践都背道而驰:

  • 内联样式不会将内容与设计分开:内联样式与现代开发人员所反对的嵌入式字体和其他笨重的设计标签完全相同。样式只影响应用它们的特定的单个元素;虽然这种方法可能会使您获得更细粒度的控制,但它也会使设计和开发的其他方面(如一致性)更加困难。
  • 内联样式会引起维护方面的麻烦:在使用样式表时,很难确定样式的设置位置。当您处理内联、嵌入和外部样式的混合时,您需要检查许多位置。如果你在一个网页设计团队工作,或者不得不重新设计或维护一个由其他人创建的网站,那么你将会遇到更多的麻烦。一旦找到样式并进行更改,就必须在放置样式的每个页面上的每个元素上进行更改。这大大增加了时间和工作预算。
  • 内联样式不易访问:虽然现代屏幕阅读器或其他辅助设备可能能够有效地处理内联属性和标记,但一些旧设备却不能,这可能会导致一些奇怪的网页显示。额外的字符和文本也会影响搜索引擎机器人查看页面的方式,因此您的页面在搜索引擎优化方面做得不好。
  • 内联样式使页面更大:如果您希望站点上的每个段落都以某种方式显示,您可以在外部样式表中使用六行左右的代码来完成一次。但是,如果使用内联样式,则必须将这些样式添加到站点的每个段落中。如果你有五行CSS,那就是五行乘以你网站上的每个段落。带宽和加载时间加起来很快。

内联样式的替代品是外部样式表

使用外部样式表代替内联样式。它们为您提供了CSS最佳实践的所有好处,并且易于使用。以这种方式使用,站点上使用的所有样式都存在于单独的文档中,然后通过一行代码链接到web文档。外部样式表影响它们附加到的任何文档。如果你有一个20页的网站,其中每个页面都使用相同的样式表(通常是这样做的),你只需在一个地方编辑这些样式一次,就可以对其中的每个页面进行更改。在一个位置更改样式比在网站的每个页面上搜索该代码更方便。这种灵活性使长期站点管理变得更加容易。

  • 发表于 2021-09-04 23:36
  • 阅读 ( 117 )
  • 分类:IT

你可能感兴趣的文章

迪夫(div)和跨度(span)的区别

...。它告诉Web浏览器如何构造网页以显示它。div和span是HTML中的两个标记。根据元素的类型,每个HTML元素都有一个默认的显示值。因此,它们可以是块或内联元素。本文讨论了div和span的区别。div和span的关键区别在于div是块级元素...

  • 发布于 2020-11-09 08:37
  • 阅读 ( 353 )

9个在构建网页时不应该犯的错误

...会改变,有些会被弃用。即使这些标签仍然有效,也最好避免使用它们。 ...

  • 发布于 2021-03-14 14:13
  • 阅读 ( 249 )

创建web界面:从何处开始

... web设计与前端开发 ...

  • 发布于 2021-03-16 05:47
  • 阅读 ( 276 )

部门(div)和跨度(span)的区别

...认的语言开发,很容易被不同的浏览器解释,从而呈现出设计者想要的页面。 目前仍在使用的版本是HTML4,但随着HTML5在动态和响应性网页方面获得更多支持和采用,HTML4正逐渐被淘汰。 响应性正成为web开发中的一个基本组件,...

  • 发布于 2021-06-24 23:59
  • 阅读 ( 256 )

html格式(html)和css格式(css)的区别

...表格、列表等都有标签。 什么是css格式(css)? CSS是一种设计语言,用于使web页面更加美观。它是用HTML编写的。它用于添加设计,例如添加颜色、更改字体和文本等。还可以添加渐变、阴影、2D、3D变换、边框等功能。CSS可以与HTM...

  • 发布于 2021-07-01 02:33
  • 阅读 ( 252 )

html元素:块级(html elements: block-level)和内联元素(inline elements)的区别

...法而受到惩罚的方法。 常见的内联元素格式错误 Web设计新手最常见的错误之一是试图在内联元素上设置宽度。这不起作用,因为内联元素的宽度不是由容器框定义的。 内联元素忽略几个属性: 宽度和高度 最大宽度和最...

  • 发布于 2021-09-04 22:28
  • 阅读 ( 179 )

html强调标记

...斜体。这就是为什么我们不加倍强调标签的原因之一。 避免这种“双重化”的另一个原因是出于文体目的。一种强调形式通常足以表达你想要设定的语气。您不需要加粗、斜体、上色、放大和在文本下面加下划线就可以让它脱...

  • 发布于 2021-09-04 22:31
  • 阅读 ( 155 )

设置hr(水平规则)标记的样式

...调整定位以将其放置在所需的位置。不建议使用此选项向设计中添加垂直线,但这是一种有趣的效果。 另一种在页面上获取行的方法 有些人不使用HR元素的一件事是依赖其他元素的边界。但有时人力资源比试图建立边界更方...

  • 发布于 2021-09-05 00:09
  • 阅读 ( 113 )

如何使用span标记和css更改单词的颜色(change the color of a word with the span tag and css)

...:它被添加到页面的HTML中,而不是外部样式表中。 避免使用已弃用的标记。 以下是如何使用标记更改单词的颜色: 在代码视图模式下使用首选文本或HTML编辑器,将光标放在要着色的单词或单词组的第一个字母之前。 让...

  • 发布于 2021-09-08 04:18
  • 阅读 ( 209 )

如何我选择最好的开源css编辑器?(i choose the best open source css editor?)

...浏览器中正确运行。同时处理多个文档的能力将对许多web设计师和开发人员有所帮助。 ...

  • 发布于 2021-12-06 17:39
  • 阅读 ( 119 )
qfjh7148
qfjh7148

0 篇文章