从设计中分离内容使网站管理更容易
CSS(层叠样式表)已成为风格和布局网站的事实上的方式。 设计师使用样式表告诉浏览器应该如何在外观和感觉方面显示网站,涵盖诸如颜色,间距,字体等诸多因素。
CSS样式可以通过两种方式进行部署:
- 内联 - 在网页本身的编码中,以个人为单位逐个元素
- 在网站链接的独立CSS文档中
CSS的最佳实践
“最佳做法”是设计和建设网站的方法,这些网站已被证明是最有效的,并为所涉及的工作带来最大的回报。 在网页设计中使用CSS跟随他们,可以帮助网站看起来和功能尽可能好。 多年来,随着其他Web语言和技术的发展,独立的CSS样式表已成为首选的使用方法。
遵循CSS的最佳实践可以通过以下方式改进您的网站:
- 将内容与设计分开。 CSS的主要目标之一是从HTML中移除设计元素,并将它们放置在另一个位置供设计人员维护。 这也有助于将设计师与开发人员分开,以便每个人都可以专注于他们的专业领域。 设计师不必是一名开发人员来维护网站的外观。
- 使维护容易。 网页设计中最容易被忽视的元素之一就是维护。 与印刷材料不同,网站永远不会“一劳永逸”。 内容,设计和功能可以并且应该随着时间的推移而发展。 将CSS放在一个中心位置,而不是撒在整个网站上,使事情变得更容易维护。
- 保持您的网站可访问。 使用CSS样式有助于搜索引擎和残疾人与您的网站进行交互。
- 让您的网站保持更长时间。 通过使用CSS的最佳实践,您将遵循已经证明稳定但足够灵活的标准,以适应网页设计环境的变化。
内联样式不是最佳实践
内联样式虽然有目的,但通常不是维护网站的最佳方式。 他们违背每一种最佳实践:
- 内联样式不会将内容与设计分开。 内联样式与现代开发人员所反对的嵌入式字体和其他笨重的设计标签完全相同。 样式只影响它们应用的特定的单独元素; 虽然这可能会给你更细化的控制,但它也会使设计和开发的其他方面(如一致性)变得更加困难。
- 内联样式导致维护头痛。 在处理样式表时,确定样式的设置可能很困难。 当你处理内嵌,嵌入和 外部样式的混合时 ,你有很多位置需要检查。 如果您在网页设计团队工作,或者需要重新设计或维护由其他人创建的网站,那么您将遇到更多麻烦。 一旦找到样式并对其进行更改,就必须对每个放置样式的页面上的每个元素执行此操作。 这大大增加了时间和工作预算的天文数字。
- 内联样式不可访问。 虽然现代屏幕阅读器或其他辅助设备可能能够有效处理内联属性和标签,但一些较旧的设备不能,这可能会导致一些奇怪的显示网页。 额外的字符和文字也会影响搜索引擎机器人浏览您的网页的方式,因此您的网页在搜索引擎优化(SEO)方面效果不佳。
- 内联样式使您的页面变大。 如果您希望网站上的每个段落都以某种方式显示,则可以在外部样式表中使用六行左右的代码执行一次。 但是,如果您使用内联样式进行此操作,则必须将这些样式添加到网站的每个段落中。 如果您有五行CSS,那么您的网站上的每个段落都会有五行。 带宽和加载时间可以加快。
内联样式的替代方法:外部样式表
而不是使用内联样式,请使用外部样式表 。 它们为您提供CSS最佳实践的所有好处,并且易于使用。 以这种方式使用,您网站上使用的所有样式都存放在单独的文档中,然后通过一行代码链接到Web文档。 外部样式表会影响它们附加到的任何文档。 这意味着,如果你有一个20页的网站,每个页面使用相同的样式表 - 这通常是如何完成的 - 你可以通过在一个地方编辑一次这些样式来改变每一个页面。 在一个地方更改样式比在网站的每个页面上搜索该编码都方便得多。 这使得长期的网站管理变得更容易。