[MAN鐵人賽]Day 03-[課前準備]淺談CSS

2013-09-18

1712
0
CSS

摘要:[MAN鐵人賽]Day 03-[課前準備]淺談CSS

[課前準備]淺談CSS

CSS3

CSS介紹

CSS 的全名為Cascading Style Sheets，是一種樣式表(Stylesheet) 語言，主要功能是為了提供HTML或 XHTML 在呈現上面的一個顯示層(好比超人的服裝一樣)，將透過改變CSS的屬性，我們可以讓相同的HTML元素呈現不同的風貌。

在使用上分為兩位引入方式，使用如下面格式

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title></title>
        <!--1. 引入指定的css檔案-->
        <link rel="stylesheet" href="index.css">
        <!--2. 直接宣告CSS屬性-->
        <style type="text/css">
            h1{
                color: red; 
            }
            h2{
                color:green;
            }
        </style>
</head>
<body>
    <h1>RED</h1>
    <h2>GREEN</h2>
</body>
</html>

上面的的link就是把指定的css檔案加入到頁面中使用，而style則是在頁面自己宣告css屬性使用，在使用上就是透過選擇器的方式，選到指定的dom物件後作修改，而選擇的方式可以透過元素型別,id名稱,class名稱等方式來抓取。

CSS3與CSS4後面數字的差異是代表他推出的版本，各版本除了有些許屬性與功能不同外，主要各家的瀏覽器也有不同的支援程度，而這邊要介紹的CSS3目前在大部分的瀏覽器都支援了，而CSS4尚在開發中使用前要查一下支援程度，之後的系列文章也都以CSS3為主去撰寫。

CSS選擇器

在撰寫CSS上對選擇器的瞭解是一項非常重要的事情，如同上面的範例我們可以選擇到h1這個元素的過程就是一個選擇器的挑選方法，下面再介紹其他的挑選方法

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title></title>
        <!--1. 引入指定的css檔案-->
        <link rel="stylesheet" href="">
        <!--2. 直接宣告CSS屬性-->
        <style type="text/css">
            /*指定h1這個元素*/
            h1{
                color: yellow; 
            }
            /*指定h2這個元素*/
            h2{
                color:green;
            }
            /*指定h1下面的p元素*/
            h1 p{
                color:gold;                 
            }
            /*指定id="black"的元素*/
            #black{
                color:black;
            }
            /*指定class="blue"的元素*/
            .blue{
                color:blue;
            }
            /*指定重新指定h1這個元素*/
            h1{
                color: red; 
            }
        </style>
</head>
<body>
    <h1>RED<p>gold</p></h1>
    <h2>GREEN</h2>
    <h1 id="black">blackie</h1>
    <h2 class="blue">blue</h2>
    <input class="blue" type="text" value="input..."></input>
</body>
</html>