CSS – W3Schools 学习笔记 (1)

CSS Backgrounds

Color

Link to W3Schools

opacity 会让整个 div 包括里面的 text 变透明, 如果不希望这样的话, 可以通过 background-color: RGBA 来完成.

div {
  background-color: green;
  opacity: 0.3;
}

Image Repeat & Position

Link to W3Schools

默认是 repeat, x 和 y 都有. 

repeat-x 只 repeat horizontal

repeat-y 只 repeat vertical

no-repeat 不要 repeat

默认 position 是 left top.

Attachment

Link to W3Schools

scroll 的时候要跟还是定在原位, fixed or scroll.

Shorthand

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

color, image, repeat, position.

最常见的就是 background: red; 取代 background-color:red

CSS Borders

Link to W3Schools

p {
  border: 2px solid red; 
  border-radius: 5px;
}

width, style (required), color, radius 是圆角

像上面写成一排叫 Shorthand Property, border 有 4 边, 也可以分开写每一个.

Border + Transparent

 div{
   border-width: 5px;
   border-color: red red transparent transparent;
   border-style: solid;
   width: 50px;
   height: 50px;
 }

效果: (边角是斜的)

于是它可以用来做 tooltip 的对话箭头.

div{
  border-width: 5px;
  border-color: red transparent transparent transparent;
  border-style: solid;
  width: 1px;
}

效果:

border-width 越大, 整个箭头就越大.

CSS Margins

Link to W3Schools

支持的 value

Auto 可以用来居中

传统写法 

margin: 0 auto

现代写法

margin-inline: auto;

Collapse 崩溃

当上下 margin 重叠时, 大的那一个会胜出, 最终只剩下 1 个 margin 高度. 左右则没有 collapse 的概念.

Top vs Buttom

参考: 

CSS: Margin Top vs Bottom (A Trick You Should Know)

Css margin-top vs margin-bottom (stackoverflow)

大部分情况, 2 个都适用, 文章给出极端情况, top 会比较好, 因为 CSS selector 只能 match next element, prevent 不行, 所以遇到要 override 的话, margin-top 才可以做到.

另一个我自己的想法是, 动机是想分开 2 个 element, 那么一定是第 2 个出现后才需要, 所以让第 2 个有 margin top 比较合理. 要不然用 gap 做也会比较合理一些.

CSS Height and Width

Link to W3Schools

% 是依据 containing block 而不是 parent element. 那 containing block 是哪一个呢. 去 MDN 看吧.

CSS Outline

Link to W3Schools

Outline 就是框线, 它和 border 有点像. 但 border 是画里面, 它是外面.

它不会把其它 element 弹开, 反而是会覆盖其它 element 

Outline 不能针对性设置 top, right, buttom, left, 只能统一一起 set 同一个 pattern.

它有一个 border 没有的, 可以调 offset, 就是间隔一个距离后才开始画 outline.

CSS Text

Link to W3Schools

Decoration

overline, line-through, underline

Transformation

uppercase, lowercase, capitalize (注: 并不是 title case 哦)

Text Spacing

text-indent

p {
  text-indent: 50px;
}

段落前面的空格

letter-spacing = 字母左右的间距

line-height = 字母上下的间距

word-spacing = 字 space 的距离

white-space, nowrap 不会因为 width 而往下掉

p {
  white-space: nowrap;
}

Text Shadow

h1 {
  text-shadow: 2px 2px 5px red;
}

horizontal, vertical, shadow, color

CSS Fonts

Link to W3Schools

常见的 Serif, Sans-serif, Monospace, Cursive, Fantasy.

sans-serif 会比 serif 好读.

font-family

如果 font 超过一个字就要 quote 起来

.p1 {
  font-family: "Times New Roman", Times, serif;
}

Fallback Fonts

写多个就会 fallback 了

p {
    font-family: Tahoma, Verdana, sans-serif;
}

几乎肯定支持的 font 有:

Font 特色

Arial (sans-serif) default font in Google Docs

Verdana (sans-serif) 小字体也 readable

Helvetica (sans-serif) suitable for business

Tahoma (sans-serif) less space between the characters

Times New Roman (serif) most recognizable fonts in the world

Georgia (serif) good candidate for mobile-responsive design

Garamond (serif) timeless look and good readability

Font Style

font-style: normal, italic, oblique

italic 就是斜体.

oblique 很像 italic 但是几乎不用

Font Weight

font-weight: normal, bold

Font Variant

font-variant: normal, small-caps

Font Size

px vs em

px 就是固定的, user 不能通过 browser 去调. 

em 就可以, by defualt 1 em = 16px (推荐使用)

chrome setting:

旧 browser 不完全支持 em.

 

solution 是在 body 添加 font-size: 100%

rem 是 root em 的意思, em 是对应当前 element font-size 的

因为 font-size 是 2em = 32px, 所以 margin-bottom 的 1em 变成了 32px

如果 margin-bottom 使用 rem 则会是 16 px

参考: web开发中该用 em 还是 rem 呢？

那要用哪个呢? 答案是看情况, 不太能统一

如果想 override browser 的 rem 可以声明 html

html {
  font-size: 18px;
}

这样不管 user 如何改 setting 最终的 1rem 就等于 18px, 通常不会这样设计.

html {
  font-size: 1.125rem;
}

这样的设计就可能会出现. 比如默认情况下 应该是 16px, 但我希望大一些于是在 html 定义了 1.125rem = 18px. 那么我在 body 写 1rem 就等价于 18px 了. 可以用这个方式来设计手机和电脑的 RWD font size.

Responsive Font Size

font-size:10vw

1vw = 1% of viewport width

Google Fonts

加一个 link

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">

就可以用了, 记得 set fallback

{
    h1.a {font-family: "Audiowide", sans-serif;}
    h1.b {font-family: "Sofia", sans-serif;}
    h1.c {font-family: "Trirong", serif;}
}

Font Pairings

常见搭配组合: Link to W3Schools

Font Property & Shorthand

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}

style, variant, weight, size/line-height, family

size 和 family are required.

CSS Icons

Link to W3Schools

Font Awesome Icons

放一个 script, register code from fontawesome

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

then 用 <i> 加 class

<i class="fas fa-cloud"></i>

Google Icons

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

一样 <i> 加 class

<i class="material-icons">cloud</i>

CSS Links

Link to W3Schools

Styling Links

a:link - unvisited link

a:visited - visited link

a:hover - on user hover

a:active - on user click

写的时候要有顺序, 因为 CSS 是 override 概念. link -> visited -> hover -> active

Text Decoration

text-decoration: none, underline 默认是有 underline 的

Link Buttons

就是通过 style 去弄, 而不是 button + link 哦

 

Cursor style

demo link

CSS Lists

Link to W3Schools

list-style-type

在 HTML Lists 有说到, List 有分 order 和没有 order 的, 还有 type.

也可以通过 CSS 来调, 

list-style-image

ul {
  list-style-image: url('sqpurple.gif');
}

Shorthand property

ul {
  list-style: square inside url("sqpurple.gif");
}

type, position, image

CSS Tables

Link to W3Schools

搞 border

table, th, td {
  border: 1px solid black;
}

table, th, td 3 个分别给

border-collapse

double border 不好看, 在 table 声明让它 collapse (和 margin collapse 类似)

table {
  border-collapse: collapse;
}

text-align

在 td 设置

td {
  text-align: center;
}

还有 vertical-align

td {
  height: 50px;
  vertical-align: bottom;
}

th default 是 text-align: center 哦

斑马线

其实只是用了 nth-child(even) 的技巧

tr:nth-child(even) {background-color: #f2f2f2;}

小总结

很多 style 就是 table, tr, th, td, 分开去给来. 而不是像 list 那样, 在 parent 负责.

CSS Layout - The display Property

Link to W3Schools

basic 的有 display: none, block, inline, inline block

block 就是占位一整个 line

inline 就不会 start with new line 同时它的 width 就是它 element 的 width (set style width,height,padding,margin 都无效的)

inline block 对比 inline 就可以 set width,height,margin,padding, 对比 block 它不会 start with new line.

none 就是完全不见掉

visibility:hidden 也是看不见，但是它还是会占据位置.

Block Elements

Inline Elements

CSS Layout - width and max-width

Link to W3Schools

width, max-width, margin: auto 玩法

之前有说过, margin: auto 可以让 div 居中

借助 div display block 的特性, 它的 width 一定是撑完整个 line 的, 于是 set 一个 max-width 就可以限制它的不要去去到完.

div 有了 width + margin auto 就居中了咯. 之所以用 max-width 而不是用 width 是因为在屏幕小的时候, max-width 依然可以正常工作.

因为它可以小, 相反 width 意味着它不能小, 就会出现 scroll bar 了. 这也是一个 max-width 的技巧

CSS Layout - The position Property

Link to W3Schools

static

static 是 default, 就是按照 element flow 位置.

relative

relative 就是在原本的位置做偏移, top,right,bottom,left 

比如 top:10px 那么这个 element 就会往下移动 10px, 意思是, 从灵魂到躯体 top: 10px, 它是这样理解的.

relative 的 element 本身依然占据原来的位置, 它像灵魂出窍那样, 移动后会和其它 element 重叠 (是重叠不是推掉哦)

absolute

absolute element 不占据原本位置了, 但它会飘在原本位置上面, (和其它 element 重叠). 然后它和 relative 还有一个定点的不同.

relative 是以原本的位置作为起点, absolute 是以 first ancestor (relative position) 做为起点, 如果没有就用 document.body 作为定点. 当你没有 set top 的时候, 默认的 top 会是它原本的位置.

所以 relative 的 top 一开始一定是 0, 但是 absolute 一开始 top 就不会是 0, set 0 反而会飞上去.

比如 top left 是 absolute 它的默认  top 是 323px, 如果 set to 0 它就会去到上面, 因为它的定点是 first ancestor (relative position).

fixed

fixed 和 absolute 是一样的, 唯一的区别是它的定点是 viewport.

sticky

参考之前写的 Angular 学习笔记 (Material table sticky 原理)

CSS Layout - The z-index Property

Link to W3Schools

当定位之后就容易产生重叠现象, 这时候就要 set z-index 来比权重了. number 越大就越在上面会被看见.

默认情况下大家都是 0, 就比 html 结构, 越下面的越在上层, 会被看见.

如果不希望这样常见的做法是让定位的 element z-index: -1.

CSS Layout - Overflow

Link to W3Schools

只有 block element 才可以 overflow 概念

overflow: visible, hidden, scroll, auto

visible 是 default 效果是内容会跑出去

hidden 是内容会被 hide 起来

scroll 是 always 有 scrollbar (but Apple Mac 不会)

auto 就是当内容超过的时候自动有 scroll

overflow-x, overflow-y 分别控制 horizontal 和 vertical.

CSS Layout - float and clear

Link to W3Schools

Float 是最早用于排版的方法, 但其实它的诞生是为了解决 p 和 image 想要左右排的效果. 但后来被发扬光大了.

Float 就是浮起来, 

Float 之后 parent 就不会被撑大了, 但是可以用 overflow hidden 来破, 这个叫 clearfix Hack.

还有一个比较 modern 的 way.

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

CSS Layout - Horizontal & Vertical Align

Link to W3Schools

各种居中技巧.