tags: css

CSS syntax

font-family: 字體，一個頁面建議兩種字體就好
font-size: 字體大小
font-weight: 字體粗度
text-align: 置左／中／右
color: 字體顏色
background-color: 背景顏色
opacity: 字體透明度(0~1)

You can use the <link> element to link HTML and CSS files together. The <link> element must be placed within the head of the HTML file.

css優先順位：id > class > tag
id很難被覆寫，盡量不要用

p {} - tag
.cursive{} - class
#bold{} - id
.class tag{} - 只有這個class下的tag會被改變
tag.class{} - 這個tag有寫到class才會改變
!important - 不管其他語法如何，都不會被覆寫

一個tag裡可以有很多個class
<h5 class="bold cursive capitalize">

Padding

可以直接對content做長寬的設定，利用padding來做一個透明的box增加content和border的間距

border視覺化框框

padding: (top)px (right)px (bottom)px (left)px
padding: (top&bottom)px (right&left)px
padding-top: px
padding-bottom: px
padding-left: px
padding-right: px

Margin

margin(left/right)的值會相加

Element A:
margin-right: 10px
Element B:
margin-left: 10px

margin between A and B is 20px

margin(top/bottom)的值取大的

Element A:
margin-bottom: 10px
Element C:
margin-top: 30px

margin between A and c is 30px

an image that has the following dimensions is 364 pixels wide and 244 pixels tall.

• 300 pixels wide
• 200 pixels tall
• 10 pixels padding on the left and right
• 10 pixels padding on the top and bottom
• 2 pixels border on the left and right
• 2 pixels border on the top and bottom
• 20 pixels margin on the left and right
• 10 pixels margin on the top and bottom

margin: 0 auto horizontally centers an element inside of its parent content area, if it has a width.

The overflow property can be set to display, hide, or scroll, and dictates how HTML will render content that overflows its parent’s content area.

The visibility property can hide or show elements.

預設值實際的box長寬計算方式=content+padding+border
The default value of the box-sizing property is content-box.

* {
  box-sizing: border-box;
}

如果在css開頭加這語法，content大小會自動調節，box長寬就會固定

Position

The position property allows you to specify the position of an element in three different ways.

• relative
  an element’s position is relative to its default position on the page.

• 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.

• fixed
  an element’s position can be pinned to any part of the web page. The element will remain in view no matter what.

• z-index
  an element specifies how far back or how far forward an element appears on the page when it overlaps other elements.

Display

property allows you control how an element flows vertically and horizontally a document.

• inline
  elements take up as little space as possible, and they cannot have manually-adjusted width or height.
• 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.
• block
  elements take up the width of their container and can have manually-adjusted heights.

Float

The float property can move elements as far left or as far right as possible on a web page.

Clear

You can clear an element’s left or right side (or both) using the clear property.

Color

• 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 hexademical numbers such as #23F41A.

• 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%).

• Alpha (Transparent)

rgba(r, g, b, a=0~1)
hsla(hue, saturation, lightness, a=0~1)

Typography

.banner p {
  font-weight: bold; - normal / bold
  line-height: 1.4; 當變粗體導致行距變小需要調整行距時用
  font-family: Helvetica, sans-serif; - 如果設定的字體觀看者的瀏覽器不支援，使用sans-serif
  font-size: 20px;
  font-style: italic;
}

可以透過font google增加字體(link比較快)
<link> tag or the @font-face property.

<link href="font google提供的字體連結" type="text/css" rel="stylesheet">

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap')

word-spacing property changes how far apart individual words are.
letter-spacing property changes how far apart individual letters are.
text-align property changes the horizontal alignment of text.