CSS 那些事儿 on 七三的小站

《CSS那些事儿》应用篇

Tue, 04 Jan 2011 00:00:00 +0800

一、CSS滤镜

1. 文字与背景半透明

.list_box{
    background:#DCDCDC;
    filter:alpha(opacity=50); // IE 私有CSS滤镜
    opacity:0.5; // FF 私有CSS滤镜
｝

<div class="list_box">
	<div class="content">
		<ul><li>小志</li></ul>
	</div>
    <div class="bg"></div> // 仅背景半透明时使用
</div>

2. 仅背景半透明

.list_box{position:relative;｝
.list_box li{position:relative;z-index:2;}
.list_box .bg{position:absolute;top:0;left:0;width:200px;height:284px;background:#dcdcdc;filter:alpha(opacity=10);opacity:0.1;}

3. IE6显示PNG-24图片

主要是通过IE的PNG-24转换滤镜实现，PNG-24即24位色彩模式支持8位透明度。

div{
    background:#ff0000 url(png_24.png) no-repeat 0 0;
    _background:#ff0000 none;
   _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png_24.png',sizingMethod='crop')
}

sizingMethod的值：1.image（容器适应图片尺寸）、2.crop(裁剪图片适应容器)、3.（拉伸图片适应容器）

二、Tab选项卡

1. 方法一

这是早期通过iframe框架标签实现的选项卡模式。

<ul>
    <li><a href="#" target="open_url">标签一</a>
    <li><a href="#" target="open_url">标签二</a>
    <iframe scrolling="no" src="#" frameborder="0" name="open_url"></iframe>
</ul>

2. 方法二

这是主流的Tab选项卡实现模式，采取的是标题float浮动布局，选项卡区position绝对定位布局。

<div id="tab">
	<h3 class="up" onclick="go_to(1);">标题一
    <div class="block">文本一</div>
	<h3 onclick="go_to(2);">标题二
    <div>文本二</div>
</div>

#tab{position:relative;width:226px;}
#tab .up{background:#ccc}
#tab h3{float:left;width:114px;height:26px;background:#eee;margin:0 -1px 0 0;}
#tab div{display:none;position:absolute;top:26px;left:0;width:226px;border:1px solid #d4d3d3;border:0 1px 1px;}
#tab .block{display:block;padding-bottom:10px;}

<script type="text/javascript">
	var h=document.getElementById("tab").getElementsByTagName("h3");
	var d=document.getElementById("tab").getElementsByTagName("div");
	function go_to(ao){
		for(var i=0;i<h.length;i++){
			if(ao-1==i){
			h[i].className+=" up";
			d[i].className+=" block";
			}
			else {
			h[i].className=" ";
			d[i].className=" ";
			}
		}
	}
</script>

3. 方法三

该方法采取的是标题和选项卡区均float浮动布局，缺点是缺乏XHTML语义化。

<div id="tab">
    <h3 class="up" onclick="go_to(1);">标题一
    <h3 onclick="go_to(2);">标题二
    <div class="block">文本一</div>
    <div>文本二</div>
</div>

CSS基本不变，将内容区（#tab div）绝对定位改为浮动即可。

《CSS那些事儿》元素篇

Mon, 03 Jan 2011 00:00:00 +0800

一、网页文本修饰

1.1. 文字样式

font:font-style || font-variant || font-weight || font-size/line-height || font-family

font-style：

1）normal、2）italic:斜体、3）oblique:倾斜的字体

font-variant：

1）normal、2）small-caps:稍小的大写字母显示

font-weight：

1）normal、2）bold:等于700、3）bolder、lighter:更粗、更细

font-size：

一般用px或em为单位,默认值medium,即根据对象字体进行调整

line-height：

1）normal、2）百分比（基于字体高度尺寸）、3）浮点数+单位（无单位则为相对高度）

1.2. 常用字体族

serif（有装饰钩）：

1）Georgia、2）Times New Roman（默认）、3）Garamond

sans-serif（无装饰钩）：

1）verdana、2）Helvetica、3）Arial（默认）、4）"Trebuchet MS"

Monospace（等宽字体）：

1）courier（默认）、2）Monaco、3）"Andale Mono"

1.3. 段落样式

text-transform

1）capitalize：首字母大写、2）uppercase：全大写、3）lowercase ：全小写

text-indent

1）百分比、2）浮点数+单位（"2em"表示两个汉字）

letter-spacing/word-spacing（字符/单词间距）

1）normal、2）浮点数+单位

1.4. 特殊效果

:first-letter（首字下沉）

p:first-letter{float:left;font-weight:bold;font-size:2em} 
p{clear:both}
解析：左浮动已占据多行，加粗，设置大小，清除浮动以避免p高度受影响

overflow

visible（默认）
hidden（隐藏，配合"text-indent"可实现图片代替文字特效）
scrool（滚动条）
auto（自动滚动条）

1.5. 文字链接

:link（访问前样式）
:visited（访问后样式）
:hover（悬停样式）
active（单击未释放样式）
text-decoration:1）underline、2）overline、3）linethrough、4）none

二、图片的处理与美化

2.1. 常见图像格式

8位(bit)色深=256色，24位色深=1千6百万色

JPG格式

高压缩，较高质量，24位色深，有损压缩

GIF格式

高压缩，低质量，8位色深，无损压缩（超过256色变，则为有损压缩），支持1位透明度，适用于图标、单色插图、文本块。

PNG格式

支持8位和24位色彩模式，高压缩，高质量，无损压缩，载入1/64图片信息即可预览，1位或8位透明度

2.2. CSS背景属性

background:background-color || background-image || background-repeat || background-attachment || background-position}

background-attachment

scroll:背景图像是随对象内容滚动（默认值）
fixed:背景图像固定

background-position

关键词控制：top、center、bottom、left、right
精确控制：
- 先X轴后Y轴
- 只有一个值则Y轴为50%
- 百分比是以图像中心为基准，PX是以图片左上角为基准
- 不受padding影响

2.3. CSS图像拼合技术

CSS Sprite 常用来合并频繁使用的图形元素。即将一些小ico合并在一张图片中，然后使用background-position来显示相应图标。注意一般定位X、Y轴要取负值。

三、页面中的列表

3.1. 有序无序列表

list-style:list-style-image || list-style-position || list-style-type

list-style-image

none
url("") （none或url错误，则list-style-type代替）

list-style-position

outside
inside （列表项目标记放置于文本内）

list-style-type

disc（实心圆）
circle（空心圆）
squar（实心方块）
decimal（阿拉伯数字）
lower-roman（小写罗马数字）
upper-roman（大写罗马数字）
lower-alpha（小写英文字母）
upper-alpha（大写英文字母）
none

ul和ol边距问题

IE8、Firefox对应padding-left
IE6、IE7对应margin-left

3.2. 自定义列表

<dl>
	<dt>一级列表标题</dt>
	<dd>二级列表内容</dd> // dt后面可以跟随多个dd
	<dd>
		<dl> //多级列表不能直接嵌套dl，必须位于dd内
			<dt>二级列表标题</dt>
			<dd>二级列表标题</dd>
		</dl>
	</dd>
</dl>

3.3、列表模式导航

<div class="site_nav"> //将所有导航标签，包含于容器内
	<h1></h1> //添加导航标题，可用CSS隐藏
	<map id="nav"> //使用map标签，必须带ID属性，有利于SEO
		- 
	</map>
</div>

#nav ul,#nav li{padding:0;margin:0;list-style:none;}
.site_nav{width:100px;} //设置容器宽度
.site_nav h1{display:none} //隐藏标题
#nav li {height:22px} //不对宽度属性调整，使用默认值“auto”
#nav li a {display :block;height:100%;text-align:center;text-decoration:none;background-color:#333:color:#fff;} //1)块状化、2）不设置宽度，使用auto、3）继承父级高度、4）文本居中，无下划线
#nav li a:hover{background-color:#e8e8e8;color:#000}

3.4、二级菜单导航

HTML省略，仅列出关键css属性

ul{width:150px;}
ul li {position:relative;}
ul li ul {display:none;position:absolute;left:149px;top:0;}
ul li a{display:block;height:100%}
ul li:hover ul{display:block;}

四、表单美化

4.1 表单元素特性

复选框、单选按钮、文件浏览选择框、下拉列表框随系统主题和浏览器不同而改变，即便添加CSS后也是如此。

4.2 登录框制作

method（属性），值可以是get（附在URL结尾）
post（已单独消息发送）
action（动作），即提交表单时载入的URL地址。
label中for属性值userName可以激活ID等于userName的表单元素

/* 经过文字时，鼠标变为手型 */
label{cursor:pointer}
 /* 解决复选框玉文字对齐不一致*/
#keepLogin{vertical-align:middle;}

<form method="post" action="">
	<div><label for="userName">用户名：</label>
	<input type="text" id="userName" /></div>
	<div><input type="checkbox" id="keepLogin" />
	<label for="keepLogin">记住我的登录信息</label></div>
	<button type="submit" class="btn_login">登录</button>
</form>

4.3. 搜索框制作

给出html结构，css省略，注意.search_box相对定位，search_tips绝对定位即可。

<div class="search_box">
	## 站内搜索
	<form method="post" action="">
		<input type="text" value="" />
		<button type="submit">搜索</button>
		<div class="search_tips">
			### 搜索提示
			
				- <a href="#">文字文字文字</a>
				- <a href="#">文字文字文字</a>
			
		</div>
	</form>
</div>

4.4 反馈表单制作

1）fieldset:表单域、2）legend:表单域标题、3）input(type=“file”):文件上传、4）textarea:(文本域)

<div class="feedback">
	## 反馈表单
	<form method="post" action="">
		<fieldset class="base_info">
			<legend>用户信息</legend>
			<div><label for="userName">用户名：</label>
			<input type="text" id="userName" /></div>
		</fieldset>
		<fieldset class="feedback_content">
			<legend>反馈内容</legend>
			<div><label for="up_file">相关图片：</label>
			<input type="file" id="up_file" /><div>
			<div><label for="msg">内容：</label>
			<textarea id="msg"></textarea><div>
		</fieldset>
		<button type="submit">提交</button><button type="reset">重置</button>
	</form>
</div>

五、表格的世界

5.1. 正确的表格的格式

table:定义表格
caption:表格的标题，必须紧跟table后
thead:表格的表头
tbody:表格的主体，可多个tbody，以便分组
tfoot:表格的页脚
tr:定义表格行
th:表格内表头单元格
td:表格内单元格
colgroup:表格列的分组，用来对单元格宽度调整。

colgroup一般用来定义宽度，颜色无效，但可以通过相邻或子选择符的方式来定义。th颜色需单独定义。

table{width:300px;border:1px solid #000;}
caption{text-align:left;}
th{color:#f4f4f4;background-color:#999;}
td{text-align:center;background-color:#e8e8e8;}
tfoot td{text-align:right;background-color:#fff;}
colgroup{width:100px;}
tr>td{color:red;}
tr>td+td{color:green;}

<table>
	<caption>表头信息</caption>
	<colgroup span="1"></colgroup>
	<thead>
		<tr><th>表格标题</th><th>表格标题</th></tr>
	</thead>
	<tbody>
		<tr><td>表格内单元格</td><td>表格内单元格</td></tr>
		<tr><td>表格内单元格</td><td>表格内单元格</td></tr>
	</tbody>
	<tfoot>
		<tr><td colspan="2">表格的页脚</td></tr>
	</tfoot>
</table>

5.2. 细线表格

应用border-collapse属性合并单元格之间的边即可。默认值separate独立不合并，值collapse为合并。

border-collapse:collapse;
th,td{border:1px solid #000;};

5.3. 隔行换色表格

1）相邻选择符法、2）为每个tr标签加class法、3）固定单元格高度，用图片代替background-color法

5.4. 日历表制作

HTML代码如下，css省略，主要colgroup下的col标签应用，以及相邻选择符的应用。

<table>
	<caption>今天是2010年9月26日</caption>
	<colgroup span="7">
		<col span="1" class="day_off" />
                <col span="5"/>
                <col span="1" class="day_off" />
	</colgroup>
</table>

《CSS那些事儿》布局篇

Sun, 02 Jan 2011 00:00:00 +0800

一、文档类型

DOCTYPE 即 DTD 声明，用于指定页面所使用XHTML或HTML的版本。

1.1 STRICT（严格型）

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1.2 TRANSITION（过渡类型）

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

1.3 FRAMESET(框架类型）

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/Xhtml1/DTD/xhtml1-frameset.dtd">

二、盒模型

页面任何元素都是以矩形方式存在，如DIV标签。
如果元素加上背景，那么该背景也将出现在“padding”中。
使用“margin”可以将相邻元素推开，反之“-margin”可以吸附到身边。

2.1 盒模型的计算（标准模式）

IE存在两种渲染：Quirks(怪异模式）、Standard（标准模式）
触发怪异模式条件之一是DTD错误。
怪异模式会根据内容自适应高度。

盒模型实际宽：

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right

盒模型实际高：

margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom

2.2 盒模型的计算（怪异模式）

理想状态

border和padding计入了width值，故width实际占据了
margin-left + width + margin-right

其他状态

宽：标准值 + 20px 高：标准值 + 38px

三、设计原则

注意样式重用性（使用外联样式表、重复内容用Class选择符）
注意浮动和清除浮动
页面布局中的定位方式（绝对定位布局要慎重）
避免过度使用ID选择符（ID在一个页面只出现一次）
避免选择符使用“字母+数字”命名
勿盲目使用最求CSS布局（JS还是要用滴）

四、两列定宽结构

<div id="header">头部信息</div>
<div id="container">
    <div class="mainBox">
        主要内容区域
    </div>
    <div class="sideBox">侧边栏</div>
</div>
<div id="footer">底部信息</div>

4.1. 两列定宽、定高

方法：宽高确定，mainBox、SideBox 左右浮动。
缺点：内容过多超出高度后会溢出。

4.2. 两列定宽、自适应高度

方法：去掉 container、mainBox、SideBox 高度，mainBox、SideBox 左右浮动、footer 清除左右浮动（必须）。
注意：footer 清除浮动不能直接使用 “clear:both”，否则 footer 会紧挨 container。只能对 container 使用 overflow 伪类 :after 来清除浮动。

4.3. 负边距应用

如果 mainBox、SideBox 宽度之和大于 container 宽度，将导致错位。
为此可对 SideBox 应用负边距 “margin-left:-XX”，或对 mainBox 应用 margin-right:-XX

原理：外边距margin的作用是增加容器与容器的间距，负值是减少间距。

五、两列宽度自适应结构

方法：将mainBox、SideBox宽度单位px改为百分比。（注意该宽度并不是盒模型的总宽度，而是盒模型内容区域width的宽度。）
缺点：IE7及以下版本出现错位。

解决方法：

#footer{width:100%}
#footer{clear:both}

六、单列定宽、单列自适应结构

方法：mainBox 宽 70%、SideBox 宽 200px
缺点：缩小窗口会错位、用负边距解决，则 mainBox 与 SideBox 内容会重叠。

解决方法：浮动及清除浮动失效，无法撑开父级元素高度，可用JS解决。

#container { position:relative; } 
.mainBox { width:auto; margin-right:200px; } 
.sideBox { position:absolute; top:0px; right:0px; width:200px; margin-left:-200px; }

七、两列等高

7.1 背景模拟

方法：背景Y轴平铺，即Repeat-y 缺点：宽度必须确定、经常要修改图片。

7.2 负边距实现

#container{ 
    overflow:hidden; //完全清除浮动，以自适应高度 
} 
.mainBox, .sideBox{ 
    padding-bottom:9999px; 
    margin-bottom:-9999px; 
} 
#container:after{ 
    display;block; 
    visibility:hidden; 
    font-size:0; 
    line-height:0; 
    clear:both; 
    content:""; //清除左右浮动 
}

7.3 边框模拟

缺点：不能使用背景图片、必须保证一边高度不能大于另一边（mainBox ）

#container{ 
    position:relative; 
} 
.mainBox { 
    float:left; 
    width:680px; 
    border-right:280px solid #AAAAAA; 
} 
.sideBox { 
    position:absolute; top:0; right:0; 
    width:280px; 
} 
#container:after { 
    display:block; 
    visibility:hidden; 
    font-size:0; 
    line-height:0; 
    clear:both; 
    content:""; 
} /* 清除内容区域的左右浮动 */

7.4 JavaScript脚本

<script type="text/javascript">
    mh = document.getElementById('mainBox'); 
    sh = document.getElementById('sideBox'); 
    if (mh.clientHeight < sh.clientHeight) { 
        mh.style.height = sh.clientHeight + "px"; 
    } else { 
        sh.style.height = mh.clientHeight + "px"; 
    }
</script>

八、两列定宽，中间自适应结构

8.1 width默认值与float关系

如果width=auto（默认值），则width=浏览器窗口所能显示的最大值。
如果width=auto，且有float属性，则width=随盒模型中内容而变化。

8.2 HTML结构

<div class="header">头部信息</div>
<div class="container">
    <div class="mainBox">
        <div class="content">主要内容区域</div>
    </div>
    <div class="subMainBox">次内容区域</div>
    <div class="sideBox">侧边栏</div>
</div>
<div class="footer">底部信息</div>

8.3 CSS样式

思路：mainBox 左浮动，且宽度100%占据一行；
其子元素 content 宽度为 auto ，且用 margin(不用padding) 为其左右留下空白；
subMainbox、sideBox 利用负边距原理被吸到 content 的左右空白区域，注意的是 subMainbox 负边距为"-100%“而非”-300px"…

.mianBox{ float:left; width:100%; background:#FFF; } 
.mianBox .content{ margin:0 210px 0 310px; background:#000; } 
subMainBox{ float:left; width:300px; margin-left:-100%; background:#666; } 
.sideBox{ float:left; width:200px; margin-left:-200px; background:#666; }

九、左侧定宽，右侧及中间自适应结构

这个很好理解，沿用上面代码，并修改以下部分。

.mianBox .content{ margin:0 41% 0 310px; background:#000; } 
.sideBox{ float:left; width:40%; margin-left:-40%; background:#666; }

十、三列宽度自适应结构

.mianBox .content{ margin:0 21% 0 41%; background:#000; } 
.subMainBox{ float:left; width:40%; margin-left:-100%; background:#666; } 
.sideBox{ float:left; width:20%; margin-left:-20%; background:#666; }

《CSS 那些事儿》入门篇

Sat, 01 Jan 2011 00:00:00 +0800

一、认识CSS

1.1 CSS的基本结构

选择符{属性:值}，其中{}中的内容为“声明”。实例：Body{color:#FFF}

1.2 CSS中的注释

单行注释或多行注释。实例：/* 注释 */

1.3 CSS的简写

颜色的简写

“#FFFFFF”可简写成“#FFF”

单位值的省略

“0px"可简写成"0”

内外边距的简写

上右下左
上下，左右
上，左右，下
上，右，下，左

边框的简写：

语法：border:border-width || border-style || border-color 
实例：p{border:1px solid #000}

背景的简写：

语法：background:background-color || background-image || background-repeat || background-attachment || background-position} 
实例：p{background:#fff url(image/logo.jpg) no-repeat right bottom}

字体的简写：

语法：font:font-style || font-variant || font-weight || font-size/line-height || font-family 
实例：p{font:italic smll-caps bold 12px/150% "宋体",sans-serif}

列表的简写：

语法：list-style:list-style-image || list-style-position || list-style-type 
实例：li {listy-style:url(image.gif) inside square}

二、掌握CSS选择符

2.1 CSS选择符种类

通配选择符 (*)
类选择符 (.)
包含选择符 (空格)
子选择符 (>)
相邻选择符 (+)
ID选择符 (#)
属性选择符
伪类、伪对象

2.2 属性选择符

（注：E:HTML标签，attr:属性，value:属性值）

E[attr] （带有attr属性的所有标签）
E[attr=“value”] （带有attr属性且值为value的标签）
E[attr~=“value”]（带有attr属性且值具有空格符号的标签）
E[attr|=“value”]（带有attr属性且必须以value值及使用(-)符号分隔的标签）

2.3 伪类、伪对象

语法：选择符:伪类{属性:属性值} 
实例：a:link{color:green} || a:visited{color:green} || a:hover{color:green}

语法：选择符:伪对象{属性:属性值} 
实例：p:before{content:"内容"} || p:after{content:"内容"}

2.4 选择符权重

!important （很高）
style属性（1000）
ID选择符 (100)
类、属性（10）
标签、伪类、伪对象（1）
其他 (0)

三、导入CSS样式

3.1 行间样式

3.2 外联样式表（推荐）

<link rel="stylesheet" href="style.css" type="text/css" media="screen">

3.3. 导入样式表

Html中导入外部CSS文件

<style type="text/css">@import url("style.css")</style>

在CSS文件中再次导入CSS文件

注：@import 写在样式表最前面，但解析却是最后的 
@import url ("style2.css")

四、开发环境

4.1 常用浏览器

IE系列（Trident 内核）
Mozilla Firefox（Gecko 内核）
Opera（Presto 内核）
Safari（Webkit 内核）
Chrome（Webkit 内核）
遨游、QQ、搜狗（Webkit+Trident 双内核）
ieTester：IE多版本浏览器，支持插件与滤镜

4.2 CSS编辑器

Dreamweaver：各方面体验都不错，缺点是体积大、速度慢。
Editplus 3：推荐，小巧速度快，占用资源少，定制性强。

Editplus 简单配置

解压，运行根目录下的“initialization.vbe”，根据提示完成安装。
设置语法高亮（工具-首选项-设置及语法-语法文件）注：语法文件扩展名为".stx"，存放在公共配置文件夹内，建议不要修改。
设置自动完成（工具-首选项-设置语法-自动完成）注：自动完成文件扩展名".acp"，存放在公共配置文件夹，该文件定制得好，甚至可以与DW的代码提示媲美。
打开代码折叠（视图-代码折叠-使用代码折叠）
设置默认浏览器及用户工具组（建议将FF设为默认浏览器，可以在用户工具组增加参考手册）
设置代码剪辑、字体、默认编码等等

4.3 常用工具

如果去看那些比如：《120个 Web 开发工具》（上、下）、《130 个 Web 设计工具》（上、下）这些文章的话，肯定头晕脑胀，实际经常用的工具并不多。

IE插件

IE Developer Toolbar：IE下的FireBug，html及CSS调试工具。
SuperPreview for IE：IE兼容性调性工具
msfast：IE下的网站性能检测工具

Firefox扩展

这个真的很多，不必介绍了，或者可以参考月光博客的文章《常用网站开发类Firefox扩展插件》

小补充：css usage：基于firebug的firefox扩展，查看页面CSS的使用情况。

chrome扩展

这个现在也很多了，包括Firebug、Web Developer都有了，更多web开发扩展，浏览此页。

其他

Opera Developer Tools：Opera下的DOM,CSS查看工具,类似FireBug.
webkit：Safari下的开发调试工具
Httpwatch：数据分析，头消息接受/发送的查看，POST数据查看等等。
CSS Sprites：CSS Sprites 样式生成工具（基于AIR）
ColorPicker：屏幕取色工具（win32平台）
Pixel Measurer：超好用的屏幕尺
CSS压缩工具：CSSTidy（在线版，推荐）、TB Compressor（Windows平台、基于JAVA）、mergeCSS（基于AIR）
……

五、相关下载

《CSS那些事儿》示例文件