【靜態頁面架構】CSS之顏色與單位

佐珥玎發表於2018-08-28
架構CSS

CSS架構

一.顏色與單位
顏色:

  1. 前景色與背景色：設定文字和背景顏色
<style>
        html，body{
            background-color: blue;
            /* 前景色 - 就是指字型顏色(color)
            * 瀏覽器預設的字型顏色為黑色
            背景色 - 就是指指定元素的背景顏色(background-color)
            * 瀏覽器預設的背景顏色為透明的(transparent)
         */
        }
        h2 {
            color: red;/*設定文字顏色*/
            background-color: transparent;/*設定背景色*/
        }
    </style>
</head>
<body>
<h2>愛新覺羅</h2>
</body>
  1. 顏色的命名：
<style>
        /*1.單詞方式表示顏色 目前主流瀏覽器識別147種預定義顏色
              1；可選的數量有限
              2；不同瀏覽器中存在色差問題
            2.使用RGB方式表示顏色 稱為三原色(不能再分解的三種基本顏色)
              1；RGB - red(紅色)、green(綠色)、blue(藍色)
              2；具體使用方式
                a.函式式RGB顏色 - rgb(紅色, 綠色, 藍色)
                  1；每個顏色的值範圍 - 0 ~ 255
                b.十六進位制RGB顏色 - #紅色綠色藍色
                  1；每個顏色具有兩位
                  2；每個顏色的值範圍 - 00 ~ FF
                  3；如果每個顏色的兩位相同的話 -> 可以省略其中一個*/
        h2 {
            color: rgb(0,0,255);
            background-color: #CC0000;
        }
    </style>
</head>
<body>
<h2>呼延覺羅</h2>
</body>
  1. 透明度：是以opacity定義元素透明度；範圍值0到1.0
<style>
        /*html, body {
            background-color: black;
        }
        h1 {
            color: lightcoral;
            background-color: darkcyan;
            !*
                透明度 - 預設值為 1.0 (完全不透明)
                * 同時修改前景色和背景色
             *!
            opacity: 0.5;
        }*/

        h1 {
            color: lightskyblue;
            /*
                顏色的表示方式 - 除了有rgb()方式以外，還有rgba()方式
                * rgba()中的 a 表示透明度
             */
            background-color: rgba(255,0,0,0.5);
        }

    </style>

二。文字

結構化元素:

  1. 標題元素；標題大小用h1到h6表示

常用的h1到h3，h1最大，h6最小

<body>
<!--
標題元素為 <h1>到<6>
<h1>為最大，<h6>為最小
一般瀏覽器都有自己的預設樣式（也可以以CSS進行設定
標題都會獨佔一行，也是垂直排列的）-->
<h1>犬夜叉</h1>
<h2>犬夜叉</h2>
<h3>犬夜叉</h3>
<h4>犬夜叉</h4>
<h5>犬夜叉</h5>
<h6>犬夜叉</h6>
</body>
  1. 段落元素；是以p元素定義的
<body>
<p>Lorem ipsum dolor sit amet, consecteturconsequuntur dolor eaque facere facilis magnam, modi officiis pariatur possimus quasi, rerum sunt .</p>
<p>adipisicing elit. Atque cupiditate eos facere. A accusamus asperiores, at consectetur </p>
</body>
  1. 其他結構化元素
  • 粗體元素是以b元素定義的
  • 斜體元素是以i元素定義的
  • 上下標元素是以sup元素定義的
<body>
<p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit.</b> Accusamus at autem deleniti, dolor eos modi nihil <i>recusandae vel. Aspernatur beatae blanditiis, <i>ea fugiat maxime neque nobis non sequi veritatis vero.</p>
<p>E=MC<sup>2</sup>公式</p>
<p>H<sub>2</sub>0</p>
<hr><!--分割線-->
</body>

4.換行符與水平線；換行是以br元素定義的，水平線是以hr元素定義的
5.空白元素；是以p元素定義的，兩個空格以上的，只顯示一個空格

<body>
<!--空白摺疊
瀏覽器只識別一個空格，多個空格的話，只識別一個空格-->
<p>愛     新覺羅</p>
</body>

語義化元素:

<body>
<strong>呼延覺羅</strong>呼延覺羅
<!--strong元素加粗元素-->
<em>呼延覺羅</em>呼延覺羅
<!--em元素表示強調元素-->
<br><!--換行-->
<blockquote>
    <p>東北三省又稱“東三省”，為東北清朝末年以後的三個行政區，與地理文化上的東北地區沒有關係</p>
</blockquote>
<!--blockquote元素表示引用元素，縮排效果-->
<p>說明:<q>宣告不是一個HTML</q></p>
<!--<q>引用元素 - 新增雙引號-->
<p><cite>東北三省又稱“東三省”</cite>為東北清朝末年以後的三個行政區，與地理文化上的東北地區沒有關係</p>
<!--<cite>引文元素 - 斜體效果-->
<br>
<p><dfn>東北三省又稱“東三省”</dfn>為東北清朝末年以後的三個行政區，與地理文化上的東北地區沒有關係</p>
<address>
    <p>東三省</p>
    <p>吉林省吉林市</p>
</address>
</body>

內容修改元素；以ins表示帶有下劃線的文字
以del表示帶有刪除線的文字

<body>
<p>東北 <del>三省</del> 又稱 <ins>東三省</ins></p>
</body>

字型樣式:

  1. 字型系列；以font-family表示
 <style>
        h2, p {
            /*備選字型，是以使用者電腦中已安裝的字型
            必須是使用者電腦已存在的字型
            一般可選的字型數量不是很多
            一次性指定多個字型系列 - 中間使用逗號分隔
            */
            font-family: 新宋體, sans-serif;
        }
    </style>
  1. 字型大小；是以font-size用於設定字型大小
 <style>
        h2, p{
            font-family: 新宋體, sans-serif;
        }
        P{/*一般使用畫素值（px）
        百分值：瀏覽器預設字型大小為（16px）=100%*/
            /*font-size: 200%;表示瀏覽器預設字型的2倍*/

            font-size: small;
        }
    </style>
  1. 粗體；是以font-weight用於設定字型粗細程度
<style>
        h2, p{
            font-family: 新宋體, sans-serif;
        }
        p{
            font-size: 200px;
            font-weight: 900;/*表示頁面字型加粗*/
            font-style: oblique;/*表示斜體*/
        }
    </style>

4.font屬性；是可同時設定字型的樣式

    <style>
        p {
            /* 定義樣式的順序是固定的 - 建議使用這種簡寫屬性 */
            font: bold italic large serif ;
        }

    </style>
</head>
<body>
<h1>呼延覺羅</h1>
<p>愛新覺羅</p>
</body>

二。文字樣式:

  1. 文字裝飾；
 <style>
        p {
            /* text-decoration提供下劃線、上劃線及刪除線 */
            text-decoration: line-through lightcoral dashed;

            /*
                text-decoration-line: 表示提供的下劃線、上劃線及刪除線
                text-decoration-color: 表示線的顏色
                text-decoration-style: 表示線的樣式
             */
            /*text-decoration-line: underline;
            text-decoration-color: lightcoral;
            text-decoration-style: dashed;*/
        }
    </style>
</head>
<body>
<p>愛新覺羅</p>
</body>
  1. 行間距；
<style>
        span{
            line-height: 50px;/*表示垂直文字的距離大小*/
        }
    </style>
</head>
<body>
<span>呼延覺羅</span>
<br>
<span>愛新覺羅</span>
</body>
  1. 字母間距和單詞間距；
<style>
        #q1 {
            letter-spacing: 10px;
        }
        #q2 {
            word-spacing: 10px;
        }
        #q3 {
            /* 字母間距允許設定漢字之間的距離 */
            letter-spacing: 10px;
        }
    </style>
</head>
<body>
<p id="q1">aixinjueluo</p>
<p id="q2">front end dev</p>
<p id="q3">愛新覺羅</p>
</body>
  1. 水平對齊方式；
<style>
        /* 水平方向對齊方式預設 - 左對齊 */
        #p1 {
            text-align: right;
        }
        #p2 {
            text-align: center;
        }
        #p3 {
            text-align: justify;
        }
    </style>
</head>
<body>
<p>愛新覺羅</p>
<p id="p1">愛新覺羅</p>
<p id="p2">愛新覺羅</p>
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam aut facere fugit ipsa iste laboriosam natus nulla, </p>
</body>
  1. 垂直對齊方式；
<style>
        /* 垂直方向對齊方式預設 - 底部對齊 */
        img {
            /* 設定圖片以什麼方式與文字對齊 */
            vertical-align: top;
        }
    </style>
</head>
<body>
<p>Lorem ipsum <img src="imgs/frame_image.svg"> dolor sit amet, consectetur adipisicing elit. </p>
</body>

相關文章