MIT Weblab笔记 - HTML & CSS Basis

Introduction

HTML provides the structure of the web pages, while CSS is used to control the layout of these pages.

HTML

Structure

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
  <head>
    # appears at the browser tabs
    <title>Web Page</title>
    # link to the css file for styling
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>Welcome to my first web page.</p>
  </body>
</html>
  • <head> contains meta-information about the document, such as its title, link to CSS files
  • <body> contains the content that will be displayed on the web page.

Syntax

Headings

<h1> to <h6>.

Paragraphs

<p>, start on new line.

Divisions

<div>, represents a block-level portion of a document such as a few paragraphs, or an image with its caption. Starts on new line.

Sections

<section>, is used to group meaningful components, like introduction, about, ,etc. Starts on new line.

Spans

<span> represents an inline portion of a document, for example words within a sentence.

Lists

Unordered Lists

1
2
3
4
5
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered Lists

1
2
3
4
5
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
1
<a ref="http://xxx"> content </a>

Images

1
<img src="image.png" />

Relative Path

A relative path points to a location that is relative to the current file’s location.

  • Current Directory (./). It refers to the folder that contains the current file you’re working on. e.g. <img src="./image.jpg">, image.jpg is in the same directory as the HTML file or the script calling it.
  • Parent Directory (../)

CSS

Types

  • Inline CSS
    Using the style attribute:

    1
    <h1 style="color: red;">This is a heading</h1>

  • Internal CSS
    Define within a <style> tag inside the HTML document’s <head> section:

    1
    2
    3
    4
    5
    6
    7
    8
    <head>
      <style>
        p {
          color: green;
          font-family: Arial, sans-serif;
        }
      </style>
    </head>

  • External CSS
    Define in a separate file:

    1
    2
    3
    <head>
      <link rel="stylesheet" href="styles.css">
    </head>

Syntax

Import fonts from https://fonts.google.com/.

1
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,600");

Global Definition

Root variables, defining CSS custom properties (variables) for colors that can be reused throughout the stylesheet. Other parts of the css file can use it by var(--grey).

1
2
3
4
5
6
7
8
9
10
:root {
  --primary: #396dff;
  --grey: #f7f7f7;
  --white: #fff;

  --xs: 4px;
  --s: 8px;
  --m: 16px;
  --l: 24px;
}

Element

The style defined here automatically applies to the entire body of the document (inside <body> and </body>).

1
2
3
4
body {
  margin: 0;
  font-family: "Open Sans", sans-serif;
}

Class

Style for class. <div class="navTitle">. An element can have multiple classes. Can use the same class on multiple elements.

1
2
3
4
5
6
7
.navTitle {
  color: var(--primary);
  font-size: 20px;
  margin: 0;
  font-weight: normal;
}

ID

Style for ID. <div id="unique">. An element can only have one ID. ID must be unique in any give HTML document.

1
2
3
4
#unique {
  color:red;
  font-family: Arial;
}

Style Rules

Priority:

  1. Inline Style
  2. ID Attributes (#unique {})
  3. Classes (.container {})
  4. Elements (div {})

Formatting Techniques

The Box Model

  • Margin: the space outside the element’s border.
  • Border: border surrounds the padding of the element.
  • Padding: the space between the element’s border and its content. It creates space inside the parent element, around the content area.

Margin and padding are transparent. Width and height are dimensions of the element.

1
2
3
4
5
.xxClass {
  margin: 0px;
  border: 1px solid black;
  padding: 10px;
}

To inspect an element’s box model and other detailed attributes:

1. Open the browser
2. Inspect
3. Command + Shift + C
4. Click on the element to inspect

Margin Ordering

Margin orders in the sequence of top, right, bottom, left

  1. margin: 10px;: All sides 10px
  2. margin: 10px 20px;: top and bottom 10px, left and right 20px
  3. margin: 10px 20px 30px;: top 10px, right 20px, bottom 30px, left 20px
  4. margin: 10px 20px 30px 40px;: top 10px, right 20px, bottom 30px, left 40px

See this demo

Positioning

In HTML, elements are typically laid out according to the normal document flow. This means they appear in the order they are defined in the HTML. If we want to explicitly set an element’s position, we can use the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first.

See this demo

  • static: Default, position in document flow
  • relative: Position relative to default position via top, right, bottom, left properties
  • fixed: Position relative to the viewport, which means it always stays in the same place even if the page is scrolled
  • absolute: Position relative to the nearest positioned ancestor

Flex

Flex is a flexible box. It can control direction, sizing, distribution. All direct children of a flexible container becomes flexible items. See this flex demo.

An example flex container defined in CSS:

1
2
3
4
.flex-container {
  display: flex;  # this attribute makes this class a flex container
  background-color: #f1f1f1;
}

Order

1
2
3
4
5
6
<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>

Sizing

Make the third flex item grow 2 times faster than the other flex items:

1
2
3
4
5
<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 2">3</div>
</div>

Set the initial length of the third flex item to 200 pixels:

1
2
3
4
5
6
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

An example of horizontal direction: The two sections are now in a row and evenly distributed in the flex container.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="u-flex">
  <section class="subContainer u-textCenter">
    <h4>About Me</h4>
    <p>
      I am more of a turtle person but I'm just trying to fit in and get a catbook.
    </p>
  </section>

  <section class="subContainer u-textCenter">
    <h4>My Favorite Type of Cat</h4>
    <p>
      I actually prefer turtles.
    </p>
  </section>
</div>
1
2
3
4
5
6
7
8
.u-flex {
  display: flex;
  /* justify-content: space-between; */
}
.subContainer {
  flex-grow: 1;
  flex-basis: 0;
}
MIT Weblab
#Web Development #CSS #HTML
MIT Weblab笔记 - HTML & CSS Basis
https://thiefcat.github.io/2024/06/24/MIT-Weblab/HTML_CSS/
Author
小贼猫
Posted on
June 24, 2024
Licensed under