前端菜鳥筆記 Day-3 CSS基礎

文章大綱來源:【Day 3】HTML複習 + CSS基礎css

  • 初識CSS
  • 入門CSS

初識CSS

層疊樣式表(Cascading Style Sheets),即前端常說的CSS。

內容引用:CSS 簡介html

樣式解決了什麼問題?

HTML標籤 本來被設計爲用於 定義文檔內容

經過使用標籤來表達語義信息前端

那個時候的文檔佈局由瀏覽器實現,沒有使用什麼格式的標籤。git

可是當時主要的瀏覽器(Netscape 和 Internet Explorer)不斷地將新的HTML標籤和屬性(好比字體顏色等)加入到HTML規範中,文檔內容要獨立於文檔表示層愈來愈困難(各家都有各家的HTML書寫屬性規範,而且樣式通常不統一)。github

爲了解決這個問題,萬維網聯盟(W3C)在HTML 4.0 以外創造出樣式(Style)。瀏覽器

樣式表如何提升工做效率?

樣式表(Style Sheets)定義 如何顯示 HTML 元素

樣式一般保存在外部的.css文件中,而且能夠被多個.html文件所引用,因此外部的樣式表能夠一處修改,多處協同影響ide

CSS的使用方法

一共有三種:佈局

標籤內屬性定義

<!-- learn.html -->
<body style="background: red;">
   ...
</body>

內部定義

<!-- learn.html -->
<style>
body {
  background: red;
}
</style>

外部定義

<!-- learn.html -->
<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
/* style.css */
body {
  background: red;
}

外部定義能夠<link>多個樣式表,書寫多個<link>標籤引用便可。字體

那「層疊」指的是什麼?

樣式表容許 多種方式規定樣式信息。
  1. HTML元素屬性中
  2. HTML的頭元素中
  3. 外部的CSS文件中
  4. 同一個文檔引用多個外部樣式表

那麼就容易遇到一個問題:「當同一個 HTML 元素被不止一個樣式定義時,會使用哪一個樣式呢?」設計

這就是一種層疊了,即多重樣式將層疊爲一個

在這個層疊過程當中,就須要一種層疊次序,來選擇最後到底選擇哪個樣式:

  • 最高 —— 內聯樣式,即 HTML 元素內部
  • 高 —— 內部樣式表,即<head>標籤內部
  • 中 —— 外部樣式表
  • 最低 —— 瀏覽器缺省樣式

擁有高次序的樣式會覆蓋低次序的樣式定義。

入門CSS

基礎語法

CSS規則 由兩個主要部分構成: 選擇器,以及 聲明
selector {
  declaration1;
  declaration2;
  ...
  declarationN;
}
  • 選擇器(selector)用於選擇須要改變的 HTML 元素
  • 聲明(declaration)定義須要改變的屬性和值,每條聲明由一個屬性和一個值組成(property: value)。

例如:

h1 {
  color: red;
  font-size: 14px;
}

<h1>元素內的文字顏色定義爲紅色,同時字體大小設置爲14像素。

內容引用:CSS 基礎語法

語法補充

除了基礎語法,還有一些須要補充的內容。

內容引用:CSS 高級語法

選擇器分組

被分組的選擇器能夠分享相同的聲明。
h1,h2,h3,h4,h5,h6 {
  color: green;
}

使用逗號將須要分組到一組的選擇器鏈接在一塊兒便可。

樣式繼承

根據CSS,子元素從父元素繼承屬性。
body {
  font-family: Verdana, sans-serif;
}

上述規則說明,<body>元素將使用Verdana字體(若是訪問者系統中有的話)。

經過CSS繼承,子元素將繼承最高級元素(上面的例子是<body>)所擁有的屬性。這裏的子元素指的就是在<body>標籤內聲明的那些全部標籤(其實並不必定是全部,具體取決於瀏覽器支持度)。

可是在使用CSS繼承規則時,若是不但願一個特定子元素繼承該CSS,則再說明一條特殊規則來覆蓋便可(這部分涉及到選擇器優先級問題,將在後面說明)。

body {
  font-family: Verdana, sans-serif;
}
p {
  font-family: Times, "Times New Roman", serif;
}

CSS 派生選擇器

依據元素的位置關係來定義樣式。

CSS1稱其爲上下文選擇器(contextual selectors),CSS2稱其爲派生選擇器。

例子:

li strong {
  font-style: italic;
  font-weight: normal;
}
<p>
  <strong>我是粗體字,不是斜體,由於這個規則對我不起做用</strong>
</p>
<ol>
  <li>
  <strong>我是斜體字。這是由於 strong 元素位於 li 元素內。</strong>
  </li>
  <li>我是正常的字體。</li>
</ol>

只有 li 元素中的 strong 元素的樣式爲斜體字,這樣無需爲須要修飾的 strong 元素單獨定義 class或者id,代碼更加簡潔。

派生選擇器還有更加深刻的內容:

  • CSS 後代選擇器
  • CSS 子元素選擇器
  • CSS 相鄰兄弟選擇器

內容引用:CSS 派生選擇器

CSS id選擇器

爲標有 特定id 的 HTML 元素指定特定的樣式。

id選擇器以"#"來定義。

#red { color: red; }
#green { color: green; }
<p id="red">這個段落是紅色。</p>
<p id="green">這個段落是綠色。</p>

之因此叫特定的,就是由於 id屬性 只能在每一個HTML文檔中出現一次

在如今佈局中,id選擇器經常用於創建派生選擇器

#sidebar p {
  ...
}

樣式只會應用於出如今id是sidebar的元素內的段落。

內容引用:CSS id 選擇器

CSS 類選擇器

類選擇器的功能能夠簡單當作是:能給多個元素相同id的id選擇器,只不過這裏再也不是用id了,而是用class。

在CSS中,類選擇器以一個點號顯示。
.center {
  text-align: center;
}

全部擁有center類的HTML元素都會應用這個樣式。

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

注意:類名的第一個字符不能是數字,不然沒法在 Mozilla 或 Firefox 中起做用。

和 id 同樣,class 也可被用做派生選擇器。
.sidebar p {
  ...
}

內容引用:CSS 類選擇器

CSS 屬性選擇器

對帶有指定屬性的 HTML 元素設置樣式,不只限於 class 和 id 屬性。

注意:只有在規定了 !DOCTYPE 時,IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中,不支持屬性選擇。

屬性選擇器:

/* 帶有 title 屬性的全部元素 */
[title] {
  color: red;
}

屬性和值選擇器:

/* title="W3School" 的全部元素 */
[title=W3School] {
  border: 5px solid blue;
}

若是一個屬性有多個值,想要選中這樣的元素:

/* 適用於由空格分隔的屬性值 */
[title~=hello] {
  color: red;
}
/* 適用於由連字符分隔的屬性值 */
[lang|=en] {
  color: red;
}

這種方法的一個應用是設置表單的樣式:

input[type="text"] {
  ...
}
input[type="button"] {
  ...
}
...

內容引用:CSS 屬性選擇器


我的靜態博客:

相關文章
相關標籤/搜索