导航
导航
文章目录
  1. 一、认识CSS
    1. 1.1 CSS的基本结构
    2. 1.2 CSS中的注释
    3. 1.3 CSS的简写
  2. 二、掌握CSS选择符
    1. 2.1 CSS选择符种类
    2. 2.2 属性选择符
    3. 2.3 伪类、伪对象
    4. 2.4 选择符权重
  3. 三、导入CSS样式
    1. 3.1 行间样式
    2. 3.2 外联样式表(推荐)
    3. 3.3. 导入样式表
  4. 四、开发环境
    1. 4.1 常用浏览器
    2. 4.2 CSS编辑器
    3. 4.3 常用工具
  5. 五、相关下载

《CSS 那些事儿》入门篇

本文是《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”,根据提示完成安装。
  2. 设置语法高亮 (工具-首选项-设置及语法-语法文件)注:语法文件扩展名为”.stx”,存放在公共配置文件夹内,建议不要修改。
  3. 设置自动完成 (工具-首选项-设置语法-自动完成) 注:自动完成文件扩展名”.acp”,存放在公共配置文件夹,该文件定制得好,甚至可以与DW的代码提示媲美。
  4. 打开代码折叠 (视图-代码折叠-使用代码折叠)
  5. 设置默认浏览器及用户工具组 (建议将FF设为默认浏览器,可以在用户工具组增加参考手册)
  6. 设置代码剪辑、字体、默认编码等等

4.3 常用工具

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

IE插件

  1. IE Developer Toolbar:IE下的FireBug,html及CSS调试工具。
  2. SuperPreview for IE:IE兼容性调性工具
  3. msfast:IE下的网站性能检测工具

Firefox扩展

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

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

chrome扩展

这个现在也很多了,包括FirebugWeb Developer都有了,更多web开发扩展,浏览此页

其他

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

五、相关下载

《CSS那些事儿》示例文件

支持一下
扫一扫,支持一下