一、CSS簡介

1、什麼是CSS

CSS：Cascading Style Sheet 層疊樣式表是一組樣式設定的規則，用於控制頁面的外觀樣式

2、為什麼使用CSS

實現內容與樣式的分離，便於團隊開發樣式複用，便於網站的後期維護頁面的精確控制，讓頁面更精美

3、CSS作用

頁面外觀美化

二、基本用法

1、CSS語法

<head>     <style>         選擇器{             屬性名：屬性值;             屬性名：屬性值;         }     </style> </head>

選擇器：要修飾的物件（東西）
屬性名：修飾物件的哪一個屬性（樣式）
屬性值：樣式的取值

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Document</title>     <style>         p{             color:red;             background: #cccccc;         }         h2{             color:blue;         }     </style> </head> <body>     <p>CSS從入門到精通</p>     <h2>主講：hector</h2> </body> </html>

示例：

一、CSS簡介1、什麼是CSSCSS：Cascading Style Sheet 層疊樣式表
是一組樣式設定的規則，用於控制頁面的外觀樣式
2、為什麼使用CSS實現內容與樣式的分離，便於團隊開發
樣式複用，便於網站的後期維護
頁面的精確控制，讓頁面更精美
3、CSS作用頁面外觀美化
佈局和定位
二、基本用法1、CSS語法<head><style>選擇器{屬性名：屬性值;屬性名：屬性值;}</style></head>12345678選擇器：要修飾的物件（東西）屬性名：修飾物件的哪一個屬性（樣式）屬性值：樣式的取值<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>p{color:red;background: #cccccc;}h2{color:blue;}</style></head><body><p>CSS從入門到精通</p><h2>主講：hector</h2></body></html>1234567891011121314151617181920示例：

2、CSS應用方式也稱為CSS引用方式，有三種方式：內部樣式、行內樣式、外部樣式
2.1 內部樣式也稱為內嵌樣式，在頁面頭部通過style標籤定義
對當前頁面中所有符合樣式選擇器的標籤都起作用
2.2 行內樣式也稱為嵌入樣式，使用HTML標籤的style屬性定義
只對設定style屬性的標籤起作用
2.3 外部樣式使用單獨的 .CSS 檔案定義，然後在頁面中使用 link標籤或 @import指令引入
使用 link標籤連結外部樣式檔案
<link rel="stylesheet" type="text/css" href="CSS樣式檔案的路徑">1提示：type屬性可以省略
@import 指令匯入外部樣式檔案
<style>@import "CSS樣式檔案路徑";@import url(CSS樣式檔案路徑);</style>1234<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>/* 1.內部樣式 */p{color:blue;}</style><style>/* @import "style/hello.css" */@import url(style/hello.css);</style></head><body><p>welcome to CSS!</p><p>歡迎來到CSS課堂!</p><hr><h2 style="color:red;">WEB前段工程師</h2><h2>JAVA開發工程師</h2><hr><div>嘿嘿</div><div>哈哈</div></body>

CSS——CSS基礎(1)