CSS

CSS是Cascading Style Sheets的簡寫，用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言，由W3C定義和維護。目前最新版本是CSS2.1，為W3C的推薦標準。CSS3現在已被大部分現代瀏覽器支援。

HTML內直接使用

<p style="color:red; background:yellow; font-weight:bold;">
    這個段落同樣會被顯示為黃底紅字粗體。
</p>

HTML內

<style>
body {
    background-color: lightblue;
}
h1 {
    color: white;
    text-align: center;
}
p {
    font-family: verdana;
    font-size: 20px;
}
</style>

HTML外

<link rel="stylesheet" type="text/css" href="main.css">

CSS Colors

<body bgcolor="blue" text="black" link="orange">
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

CSS Box Model

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

Box model四部分

Content：內容
Padding：在 Content 內部的透明區域，在 box 裡面
Border：在 Padding 和 Content 的外面
Margin：Boxes 之間的距離-放shadow

CSS Text Alignment

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

CSS Font

p {
    font-family: "Times New Roman", Times, serif;
}

CSS Link

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

CSS Position

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

CSS選擇器

類型選擇器（h1，p等）——elementname
類別選擇器（class）——.elementname
ID選擇器（ID）——#elementname
萬用選擇器—— ns| |
屬性選擇器——[attribute]

Sass (Syntactically Awesome Stylesheets)

$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 10%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $blue

SCSS

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

LESS

LESS支持自定義變量。在LESS中，變量以「@」開頭，賦值時以「:」進行賦值。經過LESS的翻譯，這些變量最終會轉換為符合CSS標準的值。

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

網路字型

https://fonts.google.com/ Google 網路字型完全免費的特性，讓 Google 網路字型成為最常被引用的網路字型。一般字型可以分為有襯字型(serif)及無襯字型(sans-serif)。有襯字型常用於印刷，而網路常用無襯字型。 https://en.wikipedia.org/wiki/Serif

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

font-family: 'Roboto', sans-serif;

常用的中文網頁字型 微軟正黑體/Google Fonts 的思源體

font-family: Microsoft JhengHei;
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
font-family: 'Noto Sans TC', sans-serif;

Chapter5 CSS

CSS