帖子标记 ‘CSS’

CSS框架通常指的是一些CSS文件的集合,这些文件包括网页的基本布局、表单样式、网格或简单结构、以及样式重置。虽然对于小的WEB开发项目来 说,CSS框架并不一定适用,但是对于规模较大的团队开发项目而言,CSS框架不仅能加快设计开发速度,而且还能有效解决网站改版中带来的诸多麻烦和问 题。这里推荐的15款CSS框架是现在国外最流行的CSS框架,希望能对你的开发有所帮助!

例如:

  • typography. 基本排版规则
  • grid.css 基于网格的布局
  • layout.css 通常的布局
  • form.css for 表单样式
  • general.css 更多通用规则

1 . Elements CSS Frameworks

CSS Frameworks

精选15个国外最流行的CSS框架 | iwanna.cn 我想网

Elements 是一个实用的CSS框架。它是为了帮助设计师更快更高效的来写CSS而建立。Elements 已经超越了仅仅作为一个框架,它有自己的项目工作流。它拥有你完成项目所需的所有东西,这也让你和你的浏览者感到愉悦。阅读 概述 了解更多。
(全文 …)

30个必记的选择器

作者: seasun

久没翻译。英语水平本就不高,不敢乱译。博客不能再荒芜下去了,只能硬上。还好这篇我感兴趣,又对CSS有一些了解,有错大家多多指正。
—————————————————————–正文———————————————–
了解基本的id选择器,类选择器和子选择器,如果就此收手,那你会错失很多灵活方法。虽然本文提及的部分选择器属于CSS3范围内,只在一些时新的浏览器 有效,不过还是有必要记得这些选择器。

1. *

* {
 margin: 0;
 padding: 0;
}

在提到更先进的选择器之前,为初学者之便,先把常见的选择器解决掉。
星号符会选择页面每个元素。很多开发者用它把所有margin和padding归零。这当然是快捷测试方法。不过我建议你不使用它,它给浏览器带来太多的 负担,这不必要。
通配选择器也可以用到子选择器上。
(全文 …)

, , 等等,这可不是你妈口中的AJAX

pages are written in HTML, the programming language that tells browsers how to lay out and present content on a page. In other words, HTML provides the basic building blocks for the . For a long time, those building blocks were pretty simple and static: lines of text, links and images.

众所周知,网页是用超文本标记语言(HTML)编写的,这种网页编程语言告诉浏览器怎样在网页中输出并 展现内容。换句话说,HTML就是网页这个建筑的一砖一瓦。长期以来,这些“砖瓦“都相当简单而且是静态的:仅有几行文字,或一些链接,或几张图片。

Today, the web goes beyond just text, links, and images. We expect to be able to play online chess or seamlessly scroll around a map of our neighborhood, without waiting for the entire page to reload for every chess move or every map scroll.

而今,网页中远不止文本,链接 和图片了。我们期望能够在线下象棋时,每走一步不必等待网页重新加载,或者查看一下我们周边的地图时,每拖到一下网页也不用重新刷新。

The idea of such dynamic web pages began with the invention of the scripting language JavaScript. JavaScript support in major web browsers meant that web pages could incorporate more meaningful real- time interactions. For example, if you’ve filled out an online form and hit the “submit” button, the web page can use JavaScript to check your entries in real-time and alert you almost instantly if you had filled out the form wrongly.

这些动态网页的创意开始与于脚本语言JavaScript的出现。主要的 网页浏览器都支持JavaScript,这就意味着网页能够加入一些更有意义的实时互动。例如,当你在线填一些表格时,点击“提交“按钮,网页可以调用 JavaScript代码来实时检查表格是否填错,如果有错误,网页马上就能提示你。
(全文 …)

IE内核有着自己独立的一个hack:*,再调试IE的时候常会用到。
同样Webkit内核也有着自己独立的一个hack,是只针对Chrome和Safari才起作用:

@media screen and (--min-device-pixel-ratio:0) {
     /* Webkit内核兼容CSS*/
}

DEMO:http://www.iwanna.cn/examples/css/hack/webkit_hack.html

@media screen and (-webkit-min-device-pixel-ratio:0) {
     .webkit_color{color:#f00}
	 .webkit_border{border:1px solid #f00;}
	 .webkit_background{background:#f00;}
}

、FF都将不会识别定义的颜色、描边、背景。
测试结果如图:
CSS:Webkit核心Chrome和Safari的独有Hack

扩展阅读:《CSS HACK:IE6、IE7、Firefox之间的区别及兼容写法

6、7、Firefox之间的区别
区别IE6与FF:

background:orange;*background:blue;

区别IE6与IE7:

background:green !important;background:blue;

区别IE7与FF:

background:orange; *background:green;

(全文 …)

如何更好的写你的CSS代码

CSS是并不是一门很难学习和使用的语言,尽管它可能难以精通.如果你在你的项目中使用到了CSS,特别是在一个比较大的项目中,如果你没有用到一 些技巧来帮助你更好的管理CSS代码,那将给你带来一定的困难.通过一定的技巧来更好的写你的CSS代码,你可以让你在programing时更轻松,并 同时改善你的项目.当涉及到CSS,代码中的一些小的调整就可以带来很大的改进,使你的工作更有效,并带来很好的结果.今天,我在这里将提到19种技巧, 希望可以帮助你在你的项目中写出更好的CSS代码.

用有意义的名字

在CSS中,其实是任何一门语言中,使用有意义的或是描述性的名字来定义你的变量,都是很重要的.它提高你代码中的可读性和可维护性.这时举一个经 典的使用不好的命名规则的例子:有两列的布局,其中左边包含菜单的列命名为”leftcol”,另一个右边的是包含内容的列叫”rightcol”.这样 是可以的,你有没有想过,如果这时你的客户要求改成不同的样式,怎么办呢?假如他想改变两个列的位置,那么,这样的这两个列命名含义就有错误了.

最好的办法是确定哪个是主要的内容,哪一个是次要的.主要内容可以被命名为”maincotent”,次要的内容可以命名 为”secondarycontent”.这就可以解决交换列的问题,并提高了代码的可维护性.
(全文 …)

1、保持一贯性。
就像其它的任何事一样,值得一直保持一贯性。保持连贯性,而不是想到什么就给id和class命名什么。

CSS的级联样式有利于加深你的记忆,而且充分利用样式的继承去设置样式表。

首先声明通用的部分的样式,然后继续声明不通用的。这样当你需要的时候更容易的去覆盖一个特定的样式。因为样式更易于阅读和更具逻辑性,你 会发现编写CSS更迅速。

使用一种最是适合你的方式。
复位和覆盖
链接和类型
主要布局
二次布局结构
表单元素
杂项
提高编写CSS代码效率的10个习惯 | iwanna.cn 我想网
(全文 …)

作为一个网站设计/开发人员,你必须不断寻找方法来减少设计/开发过程中所花费的时间。这对于提高你的工作效率并最大化你的利润是非常重要的。下面 介绍的按功能分类的css工具可以有效地节省你设计网站的时间。

优 化/格式化类

  1. CSSTidycss Tidy是一个开源的css分 析和优化工具;
  2. CleanCSS - CleanCSS是一个基于CSS Tidy的强大的CSS优化和格式化工具。
  3. CSS Optimizer - Optimizer可以通过优化压缩CSS样式文件大小。
  4. CSS Analyzer – CSS Analyzer可以帮助你检查你的CSS样式是否符合W3C的认证。

(全文 …)

请不要低估这些小工具,他 们极其的方便并且能节省很多的时间和工作,下面就是这些在线工具的列表,挑几款来试试吧。

我还是比较喜欢Ajax LoadWeb 20 Badges Generator的,你们呢?

Favico

Favico

一个图标制作工具,很是方便。
(全文 …)

(层叠样式表)是一种简单的设计语言,能够将页面变漂亮这回事儿变的简单化。在HTML和XHTML中设定页面的样式,这是最常用的应用。但 也可以应用于 XML类的文档,包括SVG和XUL。他负责管理网页的设计和外观。使用CSS,你可以控制文字的颜色、字体、段落间距、分栏的数目大小布局、背景图片颜 色,以及其他很多种的效果。接下来才是要说的是学习并掌握CSS的20个绝佳站点。这里收集到的CSS站点能使你从初学者到高级人员。这些能协助你开发和 改进网站。恩,随便看看吧。
Csstutorial
Csstutorial
这个站点全部是关于CSS的。万一你不熟悉CSS:CSS是HTML的一种姐妹技术,可以设计你的页面。这些细节都在教程里面,不过现在我就可以说Css 可以让你页面看起来更好!
Visit Site
cssbasics
(全文 …)