CSS+HTML | 紫枫印象

标签 ‘CSS+HTML’

CSS Overflow属性详解

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
所有对象的默认值是 visible ，除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。

overflow属性有四个值：visible (默认), hidden, scroll, 和auto。同样有两个overflow的姐妹属性 overflow-y 和overflow-x，它们很少被采用。

Visible

如果你不设置overflow属性，则默认的overflow属性值就是visible。所以一般而言，并没有什么理由特别的设定overflow 的属性为visible除非你想覆盖它在其它地方被设定的值。

这里需要记住的重要的事情是，尽管盒子外面的内容是可见的，内容并不会影响页面的工作流。比如：

一般来说，你至少不用为里面的内容为文字的盒子设置固定的高度，这样就不会遇到这种情况了。

Hidden

默认值visible的相反的值就是hidden。它会将所有超出盒子的所有内容都给隐藏掉。

这对应付使用动态的内容，而且可能会由于内容溢出而引起一些布局上的问题的确很有用。尽管如此，请记住用此方法隐藏的内容将彻底的看不到(除非去查看源代码)。比如有的用户设置他们的浏览器的默认字体比你预期的要大些，你会将一些文字推到盒子的外面然后完全的隐藏之…

2010.03.07 / no responses / 分类: CSS+HTML
使用CSS为图片添加的五种特殊效果

1、阴影效果
通过使用带有一些padding之的背景图来添加阴影效果。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/dropshadow.htm
HTML：
1
<img class=”shadow” src=”sample.jpg” alt=”" />
CSS：
1 2 3 4
img.shadow { background: url(shadow-1000×1000.gif) no-repeat right bottom; padding: 5px 10px 10px 5px; }
2、双边框效果
这应该是目前最常见的技巧，我们通过以下方式创建说边框。
演示：
http://www.sohtanaka.com/web-design/examples/drop-shadow/doubleborder.htm

HTML：
1
<img class="double-border" src="sample.jpg" alt="" />
CSS：
1 2 3 4 5
img.double-border { border: 5px solid #ddd; padding: 5px; /*Inner border size*/ background: #fff; /*Inner border color*/ }
2010.03.06 / no responses / 分类: CSS+HTML
晒一下CSS Sprite(雪碧)

今天在网上看了一篇关于css sprite的文章，最近的项目，也一直在用Sprite 雪碧，制作中需要精确的定位。下面收集了一些牛人们的雪碧，晒给大家看看：

先晒下我最近项目中的雪碧↓

考虑本博的图片限制，图片进行了处理，还请大家谅解!

2009.11.09 / no responses / 分类: CSS+HTML
打造自己的reset.css

0.引言
每每有新项目，第一步就是应当使用一个reset.css来重置样式。滥用不如不用，直接拿个现成的reset.css过来将导致后期各种离奇bug的发生。所以最好还是自己写一个reset.css，并且要明白每一条 reset都是用来做什么的。reset.css本意就是重置样式，我始终建议把.clearfix放入layout.css,而把h1、h2之类的定义放进typography.css。具体如何规划网站CSS结构，不在文本讨论之列，可以参考Smashing Magazine上的文章，国内有差强人意的中文译版。注意，本文把reset分成了两个部分，一个是纯reset.css，可以用于任何项目。另一个是用于特定项目的“reset”，自定义修改的内容，这些内容可以放在layout.css、typography.css之类的文件中，他们共同导入到一个base.css形成一个项目的基础样式。本文就是来介绍如何写一个合适所有项目的通用的reset.css，以及介绍在设置玩reset.css之后需要针对不同项目要首先要设置的内容。

1.基础
牛顿是站在巨人伽利略的肩膀上的，我们也可以这么做。首先我们要选定一个前进的基础。
请永远不要使用

* { margin: 0; padding: 0; }

这问题太多了，在此不多加表述。

2009.10.25 / no responses / 分类: CSS+HTML
CSS代码优化，受益无穷

写在前面：
CSS代码优化是指将多行的CSS属性声明化成一行，简洁代码。CSS优化的最大好处就是能够显著减少CSS文件的大小，其实还有很多其他益处。臃肿而杂乱的CSS样式表会使你遇到问题是难以调试。尤其是当一个团队在进行设计的时候，你的臃肿的CSS代码会使你的团队其他成员做很多无用功，甚至会降低工作效率。
今天，为大家整理了一些常用css代码简写方法，一方面让你的css代码看起来整洁，另一方面减小css代码的臃肿度，提高css样式的读取速度。

1.属性为0

书写原则是如果CSS属性值为0，那么你不必为其添加单位(如:px/em)，你可能会这样写:

padding: 10px 5px 0px 0px;

优化为:

padding: 10px 5px 0 0;

2.背景(background)

2009.10.25 / no responses / 分类: CSS+HTML