Lesson 2: CSS

這篇文章整理我在這個course的重點，並非教學文章。

CSS Selectors

1. Tags

p {
  color: red;
}

2. Classes

.brand {
    color: red;
}

3. Ids

#solo {
  color: purple;
}

Pseudo-classes

See the Mozilla Dev Docs here

selector:pseudo-class {
  property: value;
}

Attributes

documentation

Multiple Selectors

h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica", "Arial", sans-serif;
}

Linking CSS

1. Inline

<p style="color: red;">I'm learning to code!</p>

2. Style Tag

<head>
  <style>
    p {
      color: red;
      font-size: 20px;
    }
  </style>
</head>

3. External Stylesheets

<link href="https://udacity.com/style.css" type="text/css" rel="stylesheet" />

Main CSS file

// at the top of your main CSS file

@import “./layout”;
@import “./images”;
@import “./blog-cards”;

Specificity

CSS selector的優先順序：

The Box Model

我們指定的是width和height，padding、border、margin都是向外加上去的。

See it with your own eyes

Wanna see every single "box" that makes up a page? Try putting this in the stylesheet temporarily:

* {
  border: 1px solid red !important;
}

Display and Positioning: Z-index

圖層概念

Without explicitly using z-index the last element written to the DOM (the last element you wrote in your code) will appear on top of all the others, and so on up the chain of your elements.

If more elements were involved we could use a wider range of values and the same rules would apply-- so that an element with z-index 100 would be displayed above an element with a z-index value of 99, and below.

#one {
  background: red;
  top: 100px;
  left: 150px;
  z-index:1;
}

#two {
  background: yellow;
  top: 80px;
  left: 100px;
  z-index: -1;
}

Absolute vs Relative Units

There’s a lot of units available, but the most common ones you’ll encounter are px (pixel) and em (pronounced like the letter m). The former is what you would intuitively call a pixel, regardless of whether the user has a retina display or not, and the latter is the current font size of the element in question.

Absolute

  • px

  • in

  • mm

  • cm

Many font sizes on the web for example, are set to somewhere between 12px-30px, A font size set to 16px will appear the same size no matter how big the screen.

Relative

  • % - percentage of something, such as screen width

  • em - A unit equivalent to the current font size - if 12px font, 2em would be 24px

  • vw - units of viewport width (essentially the browser’s rendering space). Each unit is 1/100th of width

  • vh - the same as above but for viewport height

The viewport is the user's visible area of a web page. CSS Units - What is the difference between vh/vw and %?

The em unit is very useful for defining sizes relative to some base font. For example, if you set the font-size of body to 16px, you could then set other element’s font-size value relative to that 16px. Here’s what that could look like:

body {
 font-size: 16px;
}

#one {
  font-size: 1.5em
}

#two {
  font-size: 0.5em
}

Typography

Text alignment

p {
  text-align: left;
}

Other accepted values are right, center, or justify.

Underlined Text

Remove the default underline from all of our links

a {
  text-decoration: none;
}

Deleted Text

Line-through to strike out “deleted” text. But, remember that meaning should always be conveyed through HTML—not CSS. It’s better to use the <ins> and <del> elements instead of adding a line-through style to, say, an ordinary <p> element.

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

ins = insert, del = delete

Line Height

行高、行間距

  • margin-top (or padding-top)

  • margin-bottom (or padding-bottom)

  • line-height

margin-top defines vertical space between separate paragraphs. The new line-height property determines the amount of space between lines in the same paragraph.

Fonts

Font Family

p.b {
  font-family: Arial, Helvetica, sans-serif;
}

Font Weight & Style

一種定義字強弱的方式，100 至 900之間。

“Black” usually means 900, “bold” is 700, “regular” is 400, etc.

但並非每種字體都支援所有的weight。

Each letter in every face is hand-crafted to ensure it provides a uniform flow to its text.

Emphasis & Importance

For emphasized (usually italics) words, use the <em> tag.

<p>
  We <em>have</em> to buy the latest version of the pet hair remover vacuum, the
  floor is covered with fur!
</p>

For important words, use the <strong> tag. Don’t use <strong> only to put some text in bold, but rather to give it more importance.

External Fonts

One commonly used example is Google Fonts, which provides a great number of fonts free for use in web projects.

<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>

In CSS:

.box{
  font-family: 'Montserrat', sans-serif;
}

Colors

Colors in CSS can be specified by the following methods:

  1. Hexadecimal colors

  2. RGB colors

  3. Predefined/Cross-browser color names

  4. RGBA colors

  5. HSL colors

  6. HSLA colors

Let's talk about the first 3 since those are the most common.

Hexadecimal Colors

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF.

#p1 {
  background-color: #ff0000;
}

RGB Colors

Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%).

#p1 {
  background-color: rgb(255, 0, 0);
}

#p2 {
  background-color: rgb(0%,0%,100%);
}

Predefined/Cross-browser Color Names

There's quite a few of these - check out this list to see more.

Additional Topics on CSS

For more information on CSS background images, see the MDN documentation here.

For more information on CSS in general, you can see the excellent website CSS-Tricks.

Previous2. CSS, Website Layout, Website ComponentsNextLesson 3: Flexbox

Last updated