国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

DangoSky / 3537人閱讀

摘要：派生選擇器依據元素的位置關系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。

文章大綱來源：【Day 3】HTML復習 + CSS基礎

初識CSS

入門CSS

初識CSS 
層疊樣式表（Cascading Style Sheets），即前端常說的CSS。

內容引用：CSS 簡介

樣式解決了什么問題？ 
HTML標簽原本被設計為用于定義文檔內容。

通過使用標簽來表達語義信息。

那個時候的文檔布局由瀏覽器實現，沒有使用什么格式的標簽。

但是當時主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的HTML標簽和屬性（比如字體顏色等）加入到HTML規范中，文檔內容要獨立于文檔表示層越來越困難（各家都有各家的HTML書寫屬性規范，并且樣式一般不統一）。

為了解決這個問題，萬維網聯盟（W3C）在HTML 4.0 之外創造出樣式（Style）。

樣式表如何提高工作效率？ 
樣式表（Style Sheets）定義如何顯示 HTML 元素。

樣式通常保存在外部的.css文件中，并且可以被多個.html文件所引用，所以外部的樣式表可以一處修改，多處協同影響。

CSS的使用方法

一共有三種：

標簽內屬性定義 


   ...
內部定義
外部定義 


  

/* style.css */
body {
  background: red;
}

外部定義可以多個樣式表，書寫多個標簽引用即可。

那“層疊”指的是什么？ 
樣式表允許多種方式規定樣式信息。

HTML元素屬性中

HTML的頭元素中

外部的CSS文件中

同一個文檔引用多個外部樣式表

那么就容易遇到一個問題：“當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？”

這就是一種層疊了，即多重樣式將層疊為一個。

在這個層疊過程中，就需要一種層疊次序，來選擇最后到底選擇哪一個樣式：

最高 —— 內聯樣式，即 HTML 元素內部

高 —— 內部樣式表，即標簽內部

中 —— 外部樣式表

最低 —— 瀏覽器缺省樣式

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

入門CSS 基礎語法 
CSS規則 由兩個主要部分構成：選擇器，以及聲明。
selector {
  declaration1;
  declaration2;
  ...
  declarationN;
}

選擇器（selector）用于選擇需要改變的 HTML 元素

聲明（declaration）定義需要改變的屬性和值，每條聲明由一個屬性和一個值組成（property: value）。

例如：

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

將

元素內的文字顏色定義為紅色，同時字體大小設置為14像素。

內容引用：CSS 基礎語法

語法補充

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

內容引用：CSS 高級語法

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

使用逗號將需要分組到一組的選擇器連接在一起即可。

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

上述規則說明，元素將使用Verdana字體（如果訪問者系統中有的話）。

通過CSS繼承，子元素將繼承最高級元素（上面的例子是）所擁有的屬性。這里的子元素指的就是在標簽內聲明的那些所有標簽(其實并不一定是所有，具體取決于瀏覽器支持度)。

但是在使用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;
}

  我是粗體字，不是斜體，因為這個規則對我不起作用



    
  
  1. 
  我是斜體字。這是因為 strong 元素位于 li 元素內。
  
    2. 
  
  2. 我是正常的字體。
    3.

只有 li 元素中的 strong 元素的樣式為斜體字，這樣無需為需要修飾的 strong 元素多帶帶定義 class或者id，代碼更加簡潔。

派生選擇器還有更加深入的內容：

CSS 后代選擇器

CSS 子元素選擇器

CSS 相鄰兄弟選擇器

內容引用：CSS 派生選擇器

CSS id選擇器 
為標有 特定id 的 HTML 元素指定特定的樣式。

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

#red { color: red; }
#green { color: green; }
這個段落是紅色。


這個段落是綠色。

之所以叫特定的，就是因為 id屬性 只能在每個HTML文檔中出現一次。

在現在布局中，id選擇器常常用于建立派生選擇器。

#sidebar p {
  ...
}

樣式只會應用于出現在id是sidebar的元素內的段落。

內容引用：CSS id 選擇器

CSS 類選擇器

類選擇器的功能可以簡單看成是：能給多個元素相同id的id選擇器，只不過這里不再是用id了，而是用class。

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

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


This heading will be center-aligned





This paragraph will also be center-aligned.

注意：類名的第一個字符不能是數字，否則無法在 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 屬性選擇器

個人靜態博客：

氣泡的前端日記： https://rheabubbles.github.io

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53642.html

相關文章

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

    摘要：派生選擇器依據元素的位置關系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。 文章大綱來源：【Day 3】HTML復習 + CSS基礎 初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。 內容引用：CSS 簡介 樣式解決了什么問題？ HTML...

    mingzhong 評論0 收藏0

  • 前端菜鳥筆記 Day-4 CSS布局

    摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。簡單來說就是，元素不再占用任何文檔流的空間，只剩下相對于包含塊的定位顯示。行框和清理浮動框旁邊的行框會被縮短，使行框圍繞浮動框，所以創建浮動框可以使文本圍繞圖像。 文章大綱來源：【Day 3】HTML復習 + CSS基礎 CSS框模型 寬度和高度 內邊距 外邊距 CSS定位 浮動 CSS框模型 內容引用：CSS 框模型概述 CSS 框模...

    go4it 評論0 收藏0

  • 前端菜鳥筆記 Day-4 CSS布局

    摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。簡單來說就是，元素不再占用任何文檔流的空間，只剩下相對于包含塊的定位顯示。行框和清理浮動框旁邊的行框會被縮短，使行框圍繞浮動框，所以創建浮動框可以使文本圍繞圖像。 文章大綱來源：【Day 3】HTML復習 + CSS基礎 CSS框模型 寬度和高度 內邊距 外邊距 CSS定位 浮動 CSS框模型 內容引用：CSS 框模型概述 CSS 框模...

    Honwhy 評論0 收藏0

  • Web前端開發學習推薦--菜鳥必看

    Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

    JerryWangSAP 評論0 收藏0

  • Web前端開發學習推薦--菜鳥必看

    Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

    shadajin 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<