Interactive Media Design and Production-----CSS

一. What is CSS?

•CSS stands for Cascading Style Sheets
•CSS describes how HTML elements are to be displayed on screen, paper, or in other media
•CSS saves a lot of work. It can control the layout of multiple web pages all at once •External stylesheets are stored in CSS files

二.CSS Style & Rules

Style

CSS rules

•A CSS rule-set consists of a selector and a declarationblock:
• The selector points to the HTML element you want tostyle
• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
• A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

CSS Syntax and Selectors

若要對選擇器進行分組，請使用逗號分隔每個選擇器

三. Inline, Internal & External Style Sheets

What Does “Cascading” Mean?

We use the term “cascading” because there is an established order of priority to resolve formatting conflicts:

1. Inline style (highest priority)
2. Internal style sheet (second priority)
3. External style sheet (third priority)
4. Web browser default (only if not defined elsewhere)
   

Three Ways to Use CSS

Inline Style由於作用域有限，本課程不會過多使用

Internal Style Sheet

External Style Sheet

四. Class, ID, Pseudo-Class, Pseudo-Element

HTML Class

HTML ID

CSS Syntax and Selectors

pseudo-class僞類

五. CSS Box Model

•All HTML elements can be considered as boxes
•The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

六. CSS Property, units