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

4.3 常用工具

如果去看那些比如：《120个 Web 开发工具 》（上、下）、《130 个 Web 设计工具》（上、下）这些文章的话，肯定头晕脑胀，实际经常用的工具并不多。
IE插件
  1. IE Developer Toolbar：IE下的FireBug，html及CSS调试工具。
  1. SuperPreview for IE：IE兼容性调性工具
  1. msfast：IE下的网站性能检测工具
Firefox扩展
这个真的很多，不必介绍了，或者可以参考月光博客的文章《常用网站开发类Firefox扩展插件》
小补充：css usage：基于firebug的firefox扩展，查看页面CSS的使用情况。
chrome扩展
这个现在也很多了，包括Firebug、Web Developer都有了，更多web开发扩展，浏览此页。
其他
  1. Opera Developer Tools：Opera下的DOM,CSS查看工具,类似FireBug.
  1. webkit：Safari下的开发调试工具
  1. Httpwatch：数据分析，头消息接受/发送的查看，POST数据查看等等。
  1. CSS Sprites：CSS Sprites 样式生成工具（基于AIR）
  1. ColorPicker：屏幕取色工具（win32平台）
  1. Pixel Measurer：超好用的屏幕尺
  1. CSS压缩工具：CSSTidy（在线版，推荐）、TB Compressor（Windows平台、基于JAVA）、mergeCSS（基于AIR）
  1. ……

五、相关下载

《CSS那些事儿》示例文件
If you have any questions, please contact me.