归档文章 (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扩展
这个现在也很多了,包括FirebugWeb 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.