網頁製作基本代碼「網頁設計css樣式代碼大全」

CSS基礎樣式與盒模型基礎

1、CSS樣式表的引用方式

1.1、外部文件引用方式

<link Rrel=”stylesheet” href=”mystyle.css”>

1.2、使用@import引用外部CSS文件

@import url(mystyle.css);

1.3、內部文檔頭方式

1.4、行內樣式
<table style=”color:red;font-size:10pt” />

2選擇器

2.1基本選擇器

標籤/.class/#id/*通配符

2.2屬性選擇器

​ [name]匹配到所有屬性名為name的元素

​ [name=’test’]匹配到屬性名name=test的元素

​ [name~=’test’]屬性中包含獨立的單詞為 value

​ [attribute*=value] 屬性中做字符串拆分，只要能拆出來 value 這個詞就行;

​ [name|=’test’]屬性中必須是完整且唯一的單詞，或者以 – 分隔開

​ [name^=’test’]屬性的前幾個字母是 value 就可以

​ [attribute$=value] 以value結尾

2.3複合選擇器：

​ 後代選擇器（空格）

​ 子代選擇器（>）

​ 兄弟選擇器（~）：選擇下面的所有兄弟元素 .sub ~p

​ 相鄰兄弟選擇器（+）：選擇到緊挨着一個元素 .sub +p

​ 交集選擇器（.box#atr)

​ 並集選擇器(.box,#atr)

2.4偽元素選擇器(兩個冒號)

​ ::before

​ ::after

​ ::selection

​ ::first-letter（只用於塊級元素，首字母）

​ ::first-line（只能用於塊級元素，首行）

2.5偽類(一個冒號)

​ :link

​ :visited

​ :hover

​ :active

3、樣式優先級

3.1 選擇器權重

​ 內聯樣式 1,0,0,0

​ id 0,1,0,0

​ 類、偽類、屬性 0,0,1,0

​ 標籤、偽元素 0,0,0,1

​ 通配符、選擇符 0,0,0,0

3.2 !important

3.3 就近原則（樣式的層疊性）

4、基礎樣式

4.1字體

font:style,variant,weight,size/line-height,family

font-family

font-size:偶數

font-style:unset/normal/inherit/initial;

font-variant:small-caps小型字母大寫狀態

font-weight:數字（1-100）
/bold/normal/bloder/lighter;

4.2文本

顏色:color——#ffffff,rgb(255,255,255),關鍵字(red),rgba()

水平對齊:text-align:justify(兩端對齊)
/center/left/right/start/end;

垂直對齊
:vertical-align:middle/text-top/text-bottom;

修飾線
:text-decoration:none/underline/line-through/overline;

方向direction:ltr,rtl;

縮進:text-indent:2em;

文本轉換
:text-transform:uppercase/lowercase/capitalize;

行高:line-height:1.5em;(適用於單行數據)

換行:white-space:nowrap; word-break:break-all;

text-overflow:ellipsis;

–例子：單行文本換行處理–

–white-space: nowrap;

–text-overflow: ellipsis;

–overflow: hidden;

字間距:word-spacing;

字符間距:letter-spacing;

4.3背景

background-color:;

background-image:url();

background-repeat:repeat;no-repeat;repeat-x;repeat-y;

background-position:direction px direction px;(left/right/top/bottom只寫一個參數時,默認為center;默認位置左上)

background-attachment:fixed;loacl;scroll;

background-size:cover;contain;100% 100%;

5、盒模型

5.1.元素分類

塊級標籤block：獨佔一行，可以設置所有樣式

行內塊標籤inline-block：不獨佔一行，可以設置樣式;

*–幽靈間距：但是會把中間的換行進行處理，無法完全貼合。
​
*–解決：標籤放在一行；父級元素設置font-size:0;

行內標籤inline：不獨佔一行，部分樣式無法設置

5.2.元素類型轉換display

display:inline-block|inline|block|flex|inline-flex|table-cell|none;

5.3.盒模型

5.3.1組成

content：內容

padding：內邊距

border：邊框

margin：外邊距

盒模型大小=content+padding+border

5.3.2計算方式

width:設置的盒子寬度

box-sizing

*content-box :標準盒模型,默認值，width = content-width;

*border-box:怪異(IE)盒模型 width = content-width + padding-width + border-width;

padding-box:width=content+padding;

box-sizing:border-box;//自動改變content的寬度來適應設置的width寬度

content-box;//默認值

5.4.padding

上 右 下 左；

上 左右 下；

5.5.margin

疊壓現象（外邊距合併）：邊距採用最大值。

塌陷現象：當父級和子級元素都是塊級元素；給第一個（最後一個）設置了margin-top(bottom),父級會向相應的方向塌陷;

外邊距塌陷例子：

<div class=”box”>

<div class=”box1″>box1</div>

</div>

.box>.box1{

width: 200px;

height: 200px;

background-color: teal;

margin-top: 100px;

}

.box{

width: 400px;

height: 400px;

background-color: thistle;

}