前端 CSS巢狀方式,選擇器,iframe

2021-08-21 07:46:23 字數 2686 閱讀 3171

1.css的三種巢狀方式(其實是四種,但是有2種是一樣的效果)

css(cascading style sheet- 「層疊樣式表」或「級聯樣式單」 )

製作網頁時採用css技術,可以有效地對頁面布局、字型、顏色、背景和其它效果實現更加精確的控制,

可以改變同一頁面的不同部分,或者頁數不同的網頁的外觀和格式。

「cascading」 即在同乙個web文件中可以有多個樣式表存在,根據所在的位置,擁有不同的優先順序。優先順序越高,就會被最後在顯示時採用。

從樣式表插入的形式來看可以分為三種:

1、內聯式樣式表:

利用現有的html標記把特殊的樣式加入到那些由標記控制的資訊中。

2、嵌入式樣式表:

嵌入到html檔案的頭部中去(和標記之間),使用容器裝載,例如:對頁面中所有標記都起作用。

3、外部式樣式表:

一種儲存在外部的樣式表檔案,外部檔案以.css為副檔名,例如:

2.css選擇器選擇器描述

[attribute]

用於選取帶有指定屬性的元素。

[attribute=value]

用於選取帶有指定屬性和值的元素。

[attribute~=value]

用於選取屬性值中包含指定詞彙的元素。

[attribute|=value]

用於選取帶有以指定值開頭的屬性值的元素,該值必須是整個單詞。

[attribute^=value]

匹配屬性值以指定值開頭的每個元素。

[attribute$=value]

匹配屬性值以指定值結尾的每個元素。

[attribute*=value]

匹配屬性值中包含指定值的每個元素。

下面是我寫的例子:

/**demo.css**/

/*頁面 分3類 固定寬度頁面 流式頁面 響應式頁面 border:1px solid black; 邊框 margin: 100px auto; 居中 4個值:順時針方向 margin:200px auto; 外邊距 padding:10px; 內邊距*/

/* 誰的規則越複雜,誰的優先順序越高*/

/*e[id]屬性選擇器*/

/* (.) 點是class選擇器*/

/* #是id選擇器*/

*/*html*/

/*div

*//*

.demo_box

.chlid_box

.demo_box.chlid_box.demo_img

*//*

div[id]

*//*#demo*/

/*ul>div

*//*.item_box:before

*//*li:hover*/

.content_left

.content_right

.demo_iframe

3.iframe的使用html5中的新特性屬性值

描述標籤的 align 屬性">align

不贊成使用。請使用樣式代替。

規定如何根據周圍的元素來對齊此框架。

標籤的 frameborder 屬性">frameborder

規定是否顯示框架周圍的邊框。

標籤的 height 屬性">height

規定 iframe 的高度。

標籤的 longdesc 屬性">longdesc

url規定乙個頁面,該頁面包含了有關 iframe 的較長描述。

標籤的 marginheight 屬性">marginheight

pixels

定義 iframe 的頂部和底部的邊距。

標籤的 marginwidth 屬性">marginwidth

pixels

定義 iframe 的左側和右側的邊距。

標籤的 name 屬性">name

frame_name

規定 iframe 的名稱。

標籤的 sandbox 屬性">sandbox

啟用一系列對 中內容的額外限制。

標籤的 scrolling 屬性">scrolling

規定是否在 iframe 中顯示滾動條。

標籤的 seamless 屬性">seamless

seamless

規定 看上去像是包含文件的一部分。

標籤的 src 屬性">src

url規定在 iframe 中顯示的文件的 url。

標籤的 srcdoc 屬性">srcdoc

html_code

規定在 中顯示的頁面的 html 內容。

標籤的 width 屬性">width

定義 iframe 的寬度。

下面是我寫的例子

效果如下:

大家舉例的時候不要以京東為例,如果以京東為例就會發生跳轉到另乙個頁面,我猜測應該是京東的頁面會有乙個新的get請求,請讀者牢記

前端 css 選擇器

css 為了修飾頁面作用,讓頁面好看 css的引入方式 1,行內樣式 body裡面 2,內接樣式 在html裡面的 style 裡面 3,外接樣式 兩種 鏈結式 匯入式 優先順序 行內優先順序 最高 內接的優先順序 外接優先順序 引入 id 的優先順序 比 class 的優先順序要高 標籤選擇器 d...

前端基礎(二 CSS 引入方式 CSS選擇器)

css選擇器 使用內聯樣式時,將樣式寫在中,放在.html檔案的中。div style 使用外部樣式時,將樣式寫在單獨的.css檔案中,將該檔案引入至.html檔案中,將引入語句寫在.html檔案的中。stylesheet href test.css test.css div假設有如下html di...

Web 前端 CSS選擇器

選擇器 選擇器類選擇器 類選擇器 三年級時,我還是乙個膽小如鼠的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。到了三年級下學期時,我們班上了一節公開課,老師提出了乙個很簡單的問題,班裡很多同學都舉手了,甚至成績...