学习HTML/CSS

新兵训练营 · 2013.4

Kejun

内容

必备知识
- 概述
- CSS2.1 盒模型
- CSS2.1 定位原理
- CSS的层叠和优先级
- 标签分类和嵌套规则
- 常见问题
练习题

概述

HyperText Markup Language - 标记(标记什么)
Cascading Style Sheets - 层叠(多层、叠加)、样式(包括什么)
标准集合(W3C、WHATWG)。一堆标签＋一堆规则
弱逻辑
语法简单、强调语义、强调"三观"
内容、结构、样式分离
渐进增强
优雅退化

文档结构

认识CSS

回顾历史，CSS1于1996.12.17发正式版，它是为辅助HTML的展现效果而生的。

1998.5.12，CSS2发正式版。随后发修订版CSS2.1，纠正了CSS2中的一些错误。注意从CSS2起，CSS的作用就不是辅助展现了，变为全全负责展现。

Cascading Style Sheets - 层叠(多层、叠加)、样式(包括什么)

http://www.w3.org/TR/CSS2/

基本语法 *
选择器 *
属性值、层叠、继承 *
Box model *
Visual formatting model *
显示控制(visual effects)
文本和字体
颜色和背景
生成内容
媒体类型

重新认识CSS语法

.mod

{
  margin-bottom:30px;
  color:#666
}

一条rule: 选择器 { 属性名: 属性值; } (声明体)
选择器:
1. ID选择器 #xxx
2. 类选择器 .xxx
3. 标签选择器 div
4. 属性选择器 [name], [name="xxx"], [name~='xxx'], ...
5. 后继(Descendant)选择器 #xxx .xxx
6. 子选择器 #xxx > .xxx
7. 同级选择器 .xxx + .xx1, .xxx ~ .xx1
8. 伪类选择器 .xxx:hover
匹配顺序是从右向左: 想一想怎么写效率最高？
参考: CSS的选择器
思考题: 标题前面的内容是红色。

命名:

h   [0-9a-f]
nonascii  [\240-\377]
unicode   \\{h}{1,6}(\r\n|[ \t\r\n\f])?
escape    {unicode}|\\[^\r\n\f0-9a-f]
nmstart   [_a-z]|{nonascii}|{escape}
nmchar    [_a-z0-9-]|{nonascii}|{escape}

1. 连接符-和_: 下划线在CSS1(1996), CSS2(1998)是非法的。CSS2.1(2001)变成合法的
2. ID和类名区分大小写。标签名不区分大小写。统一小写
3. CSS2以后命名支持Unicode

<div class="I❤Douban">content</div>
<div class="克军">content</div>

4. 不能用数字、双中划线开头

错误处理: 忽略无效，最近闭合
.mod的颜色？h1的颜色？
AT-Rules:
@media print { .mod { margin-bottom:20pt; } }

@charset, @document, @font-face, @import, @keyframes, @media, @page, @supports

值和单位

值:

position: absolute;
content: "\0020";
width: 590px;
border: none;
background:red url(http://img3.douban.com/pics/blank.gif) no-repeat 0 0;
height:90%;
line-height: 1.62;
border-left:3px solid #eee;

单位：

	Recommended	Occasional use	Not recommended
Screen	em, px, %	ex	pt, cm, mm, in, pc
Print	em, cm, mm, in, pt, pc, %	px, ex

绝对单位: em, cm, mm, in, pt, pc, px

相对单位: %, em, ex, (ch, rem, vw, vh, vmin, vmax)

Informative Summary of Relative Units
unit	relative to
‘em’	font size of the element
‘ex’	x-height of the element's font
‘ch’	width of the "0" (ZERO, U+0030) glyph in the element's font
‘rem’	font size of the root element
‘vw’	1% of viewport's width
‘vh’	1% viewport's height
‘vmin’	1% of viewport's smaller dimension
‘vmax’	1% of viewport's larger dimension

算术题：

body { font-size:14px; }
h1 { font-size:1em;width:50em; }
h1 p { font-size:2em;width:50em; }

盒 - Boxes

盒，简单理解为所有被标签标记的元素，标签之外的看作匿名box。

盒模型，box的尺寸规格

决定如何渲染，一是计算尺寸(宽/高)，二是如何定位

4区域：内容区域、内边距(padding)、边框(border)、外边距(margin)

      
      p { margin: 10px; }
      p { margin: 10px 20px; }
      p { margin: 10px 20px 5px; }
      p { 
          width: 200px;
          padding: 20px;
          border: 1px solid #eee;
          border-width: 1px 0;
          border-style: solid none dashed;
          margin: 10px 20px 5px 20px;
      }

CSS2.1 定位

常规流(Normal Flow):
1. static position
2. relative position
浮动(Float)
绝对定位(Absolute Position):
1. absolute position
2. fixed position
三种定位之间不能混用

Normal Flow

block box(块级元素): width/height属性有效，不指定宽自动充满父容器(父级block元素)

inline box(行内元素): width/height属性无效，宽度由实际内容绝定，遇到父容器边缘折行（连续字符例外，word-wrap:break-word）

block格式化：1. 垂直、顺序布局 2. 折叠边距特性

inline格式化：1. 水平方向、顺序布局 2. 垂直方向的padding/margin无效

inline-block box: 内部按block格式化，外部按inline格式化

static position - 包括block格式化/inline格式化，left/right/top/bottom/z-index属性无效

relative position - 包括block格式化/inline格式化，left/right/top/bottom/z-index属性有效

Float

left/right/none。脱离当前文档流，定位到父容器的边缘，或另一个float box的边缘

不定宽情况下，实际宽度由内容决定

父容器水平方向空间不足时，向下移动直到可以放下

文档流中的inline box环绕float box

会和文档流中的block box重叠。用clear:both|left|right避免重叠

float会形成一个新的block formatting context(块格式化上下文，后面介绍)

float不会超出所在BFC的范围，也不会和其它BFC重叠

left/right/top/bottom/z-index属性无效

Absolute Position

脱离当前文档流。浮在其它元素上，z-index决定z轴上的关系

不定宽情况下，实际宽度由内容决定

float会形成一个新的block formatting context

left/right/top/bottom/z-index属性有效

left/right/top/bottom是距最近的absolute/relative定位的父级元素的值

fixed position是相对viewport定位

z-index，对relative/absolute/fixed有效。默认值auto。同值后面高于前面。可正可负。

事件不能穿过覆盖层。(IE例外) 可用pointer-events:none改变

练习题：水平垂直居中

dabblet.com/gist/5947115

思考：用更多方案实现

多样性和灵活性是前端开发的魅力

Block Formatting Context - 块级格式化上下文

MDC定义： A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.

一个BFC是CSS可视化渲染页面的一部分，它是把一组块级box和浮动元素放在一起布局的区域。

特性：

不存在折叠边距
浮动元素不会超出它的范围
不会跟其它浮动元素重叠

形成新的BFC：

float属性不为none
overflow属性不为visible
display属性是table-cell/table-caption/inline-block
position属性不为static/relative

IE6/7没有BFC的概念。IE6/7的hasLayout与BFC类似。通常用zoom:1触发。

练习题：三列布局

http://dabblet.com/gist/5343132

层叠和继承

      .list li {
        margin: 10px 0 0 0;
        font-size: 14px;
        color: #666;
      }

      .list-member li {
        font-size: 12px;
      }

      <div class="list list-member">
        <ul>
          <li>Member ID1
          <li>Member ID2
          <li>Member ID3
        </ul>
      </div>

根据CSS优先级将两条规则加在一起。实际为：

      
        margin: 10px 0 0 0;
        font-size: 12px;
        color: #666;

继承，子元素可以继承父级的属性:

文本样式: font-family/font-size/font-style/font-variant/font-weight/letter-spacing/line-height/text-align/text-indent/text-transform/word-spacing
列表样式: list-style-image/list-style-position/list-style-type/list-style
颜色: color
字号是相对值：如font-size:80%，会计算相对值

CSS规则的优先级关系

优先级可以精确计算

      
      div.conent p { color:#000; }
      


      #db-site-note p { color:#999; }



      <div style="color:red">
        <p>正文</p>
      </div>
      

      p { color:#000 !important; }

同值，按规则定义的先后顺序。

      .list-member li {
        font-size: 12px;
      }

      .list li {
        margin: 10px 0 0 0;
        font-size: 14px;
        color: #666;
      }

      <div class="list list-member">
        <ul>
          <li>Member ID1
          <li>Member ID2
          <li>Member ID3
        </ul>
      </div>

避免用!important和标签的style属性

标签使用

按语义使用
嵌套规则
结构的设计思路

参考: http://hikejun.com/work/qq/spec/html_reference.html

一道陶冶情操的笔试题

http://dabblet.com/gist/5412926

理解结构设计 - 对信息结构的准确描述

易犯错误

单一使用标签。都用div
标签的嵌套规则
用<br>控制间距
用 控制字间距
爱用p标签
样式直接写在标签的style属性上
滥用float布局
class/id的命名随意
不注意选择器的效率
不注意作用范围。如直接改div {...} 或 * {...}

练习题

http://dabblet.com/gist/5185295

展现效果：

HTML内容：

还缺什么？

HTML结构设计、CSS样式

学习HTML/CSS · kejun

内容

概述