秦小

发表于 | 分类于

这是 “CSS: The Missing Manual 4E” 第一分的笔记. 这部分介绍CSS 的基础知识, 包括 1. HTML and CSS基本语法, HTML结构.

  1. 向HTML引入CSS 的方法. 3. 重点选择器语法. 4. Style Inheritance. 5. CSS 层叠作用原理.

HTML 和 CSS

HTML 用于控制页面内容结构. 应使用更具语义的HTML5标签.

html验证: 1. http://validator.w3.org/ 2. 浏览器插件

  • div - division
  • header -
  • article -
  • section - 包含一组相关的内容，比如书本的章节
  • aside - 在一些内容相关旁边(aside)放置一些相关的内容
  • footer - 包含通常放在页面底部(footer)的的信息，但不限于页面底部, 也可以是其他内容(比如article, section等)的底部
  • nav - 主要的导航链接
  • figure - 用于解释(illustrative)图片

创建样式(styles)和样式表(style sheets)

CSS验证: http://jigsaw.w3.org/css-validator/

内联的:

1
<style> ... </style>

外部的:

1
<link rel="stylesheet" href="css/style.css">

选择器(selectors): 识别样式应用目标

  • 类型选择器: 标签

  • 类选择器: .classname
    在一个标签(tag)上使用多个类，可以共享css样式

    1
    2
    3
    4
    .btn {}
    .delete {}
    .add {}
    .edit {}
    1
    2
    3
    <button class="btn add">Add</button>
    <button class="btn delete">Delete</button>
    <button class="btn edit">Edit</button>

  • ID选择器: 特定的文档元素 Note: 少用

  • 选择器组
    • h1, h2, h3, h4, p, .copyright {}
    • * {}

  • 对标签内的标签引用样式

    • 后代选择器: h1 .strong {}

    • 创建模块:

      1
      2
      3
      4
      5
      <div class="contact">
        <p class="name">Jonh Smith</p>
        <p class="phone">555-555-1234</p>
        <p class="address">1234 Elem St</p>
      </div>
      1
      2
      3
      .contact .name {}
      .contact .phone {}
      .contact .address {}

  • 伪类(Pesudo-Class) & 伪元素(Pesudo-Elements)

    • 链接(a)
      a:link regular, unused link
      a:visited 已访问
      a:hover hover
      a:active 已点击, 未释放
    • 段落(p)
      ::first-letter
      ::first-line
    • :focus
    • ::before 在前面插入文字 ::before { content: "text to insert" }
    • ::after
    • ::selection refers to items that a visitor has selected on a page. 比如: 选种的文字
      Note: firefox -> ::-moz-selection
  • 属性(Attribute)选择器
    • img[title] has attribute
    • input[type="text"] type == “text”
    • a[href^="http://"] href starts with …
    • a[href$=".pdf"] href ends with …
    • img[src*="headshot"] src contains …

  • 孩子(Child)选择器

    • div > p
    • :first-child
    • :last-child
    • :only-child
    • :nth-child(odd) or :nth-chlid(even) or :nth-child(an+b) [a=1..., b=0...]

    • :first-of-type

      VS: p:first-of-type 可以 选择下面的 p, 但是 first-child 不能

      1
      2
      3
      4
      <div>
        <h2>A heading</h2>
        <p>A paragraph.</p>
      </div>

    • :last-of-type

    • :nth-of-type(xxx)
  • 兄弟选择器
    • h2 + p 毗邻(p紧跟在h2后面)[adjacent (p immediately after h2)]
    • h2 ~ p all
  • :taget 选择器 – 当 window.location.href == index.html#targetX 时对应的链接<a id="targetX">被选中.

  • :not() 选择器

    1
    2
    p:not(.classy) {}
    a[href^="http://"]:not([href^="http://mysite.com"]) {}

使用样式继承(Inheritance)节约时间

  • 通常, 影响元素占位的properties不inherited: margin, background color, border.
  • 浏览器固有的properties不inherited: Headings are big and bold, links are blue…

多样式: 层叠(Cascade)的本质

层叠式CSS的基本机制，它规定了样式之间怎样相互作用，当有冲突是哪个样式有限应用.

  • 样式怎样层叠

    • 继承样式积累
      • 距离最近的样式优先
      • 直接样式优先
    • Specificity: Which Style Wins
      tag: 1 point | class: 10 points | ID: 100 points | inline: 1000 points|
      • The Tie-Breaker: Last Style Wins

  • 掌控层叠

    • 改变Specificity - !important 只用作 test/debug
    • 选择性覆盖(Overriding)
    • 避免 Specificity 竞赛(wars) - 慎用(be cautions of) ID selectors
    • 以一个清爽的蓝本(Slate)开始 - reset.css
秦小

发表于 | 分类于

为了方便访问”CSS: The Missing Manual 4E”中的链接, 我将其整理在一起了.

Start

Fonts

Images

Animations

Layout

Grid System

Flexbox

Object Oriented CSS