1. 程式人生 > >Python基礎html之css基礎

Python基礎html之css基礎

CSS的發展歷程
從HTML被髮明開始,樣式就以各種形式存在。不同的瀏覽器結合它們各自的樣式語言為使用者提供頁面效果的控制。最初的HTML只包含很少的顯示屬性。

隨著HTML的成長,為了滿足頁面設計者的要求,HTML添加了很多顯示功能。但是隨著這些功能的增加,HTML變的越來越雜亂,而且HTML頁面也越來越臃腫。於是CSS便誕生了。

CSS初識
CSS(Cascading Style Sheets) 美化樣式

CSS通常稱為CSS樣式表或層疊樣式表(級聯樣式表),主要用於設定HTML頁面中的文字內容(字型、大小、對齊方式等)、圖片的外形(寬高、邊框樣式、邊距等)以及版面的佈局等外觀顯示樣式。

CSS以HTML為基礎,提供了豐富的功能,如字型、顏色、背景的控制及整體排版等,而且還可以針對不同的瀏覽器設定不同的樣式。
引入CSS樣式表(書寫位置)

CSS可以寫到那個位置? 是不是一定寫到html檔案裡面呢?

內部樣式表

內嵌式是將CSS程式碼集中寫在HTML文件的head頭部標籤中,並且用style標籤定義,其基本語法格式如下:

<head>
<style type="text/CSS">
    選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>

語法中,style標籤一般位於head標籤中title標籤之後,也可以把他放在HTML文件的任何地方。

type=“text/CSS” 在html5中可以省略, 寫上也比較符合規範, 所以這個地方可以寫也可以省略。

行內式(內聯樣式)

內聯樣式,又有人稱行內樣式、行間樣式、內嵌樣式。是通過標籤的style屬性來設定元素的樣式,其基本語法格式如下:

<標籤名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標籤名>

語法中style是標籤的屬性,實際上任何HTML標籤都擁有style屬性,用來設定行內式。其中屬性和值的書寫規範與CSS樣式規則相同,行內式只對其所在的標籤及巢狀在其中的子標籤起作用。

外部樣式表(外鏈式)

鏈入式是將所有的樣式放在一個或多個以.CSS為副檔名的外部樣式表文件中,通過link標籤將外部樣式表文件連結到HTML文件中,其基本語法格式如下:

<head>
  <link href="CSS檔案的路徑"  rel="stylesheet" />
</head>

注意: link 是個單標籤哦!!!

該語法中,link標籤需要放在head頭部標籤中,並且必須指定link標籤的三個屬性,具體如下:

href:定義所連結外部樣式表文件的URL,可以是相對路徑,也可以是絕對路徑。
type:定義所連結文件的型別,在這裡需要指定為“text/CSS”,表示連結的外部檔案為CSS樣式表。
rel:定義當前文件與被連結文件之間的關係,在這裡需要指定為“stylesheet”,表示被連結的文件是一個樣式表文件。

三種樣式表總結(位置)

在這裡插入圖片1描述

CSS樣式規則
2
在上面的樣式規則中:

1.選擇器用於指定CSS樣式作用的HTML物件,花括號內是對該物件設定的具體樣式。
2.屬性和屬性值以“鍵值對”的形式出現。
3.屬性是對指定的物件設定的樣式屬性,例如字型大小、文字顏色等。
4.屬性和屬性值之間用英文“:”連線。
5.多個“鍵值對”之間用英文“;”進行區分。

選擇器(重點)
要想將CSS樣式應用於特定的HTML元素,首先需要找到該目標元素。在CSS中,執行這一任務的樣式規則部分被稱為選擇器(選擇符)。
CSS基礎選擇器
標籤選擇器是指用HTML標籤名稱作為選擇器,按標籤名稱分類,為頁面中某一類標籤指定統一的CSS樣式。其基本語法格式如下:

標籤名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }  或者
元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

標籤選擇器最大的優點是能快速為頁面中同類型的標籤統一樣式,同時這也是他的缺點,不能設計差異化樣式。

標籤選擇器 可以把某一類標籤全部選擇出來 div span

類選擇器
類選擇器使用“.”(英文點號)進行標識,後面緊跟類名,其基本語法格式如下:

.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

 標籤呼叫的時候用 class=“類名”  即可。

類選擇器最大的優勢是可以為元素物件定義單獨或相同的樣式。 可以選擇一個或者多個標籤
多類名選擇器
我們可以給標籤指定多個類名,從而達到更多的選擇目的。

id選擇器

id選擇器使用“#”進行標識,後面緊跟id名
該語法中,id名即為HTML元素的id屬性值,大多數HTML元素都可以定義id屬性,元素的id值是唯一的,只能對應於文件中某一個具體的元素。

用法基本和類選擇器相同。

id選擇器和類選擇器最大的不同在於 使用次數上。

萬用字元選擇器
萬用字元選擇器用“*”號表示,他是所有選擇器中作用範圍最廣的,能匹配頁面中所有的元素。

在這裡插入圖片描述

CSS字型樣式屬性

font-size:字號大小

font-size屬性用於設定字號,該屬性的值可以使用相對長度單位,也可以使用絕對長度單位。其中,相對長度單位比較常用,推薦使用畫素單位px,絕對長度單位使用較少。具體如下:

font-family:字型

font-family屬性用於設定字型。網頁中常用的字型有宋體、微軟雅黑、黑體等,例如將網頁中所有段落文字的字型設定為微軟雅黑,可以使用如下CSS樣式程式碼:p{ font-family:“微軟雅黑”;}