[CSS] Basic Learning

CSS
  •     Cascading Style Sheets 的縮寫
  •     用來定義HTML元素如何呈現
Selector (選擇器) : 正常來說是HTML內的元素
Property : 通常是元素內的屬性
每個宣告都有Property(?)+value(值)
範例 :
p
{
    color:red;
    text-align:center;
}
除了可以設定HTML元素的呈現方式外,還可以個別的id或是class去做特定的宣告!
In addition to setting a style for a HTML element, 
CSS allows you to specify your own selectors called "id" and "class".

id選擇器
  • 對特定的,唯一的HTML元素去定義
  • id其實就是HTML元素的屬性,因此id選擇器被定義會加上#號
  • 範例:
    • <style type="text/css">
    • #para1           <-----配合下面的id="para1",且前面要多加上#號!
    • {
    • text-align:center;
    • color:red;
    • } 
    • </style>

    • /*HTML內*/

    • <body>
    • <p id="para1">Hello World!</p>
    • <p>This paragraph is not affected by the style.</p>
    • </body>
class選擇器
  • 對"一群"的HTML元素去定義,不像id選擇器只能定義一個
  • 允許使用者對同樣的class設定特定的style
  • class選擇器也是使用HTML元素的屬性(atrribute),且被"."定義
  • 範例1:
    • /*css的部分*/
    • <style type="text/css">
    • .center   <--定義一個class selector with "."
    • {
    •     text-align:center;
    • }
    • </style>

    • <!--HTML的部分-->
    • <body>
    • <h1 class="center">Center-aligned heading</h1>
    • <p class="center">Center-aligned paragraph.</p> 
    • </body>
  • 你也可以用class選擇器去定義特定的HTML元素的呈現方式
  • 範例2:
    • /*css的部分*/
    • <style type="text/css">
    • p.center  <--只對HTML元素內的p去做class選擇器的定義
    • {
    •     text-align:center;
    • }
    • </style>

    • <!--HTML的部分-->
    • <body>
    • <h1 class="center">This heading will not be affected</h1>
    • <p class="center">This paragraph will be center-aligned.</p> <--只有這行有影響
    • </body>
插入CSS有三種方式
  1. 外部style sheet
  2. 內部style sheet
  3. 在行內的style
要把style套用到很多網頁的話,外部style sheet是比較好的方式
需要套用的網頁要使用<link>的tag,且將<link>放在<head></head>內
例如:
  • <head>
  • <link rel="stylesheet" type="text/css" href="mystyle.css" />
  • </head>
External style sheet
在外部的.css檔內不會有任何HTML的標籤(tag)在
且副檔名必須是.css
.css的內容例如 :
  • hr {color:sienna;}
  • p {margin-left:20px;} * 20 px(value跟單位中有空白)只在IE有用!其他的不能用
  • body {background-image:url("images/back40.gif");}
Internal style sheet
單一一個網頁有自己獨特的style時,可使用內部的style sheet寫法
用<style></style>將要定義的內容包起來!
優先順序 : Inline > Internal > External

**Multiple Style Sheets**
當External與Internal或是Inline混用在同個HTML元素(選擇器)上,會依照優先順序
Inline > Internal > External 合成一種style!
舉例 : 
在External style sheet中對h3這個元素有底下這些properties
h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}
但卻又在內部的<head>中有定義<style>
<style>
h3
{
    text-align:right;
    font-size:20pt;
}
</style>
則依照優先順序Inline > Internal > External,
會合成
h3
{
    color:red;
    text-align:right;
    font-size:20pt;
}

Basic的到此結束! (From W3Schools)

此為學術參考用,若有侵權請mail至qazwsxedccsqzse@gmail.com
當收到信件會即刻撤下! 感謝

留言

張貼留言

這個網誌中的熱門文章

[MySQL] schema 與資料類型優化

圖片
選擇優化的資料類型 原則: 越小越好 因為會佔用最小的磁碟、記憶體與CPU快取。 越簡單越好 操作整數比操作字串代價低，因為字串排序規則 ex: 儲存ip應該用 unsigned int - 4 bytes, 用 varchar 會用到 15 bytes 儲存時間應該用 mysql 內建的時間類型 DATETIME, TIMESTAMP可以儲存相同資料：時間日期，精確到秒 TIMESTAMP 只用 DATETIME 一半的儲存空間，根據時區自動變化 TIMESTAMP 允許的時間範圍比 DATETIME 小很多 避免 NULL 在 innodb 上有單獨的 bit 儲存 null 值，但在 myisam，但還是盡量避免 整數類型 tinyint - 8 bits smallint - 16 bits mediumint - 24 bits int - 32 bits bigint - 64 bits 如果是有正負數的，會因為 1 bits 會用來記錄正負，故範圍為 -2^(n-1) ~ 2^(n-1) unsigned 的範圍則是 -2^n ~ 2^n MySQL 可以為整數指定寬度，例如 INT(11)，其實沒什麼意義，11只是表示與 MySQL 相關工具(client 端的 cli) 用來顯示的長度，對於儲存與計算來說，INT(1)與INT(20)是一樣的。 實數類型 decimal(M,N) - M: 最大位數, N: 小數點後有幾位 ex: decimal(18, 9) => 9位數字.9位數字，總共使用 9 個 bytes float => 4 bytes double => 8 bytes decimal的計算雖然比較精確，但需要額外，但需要額外的空間與計算開銷，資料量較大時，可以用 bigint 代替 decimal，假設需要精準到萬分之一，則可以將數字*1百萬，將結果存在 bigint 內，可以同時避免福點數計算不精準與 decimal 計算代價太高。 字串類型 VARCHAR row_format=fix，這樣就都會固定長度，沒意義 varchar會需要額外1~2 bytes記錄長度, 假設用 latin1 charset, varchar(10) => 11 bytes, varchar(1000) => 1002...
閱讀完整內容

[翻譯] 介紹現代網路負載平衡與代理伺服器

圖片
原文(Source): https://blog.envoyproxy.io/introduction-to-modern-network-load-balancing-and-proxying-a57f6ff80236 什麼是網路負載平衡 (network load balancing) 與 代理伺服器的代理行為 (proxying)? 維基百科是這樣定義負載平衡的 > 負載平衡藉由工作量分配到多台運算資源, 例如: 主機, 主機叢集, 網路連結, CPU,  硬碟等. > 負載平衡盡量最佳化資源的使用, 最大化每個最大化每個資源的吞吐量(生產能力), 最小化反應時間, 避免單一資源工作量過重 > 使用多個資源來當負載平衡來提升可靠與高可用而不是單一個資源 > 負載平衡總是使用獨立的軟體或硬體, 例如獨立的 multilayer switch, 或是 DNS主機的程式 上面的定義用於各資訊領域的各方面, 不單單只有網路而已. 作業系統使用負載平衡在實體處理器去分配運算任務, 容器編排服務像是K8S使用負載平衡在不同的主機叢集中去分配任務, 而網路負載平衡器則是將網路上進來的任務分配給可用的後端主機們. 剩下的文章主要都是講解關於網路負載平衡. 圖1 圖1展示了從應用層來看網路負載平衡. 許多的用戶端(Client)透過只需要向 load balancer 請求, load balancer就會將這些request, 也就是上述提到的任務分配給可用的後端服務. Load balancer位於Client 與後端之間執行幾個重要的任務: 服務發現 (Service discovery) 後端的服務在系統的哪裡, 他們的IP(位置)是什麼? (也就是load balancer該如何與後端主機溝通) 服務的狀態檢查 (Health checking) 現在的服務是否是可接受請求的 負載平衡 (Load Balancing) 該用什麼樣的演算法去平均將request分配給可用的服務 在分散式系統使用負載平衡主要有幾個好處: 主機抽象 (Naming abstraction): 每個client 不需要知道每個後端服務在哪, 只需要利用預先定義好的機制向負載平衡器...
閱讀完整內容