摘要:包含后代選擇器包含選擇器,即加入空格用于選擇指定標簽元素下的后輩元素。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇,而子選擇器是通過進行選擇。
6-1 認識CSS樣式
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”,它主要是用于定義HTML內容在瀏覽器內的顯示樣式,如文字大小、顏色、字體加粗等。使用CSS樣式的一個好處是通過定義某個樣式,可以讓不同網頁位置的文字有著統一的字體、字號或者顏色等。
6-2 CSS樣式的優勢 6-3 CSS代碼語法css樣式由選擇符和聲明組成,而聲明又由屬性和值組成,比如:
p{color:blue}6-4 CSS注釋代碼
就像在Html的注釋一樣,在CSS中也有注釋語句:用/*注釋語句*/來標明(Html中使用)。
第7章 CSS樣式基本知識 7-1 內聯式css樣式內聯式css樣式表就是把css代碼直接寫在現有的HTML標簽中,如下面代碼:
這里文字是紅色。
注意要寫在元素的開始標簽里,下面這種寫法是錯誤的:
這里文字是紅色。
并且css樣式代碼要寫在style=""雙引號中,如果有多條css樣式代碼設置可以寫在一起,中間用分號隔開。如下代碼:
7-2 嵌入式css樣式這里文字是紅色。
嵌入式css樣式,就是可以把css樣式代碼寫在標簽之間。如下面代碼實現把三個標簽中的文字設置為紅色:
嵌入式css樣式必須寫在之間,并且一般情況下嵌入式css樣式寫在之間。
7-3 外部式css樣式外部式css樣式(也可稱為外聯式)就是把css代碼寫一個多帶帶的外部文件中,這個css樣式文件以“.css”為擴展名,在內(不是在標簽內)使用標簽將css樣式文件鏈接到HTML文件內,如下面代碼:
注意:
css樣式文件名稱以有意義的英文字母命名,如main.css。
rel="stylesheet" type="text/css"是固定寫法不可修改。
標簽位置一般寫在標簽之內。
7-4 三種方法的優先級內聯式>嵌入式>外部式
但是嵌入式>外部式有一個前提:嵌入式css樣式的位置一定在外部式的后面。如右代碼編輯器就是這樣,代碼在代碼的前面(實際開發中也是這么寫的)
其實總結來說,就是——就近原則(離被設置元素越近優先級別越高)。
但注意上面所總結的優先級是有一個前提:內聯式、嵌入式、外部式樣式表中css樣式是在的相同權值的情況下。
第8章 CSS選擇器 8-1 CSS選擇器每一條css樣式聲明(定義)由兩部分組成,形式如下:
選擇器{ 樣式; }
在{}之前的部分就是“選擇器”,“選擇器”指明了{}中的“樣式”的作用對象,也就是“樣式”作用于網頁中的哪些元素。
8-2 標簽選擇器標簽選擇器其實就是html代碼中的標簽。如右側代碼編輯器中的、、、
、。例如下面代碼:
p{font-size:12px;line-height:1.6em;}
上面的css樣式代碼的作用:為p標簽設置12px字號,行間距設置1.6em的樣式。
8-3 類選擇器類選擇器在css樣式編碼中是最常用到的。
語法:
.類選器名稱{css樣式代碼;}
注意:
英文圓點開頭
其中類選器名稱可以任意起名(但不要起中文噢)
使用方法:
第一步:使用合適的標簽把要修飾的內容標記起來,如下:
膽小如鼠
第二步:使用class="類選擇器名稱"為標簽設置一個類,如下:
膽小如鼠
第三步:設置類選器css樣式,如下:
.stress{color:red;}/*類前面要加入一個英文圓點*/8-4 ID選擇器
在很多方面,ID選擇器都類似于類選擇符,但也有一些重要的區別:
為標簽設置id="ID名稱",而不是class="類名稱"。
ID選擇符的前面是井號(#)號,而不是英文圓點(.)。
8-5 類和ID選擇器的區別相同點:
可以應用于任何元素
不同點:
ID選擇器只能在文檔中使用一次。與類選擇器不同,在一個HTML文檔中,ID選擇器只能使用一次,而且僅一次。而類選擇器可以使用多次。
可以使用類選擇器詞列表方法為一個元素同時設置多個樣式。我們可以為一個元素同時設多個樣式,但只可以用類選擇器的方法實現,ID選擇器是不可以的(不能使用 ID 詞列表)。
下面的代碼是正確的(完整代碼見右側代碼編輯器)
.stress{ color:red; } .bigsize{ font-size:25px; }到了三年級下學期時,我們班上了一節公開課...
上面代碼的作用是為“三年級”三個文字設置文本顏色為紅色并且字號為25px。
下面的代碼是不正確的(完整代碼見右側代碼編輯器)
#stressid{ color:red; } #bigsizeid{ font-size:25px; }到了三年級下學期時,我們班上了一節公開課...
上面代碼不可以實現為“三年級”三個文字設置文本顏色為紅色并且字號為25px的作用。
8-6 子選擇器還有一個比較有用的選擇器子選擇器,即大于符號(>),用于選擇指定標簽元素的第一代子元素。如右側代碼編輯器中的代碼:
.food>li{border:1px solid red;}
這行代碼會使class名為food下的子元素li(水果、蔬菜)加入紅色實線邊框。
8-7 包含(后代)選擇器包含選擇器,即加入空格,用于選擇指定標簽元素下的后輩元素。如右側代碼編輯器中的代碼:
.first span{color:red;}
這行代碼會使第一段文字內容的字體顏色變為紅色。
請注意這個選擇器與子選擇器的區別,子選擇器(child selector)僅是指它的直接后代,或者你可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇,而子選擇器是通過“>”進行選擇。
總結:>作用于元素的第一代后代,空格作用于元素的所有后代。
8-8 通用選擇器通用選擇器是功能最強大的選擇器,它使用一個(*)號指定,它的作用是匹配html中所有標簽元素,如下使用下面代碼使用html中任意標簽元素字體顏色全部設置為紅色:
* {color:red;}8-9 偽類選擇符
更有趣的是偽類選擇符,為什么叫做偽類選擇符,它允許給html不存在的標簽(標簽的某種狀態)設置樣式,比如說我們給html中一個標簽元素的鼠標滑過的狀態來設置字體顏色:
a:hover{color:red;}
上面一行代碼就是為a標簽鼠標滑過的狀態設置字體顏色變紅。這樣就會使第一段文字內容中的“膽小如鼠”文字加入鼠標滑過字體顏色變為紅色特效。
8-10 分組選擇符當你想為html中多個標簽元素設置同一個樣式時,可以使用分組選擇符(,),如下代碼為右側代碼編輯器中的h1、span標簽同時設置字體顏色為紅色:
h1,span{color:red;}
它相當于下面兩行代碼:
h1{color:red;} span{color:red;}9-1 繼承
CSS的某些樣式是具有繼承性的,那么什么是繼承呢?繼承是一種規則,它允許樣式不僅應用于某個特定html標簽元素,而且應用于其后代。比如下面代碼:如某種顏色應用于p標簽,這個顏色設置不僅應用p標簽,還應用于p標簽中的所有子元素文本,這里子元素為span標簽。
p{color:red;}三年級時,我還是一個膽小如鼠的小女孩。
可見右側結果窗口中p中的文本與span中的文本都設置為了紅色。但注意有一些css樣式是不具有繼承性的。如border:1px solid red;
p{border:1px solid red;}三年級時,我還是一個膽小如鼠的小女孩。
在上面例子中它代碼的作用只是給p標簽設置了邊框為1像素、紅色、實心邊框線,而對于子元素`span是沒用起到作用的。
9-2 特殊性有的時候我們為同一個元素設置了不同的CSS樣式代碼,那么元素會啟用哪一個CSS樣式呢?我們來看一下面的代碼:
p{color:red;} .first{color:green;}三年級時,我還是一個膽小如鼠的小女孩。
p和.first都匹配到了p這個標簽上,那么會顯示哪種顏色呢?green是正確的顏色,那么為什么呢?是因為瀏覽器是根據權值來判斷使用哪種css樣式的,權值高的就使用哪種css樣式。
下面是權值的規則:標簽的權值為1,類選擇符的權值為10,ID選擇符的權值最高為100。例如下面的代碼:
p{color:red;} /*權值為1*/ p span{color:green;} /*權值為1+1=2*/ .warning{color:white;} /*權值為10*/ p span.warning{color:purple;} /*權值為1+1+10=12*/ #footer .note p{color:yellow;} /*權值為100+10+1=111*/
注意:還有一個權值比較特殊——繼承也有權值但很低,有的文獻提出它只有0.1,所以可以理解為繼承的權值最低。
9-3 層疊層疊就是在html文件中對于同一個元素可以有多個css樣式存在,當有相同權重的樣式存在時,會根據這些css樣式的前后順序來決定,處于最后面的css樣式會被應用。
如下面代碼:
p{color:red;} p{color:green;}三年級時,我還是一個膽小如鼠的小女孩。
最后p中的文本會設置為green,這個層疊很好理解,理解為后面的樣式會覆蓋前面的樣式。
所以前面的css樣式優先級就不難理解了:
內聯樣式表(標簽內部)> 嵌入樣式表(當前文件中)> 外部樣式表(外部文件中)。
9-4 重要性我們在做網頁代碼的時,有些特殊的情況需要為某些樣式設置具有最高權值,怎么辦?這時候我們可以使用!important來解決。
如下代碼:
p{color:red!important;} p{color:green;}三年級時,我還是一個膽小如鼠的小女孩。
這時 p 段落中的文本會顯示的red紅色。
注意:!important要寫在分號的前面
這里注意當網頁制作者不設置css樣式時,瀏覽器會按照自己的一套樣式來顯示網頁。并且用戶也可以在瀏覽器中設置自己習慣的樣式,比如有的用戶習慣把字號設置為大一些,使其查看網頁的文本更加清楚。這時注意樣式優先級為:瀏覽器默認的樣式 < 網頁制作者樣式 < 用戶自己設置的樣式,但記住!important優先級樣式是個例外,權值高于用戶自己設置的樣式。
第10章 CSS格式化排版 10-1 文字排版--字體我們可以使用css樣式為網頁中的文字設置字體、字號、顏色等樣式屬性。下面我們來看一個例子,下面代碼實現:為網頁中的文字設置字體為宋體。
body{font-family:"宋體";}
這里注意不要設置不常用的字體,因為如果用戶本地電腦上如果沒有安裝你設置的字體,就會顯示瀏覽器默認的字體。(因為用戶是否可以看到你設置的字體樣式取決于用戶本地電腦上是否安裝你設置的字體。)
現在一般網頁喜歡設置“微軟雅黑”,如下代碼:
body{font-family:"Microsoft Yahei";}
或
body{font-family:"微軟雅黑";}
注意:第一種方法比第二種方法兼容性更好一些。
因為這種字體即美觀又可以在客戶端安全的顯示出來(用戶本地一般都是默認安裝的)。
10-2 文字排版--字號、顏色可以使用下面代碼設置網頁中文字的字號為12像素,并把字體顏色設置為#666(灰色):
body{font-size:12px;color:#666}10-3 文字排版--粗體
我們還可以使用css樣式來改變文字的樣式:粗體、斜體、下劃線、刪除線,可以使用下面代碼實現設置文字以粗體樣式顯示出來。
p span{font-weight:bold;}
在這里大家可以看到,如果想為文字設置粗體是有多帶帶的css樣式來實現的,再不用為了實現粗體樣式而使用h1-h6或strong標簽了。
10-4 文字排版--斜體以下代碼可以實現文字以斜體樣式在瀏覽器中顯示:
p a{font-style:italic;}10-5 文字排版--下劃線三年級時,我還是一個膽小如鼠的小女孩。
有些情況下想為文字設置為下劃線樣式,這樣可以在視覺上強調文字,可以使用下面代碼來實現:
p a{text-decoration:underline;}10-6 文字排版--刪除線三年級時,我還是一個膽小如鼠的小女孩。
刪除線使用下面代碼就可以實現:
.oldPrice{text-decoration:line-through;}10-7 段落排版--縮進
中文文字中的段前習慣空兩個文字的空白,這個特殊的樣式可以用下面代碼來實現:
p{text-indent:2em;}1922年的春天,一個想要成名名叫尼克卡拉威(托比?馬奎爾Tobey Maguire 飾)的作家,離開了美國中西部,來到了紐約。那是一個道德感漸失,爵士樂流行,走私為王,股票飛漲的時代。為了追尋他的美國夢,他搬入紐約附近一海灣居住。
注意:2em的意思就是文字的2倍大小。
10-8 段落排版--行間距(行高)在段落排版中起重要作用的行間距(行高)屬性(line-height),如下代碼實現設置段落行間距為1.5倍。
p{line-height:1.5em;}10-9 段落排版--中文字間距、字母間距菲茨杰拉德,二十世紀美國文學巨擘之一,兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士樂時代"吟唱華麗挽歌,其詩人和夢想家的氣質亦為那個奢靡年代的不二注解。
中文字間隔、字母間隔設置:
如果想在網頁排版中設置文字間隔或者字母間隔就可以使用letter-spacing來實現,如下面代碼:
h1{ letter-spacing:50px; } ...了不起的蓋茨比
注意:這個樣式使用在英文單詞時,是設置字母與字母之間的間距。
單詞間距設置:
如果我想設置英文單詞之間的間距呢?可以使用word-spacing來實現。如下代碼:
h1{ word-spacing:50px; } ...10-10 段落排版--對齊welcome to imooc!
想為塊狀元素中的文本、圖片設置居中樣式嗎?可以使用text-align樣式代碼,如下代碼可實現文本居中顯示。
h1{ text-align:center; }了不起的蓋茨比
同樣可以設置居左:
h1{ text-align:left; }了不起的蓋茨比
還可以設置居右:
h1{ text-align:right; }第十一章 CSS盒模型 11-1 元素分類了不起的蓋茨比
在講解CSS布局之前,我們需要提前知道一些知識,在CSS中,html中的標簽元素大體被分為三種不同的類型:塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。
常用的塊狀元素有:
、...、 常用的內聯元素有: 常用的內聯塊狀元素有: 、 什么是塊級元素?在html中 、、、 塊級元素特點: 每個塊級元素都從新的一行開始,并且其后的元素也另起一行。(真霸道,一個塊級元素獨占一行) 元素的高度、寬度、行高以及頂和底邊距都可設置。 元素寬度在不設置的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設定一個寬度。 在html中,、、、 和就是典型的內聯元素(行內元素)(inline)元素。當然塊狀元素也可以通過代碼display:inline將元素設置為內聯元素。如下代碼就是將塊狀元素div轉換為內聯元素,從而使div元素具有內聯元素特點。 內聯元素特點: 和其他元素都在一行上; 元素的高度、寬度及頂部和底部邊距不可設置; 元素的寬度就是它包含的文字或圖片的寬度,不可改變。 內聯塊狀元素(inline-block)就是同時具備內聯元素、塊狀元素的特點,代碼display:inline-block就是將元素設置為內聯塊狀元素。(css2.1新增),、標簽就是這種內聯塊狀標簽。 inline-block元素特點: 和其他元素都在一行上; 元素的高度、寬度、行高以及頂和底邊距都可設置。 盒子模型包括: padding 容器內邊距 margin 盒子的外邊距 border 盒子的外邊框 特點: 、 注:盒子的實際寬度=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界(內容高度+上下內外邊距),高度同理。 盒子模型的邊框就是圍繞著內容及補白的線,這條線你可以設置它的粗細、樣式和顏色(邊框三個屬性)。 如下面代碼為div來設置邊框粗細為2px、樣式為實心的、顏色為紅色的邊框: 上面是border代碼的縮寫形式,可以分開寫: 注意: 1.border-style(邊框樣式)常見樣式有: dashed(虛線)| dotted(點線)| solid(實線)。 2.border-color(邊框顏色)中的顏色可設置為十六進制顏色,如: 3.border-width(邊框寬度)中的寬度也可以設置為: thin | medium | thick(但不是很常用),最常還是用象素(px)。 現在有一個問題,如果有想為 p 標簽多帶帶設置下邊框,而其它三邊都不設置邊框樣式怎么辦呢?css 樣式中允許只為一個方向的邊框設置樣式: 同樣可以使用下面代碼實現其它三邊(上、右、左)邊框的設置: 盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的,css內定義的寬(width)和高(height),指的是填充以內的內容范圍。 因此一個元素實際寬度(盒子的寬度)=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。 元素的高度也是同理。 比如: css代碼: html代碼: 元素的實際長度為:10px+1px+20px+200px+20px+1px+10px=262px。 元素內容與邊框之間是可以設置距離的,稱之為“填充”。填充也可分為上、右、下、左(順時針)。如下代碼: 順序一定不要搞混。可以分開寫上面代碼: 如果上、右、下、左的填充都為10px;可以這么寫 如果上下填充一樣為10px,左右一樣為20px,可以這么寫: 元素與其它元素之間的距離可以使用邊界(margin)來設置。邊界也是可分為上、右、下、左。如下代碼: 也可以分開寫: 如果上右下左的邊界都為10px;可以這么寫: 如果上下邊界一樣為10px,左右一樣為20px,可以這么寫: 總結一下:padding和margin的區別,padding在邊框里,margin在邊框外。 清楚了CSS 盒模型的基本概念、 盒模型類型, 我們就可以深入探討網頁布局的基本模型了。布局模型與盒模型一樣都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基礎之上,又不同于我們常說的 CSS 布局樣式或 CSS 布局模板。如果說布局模型是本,那么 CSS 布局模板就是末了,是外在的表現形式。 CSS包含3種基本的布局模型,用英文概括為:Flow、Layer和Float。 流動模型(Flow) 浮動模型(Float) 層模型(Layer) 先來說一說流動模型,流動(Flow)是默認的網頁布局模式。也就是說網頁在默認狀態下的 HTML 網頁元素都是根據流動模型來分布網頁內容的。 流動布局模型具有2個比較典型的特征: 第一點,塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布,因為在默認狀態下,塊狀元素的寬度都為100%。實際上,塊狀元素都會以行的形式占據位置。 第二點,在流動模型下,內聯元素都會在所處的包含元素內從左到右水平分布顯示。(內聯元素可不像塊狀元素這么霸道獨占一行) 塊狀元素這么霸道都是獨占一行,如果現在我們想讓兩個塊狀元素并排顯示,怎么辦呢?不要著急,設置元素浮動就可以實現這一愿望。 任何元素在默認情況下是不能浮動的,但可以用 CSS 定義為浮動,如div、p、table、img等元素都可以被定義為浮動。如下代碼可以實現兩個 div 元素一行顯示。 當然你也可以同時設置兩個元素右浮動也可以實現一行顯示。 設置兩個元素一左一右可以實現一行顯示嗎?當然可以: 什么是層布局模型?層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣,每個圖層能夠精確定位操作,但在網頁設計領域,由于網頁大小的活動性,層布局沒能受到熱捧。但是在網頁上局部使用層布局還是有其方便之處的。下面我們來學習一下html中的層布局。 如何讓html元素在網頁中精確定位,就像圖像軟件PhotoShop中的圖層一樣可以對每個圖層能夠精確定位操作。CSS定義了一組定位(positioning)屬性來支持層布局模型。 層模型有三種形式: 絕對定位(position: absolute) 相對定位(position: relative) 固定定位(position: fixed) 如果想為元素設置層模型中的絕對定位,需要設置position:absolute(表示絕對定位),這條語句的作用將元素從文檔流中拖出來,然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊,則相對于body元素,即相對于瀏覽器窗口。 如下面代碼可以實現div元素相對于瀏覽器窗口向右移動100px,向下移動50px。 如果想為元素設置層模型中的相對定位,需要設置position:relative(表示相對定位),它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。 相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來),然后相對于以前的位置移動,移動的方向和幅度由left、right、top、bottom屬性確定,偏移前的位置保留不動。 如下代碼實現相對于以前位置向下移動50px,向右移動100px; fixed:表示固定定位,與absolute定位類型類似,但它的相對移動的坐標是視圖(屏幕內的網頁窗口)本身。 由于視圖本身是固定的,它不會隨瀏覽器窗口的滾動條滾動而變化,除非你在屏幕中移動瀏覽器窗口的屏幕位置,或改變瀏覽器窗口的顯示大小,因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置,不會受文檔流動影響,這與background-attachment:fixed?屬性功能相同。以下代碼可以實現相對于瀏覽器視圖向右移動100px,向下移動50px。并且拖動滾動條時位置固定不變。 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 使用position:absolute可以實現被設置元素相對于瀏覽器(body)設置定位以后,大家有沒有想過可不可以相對于其它元素進行定位呢?答案是肯定的,當然可以。使用position:relative來幫忙,但是必須遵守下面規范: 1.參照定位的元素必須是相對定位元素的前輩元素: 從上面代碼可以看出box1是box2的父元素(父元素當然也是前輩元素了)。 2.參照定位的元素必須加入position:relative; 3.定位元素加入position:absolute,便可以使用top、bottom、left、right來進行偏移定位了。 這樣box2就可以相對于父元素box1定位了(這里注意參照物就可以不是瀏覽器了,而可以自由設置了)。 還記得在講盒模型時外邊距(margin)、內邊距(padding)和邊框(border)**設置上下左右四個方向的邊距是按照順時針方向設置的:上右下左。具體應用在margin和padding的例子如下: 通常有下面三種縮寫方法: 1.如果top、right、bottom、left的值相同,如下面代碼: 可縮寫為: 2.如果top和bottom值相同、left和right的值相同,如下面代碼: 可縮寫為: 3.如果left和right的值相同,如下面代碼: 可縮寫為: 注意:padding、border的縮寫方法和margin是一致的。 關于顏色的css樣式也是可以縮寫的,當你設置的顏色是16進制的色彩值時,如果每兩位的值相同,可以縮寫一半。 例子1: 可以縮寫為: 例子2: 可以縮寫為: 網頁中的字體css樣式代碼也有他自己的縮寫方式,下面是給網頁設置字體的代碼: 這么多行的代碼其實可以縮寫為一句: 注意: 使用這一簡寫方式你至少要指定font-size和font-family屬性,其他的屬性(如font-weight、font-style、font-varient、line-height)如未指定將自動使用默認值。 2、在縮寫時font-size與line-height中間要加入“/”斜扛。 一般情況下因為對于中文網站,英文還是比較少的,所以下面縮寫代碼比較常用: 只是有字號、行間距、中文字體、英文字體設置。 在網頁中的顏色設置是非常重要,有字體顏色(color)、背景顏色(background-color)、邊框顏色(border)等,設置顏色的方法也有很多種: 1.英文命令顏色 前面幾個小節中經常用到的就是這種設置方法: 2.RGB顏色 這個與 photoshop 中的 RGB 顏色是一致的,由 R(red)、G(green)、B(blue) 三種顏色的比例來配色。 每一項的值可以是 0~255 之間的整數,也可以是 0%~100% 的百分數。如: 3. 十六進制顏色 這種顏色設置方法是現在比較普遍使用的方法,其原理其實也是 RGB 設置,但是其每一項的值由 0-255 變成了十六進制 00-ff。 配色表: 長度單位總結一下,目前比較常用到px(像素)、em、% 百分比,要注意其實這三種單位都是相對單位。 1.像素 像素為什么是相對單位呢?因為像素指的是顯示器上的小點(CSS規范中假設“90像素=1英寸”)。實際情況是瀏覽器會使用顯示器的實際像素值有關,在目前大多數的設計者都傾向于使用像素(px)作為單位。 2.em **就是本元素給定字體的font-size值,如果元素的font-size為14px ,那么1em=14px;如果font-size為18px,那么1em=18px。如下代碼: 上面代碼就是可以實現段落首行縮進 24px(也就是兩個字體大小的距離)。(indent英文義為「切割…使呈鋸齒狀; 縮進排版」。) 下面注意一個特殊情況: 但當給font-size設置單位為em時,此時計算的標準以p的父元素的font-size為基礎。如下代碼: html: 以這個例子為例。 css: 結果 span 中的字體“例子”字體大小就為11.2px(14 * 0.8 = 11.2px)。 3.百分比 設置行高(行間距)為字體的130%(12 * 1.3 = 15.6px)。 如果被設置元素為文本、圖片等行內元素時,水平居中是通過給父元素設置text-align:center來實現的。如下代碼: html代碼: css代碼: 當被設置元素為塊狀元素時用text-align:center就不起作用了,這時也分兩種情況:定寬塊狀元素和不定寬塊狀元素。這一小節我們先來講一講定寬塊狀元素。 滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現居中的。我們來看個例子就是設置div這個塊狀元素水平居中: html代碼: css代碼: 也可以寫成: 注意:元素的“上下 margin” 是可以隨意設置的。(margin:外邊距屬性) 不定寬度的塊狀元素有三種方法居中(這三種方法目前使用的都比多): 加入table標簽 設置display;inline方法 設置position:relative和left:50%; 這一小節我們來講一下第一種方法: 第一步:為需要設置的居中的元素外面加入一個table標簽 ( 包括、 第二步:為這個table設置“左右margin居中”(這個和定寬塊狀元素的方法一樣)。 html代碼: css代碼: 第二種方法:改變塊級元素的display為inline類型,然后使用text-align:center 來實現居中效果。如下例子: html代碼: css代碼: 這種方法相比第一種方法的優勢是不用增加無語義標簽,簡化了標簽的嵌套深度,但也存在著一些問題:它將塊狀元素的display類型改為inline,變成了行內元素,所以少了一些功能,比如設定長度值。 方法三:通過給父元素設置float,然后給父元素設置position:relative和 left:50%,子元素設置position:relative和left:-50%來實現水平居中。 代碼如下: css代碼: 這種方法可以保留塊狀元素仍以display:block的形式顯示,優點不添加無語議表標簽,不增加嵌套深度,但它的缺點是設置了position:relative,帶來了一定的副作用。 父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的height和line-height高度一致來實現的。如下代碼: css代碼: 父元素高度確定的多行文本、圖片、塊狀元素的豎直居中的方法有兩種: 方法一:使用插入table (包括tbody、tr、td)標簽,同時設置vertical-align:middle。 說到豎直居中,css 中有一個用于豎直居中的屬性vertical-align,但這個樣式只有在父元素為td或th時,才會生效。所以又要插入table標簽了。下面看一下例子: html代碼: 看我是否可以居中。 看我是否可以居中。 看我是否可以居中。 看我是否可以居中。 看我是否可以居中。 css代碼: 因為td標簽默認情況下就默認設置了vertical-align為middle,所以我們不需要顯式地設置了。 在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的display為table-cell,激活vertical-align屬性,但注意 IE6、7 并不支持這個樣式。 html代碼: 看我是否可以居中。 看我是否可以居中。 看我是否可以居中。 看我是否可以居中。 看我是否可以居中。 css代碼: 這種方法的好處是不用添加多余的無意義的標簽,但缺點也很明顯,它的兼容性不是很好,不兼容 IE6、7。 有一個有趣的現象就是當為元素(不論之前是什么類型元素,display:none除外)設置以下 2 個句之一: position : absolute float : left 或 float:right 元素會自動變為以display:inline-block的方式顯示,當然就可以設置元素的width和 height了且默認寬度不占滿父元素。 如下面的代碼,小伙伴們都知道a標簽是行內元素,所以設置它的width是沒有效果的,但是設置為position:absolute以后,就可以了。 css代碼 文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。 轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/49744.html 摘要:中脫離文檔流,也就是將元素從普通的布局排版中拿走,其他盒子在定位的時候,會當做脫離文檔流的元素不存在而進行定位。而對于使用脫離文檔流的元素,其他盒子與其他盒子內的文本都會無視它。
第一章 內容簡介
1-1 內容簡介
showImg(https://segmentfault.com/img/bVsT8U);
網頁可以自適應寬度網頁的長度理論上可以無限延長
頁面為:
頭部
主體部分
底部... 摘要:建議閱讀博客前端工程基礎篇鏈接書籍深入淺出鏈接服務器端的是在年正式提出并開源的,傳統的都運行在瀏覽器這樣的宿主環境中,而基于谷歌瀏覽器的引擎構建的運行環境,使用了一個事件驅動非阻塞式的模型,將帶入服務器領域。
1.網頁布局HTML+CSS
技能要求
學會用工具(如PS)切圖,將設計稿還原成網頁布局
掌握常規布局方法:文檔流布局,flex布局,grid布局,居中,浮動……
HTML5... 摘要:坦克大戰上簡介上的坦克大戰相信大家都玩過有逃學玩坦克的可以自己默默的扣一個了我們現在長大了,學習游戲開發了。
寫在前面
上一篇(https://www.tech1024.cn/origi... )說了如何創建項目,并爬去網站內容,下面我們說一下如何保存爬去到的數據
開始爬取
創建Spider,上一篇我們已經創建了ImoocSpider,我們做一下修改,可以連續下一頁爬取。scrapyD... 閱讀 1090·2021-11-15 18:00 閱讀 2802·2021-09-22 15:18 閱讀 1964·2021-09-04 16:45 閱讀 750·2019-08-30 15:55 閱讀 3852·2019-08-30 13:10 閱讀 1331·2019-08-30 11:06 閱讀 1983·2019-08-29 12:51 閱讀 2294·2019-08-26 13:55、
、
、
、、 、
和就是塊級元素。設置display:block就是將元素顯示為塊級元素。如下代碼就是將內聯元素a轉換為塊狀元素,從而使a元素具有塊狀元素特點。
a{display:block;}
div{
display:inline;
}
......
每個都有四個方向上的邊距:top、bottom、left、right、
都是塊級標簽,盒子模型的特征只適合塊級標簽。
div{
border:2px solid red;
}
div{
border-width:2px;
border-style:solid;
border-color:red;
}
border-color:#888;//前面的井號不要忘掉。
div{border-bottom:1px solid red;}
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
11-8 盒模型--寬度和高度
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
div{padding:20px 10px 15px 30px;}
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
div{padding:10px;}
div{padding:10px 20px;}
11-10 盒模型--邊界
div{margin:20px 10px 15px 30px;}
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
div{ margin:10px;}
div{ margin:10px 20px;}
在網頁中,元素有三種布局模型:div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
div{
width:200px;
height:200px;
border:2px red solid;
float:right;
}
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
12-5 什么是層模型?
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
12-7 層模型--相對定位
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
12-8 層模型--固定定位
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
12-9 Relative與Absolute組合使用
#box1{
width:200px;
height:200px;
position:relative;
}
#box2{
position:absolute;
top:20px;
left:30px;
}
margin:10px 15px 12px 14px;
/*上設置為10px、右設置為15px、下設置為12px、左設置為14px*/
margin:10px 10px 10px 10px;
margin:10px;
margin:10px 20px 10px 20px;
margin:10px 20px;
margin:10px 20px 30px 20px;
margin:10px 20px 30px;
p{color:#000000;}
p{color: #000;}
p{color: #336699;}
p{color: #369;}
13-3 字體縮寫
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋體",sans-serif;
}
body{
font:italic small-caps bold 12px/1.5em "宋體",sans-serif;
}
body{
font:12px/1.5em "宋體",sans-serif;
}
p{color:red;}
p{color:rgb(133,45,200);}
p{color:rgb(20%,33%,25%);}
p{color:#00ffff;}
p{font-size:12px;text-indent:2em;}
p{font-size:14px}
span{font-size:0.8em;}
p{font-size:12px;line-height:130%}
margin-left:auto;
margin-right:auto;
、 )。
table td{height:500px;background:#ccc}
相關文章
如何用CSS進行網頁布局-imooc-【更新完畢】
前端
保存數據到MySql數據庫——我用scrapy寫爬蟲(二)
發表評論
0條評論
Heier
男|高級講師
TA的文章
閱讀更多
RackNerd LLC:雙11活動,4款美國便宜VPS低至$12/年,機房可選洛杉磯、圣何塞、西雅
云主機如何連接-云主機怎么用手機連接?
初始Selenium
響應式網頁布局 - W3Schools How-Tos 01
用CSS3 transition屬性實現淡入淡出輪播圖
圖片批量上傳js+html+css
HTML & CSS 之小白再續前緣
JavaScript發展史,JavaScript組成和開發工具介紹-樂字節