天天看點

css字型樣式代碼大全_【CSS】1 CSS簡介及屬性

css字型樣式代碼大全_【CSS】1 CSS簡介及屬性

1、CSS簡介

(1)CSS是

層疊樣式表

(Cascading Style Sheets)的簡稱。

(2)CSS主要作用:美化網頁、布局頁面。

(3)CSS最大的價值:由HTML專注做結構呈現,樣式交給CSS,即結構(HTML)和樣式(CSS)相分離。

(4)CSS規則主要由兩個主要部分構成:選擇器及一條或多條聲明。

css字型樣式代碼大全_【CSS】1 CSS簡介及屬性
  • 選擇器 用于指定CSS樣式的 HTML标簽 ,花括号内是對該對象設定的的具體樣式。
  • 屬性和屬性值以 “鍵值對” 的形式出現。
  • 屬性是對制定對象設定的樣式屬性,例如字型大小、文本顔色等。
  • 屬性和屬性之間用英文“ : ”分開。
  • 多個鍵值對之間用英文“ ; ”進行區分。

代碼風格建議:

  • 分行寫,每個屬性寫一行
  • 選擇和大括号中間留一個空格
  • 冒号後,屬性值前留一個空格

2、CSS基礎選擇器

CSS選擇器作用:

選擇标簽

詳見下一節:

仲夏微:【CSS】2 選擇器​zhuanlan.zhihu.com

css字型樣式代碼大全_【CSS】1 CSS簡介及屬性

3、CSS字型屬性

(1)常用字型屬性

css字型樣式代碼大全_【CSS】1 CSS簡介及屬性

(2)font複合屬性

可以把以上文字樣式綜合來寫,節約代碼。

格式:

font: font-style font-weight font-size/line-height font-family;

比如:

body
           
  • 使用font屬性時,必須按上面文法格式中的順序寫, 不能更換順序 ,各個屬性間以 空格 隔開。
  • 不需要設定的屬性可以省略,但 必須保留font-size和font-family屬性 ,否則font屬性将不起作用。

4、CSS文本屬性

css字型樣式代碼大全_【CSS】1 CSS簡介及屬性

5、CSS的引入方式

(1)行内樣式表(行内式)

在标簽内部寫個style屬性,适合修改簡單的樣式。

(2)内部樣式表(嵌入式)

将所有的CSS代碼抽取出來,單獨放到一個<style></style>标簽中。

<
           

<style></style>标簽一般放在<head></head>标簽裡。

(3)外部樣式表(連結式)

開發過程中,使用的最多的方式。

先單獨寫一個CSS樣式檔案,然後在HTML頁面通過<link>标簽引用

<
           

總結:

css字型樣式代碼大全_【CSS】1 CSS簡介及屬性