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;
}
/* 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;

results matching ""

    No results matching ""