DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> css的引入方法
css的引入方法
編輯:CSS特效代碼     

1.外部途徑:

建立xx.css文件與html文件放在同一目錄下

加入  <link rel="stylesheet" type="text/css" href="4.css"/>
<!DOCTYPE html>
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta charset="utf-8" />
    <title>CSS樣式</title>
    <meta name="keywords" content="用css給網頁裝潢" />
    <meta name="description" content="用css給網頁裝潢" />
    <link rel="stylesheet" type="text/css" href="4.css"/>
  </head>
  <body>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
  </body>
</html>
p{
    font-size:40px;
    color:red;
}

2.內頁樣式:直接寫到html的頭部分

<style type="text/css">
        p{
        font-size:40px;
        color:red;      
          }
</style>
<!DOCTYPE html>
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta charset="utf-8" />
    <title>CSS樣式</title>
    <meta name="keywords" content="用css給網頁裝潢" />
    <meta name="description" content="用css給網頁裝潢" />
    <style type="text/css">
        p{
        font-size:40px;
        color:red;      
          }
</style>
    <!--   <link rel="stylesheet" type="text/css" href="4.css"/>-->
  </head>
  <body>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
  </body>
</html>

3.行內樣式

<!DOCTYPE html>
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta charset="utf-8" />
    <title>CSS樣式</title>
    <meta name="keywords" content="用css給網頁裝潢" />
    <meta name="description" content="用css給網頁裝潢" />
  </head>
  <body>
    <p style=" font-size:40px; color:red;">段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
  </body>
</html>

CSS 基本語法(語法簡單的理解就是規則)
1)CSS 規則由兩個主要的部分構成:
1、選擇器
2、一條或多條聲明。
選擇器:要給元素裝潢加樣式(首先得選中需要裝潢的元素)
聲明:聲明由一個屬性和一個值組成
屬性是您希望設置的樣式屬性。每個屬性有一個值。屬性和值被冒號分開,如果
要定義不止一個聲明,則需要用分號將每個聲明分開,養成良好的習慣,就算一
個聲明我們也加上分號。
選擇器{屬性:值;}
使用空格以及回車讓css 更可讀!
選擇器{
屬性:值;
}
2)小試牛刀
選擇器有一種最簡單的寫法直接寫上你要選中的元素!
p {
color:red; 該行聲明將顏色設置為紅色
font-size:30px; 該行聲明將字體大小設置為30px
}
查看效果!
3)CSS 加注釋
/*注釋的內容*/

    <style type="text/css">
        p{
        font-size:40px;
        color:red;      
          }/*css的注釋*/ 
</style>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved