CSS Review 2

符号英文

{ } curly braces

Position

static - the default value (it does not need to be specified)默认的
relative - 与relative相似，但多了top left right botton等设置，可能会overflow其他element，可以令absolute子元素根据它来定位
absolute - 这个会depend on （based on上一个）relative，位置根据absolute来定位，absolute会无视static的定位，但受relative影响，滚动的话会受影响
fixed - 与absolute相似，但它会固定在屏幕某位置，不会受滚动影响。假如设置了top等属性，即使放在relative里面，也不会受影响，它只会根据body来定位。假如没有设置top等属性，就会根据relative来定位
sticky - default和fixed的结合
z-index - The value is a standalone integer. 数字越大，越在上层

Inline Display

inline： such as <em>, <strong>, and <a>, links
block
inline-block

Display: Inline-Block

用法：display: inline-block;

Float

The float property is often set using one of the values below:

left - moves, or floats, elements as far left as possible.
right - moves elements as far right as possible.

Clear

The clear property specifies how elements should behave when they bump into each other on the page. It can take on one of the following values:
left—the left side of the element will not touch any other element within the same containing element.
right—the right side of the element will not touch any other element within the same containing element.
both—neither side of the element will touch any other element within the same containing element. none—the element can touch either side.

Review: Layout

The position property allows you to specify the position of an element.
When set to relative, an element’s position is relative to its default position on the page.
When set to absolute, an element’s position is relative to its closest positioned parent element. It can be pinned to any part of the web page, but the element will still move with the rest of the document when the page is scrolled.
When set to fixed, an element’s position can be pinned to any part of the web page. The element will remain in view no matter what.
When set to sticky, an element can stick to a defined offset position when the user scrolls its parent container.
The z-index of an element specifies how far back or how far forward an element appears on the page when it overlaps other elements.
The display property allows you to control how an element flows vertically and horizontally in a document.
inline elements take up as little space as possible, and they cannot have manually adjusted width or height.
block elements take up the width of their container and can have manually adjusted heights.
inline-block elements can have set width and height, but they can also appear next to each other and do not take up their entire container width.
The float property can move elements as far left or as far right as possible on a web page.
You can clear an element’s left or right side (or both) using the clear property.

Color

color - this property styles an element’s foreground color.
background-color - this property styles an element’s background color.

h1 {
  color: red;
  background-color: blue;
}

Hexadecimal

darkseagreen: #8FBC8F
sienna:       #A0522D
saddlebrown:  #8B4513
brown:        #A52A2A
black:        #000000 or #000
white:        #FFFFFF or #FFF
aqua:         #00FFFF or #0FF

RGB Colors

h1 {
  color: rgb(23, 45, 23);
  /*rgba(0, 255, 0, 0.1) 加透明度*/
}

Hue, Saturation, and Lightness

color: hsl(120, 60%, 70%);
/*hue-saturation-lightness
色相、饱和度、亮度*/

Opacity and Alpha

color: hsla(34, 100%, 50%, 0.1);
/*色相、饱和度、亮度、透明度 */

Color review

There are four ways to represent color in CSS:

Named colors—there are more than 140 named colors, which you can review here.
Hexadecimal or hex colors
- Hexadecimal is a number system with has sixteen digits, 0 to 9 followed by “A” to “F”.
- Hex values always begin with # and specify values of red, blue, and green using hexadecimal numbers such as #23F41A.
- Six-digit hex values with duplicate values for each RGB value can be shorted to three digits.
RGB
- RGB colors use the rgb() syntax with one value for red, one value for blue and one value for green.
- RGB values range from 0 to 255 and look like this: rgb(7, 210, 50).
HSL
- HSL stands for hue (the color itself), saturation (the intensity of the color), and lightness (how light or dark a color is).
- Hue ranges from 0 to 360 and saturation and lightness are both represented as percentages like this: hsl(200, 20%, 50%).
- You can add opacity to color in RGB and HSL by adding a fourth value, a, which is represented as a percentage.

Typography

Fallback Fonts and Font Stacks Web safe fonts are good fallback fonts that can be used if your preferred font is not available.

h1 {
  font-family: Caslon, Georgia, 'Times New Roman';
}

Font Weight

bold: Bold font weight.
normal: Normal font weight. This is the default value.
lighter: One font weight lighter than the element’s parent value.
bolder: One font weight bolder than the element’s parent value
```
.right-section {
font-weight: bold; 
}
```

Font Style

The italic value causes text to appear in italics. The font-style property also has a normal value which is the default.

h3 {
  font-style: italic;
}

Text Transformation

change to uppercase or lowercase

h1 {
  text-transform: uppercase;
}

Text Layout

p {
  letter-spacing: 2px;
}

h1 {
  word-spacing: 0.3em;
}

p {
  line-height: 1.4;
}

h1 {
  text-align: right;
}

Web Font

 <head>
  <!-- Add the link element for Google Fonts along with other metadata -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
</head>

p {
  font-family: 'Roboto', sans-serif;
}

Font face

Example 1

@font-face {
  font-family: 'MyParagraphFont';
  src: url('fonts/Roboto.woff2') format('woff2'),
       url('fonts/Roboto.woff') format('woff'),
       url('fonts/Roboto.ttf') format('truetype');
}

p {
  font-family: 'MyParagraphFont', sans-serif;
}

Example 2

@font-face {
  font-family: 'GlegooBanner';
  src: url('../fonts/Glegoo-Regular.woff2') format('woff2'),
       url('../fonts/Glegoo-Regular.woff') format('woff'),
       url('../fonts/Glegoo-Regular.ttf') format('truetype');
}

p{
    font-family: 'GlegooBanner';
}

Typography Review

Typography is the art of arranging text on a page.
Text can appear bold or thin with the font-weight property.
Text can appear in italics with the font-style property.
The vertical spacing between lines of text can be modified with the line-height property.
Serif fonts have extra details on the ends of each letter. Sans-Serif fonts do not.
Fallback fonts are used when a certain font is not installed on a user’s computer.
The word-spacing property changes how far apart individual words are.
The letter-spacing property changes how far apart individual letters are.
The text-align property changes the horizontal alignment of text.
Google Fonts provides free fonts that can be used in an HTML file with the <link> tag or the @font-face property.
Local fonts can be added to a document with the @font-face property and the path to the font’s source.

BY Guanqiao Huang