一、關於權值
標籤選擇器:1
類選擇器:10
id選擇器:100
(繼承的權值:0.1)
文字樣式若被多次設定,則顯示權值最高的設定樣式
例子:
p/*權值為1*/p span/*權值為1+1=2*/.warning/*權值為10*/p span.warning/*權值為1+1+10=12*/#footer .note p/*權值為100+10+1=111*/若權值相同,按照css樣式書寫的前後順序決定選擇的樣式,後寫的樣式會覆蓋前面的(選擇後面的)--即:層疊
二、css樣式優先順序
內聯樣式表(標籤內部)> 嵌入樣式表(當前檔案中)> 外部樣式表(外部檔案中)
三、關於!important
作用:用以強制設定最高權值。例如:
p根據層疊規則,整個內的文字都應該顯示為綠色,但,由於手動設定了!important,第一行的權值變大,中的文字會顯示紅色。p三年級時,我還是乙個膽小如鼠的小女孩。
注意:
1.!important要寫在分號的前面
2.樣式優先順序(瀏覽器預設、網頁製作者設定、使用者設定之間):
瀏覽器預設的樣式 < 網頁製作者樣式 < 使用者自己設定的樣式
但記住!important優先順序樣式是個例外,權值高於使用者自己設定的樣式。
四、一些不熟悉的屬性
text-indent:2em;--設定文字段2個字元縮排,2em表示字元大小的兩倍
text-decoration:line-through;--電商打折,原價劃線效果
line-height:2em;--行高,設定為字元大小的兩倍(不是兩行之間的間距,是行的高度,即:行中文字+行間空格的高度,設定為2em,也就是兩行之間的間距為1em,即一倍字元的大小)
letter-spacing:20px;--文字字母間隔(文字間隔)設定為20px
word-spacing:20px;--英文單詞之間間隔設定為20px
display:block;--內聯元素轉化為塊級元素表示
display:inline;--塊級元素轉化為內聯元素表示
display:inline-block;--將元素設定為內聯塊級元素(
塊級元素特點:
1、每個塊級元素都從新的一行開始,並且其後的元素也另起一行。
2、元素的高度、寬度、行高以及頂和底邊距都可設定。
3、元素寬度在不設定的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設定乙個寬度。
內聯元素特點:
1、和其他元素都在一行上;
2、元素的高度、寬度及頂部和底部邊距不可設定;
3、元素的寬度就是它包含的文字或的寬度,不可改變。
inline-block 元素特點:
1、和其他元素都在一行上;
2、元素的高度、寬度、行高以及頂和底邊距都可設定。
五、關於盒模型
概念:外邊距、內邊距、邊框、內容
注意:css內定義的width、height,指的是內容的寬度和高度
因此,乙個元素實際的寬度(盒子寬度)=左邊界+左邊框+左填充+內容寬度(width)+右填充+右邊框+右邊界
高度同理。
六、css布局模型
在網頁中,元素有三種布局模型:
1、流動模型(flow)--
流動(flow)是預設的網頁布局模式。也就是說網頁在預設狀態下的 html 網頁元素都是根據流動模型來分布網頁內容的。
2、浮動模型 (float)--即元素的浮動效果設定。多用於使塊級元素同行並列顯示。
3、層模型(layer)
關於層模型:
有三種形式: 1、
絕對定位
(position: absolute):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):被設定的元素永遠處於固定位置,無論怎樣滑動進度條,元素都一直固定,不會跟隨進度條滾動
relative和absolute組合使用:
(1)自行選擇乙個參照定位元素p,注:這個元素p必須是要定位元素的前輩元素。要定位的元素,根據相對於定位元素p的位置,確定自己的位置
(2)參照定位元素p,設定position:relative;
(3)定位元素設定position:absolute;然後,使用left,right,top,bottom進行偏移定位。
注:這裡的偏移,指的是,left:定位元素的左邊界與p左邊界的距離,right:定位元素右邊界與p右邊界的距離,上下同理。
七、水平居中問題(不定寬塊狀元素)
三種方法:
1.加入 table 標籤
第一步:為需要設定的居中的元素外面加入乙個 table 標籤 ( 包括 、、)。
eg:
第二步:為這個 table 設定「左右 margin 居中」(這個和定寬塊狀元素的方法一樣)。 也可以在style中設定,display:table;這時,html中不需要再加入table標籤。
2.設定 display:inline 方法
改變塊級元素的 dispaly 為 inline 型別,然後使用 text-align:center 來實現居中效果。
3.設定 position:relative 和 left:50%;
(1)給父元素設定 float(left、right皆可)
(2)給父元素設定 position:relative;
left:50%;(或right:50%;這裡的left或right與父元素設定的float相對應)
(3)子元素設定 position:relative; left:-50%;(這裡是left還是right,同上,取決於父元素的float)
設定後,即可實現水平居中
八、垂直居中
父元素高度確定的多行文字、、塊狀元素的豎直居中的方法有兩種:
1.插入 table (包括tbody、tr、td)標籤。這裡預設 vertical-align:middle;因此,我們無需再手動設定。
看我是否可以居中。看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
table td注:父元素的height要給乙個固定值
2.在 chrome、firefox 及 ie8 以上的瀏覽器下可以設定塊級元素的 display 為 table-cell,啟用 vertical-align 屬性,但注意 ie6、7 並不支援這個樣式。
eg:
看我是否可以居中。九、隱性改變display型別看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
當為元素(不論之前是什麼型別元素,display:none 除外)設定以下 2 個句之一: 1.
position : absolute
2.float : left 或 float:right
元素會自動變為以
display:inline-block
的方式顯示,當然就可以設定元素的 width 和 height 了,且預設寬度不佔滿父元素。
eg:
進入課程請單擊這裡
CSS的一些基礎知識
在屬性後面使用 important 會覆蓋頁面內任何位置定義的元素樣式。作為style屬性寫在元素內的樣式 id選擇器 類選擇器 標籤選擇器 萬用字元選擇器 瀏覽器自定義或繼承 同一級別 同一級別中後寫的會覆蓋先寫的樣式 規則是多個級別的組合,把選擇器中規則對應做加法,比較權值,如果權值相同那就後面...
一些基礎知識
關於cd cd 返回剛才的位置 關於ls ls l,簡寫ll ls a顯示的檔案以.開頭,隱藏檔案 la al 關於cp cp r tmp dir 拷目錄 tmp拷到dir 需要加 r的 cp rm 10 13 1.grep 在乙個字元集合中找到符合條件的行輸出 如 grep hello file ...
一些基礎知識
linux基礎知識考查 1 在linux 系統中,以 檔案 方式訪問裝置 2 前台起動的程序使用 ctrl c 終止。3 在使用ls 命令時,用八進位制形式顯示非列印字元應使用引數 b 4 在linux 系統中,用來存放系統所需要的配置檔案和子目錄的目錄是 etc 5 在linux 系統中,壓縮檔案...