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

資訊專欄INFORMATION COLUMN

前端菜鳥筆記 Day-3 CSS基礎(chǔ)

mingzhong / 1303人閱讀

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

文章大綱來源：【Day 3】HTML復(fù)習(xí) + CSS基礎(chǔ)

初識(shí)CSS

入門CSS

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

內(nèi)容引用：CSS 簡介

樣式解決了什么問題？ 
HTML標(biāo)簽原本被設(shè)計(jì)為用于定義文檔內(nèi)容。

通過使用標(biāo)簽來表達(dá)語義信息。

那個(gè)時(shí)候的文檔布局由瀏覽器實(shí)現(xiàn)，沒有使用什么格式的標(biāo)簽。

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

為了解決這個(gè)問題，萬維網(wǎng)聯(lián)盟（W3C）在HTML 4.0 之外創(chuàng)造出樣式（Style）。

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

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

CSS的使用方法

一共有三種：

標(biāo)簽內(nèi)屬性定義 


   ...
內(nèi)部定義
外部定義 


  

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

外部定義可以多個(gè)樣式表，書寫多個(gè)標(biāo)簽引用即可。

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

HTML元素屬性中

HTML的頭元素中

外部的CSS文件中

同一個(gè)文檔引用多個(gè)外部樣式表

那么就容易遇到一個(gè)問題：“當(dāng)同一個(gè) HTML 元素被不止一個(gè)樣式定義時(shí)，會(huì)使用哪個(gè)樣式呢？”

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

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

最高 —— 內(nèi)聯(lián)樣式，即 HTML 元素內(nèi)部

高 —— 內(nèi)部樣式表，即標(biāo)簽內(nèi)部

中 —— 外部樣式表

最低 —— 瀏覽器缺省樣式

擁有高次序的樣式會(huì)覆蓋低次序的樣式定義。

入門CSS 基礎(chǔ)語法 
CSS規(guī)則 由兩個(gè)主要部分構(gòu)成：選擇器，以及聲明。
selector {
  declaration1;
  declaration2;
  ...
  declarationN;
}

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

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

例如：

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

將

元素內(nèi)的文字顏色定義為紅色，同時(shí)字體大小設(shè)置為14像素。

內(nèi)容引用：CSS 基礎(chǔ)語法

語法補(bǔ)充

除了基礎(chǔ)語法，還有一些需要補(bǔ)充的內(nèi)容。

內(nèi)容引用：CSS 高級(jí)語法

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

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

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

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

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

但是在使用CSS繼承規(guī)則時(shí)，如果不希望一個(gè)特定子元素繼承該CSS，則再說明一條特殊規(guī)則來覆蓋即可（這部分涉及到選擇器優(yōu)先級(jí)問題，將在后面說明）。

body {
  font-family: Verdana, sans-serif;
}
p {
  font-family: Times, "Times New Roman", serif;
}
CSS 派生選擇器 
依據(jù)元素的位置關(guān)系來定義樣式。

CSS1稱其為上下文選擇器（contextual selectors），CSS2稱其為派生選擇器。

例子：

li strong {
  font-style: italic;
  font-weight: normal;
}

  我是粗體字，不是斜體，因?yàn)檫@個(gè)規(guī)則對(duì)我不起作用



    
  
  1. 
  我是斜體字。這是因?yàn)?strong 元素位于 li 元素內(nèi)。
  
    2. 
  
  2. 我是正常的字體。
    3.

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

派生選擇器還有更加深入的內(nèi)容：

CSS 后代選擇器

CSS 子元素選擇器

CSS 相鄰兄弟選擇器

內(nèi)容引用：CSS 派生選擇器

CSS id選擇器 
為標(biāo)有 特定id 的 HTML 元素指定特定的樣式。

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

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


這個(gè)段落是綠色。

之所以叫特定的，就是因?yàn)?id屬性 只能在每個(gè)HTML文檔中出現(xiàn)一次。

在現(xiàn)在布局中，id選擇器常常用于建立派生選擇器。

#sidebar p {
  ...
}

樣式只會(huì)應(yīng)用于出現(xiàn)在id是sidebar的元素內(nèi)的段落。

內(nèi)容引用：CSS id 選擇器

CSS 類選擇器

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

在CSS中，類選擇器以一個(gè)點(diǎn)號(hào)顯示。
.center {
  text-align: center;
}

所有擁有center類的HTML元素都會(huì)應(yīng)用這個(gè)樣式。


This heading will be center-aligned





This paragraph will also be center-aligned.

注意：類名的第一個(gè)字符不能是數(shù)字，否則無法在 Mozilla 或 Firefox 中起作用。

和 id 一樣，class 也可被用作派生選擇器。
.sidebar p {
  ...
}

內(nèi)容引用：CSS 類選擇器

CSS 屬性選擇器 
對(duì)帶有指定屬性的 HTML 元素設(shè)置樣式，不僅限于 class 和 id 屬性。

注意：只有在規(guī)定了 !DOCTYPE 時(shí)，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。

屬性選擇器：

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

屬性和值選擇器：

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

如果一個(gè)屬性有多個(gè)值，想要選中這樣的元素：

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

這種方法的一個(gè)應(yīng)用是設(shè)置表單的樣式：

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

內(nèi)容引用：CSS 屬性選擇器

個(gè)人靜態(tài)博客：

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/117339.html

相關(guān)文章

  • 前端菜鳥筆記 Day-3 CSS基礎(chǔ)

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

    DangoSky 評(píng)論0 收藏0

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

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

    go4it 評(píng)論0 收藏0

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

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

    Honwhy 評(píng)論0 收藏0

  • Web前端開發(fā)學(xué)習(xí)推薦--菜鳥必看

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

    JerryWangSAP 評(píng)論0 收藏0

  • Web前端開發(fā)學(xué)習(xí)推薦--菜鳥必看

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

    shadajin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<