0551-64933758

网站建设 APP开发 小程序

KNOWLEDGE/知识

分享你我感悟

您当前位置>主页 > 知识 > 网站设计制作 >

网站建设中如何创建性感的样式表

发表时间:2020-03-04 10:35

文章来源:admin

浏览次数:

最近,我对讨论创建性感样式表的方法很感兴趣。尽管CSS可以用来创建性感的网站,但是编写CSS本身实际上可以是一种艺术形式。CSS的创建,结构化和维护方式可能很漂亮。

那么如何创建性感的样式表呢?您的样式表有什么特点?

几个月前,我有机会在俄勒冈州波特兰市的Web Visions 2007会议上就这个主题进行了演讲在准备演示文稿时,我调查了十二名从事Web设计和开发工作的人员。这项调查的结果,加上我自己的工作经验,帮助我编制了创建样式表时要记住的要点清单。

01.将CSS保留在标记之外。

对于中级或高级CSS开发人员而言,链接和/或导入样式表似乎不费吹灰之力,但我想强调一下为什么这是如此重要。我已经看到许多站点从干净,组织良好的CSS文件开始,但随着时间的流逝,它们变得杂乱无章,甚至嵌入和内联样式(由于在短期限内需要快速更新,或者有时甚至是纯粹的惰性)。

想象一下,您正在使用一个具有数百种内容显示方式的超大型网站。您的截止日期很快,因此您选择使用嵌入式或嵌入式CSS进行“快速修复”或更新。数年过去了,这种习惯一直持续下去……直到有一天,您被告知该站点已被完全重新设计(但是所有内容都保持不变),并且只有一个星期的时间来构建它(包括测试)。

通常,这是更新样式表的一项相当简单的任务。除非您在网站上分散了数年的“快速修复”,而且无法记住它们的位置。因此,现在您必须要么a)找到一种方法清理所有东西,并在一周内完成重新设计的所有样式(祝您好运!),或b)找一份新工作。

不要使您的工作变得比实际困难。链接和/或导入样式表不是可选的。创建干净,保持干净,您会更加快乐。

注意:注意在标记中添加太多链接和/或导入的样式表。如果每次进行更新或添加新内容时都想创建一个新的样式表,那么您就没有得到任何帮助。过多的链接和/或导入可能会导致错误修复困难,并使样式难以维护。可以为大型网站的不同部分或组件使用单独的样式表,这是可以理解的(稍后再介绍)。请注意不要太过分。

值得一提的是,链接太多的样式表需要额外的HTTP请求,这可能会加起来,并有可能影响性能此外,Microsoft Internet Explorer 6最多只能包含32个链接样式表。

02.语义不仅仅是一个流行词。

你知道我必须提起它。语义是您最好的朋友。除了选择最合适,最有意义的元素来描述您的内容外,还要确保您选择的是语义类和ID属性值除了作为“正确的事情”,它确实确实使您的生活更轻松(并且如果您作为团队的一部分,也使您的团队成员的生活也更轻松)。看一下以下规则:

.l13k { color: #369; }

如果您是新手,并且在CSS文件中看到了该代码,您是否会立即知道该类的用途?很有可能不会。该类名称可能是某些东西的缩写,但是没有真正的方法可以立即分辨出来。或者,也许您将其放在此处,以便您知道它的意思,对吗?今天。但是,您知道三年后意味着什么吗?

现在,让我们看一下这个规则:

.left-blue { color: #369; }

您可能会立即知道该类选择器的作用,因为您确切地知道左侧蓝色模块的显示位置。因此看来这可行。正如我之前提到的,直到重新设计,您必须在一周内完成构建。在重新设计中,此模块现在位于右侧,并显示为红色。类属性值不再有意义,因此现在您必须更改所有属性值,或者保持原样(这可能会导致混乱)。

始终最好不要在类属性值中使用颜色(颜色名称或其十六进制值)或宽度/高度尺寸。您还应避免使用任何具有表现力的属性值(例如“ box”)。介意属性无法实现将表现与内容分离的目的。

最后,让我们看一下这个更适当命名的规则:

.product-description { color: #369; }

在这里,您可以看到规则更改了产品说明的样式,无论您的设计更改了多少次。清晰是一件美丽的事。

03.利用评论。

如果您以创造性和有意义的方式使用注释,则在开发过程中对CSS文件添加注释会对您和其他人有很大帮助。在最基本的级别上,注释很少提醒您为什么要使用特定规则。但是您可以使用注释来真正帮助改善组织和效率。

提醒和注意事项

进行评论,将提醒和注释留给自己和其他开发人员的常用方法可以帮助避免以后的混乱。保持这些简短和简单。例如:


/* Turn off borders for linked images */
img { border: 0; }

时间戳和签名

一些设计人员和开发人员还记下了CSS文件的最后更新日期和时间,以及它们的名称或首字母缩写。此信息可以提供有关联系人的快速指示,以及文件的最新状态。


/* Sushimonster Typography Styles
   Updated: Thu 10.18.07 @ 5:15 p.m.
   Author:     Jina Bolton
   ----------------------------------------------------*/

根据项目的不同,这可能是一个好主意,尤其是在团队中工作时。请记住,某些组织要求保留此类信息(某些公司更喜欢保留名称和日期不在文件中),因此最好找出此类事情是否有强制性。

组织

使用注释指示CSS文件中的不同部分是一个好主意。例如,如果所有标题样式都分组在一起,则可以使用注释将这些样式与下一部分样式分开:


/* HEADER
   ----------------------------------------------------*/

稍后,在讨论“分离样式类型”时,我将做更多介绍。

评论标记

如果您如上所述将CSS文件组织成几个部分,则注释标记也很有用,可以使您更容易使用FIND向下或向上跳到要查看的文件部分。您可以使用字符(例如等号[=])和关键字(通常是节的名称,例如“ HEADER”)来在CSS文件中提供“锚”:


/* =HEADER
   ----------------------------------------------------*/

这在冗长而复杂的样式表中特别有用。您可以在Stop Design上阅读有关此内容的更多信息

参考

较不常见但有用的方法是使用注释作为参考指南。例如,可以在Steve Smith的 CSS文件中看到一个颜色指南


/* COLORS
   Body Background:       #2F2C22
   Main Text:             #B3A576
   Links:                 #9C6D25
   Dark Brown Border:     #222019
   Green Headline:        #958944
*/

您应该将本指南放在CSS文件的顶部,以帮助您记住您在整个网站中使用的颜色值。另一个例子是类似索引的方法。在这里,您可以定义不同的部分,以便您可以跳到它们(也许通过使用注释标记)。这是一个例子:


/* GENERIC
   HEADER
   SIDEBAR
   FORMS
   TABLES
   FOOTER
*/

/* =GENERIC
   ----------------------------------------------------*/

04.知道何时使用条件注释或技巧。

关于黑客问题以及为什么条件注释是处理Internet Explorer问题的更好方法的文章很多然后还有其他说法虽然我同意条件注释比乱码乱扔CSS文件更好的解决方案,但直到最近我才意识到有些实例实际上并不是最合适的解决方案。

假设您要为一个元素设置一个最小高度。IE6开发人员没有实现min-height,因此您知道可以使用height,这将以相同的方式处理。当您只需要一个规则时,创建一个全新的样式表并通过条件注释将其插入标记中是否有意义?将最小高度和高度规则放在一起,并在同一CSS文件中选择小的“ hack”,是否更有意义?在这种情况下,我认为使用条件注释的效率较低。

要考虑的另一件事:如果样式位于多个位置,则使用多个CSS文件和条件注释会使调试过程更加困难。另外,如果您需要更改某些内容(在上述情况下可能是最小高度值),则必须打开多个文件才能进行此更改。在很多情况下,这对您来说并不是什么大问题,但请想象一下,如果您在主CSS文件中定义了某些内容,然后在3个不同的IE样式表中进行了重新定义。后来可能会很麻烦,特别是如果另一个进行该编辑的开发人员没有意识到这些覆盖存在的话。

如果确实使用条件注释,建议您在主样式表中保留注释,以使您或其他开发人员知道存在特定于IE的规则。这样,当您必须编辑高度或类似性质的东西时,您知道要打开多个文件。

与往常一样,如果您确实使用hack,请记住,浏览器更新可以更改以后可以使用的功能,并且您现在使用的hack可能在以后的版本中不起作用。

05.组织选择器和声明

始终保持CSS整洁有序。我更喜欢按样式组组织选择器:

  • 重置样式
  • 字体样式
  • 布局样式(页眉,内容,页脚等)
  • 模块或小部件样式
  • 等等

然后,在每个组中,我按DOM层次结构组织选择器(从下到下,从页面开始):

  • 任何父样式(包含元素,从外到内工作)
  • 块级元素样式(段落,列表等)
  • 内联元素样式(链接,缩写等)
  • 等等

然后在其中,我按元素类型工作:

  • 段落
  • 块引用
  • 地址
  • 清单
  • 形式
  • 桌子
  • 等等

最后,我更喜欢按样式类型组织CSS声明:

  • 定位(带有坐标)样式
  • 浮动/清除样式
  • 显示/可见样式
  • 间距(边距,填充,边框)样式
  • 尺寸(宽度,高度)样式
  • 与排版有关的样式(行高,颜色等)
  • 其他(列表样式,游标等)样式

有些人喜欢按字母顺序组织声明。这对我来说没有任何意义,但对您而言却完全有道理。无论选择哪种方法,都必须坚持并保持一致。

06.创建一个框架

在开发CSS时,如果发现自己反复做同样的事情,那么考虑创建一个库或框架是一个好主意框架可以由一组样式表组成,这些样式表充当网站的基础,并有助于加快开发时间。您可能会在框架中找到的典型样式表可能包括:

  • screen.css –屏幕CSS文件可以具有您要在屏幕上使用的所有样式,和/或可以导入其他样式,例如:
    • reset.css –重置的CSS文件可用于“重置”所有默认浏览器样式,这有助于简化跨浏览器的兼容性。
    • typography.css –印刷CSS文件可以定义您的字体,大小,前导,字距调整甚至颜色。
    • grid.css –网格CSS文件可以具有您的布局结构(并通过定义基本的页眉,页脚和列设置,充当站点的线框)。
  • print.css –一个打印CSS文件将包含您要在打印页面时使用的样式。

框架的一个示例是OlavBj¸rkøy(基于Jeff CroftEric Meyer等作者开发的工作建立起来)组成的Blueprint框架可以在Yahoo!上找到另一个流行的框架。用户界面库许多开发人员确实认为这些预先构建的框架包含标记和CSS,这些标记和CSS有点“膨胀”。并且它们包含表示性类属性名称。

注意:在撰写本文草稿阶段时,Jeff Croft发表了文章CSS框架不值得一看吗?他在评论中提到他被告知人们认为我强烈反对框架。我不确定这是从哪里来的,但是正如我在回应中指出的那样,我并不反对CSS框架,对它们来说非常有用。

为了获得最佳结果,我建议您创建自己的框架,该框架最适合您或您的组织。

07.平衡可读性和优化。

格式样式因开发人员而异。一些开发人员使用格式样式提供了很好的可读性,然后在将文件实时上载之前对文件进行了优化(删除注释,空格,制表符,回车等)。这是一项很棒的技术,我会推荐(仔细做)。但是,如果您某种程度上无法真正完成这些步骤,请尝试找到一种兼顾可读性和优化性的风格。史蒂夫·史密斯(Steve Smith)提出了一个很好的建议,可以兼顾两者。

另外,请考虑使用连字符而不是下划线。微格式使用连字符作为标准分隔符,某些较旧的浏览器很难使用连字符。您可以在Underscores的类名和ID名称中阅读有关此内容的更多信息

08.掌握您的文本编辑器。

正如艺术家拥有他们熟悉的适当工具一样,对于设计师/开发人员来说,了解他们使用得当的工具也很重要。对于CSS,这就是您正在使用的编辑器。

有很多文本编辑器可供选择:TextMate,Coda,BB Edit,TextPad,DreamWeaver等。我不是在这里告诉您选择哪个。他们各有利弊,适合您的编辑器由您决定。但是,一旦决定使用文本编辑器,请确保您学习了有关它的所有知识。找出快捷方式是什么,并学习所有可能的提示和技巧。

掌握文本编辑器是缩短开发时间的最佳方法,并且可以帮助您在创建性感的样式表时更加高效。

09.使用版本控制。

平滑的可维护性也是创建性感样式表的重要组成部分。这是版本控制可以成为您最好的朋友的地方。它不仅对团队有帮助,而且即使是唯一的设计师/开发人员,也可以挽救生命。

某些应用程序具有用于源代码控制的内置机制。DreamWeaver使用签入/签出系统(可帮助确保开发人员不编辑当前正在编辑的文件)以及同步功能(可让您与本地文件同步和合并)您的远程文件,反之亦然)。这可能非常方便,但是有些局限。

Subversion(SVN)或Concurrent Versions System(CVS)是用于更强大的管理的出色工具,并具有其他选项,例如能够还原,查看更改(这对于团队来说非常有用-您可以跟踪添加/编辑的人员/删除了代码及其执行的时间),并解决了冲突。乔纳森·斯努克(Jonathan Snook)的一篇很棒的文章叫做“托管的Subversion”,您可以阅读有关如何快速轻松地进行设置的更多信息。

10.创建并维护样式指南。

虽然在某些情况下,样式指南是具有语法规则和编写标准的作者指南,但也可以用于概述设计,开发和内容的标准。样式指南是获取参考手册的一种好方法,该参考手册可以阐明有关版式,网格,颜色,图像尺寸等的规则。

创建样式指南时,最好为标记和CSS提供参考。此参考可以用作开发团队和未来开发人员的手册。它可以包括定义的布局,您可以在其中列出可以使用的不同布局,并提供相关的标记和样式。

最后,您还可以为开发人员保留质量保证步骤(例如检查验证和可访问性)以确保最高质量。

结论

成为CSS专家不仅仅具有高级CSS技能(即:充分了解层叠,盒模型以及浏览器的工作方式)。我鼓励您考虑可以持续不断地提高可维护性和效率的方法。即使已经提供了所有内容,也可以考虑超出组合设计的范围。使CSS变得智能化并为未来做计划。工作流程的整体优雅对掌握至关重要。

相关案例查看更多