归档文章 (2011-2017)
date
2011/01/01
本文是《CSS 那些事儿》阅读笔记第一篇（入门篇）。本篇主要是关于CSS基础，包括css的简写、选择符的使用、CSS样式的应用…
一、认识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 常用工具
IE插件
- IE Developer Toolbar：IE下的FireBug，html及CSS调试工具。
- SuperPreview for IE：IE兼容性调性工具
- msfast：IE下的网站性能检测工具
Firefox扩展
这个真的很多，不必介绍了，或者可以参考月光博客的文章《常用网站开发类Firefox扩展插件》
小补充：css usage：基于firebug的firefox扩展，查看页面CSS的使用情况。
chrome扩展
其他
- 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那些事儿》示例文件