Macji Pro » css

css计数器

October 3, 2008 - by Macji - HTML/CSS/JS/PHP - css, 计数器

这是css2的东西，但我才知道，我。。。其实是在看阅读器里Opera Developer Community的一个文章，原来这样也行，发现其实是css2，马上去看了嗷嗷书的目录，他也是这么些的。虽然不怎么用得到，但还是记录一下。

当我们设计一个书的目录的时候，你是否会一个一个写上编号呢？其实可以利用css计数器。比如这个目录应该怎么写呢?

Web标准不是神话
理解Web标准
Web标准是什么
错误的思维
无障碍网页倡议（WAI）
量化Web标准
大部分通过W3C校验的网站只是伪标准
Web标准要求一览表
如果量化
为什么选择Web标准
CSS为什么着火
CSS 的作用
CSS 布局 VS. 表格布局
我能否学好Web标准
我需要具备什么素质和条件才能学好Web标准
学习的重点与难点
欲善其事，先利其器
软件的选择
调试环境

这些编号都是css写上去的，但唯有IE不支持。。 - -


ol{
	counter-reset: ordered; /* 指定一个计数器，名字叫ordered */
	list-style:none; /* 去掉默认 */
}
ol li:before {
	counter-increment: ordered; /* 使用已命名的计数器(ordered)  如果是 ordered 2 那累加2，可以是负数*/
	content:"第"counters(ordered,"")"章 "; /* 在li之前输出计数器(ordered) */
}
ol li li:before {
	counter-increment: ordered;
	content: counters(ordered,".") " "; /* 在li里的li之前输出计数器(ordered)*/
}

地址：http://labs.aoao.org.cn/book/web-standards-design/catalog.html

举一反三：http://dev.opera.com/articles/view/automatic-numbering-with-css-counters/。

3 条评论»

打造纯CSS的无侵入的卡盘（幻灯片）

October 1, 2008 - by Macji - HTML/CSS/JS/PHP - css, unobtrusive, 幻灯片

卡盘，也就是幻灯片，它应该是自动播放，但目前css是无法做到自动播放（可能会让你失望），所以它不应该叫幻灯片，但我扔这么称呼它为幻灯片。如果你认为可以用脚本来实现，嗯，地球人都知道，显然违背了我们的主题，纯css的，无侵入的。似乎我标题党了，但请你耐下性子来听我说。

今天无意在经典论坛看到一个帖子，纯CSS的图片展示效果，它是利用锚点来实现，创意非常好，但马上令我兴奋，因为该效果有缺点。

Opera无效

无法记录状态

没有hover效果

这些正是我想说的，我想补充的。

首先，我们让它来兼容所有A级浏览器。其实原理很简单，既然使用锚点，我们应该记得css3有个伪类:target（非IE内核浏览器都支持），让它来控制，不就更好？

<style>
.macji ul{
    width:250px;
    height:260px;
    overflow:hidden;
}
#b:target{
    margin:-260px 0 0;
}
#c:target{
    margin:-520px 0 0;
}
</style>
<div class="macji">
    <ul>
        <li id="a">
            <img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" />
        </li>
        <li id="b">
            <img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" />
        </li>
        <li id="c">
            <img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" />
        </li>
    </ul>
    <ol>
        <li><a href="#a">a</a></li>
        <li><a href="#b">b</a></li>
        <li><a href="#c">c</a></li>
    </ol>
</div>

测试地址

问题2，实现记录状态，那我们同样可以用伪类:target来实现，IE系列浏览器不支持。

<style>
/*  省略一些css，下面这行是最关键的  */
a.item:hover, :target a.item{
	background:#f60;
}
</style>
<div class="macji">
    <ul>
        <li id="a">
            <a href="#a" class="item">1</a>
            <a href="#"><img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" /></a>
        </li>
	<li id="b">
            <a href="#b" class="item">2</a>
            <a href="#"><img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" />
        </li>
        <li id="c">
            <a href="#c" class="item">3</a>
            <a href="#"><img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" /></a>
        </li>
    </ul>
</div>

测试地址

最后一个问题，hover效果，这可不是简单的:hover就可以实现，我们不能在li上给hover（这样当鼠标经过li就hover了），我们只能在数字上hover（<a href="#a" class="item">1</a>）然后来影响它对于的图片，貌似不可能纯CSS实现，但确实可以实现，用“ + ”来实现。由于用到:target和“+”，所以只有Firefox、Opera支持。-__-

<style>
.macji{
	position:relative;
}
.macji ul{
	width:250px;
	height:260px;
	overflow:hidden;
}
ul li{
	height:260px;
}
.macji a{
	position:absolute;
	left:0;
	top:0;
	z-index:2;
}
a.item{
	z-index:10!important;
	left:10px;
	top:230px;
	display:block;
	width:20px;
	height:20px;
	border:solid 1px #777;
	line-height:20px;
	text-align:center;
	color:#fff;
	background:#aaa;
}

#b a.item{
	left:31px;
}
#c a.item{
	left:51px;
}
a.item:hover,:target a.item{
	background:#f60;
}
#a:target a.pic,#b:target a.pic,#c:target a.pic{
	z-index:3;
}
/* 原理是用绝对定位z-index来显示，另 “ + ” 只对节点的下一个兄弟节点有效 */
a.item:hover + a.pic{
	z-index:9!important;
}
/* for ie */
a.pic{
	* position:static;
}
</style>
<div class="macji">
    <ul>
        <li id="a">
            <a href="#a" class="item">1</a>
            <a href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" />
        </li>
        <li id="b">
            <a href="#b" class="item">2</a>
            <a href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" /></a>
        </li>
        <li id="c">
            <a href="#c" class="item">3</a>
            <a href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" /></a>
        </li>
    </ul>
</div>

最终演示，代码实现是很简单，关键是是否联想到原理。举一反三，将会得到更多你想要的结果。不知不觉已是国庆节了，祝大家节日快乐！

扩展阅读：css3伪类:target

3 条评论»

我比较喜欢的reset css

September 30, 2008 - by Macji - HTML/CSS/JS/PHP - css, reset

各浏览器的默认样式都并不太一致，所以我们得建立一个reset.css，使各浏览器对各元素的默认属性都一致。reset css这大家都见得多了，对常用的莫过

*{margin:0;padding:0}

YUI的reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img {
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym {
    border:0;
}

这些reset没有最佳的，只有最适合自己项目的。

动手来做我喜欢的reset css，而且也简单的。首先重置你的margin和pading


html, body, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,  
ol, li, dl, dt, dd, form, fieldset, input, th, td, a{  
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    list-style: none;
}

重置标题字体大小为100%


h1,h2,h3,h4,h5,h6{
    font-size:100%;
}

设置文字大小100%的基数。


body{
    line-height: 1;  
    font-size: 88%;
}

一般浏览器默认文字大小是1em，大约是16px，那body文字大小88%后，大约14px，所以h系列的大小也在14px左右。如果想给文字设置为12px，那么p{font-size:90%}。
最终重置css


html{/* for firefox */
    overflow:-moz-scrollbars-vertical;
    overflow-x:auto;
}
html, body, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,  
ol, li, dl, dt, dd, form, fieldset, input, th, td, a{  
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    list-style: none;
}
body{
    line-height: 1;
    font-size: 88%;
}
h1,h2,h3,h4,h5,h6{
    font-size:100%;
}

我这里没有设置字体，具体参照 web 安全字体吧。上面这些元素是最常用的，但现在用的比较多的有sup、sub、cite等，也可以考虑重置为无表现样式。

扩展阅读：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

4 条评论»

Google Chrome的一些

September 5, 2008 - by Macji - HTML/CSS/JS/PHP, 前端开发工具 - css, hack, browser

Google浏览器一出，满世间都在议论它，包括我的阅读器，全在说它。它是一个非常优秀的浏览器，尤其是多线程，让我们打开多个网页不再受浏览器的限制，更多好处请Google Chrome 漫画中文版

那到底为什么叫Chrome？其实我也不知道，我只听说在做mozilla插件（firefox）中，有个叫 chrome://的。金山词霸上说:

CHROME（铬合金）滤镜使用映射图来生成变化多端的，奇妙醒目的真实金属效果，如黄金效果、银金属效果、铜金属效果及其它各种金属效果，所谓映射图就是解压缩的TIFF ...

显然这不是我们要的答案。好在独行给出解释：

最早是用在计算机游戏设计上面，人们会说游戏里一些人物造型很“炫”，就是好看不中用，就管这种“炫”的设计叫Chrome，它原意是铬，可能因为铬都闪闪发光？后来就被科普成代表GUI Graphic User Interface了，都可以叫Chrome，再后来，用在浏览器设计上面，就是说浏览器视窗（window）周边的框，也包括上面的导航条，都叫chrome，象一个金属的框。

用chrome打开任何一个网站，然后再其网站搜索后，再在地址栏键入该网站域名按TAB，将自动搜索该网站内容，貌似chrome很强悍，但在它的地址栏里输入" %: "，却立马崩溃，不知道为什么。另外它自带的几个开发者工具，不怎么好用。

大家都知道它是基于webkit的。有人已经写了它所支持的css选择器。http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/，该网站也列出了chrome的css hack，当然能用在Safari。hedgerwow以前也列过一个Safari hack，当然chrome也能用。。挖挖。绕啊。


@media screen and (-webkit-min-device-pixel-ratio:0){
	.your_own_selector{
		color:red;
	}
}

1 条评论»

20个CSS学习网站

August 31, 2008 - by Macji - HTML/CSS/JS/PHP - css, resource

CSS相对其他语言来说，门槛比较低，比较容易学习，但要想精通CSS可不是那么容易，你必须完全理解CSS。在你精通CSS过程中，这20个优秀的CSS站点来帮你。

A List Apart CSS Topics
大牛们的文章都发表在这里
CSS Help Pile
N多的CSS资源
CSS Basics
CSS教程，猛击这里下载PDF
Holy CSS Zeldman!
收集了N多的资源，值得收藏
Eric Meyer: CSS
也是很多css资源和参考
456 Berea Street – CSS category
不得不看的CSS技巧
Position Is Everything
讨论的浏览器已知的bug和跨浏览器的CSS方法
HTML Dog CSS Tutorials
专业的CSS教学，从初级到中级，再到高级
Learn CSS Positioning in Ten Steps
10步学会CSS定位属性
Andy Budd CSS/Web Standards Links
这里有更多的关于CSS的资源
W3CSchools CSS Tutorial
这个不用说了
css Zen Garden
css禅意花园
CSS at MaxDesign
提供整套CSS教程
CSSeasy.com
他们的口号是："learn CSS the modern way"
CSS-Discuss
这里有一群CSS爱好者
Web Design from Scratch: CSS
这里也有入门到精通的教程
CSS-Tricks
专门讨论CSS，订阅它吧
CSS on Delicious
看看美味书签的tag
SitePoint CSS Reference
很多css话题
CSSDog
一系列的教程

如果还不过瘾，那么查看我的订阅

3 条评论»