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>