CSS那些事笔记（一入门）

CSS作用

  1. 修饰页面，避免不必要的HTML元素
  2. 更有效地控制页面结构、布局
  3. 提高开发和维护效率

CSS基本结构

selector {property:value;}

CSS中的注释

/*版本版权*/

body
{
    color:#FF0000;
    ...
}
/*将<body></body>的样式定义为...*/

CSS中的简写

颜色：#FFFFFF，#FFF，RGB(255,255,255)，RGB(100%,100%,100%)，black

单位：数值为0时单位可省略

内外补丁：value1，所有边都一样；value1，value2，上下1，左右2；value1，value2，value3，上1左右2下3；value1，value2，value3，value4，上右下左

边框：width，style，color (boder:1px solid,#FFFF00)

CSS中的选择器

* 通配符

.class 类选择符

a b 包含选择符（派生选择符，后代选择符），包含在a选择符中的b选择符

a > b 子选择符，a儿子节点中的b选择符

a + b 相邻选择符，同父元素下，与a之后的b选择符

E[attr],E[attr="value"],E[attr~="value"],E[attr|="value"]，属性选择符，分别指：具有attr属性，attr属性指为value，attr属性值为被空格隔开且存在value，attr属性值以value开始后面用横字符隔开

ID选择符

CSS中的伪类

:link,:visited,:hover,:avtive,

CSS中的伪对象

:before,:after,

CSS中的覆盖、继承、优先级别

优先级别由高至低：

  1. 标有!important关键字声明的属性
  2. HTML中的样式属性
  3. 作者编辑的样式文件
  4. 用户设置的样式
  5. 浏览器的默认样式
优先积分：
  • 标签选择符、伪类：1分
  • 类选择符、属性选择符：10分
  • Id：100分
  • Style：1000分
  • 其他，如通配符：0分
  • !important 其他的均被覆盖
注：本读书笔记应用《CSS那些事——掌握网页样式与CSS布局核心技术》
posted @ 2011-07-28 23:22  acjialiren  阅读(495)  评论(1)  编辑  收藏  举报