CSS-颜色和位置的分离_Css_Themes_Color Scheme_Dynamic Css

CSS-颜色和位置的分离

css

CSS-颜色和位置的分离,css,themes,color-scheme,dynamic-css,Css,Themes,Color Scheme,Dynamic Css,我只是想知道其他人在这方面做了什么：您是否尝试将位置CSS（布局）与颜色/风格CSS（颜色、背景色、背景图像、字体大小和系列）分开使用两个样式表？在服务器端合并两个样式表？CSS的抽象层？还是你连试都不试我知道，有时在同一个web项目上工作六个月后，我通常可以使用位置CSS，但最终想要更改颜色/图像。我倾向于将所有CSS放在一起，而不将“颜色样式”与“位置样式”或“布局样式”分开。我发现，当我经常尝试调试一个特定的“模块”时，将所有CSS规则应用于一个选择器而不是分散在样式表上更容易不

我只是想知道其他人在这方面做了什么：

您是否尝试将位置CSS（布局）与颜色/风格CSS（颜色、背景色、背景图像、字体大小和系列）分开

使用两个样式表？在服务器端合并两个样式表？CSS的抽象层？还是你连试都不试

我知道，有时在同一个web项目上工作六个月后，我通常可以使用位置CSS，但最终想要更改颜色/图像。

我倾向于将所有CSS放在一起，而不将“颜色样式”与“位置样式”或“布局样式”分开。我发现，当我经常尝试调试一个特定的“模块”时，将所有CSS规则应用于一个选择器而不是分散在样式表上更容易

不过，我建议你在thinkvitamin.com上仔细阅读。我做的一件事就是每次都按一定的顺序列出规则，这样我就知道在声明块中哪里可以找到我想要的

更多信息请访问Jina Bolton的

我将所有内容都保存在一个文件中，并且只提供不同的文件用于替代样式（例如用于打印）

在该文件中，我将整体布局（列、标题和页脚）与实际内容（段落、标题、列表…）分开

我习惯于面向对象的思维，所以我将不同对象（菜单、博客帖子）的样式分组在一起。从这个角度来看，颜色和位置都属于同一个物体，因此保持在一起

我希望能够在样式表中定义一次颜色，为它们指定一个声明性名称（例如“HeadingColor”），然后在将颜色指定给选择器时使用该名称

我将所有内容都保存在一个文件中，并使用中的“文件夹”功能将其组织起来。网页设计公司Viget有一篇关于这项技术的博客文章。

你会发现在大型项目中，布局和颜色/风格CSS（如果你聪明的话）通常是分开的。首先，如果你一次又一次地设置颜色/字体大小/字体系列样式规则，那你就是在浪费时间。通常，您应该在一个位置定义字体：body标记。任何附加字体都应该在各自的标签中定义。。。h1、h2、p等。在我看来，给这些标签定位指令不是一个好的做法；它们应该放在一个分区内，该分区将负责它们的布局。颜色和字体大小也是如此。我认为这个规则的唯一例外通常是背景材料，如果你有很多渐变和类似的东西，这一点尤其正确

归根结底就是计划；一个计划良好的项目只需要很少的颜色/风格规则。所以为了回答你的问题，是的，我通常有一个“Global.css”文件，它定义了我所有的字体和颜色，包括h1-h5、a、p和任何其他包含文本的标记

编辑：

通常，由于我所从事的项目规模相当大，并且有许多不同的模块，因此我们以某种层次结构将样式与进行分离；这是有道理的，因为CSS的工作方式——只要你不改变在“基础”（或者在我们的例子中是global.CSS）的某个地方设置的样式规则，样式就会保持不变。这很有帮助，因为当我们想要修改网站的字体时，我们只需在“body”标记处更改字体族规则，它就会传播到整个网站

因此，我们的样式表布局的工作原理如下：

Global.css (Fonts/Text/Primary font colors)
--> genericBase.css (basic page structures such as columns that are used throughout the site)
--> nav.css (left-hand nav and/or top nav bar)
--> formLayout.css (labels, inputs, fieldsets, any other form stuff)
-----> forums.css (individual modules' styles that may deviate a bit from the usual structures, or simply things specific to those pages)
-----> blogs.css
-----> messages.css (etc etc etc)

这里的箭头表示层次结构中文件的“顺序”。如果我们将所有样式放在一个文件中，那么箭头越长，这些文件所包含的规则在样式表中的位置就越低

所以你看，整个想法是从非常普遍的风格开始，然后逐步发展到最具体的风格。请记住，CSS文件加载的顺序对浏览器很重要。你可以利用这个优势。有趣的是，当我们访问特定模块的css文件时，我们几乎没有什么样式可供编写，因为大多数其他重要的东西实际上已经自行解决了

就像我说的，计划是至关重要的。我发现这种方法更容易“调试”我的风格，而且我几乎不使用任何黑客，通常只用于愚蠢的ie6内容

如果你需要更多信息，请告诉我。很高兴这对您有所帮助。

我最近分离了布局和颜色样式，现在有几个css文件，我导入如下：

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style-default.css" title="Default Style" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="style-bw.css" title="Black and White" media="screen" />

所有布局都在style.css中，然后颜色在style-default.css中。这样我有了一个标准样式，但用户也可以选择更改颜色。这不仅为用户提供了选项，而且还可以在不接触布局的情况下轻松更改颜色（我倾向于更频繁地更改颜色）

在Firefox中，我的颜色选项显示在“页面样式”下的“视图”菜单中。

我曾经将它们分开，但维护起来比较困难。问题是许多“格式化”属性将对布局产生影响，而许多“布局”属性实际上可能是设计属性

一些例子：

虽然“边框”可能被视为“格式化”属性，但它们确实占用了一些空间，因此在设置或删除边框时，您需要调整布局

“行高”与字体大小有关，可能被视为“格式化”属性，但它对元素的大小以及元素之间的垂直对齐方式有很大的影响

版面有时需要边距和填充，有时仅用于格式化

如果仔细想想，实际上只有很少几个属性是纯粹的格式化或纯粹的布局

通常，将所有内容都保存在同一个文件中，并通过相关的声明顺序来保持文件的整洁会更容易