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;