Sass 允許我們將以與html相同的方式嵌套css選擇器,將一套 CSS 樣式嵌套進(jìn)另一套樣式中,內(nèi)層的樣式將它外層的選擇器作為父選擇器,比如:
// .scss語(yǔ)法#main { width: 97%; p, div { font-size: 2em; a { font-weight: bold; } } pre { font-size: 3em; }}// 編譯為.css#main { width: 97%; }#main p, #main div { font-size: 2em; }#main p a, #main div a { font-weight: bold; }#main pre { font-size: 3em; }
嵌套功能避免了重復(fù)輸入父選擇器,而且也使得復(fù)雜的 CSS 結(jié)構(gòu)更加便于管理。
注意:在Sass中,ul、li和a選擇器嵌套是在nav選擇器中的,在css中,規(guī)則時(shí)逐個(gè)定義的(不是嵌套的)。
在嵌套 CSS 規(guī)則時(shí),有時(shí)候我們需要直接使用到嵌套外層的父選擇器,比如,當(dāng)給某一個(gè)元素設(shè)定 hover 樣式時(shí)或者是當(dāng) body 元素有個(gè) classname 時(shí),可以用 & 代表嵌套規(guī)則外層的父選擇器。
許多CSS屬性具有相同的前綴 ,比如 font-family,font-size,font-weight ,text-align,text-transform,text-overflow前三者和后三者分別是以 font 和 text 作為屬性的命名空間,為了便于管理這樣的屬性,同時(shí)也為了避免重復(fù)輸入,Sass 允許將屬性嵌套在命名空間中。
// .scss 語(yǔ)法 font: { family: Helvetica, sans-serif; size: 24px; weight: bold; } text: { align: center; transform: lowercase; overflow: hidden; } // 編譯后的普通css font-family: Helvetica, sans-serif; font-size: 24px; font-weight: bold; text-align: center; text-transform: lowercase; text-overflow: hidden;
Sass 額外提供了一種特殊類型的選擇器:占位符選擇器 (placeholder selector),它與常用的 id 與 class 選擇器寫法相似,只是 # 或 . 替換成了 %,必須通過(guò) @extend 指令調(diào)用。
.什么是HTML
HTML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。HTML 指的是超文本標(biāo)記語(yǔ)言: HyperText Markup LanguageHTML 不是一種編程語(yǔ)言,而是一種標(biāo)記語(yǔ)言標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容HTML文檔也叫做 web 頁(yè)面
二.HTML基本語(yǔ)法
(1)HTML標(biāo)簽
整個(gè)網(wǎng)頁(yè)是從<html>這里開(kāi)始的,然后到</html>結(jié)束。
(2)head標(biāo)簽
head標(biāo)簽代表頁(yè)面的“頭”,定義一些特殊內(nèi)容,這些內(nèi)容往往都是“不可見(jiàn)內(nèi)容”(在瀏覽器不可見(jiàn))。
(3)body標(biāo)簽
body標(biāo)簽代表頁(yè)面的“身”,定義網(wǎng)頁(yè)展示內(nèi)容,這些內(nèi)容往往都是可見(jiàn)內(nèi)容(在瀏覽器可見(jiàn))。后續(xù)課程講解的標(biāo)簽都是在body標(biāo)簽內(nèi)部的各種標(biāo)簽。
三.HTML語(yǔ)法規(guī)范
HTML中不區(qū)分大小寫,但是我們一般都使用小寫
HTML中的注釋不能嵌套、
HTML標(biāo)簽必須結(jié)構(gòu)完整,要么成對(duì)出現(xiàn),要么自結(jié)束標(biāo)簽
HTML標(biāo)簽可以嵌套,但是不能交叉嵌套
HTML標(biāo)簽中的屬性必須有值,且值必須加引號(hào)(雙引號(hào)單引號(hào)都可以)
四.HTML標(biāo)簽使用方法
(1)HTML無(wú)序列表
無(wú)序列表是一個(gè)項(xiàng)目的列表,此列項(xiàng)目使用粗體圓點(diǎn)(典型的小黑圓圈)進(jìn)行標(biāo)記。
(2)有序列表
同樣,有序列表也是一列項(xiàng)目,列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。 列表項(xiàng)使用數(shù)字來(lái)標(biāo)記。
(3)段落與文字標(biāo)簽
(4)文本格式化標(biāo)簽
五.HTML表單和輸入
表單是一個(gè)包含表單元素的區(qū)域。表單元素是允許用戶在表單中輸入內(nèi)容,比如:文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。表單使用表單標(biāo)簽來(lái)設(shè)置。
(1)文本域(Text Fields)
輸入類型是由類型屬性(type)定義的。大多數(shù)經(jīng)常被用到的輸入類型如下:
(2)密碼字段
密碼字段通過(guò)標(biāo)簽 來(lái)定義:
(3)單選按鈕
標(biāo)簽定義了表單單選框選項(xiàng)
(4)復(fù)選框
定義了復(fù)選框. 用戶需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)。
(5)提交按鈕
定義了提交按鈕。當(dāng)用戶單擊確認(rèn)按鈕時(shí),表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。表單的動(dòng)作屬性定義了目的文件的文件名。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理
今天我們就先分享到這里,有不懂的可以私信我
(私信我有免費(fèi)的IT課程可以領(lǐng)取喲)
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。