《css 设计指南》读书笔记

星不落
280 阅读7分钟

1.HTML 标记与文档结构

  • 所有 img 标签都需要加上 alt 属性。 ps：视障用户使用的屏幕阅读器会读出图片的 alt 属性。

  • 行内( a, img, em, strong, abbr)、块级(h1~h6, p, ol/ul, li, blockquote)标签。

  • 搜索引擎关键词来源：title>h1。

*小结：无论你想了解哪个 HTML 元素，第一个要问的问题都应该是：它是块级元素，还是行内元素？知道了这一点之后，就可以在编写标记的时候，预想到某个元素在初始状态下是如何定位的，这样才能进一步想好将来怎么用 CSS 重新定位它

2.CSS 工作原理

2.1 选择器

a.上下文选择符

  • A,B 同时选择 A、B 两个元素
  • A B 选择以 A 为祖先（父）元素的 B 元素
  • A>B 选择以 A 为父元素（祖先元素不算）的 B 元素
  • A+B 选择紧跟（中间没有其他元素）在 A 后面的第一个 B 元素
  • A~B 选择跟（可以不紧跟）在 A 后面的所有兄弟元素中的 B 元素
  • 通配符：* p * {color:red;} 只会把 p 包含的所有元素的文本变成红色。这个选择符有一个非常有意思的用法，即用它构成非子选择符，比如： section * a {font-size:1.3em;} 任何是 section 孙子元素，而非子元素的 a 标签都会被选中。至于 a 的父元素是什么，没有关系。

b.ID 选择器   ID 的用途是在页面中唯一地标识一个元素，每个 ID 名在页面中都只能用一次。

c.类选择器   类的目的是为了标识一组具有相同特征的元素，每个类可以被多个元素使用。

（书上有一段话得强调一下，它是这么讲的： 要避免 Web 开发专家 Jeffrey Zeldman 说的“类泛滥——标记中的麻疹”出现。什么意思呢？就是说你不要像使用 ID 一样，每个类都指定一个不同的类名，然后再为每个类编写规则。如果你确实有这种随意使用类的习惯，那说明你可能像大多数对 CSS 充满激情的初学者一样，还不了解继承和上下文选择符的作用。于是，你可能会给每个标签都重复写同样的样式（比如为页面中很多标签分别指定相同的字体）。实际上，继承和上下文选择符能让不同的标签共享样式，从而降低你需要编写和维护的 CSS 量。）

d.属性选择器   属性名选择/属性值选择

2.2 伪类

UI 伪类

  • :link 应用于未被访问过的链接
  • :hover 应用于鼠标悬停到的元素
  • :active 应用于被激活的元素
  • :visited 应用于被访问过的链接，与:link 互斥
  • :focus 应用于拥有键盘输入焦点的元素
  • :target 应用于链接点击后指向元素

结构化伪类:

  • :first-child 选择某个元素的第一个子元素
  • :last-child 选择某个元素的最后一个子元素
  • :nth-child() 选择某个元素的一个或多个特定的子元素(odd/even 奇偶)
  • :nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算
  • :nth-of-type() 选择指定的元素
  • :nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算
  • :first-of-type 选择一个上级元素下的第一个同类子元素
  • :last-of-type 选择一个上级元素的最后一个同类子元素
  • :only-child 选择的元素是它的父元素的唯一一个子元素
  • :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素
  • :empty 选择的元素里面没有任何内容

2.3 伪元素

  • :first-letter 选择元素文本的第一个字（母）
  • :first-line 选择元素文本的第一行
  • :before 在元素内容的最前面添加新内容
  • :after 在元素内容的最后面添加新内容

单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素，伪类（结构伪类）的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到

2.4 计算特指度

import React from 'react';
import gif from '@doc-assets/blog/css_tzd.png';

export default () => <img src={gif} />;

3.定位元素

  • margin、padding 的属性值顺序均为 上右下左。

  • 垂直方向上的 margin 外边距会叠加，取较大值。水平方向则不会，两者之间间距为两者之间 margin 外间距之和。

  • 围住浮动元素的三种方法： 一：为父元素添加 overflow:hidden 二：同时浮动父元素 三：添加非浮动的清除元素(写一个 class，里面包含 clear 属性)

  • CSS 布局的核心是 position：static、 relative、 absolute 、fixed

  • visibility：visible 和 hidden(隐藏但占据页面中原来的空间位置，与之类似的 display:none 隐藏且空间被回收)

  • 图片背景居中可以通过把 background-position 设为 50%,50%，把 background-repeat 设为 no-repeat 实现了图片在背景区间内居中的效果。

  • 背景粘附： background-attachment 属性控制滚动元素内的背景图片是否随元素滚动而移动。值有 scroll 和 fixed。

  • css3 新增背景属性：   1. background-clip:控制背景绘制区域的范围，比如可以让背景颜色和背景图片只出现在内容区，而不出现在内边距区域，默认情况下背景绘制区域是扩展到边框外边界的   2. background-origin:控制背景定位区域的原点，可以设定为元素盒子左上角以外的位置   3. background-break:控制分离元素（比如跨越多行的行内元素盒子）的显示效果

  • 多背景图片：background:url(a.png) 30px -10px no-repeat , url(b.png) 40px 0px no-repeat , url(c.png) 0px -10px no-repeat , #ffbd75 ;

  • 背景渐变：background: linear-gradient( #fff , #e86a43 25% );

  • 放射性背景渐变：background: -webkit-radial-gradient( 50px 30px , circle, #fff , #e86a43 , #111 )

  • 简写背景属性：

background:
    [background-color]
    [background-image]
    [background-repeat]
    [background-attachment]
    [background-position] / [ background-size]
    [background-origin]
    [background-clip];

4.字体和文本

4.1 字体

  • font-family 字体族
  • font-size 字体大小
  • font-style 字体样式
  • font-weight 字体粗细
  • font-variant 字体变化
  • font 简写字体：必须声明 font-size 和 font-family 的值，font-weight、font-style、font-variant 然后是 font-size 最后是 font-family

4.2 文本属性

  • text-indent 文本缩进
  • letter-spacing 字符间距
  • word-spacing 单词间距
  • text-decoration 文本装饰 underline、overline、line-through、blink、none
  • text-align 文本对齐 left、right、center、justify。
  • line-height 行高
  • text-transform 文本转换 none、uppercase、lowercase、capitalize
  • vertical-align 垂直对齐 sub、super、top、middle、bottom 以及任意长度值

5.页面布局

  • 使用 CSS3 的 box-sizing 属性后，给 section 添加边框和内边距都不会增大盒子，相反会导致内容变窄

  • 子-星选择符 设定 section > * {margin:0 10px;}，就能为栏中所有子元素，不包括其他后代元素，各应用 10 像素的左、右外边距

  • 预防过大的元素   1. 添加一条 .inner img {max-width:100%;}声明，以便限制图片的宽度不超过其父元素（在此就是内部 div）。   2. 给每个栏（或者内部 div，如果你用了的话）添加 overflow:hidden 声明。这条声明不会缩小图片以适应父元素，而会将它（以及任何过大元素）超出容器边界的部分剪切掉。   3. 给所有栏的外包装元素应用 word-wrap:break-word 声明，以便所有栏及其内容继承这个设定。有了这条声明，浏览器会把过长的词断开显示在不同行上。

  • 人造栏技术 通过添加背景图片和背景色达到视觉假象的思想。

avatar
文章
阅读
粉丝