CSS基礎知識1

1.1基本概念
CSS指層疊樣式表
爲什麼需要用CSS
HTML描述了要呈現的內容,而CSS則定義了這些內容的呈現形式,比如字體、顏色等。使用CSS能夠將頁面內容和呈現形式有效分離,有利於分工合作,也有利於快速更換不同呈現形式。
使用樣式表可以有三種方式
(1) 內聯樣式

<p style="font-size: 24px;color: green">內聯層疊樣式</p>

將樣式定義在style屬性中。內容和表現形式高度耦合,維護困難,不利於分工合作。
只應用當前頁面中使用。
(2)內部樣式

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        p{
            font-size: 36px;
            color: aqua;
        }
    </style>
</head>
<body>
<p>內部樣式的演示a</p>
<p>內部樣式的演示b</p>
</body>
</html>

<head>標籤中通過<style>標籤來定義
內容和表現形式的耦合程度降低了,但都還在ntml文件中,沒有實現完成分離。
定義的樣式只能在本頁面中使用
(3)外部樣式
首先需要定義一個樣式表文件(.css)

/*定義了應用於段落的樣式:
字體大小:36
字體顏色*/
p{
    fornt-size:36px;
    color: red;
}

CSS中也可以使用注射,形式爲/*......*/
然後需要使用這些樣式的HTML文件引入該樣式表文件。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>外部樣式表</title>
    <link rel="stylesheet" type="text/css" href="CSS/E102-01-02.css">
</head>

外部樣式表是的內容和表現形式徹底分離,有利於分工合作及維護可在多個HTML中應用。
1.2顏色
自然界的顏色數量是沒有限量的,但計算機只能表達有限的信息。
所有的顏色都是有紅色(Red)、綠色(Green)、和藍色(Blue)三種顏色調配而成,這三種顏色俗稱三原色。
CSS中用8表示一個顏色,那麼可以表示28種顏色,即256種顏色。所以總共可以表示256*256*256種顏色(真彩色)。
CSS中有多種顏色表示形式:
(1)十六進制形式:#ff0000

<p style="color: #800000">十六進制顏色表示形式</p>

(2)RGB顏色:rgb(128,0,0)

<p style="color: RGB(236,0,0)">十六進制顏色表示形式</p>

(3)RGBA顏色

 <p style="color: RGBA(243,0,2,0.5)">十六進制顏色表示形式</p>

在RGB顏色的基礎上增加了透明度分量Alpha
(4)HSL顏色

<p style="color: HSL(120,50%,50%)">HSL顏色表示形式</p>

顏色也可以由 另外三個分量來表示即色飽和度和明度
(5)HSLA顏色

<p style="color: HSLA(120,50%,50%,0.4)">RGBA顏色表示形式</p>

在HSL顏色的基礎上增加了Alpba分量
(6)預定義顏色

<p style="color: black">預定義顏色表示形式</p>

CSS提供了一些常用的預定義顏色,比如red、green等
1.3尺寸單位
cm:釐米;
mm:毫米;
in:英寸(inch);
px:像素(pixel);
%:百分比;
em:相對於父元素的字體大小;
vw:視窗的寬度:視窗寬度是100vh(viewport width);
視口被均分爲100單位的vw;
vh:視窗的高度:視窗高度是100vh(viewport height);
視口被均分爲100單位的vw。

哪些是絕對單位?哪些是相對單位?
絕對單位:px、in、cm、mm。
相對單位:%、em。
其中vm、vh、%是百分比單位。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章