css,為網頁設定樣式
認識css
css全稱層疊樣式表。主要用於定義htm在瀏覽器中的顯示樣式,比如文字大小顏色字型等。
< style>
p < /style>
< body>
< p>你好< /p>
< /body>
css的優勢
同時設定標籤型別相同的標籤樣式
標籤名**語法
選擇符(也就是標籤)
宣告有多條時用;號隔開(英文狀態下)
css注釋**
/注釋語句/
html 中用 < !-----注釋語句------->
css的插入按樣式
css的插入樣式可以分為內聯式、嵌入式和外部式三種。
1、css樣式檔名稱以有意義的英文本母命名,如 main.css。
2、rel=「stylesheet」 type=「text/css」 是固定寫法不可修改。
3、標籤位置一般寫在標籤之內。
三種方式顯示優先順序:內聯式》嵌入式》外部式
css選擇器
定義:選擇器
選擇器為網頁中的元素 內容
------定義該p標籤的類為pub 然後在中寫css** .pub 注意有個英文圓點
使用部分:
示範div
類選擇器和id選擇器的區別
類選擇器可以在乙個文件中使用多次,且可以合併使用,如
其中pub和pab為定義的兩個類
id選擇器只能使用一次 你好
定義時用這個 .first>span
如果是id和class同一樣式:
#id,.class
繼承器、優先順序和重要性
css字型樣式
css文字樣式
css盒模型
在css中,html中的標籤元素大體被分為三種不同的型別:塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。
常用的塊狀元素有:
< div>、< p>、< h1>…< h6>、< ol>、< ul>、< dl>、< table>、< address>、< blockquote> 、< form>
常用的內聯元素有:
< a>、< span>、< br>、< i>、< em>、< strong>、< label>、< q>、< var>、< cite>、< code>
常用的內聯塊狀元素有:
< img>、< input>
1、每個塊級元素都從新的一行開始,並且其後的元素也另起一行。(真霸道,乙個塊級元素獨佔一行)
2、元素的高度、寬度、行高以及頂和底邊距都可設定。
3、元素寬度在不設定的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設定乙個寬度。
2、元素的高度、寬度及頂部和底部邊距不可設定;
3、元素的寬度就是它包含的文字或的寬度,不可改變
1、和其他元素都在一行上;
2、元素的高度、寬度、行高以及頂和底邊距都可設定。
布局模型
布局模型是建立在盒模型基礎之上,又不同於我們常說的 css3 布局樣式或 css3 布局模板。 css3 布局模板是外在的表現形式。
css3包含3種基本的布局模型,用英文概括為:flow、layer 和 float。
在網頁中,元素有三種布局模型:
1、流動模型(flow)
流動(flow)是預設的網頁布局模式。也就是說網頁在預設狀態下的 html 網頁元素都是根據流動模型來分布網頁內容的。
流動布局模型具有2個比較典型的特徵:
第一點,塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布,因為在預設狀態下,塊狀元素的寬度都為100%。實際上,塊狀元素都會以***行***的形式佔據位置。如右側**編輯器中三個塊狀元素標籤(div,h1,p)寬度顯示為100%。
第二點,在流動模型下,內聯元素都會在所處的包含元素內從左到右水平分布顯示。(內聯元素可不像塊狀元素這麼霸道獨佔一行)
2、浮動模型 (float)
任何元素在預設情況下是不能浮動的,但可以用 css 定義為浮動,如 div、p、table、img 等元素都可以被定義為浮動。
float:left-----左浮動
float:right------右浮動
3、層模型(layer)
如何讓html元素在網頁中精確定位,就像影象軟體photoshop中的圖層一樣可以對每個圖層能夠精確定位操作。css定義了一組定位(positioning)屬性來支援層布局模型。
層模型有三種形式:
1、絕對定位(position: absolute)
將元素從文件流中拖出來,然後使用left、right、top、bottom屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊,則相對於body元素,即相對於瀏覽器視窗。
絕對定位其實就是相對於瀏覽器,你離右邊多少距離就是從瀏覽器視窗向左多少
2、相對定位(position: relative)
為元素設定層模型中的相對定位,需要設定position:relative(表示相對定位),它通過left、right、top、bottom屬性確定元素在正常文件流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成乙個元素(並且元素像層一樣浮動了起來),然後相對於以前的位置移動,移動的方向和幅度由left、right、top、bottom屬性確定,偏移前的位置保留不動。
3、固定定位(position: fixed)
fixed:表示固定定位,與absolute定位型別類似,但它的相對移動的座標是檢視(螢幕內的網頁視窗)本身。由於檢視本身是固定的,它不會隨瀏覽器視窗的滾動條滾動而變化,除非你在螢幕中移動瀏覽器視窗的螢幕位置,或改變瀏覽器視窗的顯示大小,因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置,不會受文件流動影響,這與background-attachment:fixed;屬性功能相同。
實現瀏覽器檢視右下角定位div層:
div
彈性盒模型
行內元素——水平居中設定
行內元素怎麼進行水平居中?如果被設定元素為文字、等行內元素時,水平居中是通過給父元素設定 text-align:center 來實現的。
水平居中設定-定寬塊狀元素
當被設定元素為 塊狀元素 時用 text-align:center 就不起作用了,這時也分兩種情況:定寬塊狀元素和不定寬塊狀元素。
(定寬塊狀元素:塊狀元素的寬度width為固定值。)
定寬和塊狀兩個條件的元素是可以通過設定「左右margin」值為「auto」來實現居中的
面試常考題之已知寬高實現盒子水平垂直居中
1、利用父元素設定相對定位,子元素設定絕對定位,那麼子元素就是相對于父元素定位的特性。
2、子元素設定上和左偏移的值都為50%,是元素的左上角在父元素中心點的位置。
3、然後再用margin給上和左都給負的自身寬高的一半,就能達到垂直水平居中的效果。
面試常考題之寬高不定實現盒子水平垂直居中
1、利用父元素設定相對定位,子元素設定絕對定位,那麼子元素就是相對于父元素定位的特性。
2、子元素設定上和左偏移的值都為50%。
3、然後再用css3屬性translate位移,給上和左都位移-50%距離,就能達到垂直水平居中的效果transform: translate(-50%, -50%);
CSS定位(慕課網學習筆記)
定位模型 static自然模型 relative相對定位模型 absolute絕對定位模型 fixed固定定位模型 sticky磁鐵定位模型 作用使元素定位於 常規 自然流 中 塊 行垂直排列下去,行內水平從左到右 特點1 忽略top,bottom,left,right或者z index宣告 2 兩...
CSS定位(慕課網學習筆記)
定位模型 static自然模型 relative相對定位模型 absolute絕對定位模型 fixed固定定位模型 sticky磁鐵定位模型 作用使元素定位於 常規 自然流 中 塊 行垂直排列下去,行內水平從左到右 特點1 忽略top,bottom,left,right或者z index宣告 2 兩...
慕課網的HTML和CSS學習。 一
1 如果top right bottom left的值相同,如下面 margin 10px 10px 10px 10px 可縮寫為 margin 10px 2 如果top和bottom值相同 left和 right的值相同,如下面 margin 10px 20px 10px 20px 可縮寫為 ma...