UP | HOME

css-missing-manual-4th

Table of Contents

Chapter 01: HTMLA and CSS

  • 如果没有html，那么css就什么都不是.所以我们学习css,也需要对html有所了解

HTML: Past and Present

  • HTML是网络上所有page的基础,当你加入css到html的时候,其实是减轻了html的负担, 因为html不再用关注style,类似<font> tag的代码就不需要写在html里面了.这些工作 转交给了css来完成

HTML Past: Whatever Looked Good

  • HTML最开始的应用,是一些科学家用来分享技术文档,在最初的需求中,结构化是比较 重要的,所以会有h1,h2等等.但是显然一开始不需要图形化的设计师
  • 当HTML的使用者扩大到普通人的时候,显然结构化文档已经不能满足他们的需求了,图 形化变得更加重要,从而也诞生了专门来处理这方面工作的web designer
  • 最开始,web designer的工具只有tag,比如使用<blockquote>来引用,使用table来做 图表.但问题在于,这些tag也是为了结构化文档设计的,所以web designer需要非常有 创造性才能用好这些tag来做一些美化的工作

HTML Present: Scaffolding for CSS

  • web designer的救星就是css,当前的web界, html更"纯粹的"负责结构化文档,而所有 关于样式的代码,都在css里面进行处理

Writing HTML for CSS

  • 下面我们要介绍一些好的,写html的practice,遵守这些practice可以让我们的html更好 的和css进行工作:

Think Structure

  • HTML的对于text的哲学在于,首先逻辑上把text分成不同的部分,其次使用不同的tag来 区分这些部分.比如
    • html使用<h1>来把htmld的最大文档和其他部分分别开来
    • html使用<p>来区分段落
    • html使用<ul>来创建项目序号列表
    • html使用<abbr>来代表缩写
  • 当我们为css书写html的时候,先不要去太纠结样式,而要关注于内容的逻辑性.比如在 网站上部通常都有一系列navigation link.这些link相互之间的关系并列,显然是使 用<ul>串联起来更好,那你就在html里面把他们写成<ul>,至于怎么把"竖着的列表"改 成"横着的列表",这是css考虑的问题

More HTML Tags to Keep in Mind

  • HTML虽然有很多的tag,但是现实的需求更为旺盛.HTML5又再次引入了新的tag,我们要 熟悉这些新的tag,从而找到"最合适"我们文档的tag
  • HTML里面最特别的两个tag是<div>和<span>,这两个tag是用在哪些你"找不到任何的tag 能够包裹自己"的content,换句话说<div>和<span>类似于一个万金油的角色
  • 在"万金油"的路上,div和span又各有千秋:
    • div是一个block,也就是说,dive会在其"之前"和"之后"各有一个line break
    • span是inline的,所以它是可以"无缝"的放入paragraph里面
  • div和span的共同点是:他们没有继承任何的visual properties,所以你可以使用css 来让它们变成任何的样子
  • div的本意是<division>其实是和<p>差不多的意思,但是实际应用中,<div>往往是起到 一个容器的作用,用来"包裹"任意数目的其他element.利用div这个特性,可以把一个page 分成不同的logic area都单独"包裹"进一个div(后面再使用css进行排列),一个页面 常见的logic area有:
    • banner一个div
    • footer一个div
    • sidebar一个div
  • <span>是inline的,所以你可以把它看成是另外的一种inline tag,比如<strong>.<strong> 很显然是加粗段落里面某个文字,你也可以在这个数字左右加上<span>,然后再css里面 使用各种各样的格式来处理<span>里面的内容,比strong复杂的多的都很容易完成.
  • 下面就是一个div和span的应用例子,span的css直接写在了html里面,div的可以在css 文件里面标记id为footer,然后进行处理 
    <div id="footer">
  <p>Copyright 2015, <span class="bizName">SuperCo.com</span></p>
  <p>Call customer service at 555-555-5501 for more information.</p>
</div>
  • div的问题在于它"太generic"了,以至于大部分的tag都是div的,html本来的"结构化" 有所减弱的趋势,为了遏制这种趋势,html5引入了更多的tag来"分担"div的功能:
    • <article>来包裹文章主体
    • <section>来包裹文章的一个节选
    • <aside>来包裹和content相关的部分
    • <footer>来包裹copyright, legal information等经常放到页面最下面的东西
    • <nav>来包裹主要的navigation links
    • <figure>来包裹图片
  • 当然了你继续使用div还是可以的,因为html5的规范并没有强制你替换一部分的div为 新的generic tag.但是使用了肯定有好处(比如新的generic tag对搜索引擎更友好).

Keep Your Layout in Mind

  • 我们会在第三部分讲解css如何设计layout,现在你不妨可以把layout想成是艺术化的 组织一些box形状的区域,一个典型的layout如下图 
    +------------------------------------------------------------+
|                        Banner                              |
|                                                            |
+--------------------------------------+---------------------+
|                                      |                     |
|     Main content                     |   Sidebar           |
|                                      |                     |
|                                      |                     |
|                                      |                     |
+--------------------------------------+---------------------+
|                        Footbar                             |
+------------------------------------------------------------+
  • 上图的layout中,包括如下的box:
    • banner一般包括logo, search box, site navigation
    • main content就是网站主要内容
    • sidebar是一些快速链接(不断更新)
    • footer是一些版权信息
  • 在html中,你使用<div>来创建这些"box",而在html5中你可以有更多选择可以分别使用 最合适的generic tag:
    • banner box: <header>
    • main content box: <article>
    • sidbar box: <aside>
    • footbar box: <footer>

HTML to Forget

  • HTML的有些tag早就应该abadon了,如果你坚持使用这些tag(而不是css)来创建网页, 你当然写不出更好更简单的网页.一个最应该被放弃的tag就是<font>,其主要的功能 是来更改font的大小,颜色等"style",完全不具备"结构化文档"的作用
  • 类似<font>的tag还有几个:
    • 不要再使用<b><i>来强调text
    • 不要再使用<table>来做page layout
    • 不要乱用<br>来添加换行符

Tips to Guide Your Way

  • html的使命仅仅是结构化文档,follow下面的几个tips会更好的完成你的工作
    • 使用headings(也就是<h1><h2>等等)来表明你text的相对重要性,注意<h1>的文字 大小你不满意没问题,后面会使用CSS替换.还有就是不要跳过某些数字,比如<h2>后 面不要紧接着跟<h5>
    • 使用<p>来结构化文章的段落
    • 使用<ul>来表示一系列的相似的item,比如navigation links, headlines等等
    • 使用<ol>来表示一系列有先后顺序的item,比如"这个月最流行的十大网站"
    • 创建专业术语及其解释,使用<dl>(definition list), <dt>(definitionterm), <dd>(definition description)
    • 大段引用使用<blockquote>,小段引用在<p>里面使用<p>
    • 使用<city>来作为book的题目,文章标题.<address>来作为联系地址
    • 放弃类似<font>那种只做style处理的html tag
    • 如果还是找不到合适的generic tag,那么就使用<div>, <span>
    • 不要滥用<div>,在html5里面,当你找不到完全合乎的tag的时候才用<div>
    • 记得close tag:比如<p>后面要跟着</p>.只有少数例外,比如<br>
    • 使用W3C validator来validate你的页面

The Importance of the Doctype

  • html文件的第一行通常是一个doctype,用来告诉浏览器,你遵守的是哪个版本的html规 范(比如是html5还是html4),如果第一行的doctype有错误的话,浏览器会默认把你放入 quirks mode(1999年的html标准),你的精美的css就无法被解析了
  • 幸运的是,从html5开始,doctype变得非常简单,短短一行 
    <!doctype html>
  • 4.0版本的doctype就麻烦的多 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.
w3.org/TR/html4/loose.dtd">
  • XHTML 1.0版本的doctype也很麻烦 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  • 所以推荐大家直接使用html5的最新版本doctype

How CSS Works

  • 前面已经说过HTML是来负责结构化文本的,而CSS作用简单来说,就是让HTML的结构化的 文本看起来更好看
  • 比如你想让你的网站页面标题使用:红色大号文字,离开浏览器页面50个像素.这个就是 一个style.
  • 多个这种style结合起来,就是一个style sheet
  • 一个style可以作用在:
    • 一个特定的tag上面(通过id)
    • 也可以作用在某一类tag上面(比如<h1>)
    • 还可以作用在自己创建的一类tag里面(通过class)

Chapter 02: Creating Styles and Style Sheets

Anatomy of a Style

  • 一个单独的定义page上的element的single style是非常简单的,比如他可以对浏览器说 "你好,浏览器,请把这个的样式设计成那个样"
  • 一个style其实包含两个部分:
    • 浏览器提供的web page element(也就是selector)
    • 实际的样式指导说明(也就是declaration block)
  • 举个例子,我们把所有的段落(selector p)都设置成红色字体,然后大小为1.5em,代码如 下 
    p { color: red; font-size: 1.5em; }
  • 我们来详细分析一下这段代码:
    • selector: selector告诉浏览器"哪些"elements需要style,这里的p代表了html的<p> tag.也就是说,所有的<p> tag里面的内容都会享受到后面的style
    • declaration block: 就是两个括号,用来包裹declaration的
    • declaration:在括号里面,你可以添加任意条数的声明(使用分号分割),每个声明都 有两个成员:
      1. property:是一个有意义的英文,来表述属性,后面有冒号和value分割
      2. value:可以有多个value,使用逗号分隔
  • 你并不需要写在一行,可以写成如下易读的样式 
    p {
    color: red;
    font-size: 1.5em;
}

Understanding Style Sheets

  • 一个单独的style不会有什么大的贡献,想成为优秀的设计,你需要多个不同的style相互 配合.
  • 多个css style组合起来,就是style sheet.style sheet 可以有两种类型:internal或 者external(和是否在external的css文件里面有关)

Internal or External - How to Choose

  • 大多数时候,external style sheet是推荐的方式,因为它在另外的一个单独的css文件 里面,如果有什么style更改直接更改那个css文件就可以了,这样可以更简洁,更快的更 改网站
  • 而且external style让网站更快:
    • 首先你的html里面只有html内容,没有css,解析起来单一
    • 其次你的css文件会被浏览器下载到本地进行缓存
  • 当然了,浏览器的缓存会对debug的时候造成影响,所以前端开发必须会force reload: Ctrl+F5,和Command-Shift-R是常见的force reload按键

Internal Style Sheets

  • 所谓的internal,就是internal在html的<style>tag里面,如下 
    <head>
  <style>
   h1 {
     color: red
     font-family: Arial;
   }
  </style>
</head>
  • 虽然实现起来简单,但是internel style有着不可去除的弱点:它必须在文件直接拷贝 来拷贝去.这明显违反了DRY原则.所以除了自己做做demo,不推荐使用internal style sheets

External Style Sheets

  • 所谓external style,就是把css文件单独拎出来放到一个文件里面.文件后缀一般习惯 上使用css,所以就有global.css, site.css, style.css等文件
  • 一旦你有了一个css文件,下一步就是让你的html知道这个文件的存在.联系两者的方法 如下 
    <link rel="stylesheet" href="css/styles.css">
  • <link>tag是html的一个属性,它需要两个attributes:
    • rel="stylesheet"表明我们link的是一个style sheet
    • href指引了我们external css的文件地址,这个地址可以是URL

Tutorial: Creating Your First Styles

  • 这里我们来创建一个inline的例子,最简单的例子可以把style写到tag里面 
    <h1 style="color: ##6A94CC;">
  • 一个internal的例子是要写在<style></style>里面,style tag一般是在<head></head> 里面
  • internal,和inline就不一样了,我需要首先定义这个style是"为谁"而创建的,也就是 selector!这里我们就要这样来设置为"所有"的h1来设置style 
    <style>
 h1 {
   font-siz: 3em;
   margin: 0;
 }
</style>
  • 我们再来看看如何把internal"进化"到external,创建一个文件style.css 
    body {
    width: 80%;
    padding: 20px;
}
  • 然后使用<link>tag来把css这个文件加入到html里面 
    <link href="style.css" rel="stylesheet">
  • 前面讲过的例子中的selector都是html tag,如下,这种会有一个问题,那就是,所有的 p都会受到影响.那如果我只想影响其中一个p呢? 
    p {
    font-siz: 3em;
}
  • 答案是使用class selector,如下.这种selector的特点是,只有follow了这个class,才 会使用后面的css效果.就像"继承了某个class"以后,object才有class的特性 
    .intro {
    color: #666666;
    font-size: 1.2em;
}
  • 某个p想"继承某个class selector"的方法如下.注意,在这里就不需要和css里面一样 多加一个"."了 
    <p class="intro">
  • 除了class selector以外,我们可以把某个css效果加载到多个tag上面,比如下面的例子 一个css效果服务了<p>tag和<address>tag.这种叫做group selector 
    p, address {
    font-size: 1.25em;
    color: #616161;
}

Chapter 03: Selectors: Identifying What to Style

  • 每一个css style都有两个部分:
    • selector
    • declaration block
  • selector是让你的style focus在特定的item上面

Type Selectors: Styling HTML Tags

  • 最常见的selector是一个html tag来确定其使用范围的(范围也是最大的),这种selector 叫做type selector(或者element selector)
  • 因为和html tag拥有一样的名字,所以type selector很容易在css文件中被发现 
    h2 {
    color: #0000000;
    margin-bottom: 0;
}
  • type selector的问题就是它管的太宽泛了,我们有时候需要某些<p>和其他<p>不一样, 这个时候css有很多种解决办法,最常见的就是class selector

Class Selectors: Pinpoint Control

  • 当你想给一个或者多个element一些特殊的照顾:让他们拥有和其related tag不一样的 style.那么你就要使用class selector啦
  • 注意,一种class selector可以给多种html tag起作用,比如<p>tag里面的内容如果加了 book class,那么就可以使用book class的style,同时<h2>tag里面加了book class,也 而已使用book class.class selector和html tag的唯一联系,就是需要html tag来设置 class 
    <p class="book">
  • 为了区别type selector, class selector要求其名字前面必须带'.' 
    .special {
    color: #FF0000;
    font-family: "Monotype Corsiva";
}
  • class selector 名字只能使用letter, number, hyphen, underscore四种成员
  • class selector 名字必须以字母开头
  • class selector 名字是大小写敏感的

ID Selectors: Specific Page Elements

  • class selector比type selector的使用范围已经缩小了,基本是"一类"selector,比class selector使用范围更小的是ID selector.它基本只能是有在某一个tag上面(id肯定是某 个tag独享的)
  • 使用ID selector和class selector是相似的过程,需要两步:
    • 创建css部分,使用'#'来替代class selector里面的'.' 
      #banner {
    background: #CC0000;
    width: 720px;
}
    • 在html tag里面标记上id 
      <div id="banner">
  • html的id还是有很多用处(比如react里面就靠id定位element,其实js就很依赖id来定位 element),但是对于css来说,id这个功能有些鸡肋(完全为一个element书写style的需求 并不多),所以最近的前端趋势是放弃ID selector

Styling Groups of Tags

  • 下面再来介绍一个比type selector的使用范围还广的selector,那就是n个tag都可以 使用的selector,叫做group selector
  • 所谓的group selector,其实就是使用逗号把html tag隔开 
    h1, h2, h3, h4, h5, h6 { color: #F1CD33; }
  • 其实group selector可以包含任意类型的selector,比如class selector, ID selector 
    h1, p, .copyright, #banner { color: #F1CD33; }
  • 比group selector还要范围广的,就是包括所有html tag的selector (*) 
    * { font-weight: bold; }
  • 这个tag(*)看起来好像范围太广,但是它确实有它利用的场合,比如很多web设计人员, 喜欢去除所有tag之间的space,它们可以这样 
    * {
    padding: 0;
    margin: 0;
}

Styling Tags Within Tags

  • 如果把不太常用的ID selector排除,或者说是一种特别的class selector(只能有一个 instance),那么我们就有两类的selector:
    • type selector
    • class selector
  • 这两类的selector各有优缺点:
    • type selector显然速度更快,但是范围不准确
    • class selector范围准确,但是他们的问题是需要在html tag里面添加额外的内容, 这是type selector不需要的
  • 所以,正常的做法,是将两者的如下的优点结合,混用两种selector:
    • type selector的简单易用
    • class selector的准确
  • css里面混用两种selector的方法就是descendant selector,也就是通过把html tag 的顺序加入到判定规则里面,让css的判定更加准确,而又不需要加过多的class.
  • 既然descendant selector把html tag的顺序这个维度加入了进来,那么我们就要介绍 一下html 的family tree,否则无法理解为啥html tag还有顺序
  • 首先看如下html代码 
    <html>
  <head>
    <title>A Simple Document</title>
  </head>
  <body>
    <h1>Header</h1>
    <p> A paragraph of <strong>important</strong> text. </p>
  </body>
</html>
  • 它的family tree如下 
           html
head        body
title    h1     p
              strong
  • 有了这个family tree,我们可以引出如下的概念:
    • Ancstor: 如果一个html tag 包裹(wrap)了另外一个html tag,那么就说这个tag是被 包裹tag的ancestor,比如<html>tag是所有其他tag(比如<h1>, <p>)的ancestor
    • Descendant: 如果一个tag被另外的tag 包裹,那么它就说descendant
    • Parent: 最近的ancestor就是Parent
    • Child: 最近的descendant就是Child
    • Sibling: 同一个tag的不同Child之间叫做Sibling
  • 我们来看一个descendant selector的例子,比如我们想把h1里面的strong的部分都变 成红色,但是不想影响其他的strong,那么就可以使用如下代码 
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <style>
     h1 strong {
       color: red;
     }
    </style>
  </head>
  <body>
    <h1>Hello W<strong>O</strong>rld</h1>
    <strong>One</strong>Two
  </body>
</html>
  • 需要注意的是,我们的descendant selector不需要把全部的html tag都列出来,只需要 列出来必须的就可以了,比如所有的tag都是<html>tag的descendant,但是你并不需要 每次列出<html>tag
  • descendant tag的变种就是可以加入class tag,换句话说,descendant系列上的某个html tag可以换成是"包含某个class tag的任意html tag" 
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <style>
     .intro a {
       color: red;
     }
    </style>
  </head>
  <body>
    <div class="intro">
      <a href="www.google.com">Google</a>
    </div>
  </body>
</html>
  • descendant继承了class selector以后,就可以做出普通软件很容易做出来的模块,比如 上面的class="intro"就是一个模块,我们任意的设置都是在".intro"下面,不会影响其 他模块,比如我们还可以让.indro里面的h2变成黄色,但是不影响其他的h2 
    .intro h2 { color: yellow; }
.intro p { color: blue; }

Pseudo-Classes and Pseudo-Elements

  • 有些时候,你需要选择网页中非常容易被标识出的一部分(但是这部分又很难有自己的 identity),比如某段文章的第一行,或者你的鼠标正在访问的link
  • 为了这种特殊的情况,css为我们创建了一系列的特殊的selector叫做pseudo-class

Style for Links

  • 对于link来说,有四种pseudo-class,用来代表你的link所处的四种不同的状态:
    • a:link, link没有被使用过的状态
    • a:visited, 通过浏览器的历史数据注意到你曾经访问过的link
    • a:hover, 当你的鼠标在链接上面划过的时候的样式.除了链接之外,其他元素也可 以有:hover,比如我们想在<p>上面使用hover,就创建一个 style叫做p:hover
    • a:active: 点下鼠标到松开那几秒时候的情况

Styling Paragraph Parts

  • 早期的css无法实现书籍杂志般的优美版式,所以css偷懒为最常用的两个版式提供了 两个pseudo-element:
    • :first-letter,首字母大写 
      <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <style>
     :first-letter {
       font-size: 200%;
       color: #8A2323;
     }
    </style>
  </head>
  <body>

    <p>hello world</p>
  </body>
</html>
    • :first-line,第一行不同颜色
  • 如果我认真看,我们不会发现我们这两节其实介绍了两个概念:
    • 一个pseudo-class 
      a:hover
    • 另外一个是pesudo-element 
      :first-letter
  • 但是两者的区别非常的小一个是<内置tag>:xxx,另外一个是直接:xxx,css3为了弥补 这个缺陷,为不太常用的pseudo-element增加了一个':' 
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <style>
     /* two ':' */
     ::first-letter {
       font-size: 200%;
       color: #8A2323;
     }
    </style>
  </head>
  <body>

    <p>hello world with two `:`</p>
  </body>
</html>

More Pseudo-Classes and Pseudo-Elements

  • :focus是一个pseudo-class(所有只有单冒号一个版本),它和:hover类似,只不过:hover 是指鼠标停在某个element上面,而它是真正的有了实际的接触(比如单击,比如访客把 焦点放到了input上面) 
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <style>
     input:focus {
       background-color: #FFFF00;
     }
    </style>
  </head>
  <body>
    Name<input/>
  </body>
</html>
  • :before (::before)是一个pseudo-element,主要是帮助用户在某些element"之前"加 上一些"标签",现阶段有两种冒号的版本 
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <style>
     .tip::before { content: "HOT TIP!"; color: #FF0000}
     .sale:before { content: "ON SALE!"; color: #0000FF}
    </style>
  </head>
  <body>
    <p class="tip"> NBA Game 7</p>
    <p class="sale"> Thinkpad</p>
  </body>
</html>
  • :after(::after)和before完全一样,只不过是放在后面
  • ::selection是一个pseudo-element, 指的用户选择一些信息(用户可以复制的内容)时 候的style.这个pseudo-element是css3以后才添加的,所以只有双冒号版本 
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <style>
     ::selection {
       color: #FFFFFF;
       background-color: #993366
     }
    </style>
  </head>
  <body>
    <p>Try to select this part</p>
  </body>
</html>

Attribute Selectors

  • 前面我们的css都是基于tag name,class name,id name来进行设置的,但是css还提供 一种基于属性(attribute)来设置样式的方法,因为html的属性代表了我们对不同元素的 要求,所以不同属性当然也代表了不同的分类,适用于不同的selector也是很自然的
  • 最简单的使用情况是两种:
    • tag + 属性 
      <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <style>
     p[title] {
       background: #FFFF00;
     }
    </style>
  </head>
  <body>
    <p title="show">Hello</p>
    <p >World</p>
  </body>
</html>
    • class + 属性 
      <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <style>
     .next[title] {
       background: #FF0000;
     }
    </style>
  </head>
  <body>
    <p title="show">Hello</p>
    <p class="next" title="red">World</p>
  </body>
</html>
  • css的设计者当然不会只限定"有或者没有某个attribute",当然还可以通过属性"不同 的值"来分类.这对于表单来说,非常的有用,因为对于一个表单来说,它有很多的input 元素,每个元素也都有type属性,但是属性的值是不同的.比如文本框(type="text")和 复选框(type="button") 
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <style>
     input[type="text"] {
       background: #FF0000;
     }
     input[type="button"] {
       background: #0000FF;
     }
    </style>
  </head>
  <body>
    <form>
      <input type="text"/>
      <input type="button">A
      <input type="button">B
      <input type="button">C
      <input type="button">D
    </form>
  </body>
</html>
  • 属性的值相同的是一类,这容易理解.还有更加精确的分类,那就是属性的"前缀"或者 "后缀"相同的,分成一类,这其实是正则表达式里面最简单的两个用法:
    • "前缀" 
      a[href^="http://"]
    • "后缀" 
      a[href$=".pdf"]

Child Selectors