web前端初學者必學的css樣式

2021-07-10 22:13:50 字數 3135 閱讀 6529

很多學習web

前端開發(

)的朋友,在前期學習css

樣式時,對

css樣式都表示不熟悉,記不住

css樣式、標籤表達的含義,今天整理了乙份我們常用的

css

1.字型樣式:

font-family:

"字型樣式

";font-size:

"字型大小

";color:字型顏色

;font-weight:bold; 粗體顯示

font-style:italic 斜體

text-decoration:"underline"; 顯示下劃線效果

text-decoration:"line-through"; 類似於**打折的刪除線

text-indent:2em; 文字段落的第一行空兩格

line-height: 1.5em;設定行高

letter——spacing 字母與字母之間的間隔

word-spacing 英語單詞之間的間隔

text-align 塊狀元素居中顯示

2. 元素分類

塊狀元素和內聯元素,內聯塊狀元素

塊狀元素和內聯元素的最大區別就是 塊狀元素必須獨自佔一行

a.常用的塊狀元素:

,,,,,(自定義列表

),,,,

其特點是 :

1.每個元素都獨佔一行

2.元素的高度,寬度,行高,以及頂和底邊距離都可以設定

元素寬度在不設定是和父容器乙個高度

b.常用的內聯元素

,,,(頁面的所有文字以斜體效果顯示

),,,,,,,

其 特點:

和其他元素都在一行上

元素的高度,寬度,頂部和底部都不可進行設定

元素的寬度就是他的問題和的寬度不可以改變

常用的內聯塊狀元素有

將內聯元素轉換為塊狀元素的 方法 display:block;

塊狀元素轉換成內聯元素的方法: display: inline;

內聯塊狀元素,兩種元素一起使用 : display:inline-block;

盒子模型:

border : 2px solid red; 設定邊框粗細為

2px的樣式為實心,顏色為紅色

他等於border-width:2px;

border-style:solid; dashed 是虛線 

dotted 

點線 solid 

實線css樣式表中只允許設定乙個方向樣式

因此乙個元素實際寬度(盒子的寬度)=

左邊界+

左邊框+

左填充+

內容寬度

+右填充

+右邊框

+右邊界。

邊界設定 用 margin

邊框用 border

填充用padding

**css  布局

** 

三種模型 

1. 流動模型

(flow);

2.浮動模型

(float);

3.層模型

(layer);

1.流動布局模型具有

2個比較典型的特徵:

第一點,塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布,因為在預設狀態下,塊狀元素的寬度都為100%

。實際上,塊狀元素都會以行的形式佔據位置。如右側**編輯器中三個塊狀元素標籤

(div,h1

,p)寬度顯示為

100%。

float-left; 向左邊浮動

3.層模型有三種形式:

1、絕對定位

(position: absolute)

如果想為元素設定層模型中的絕對定位,需要設定position:absolute(

表示絕對定位

),這條語句的作用將元素從文件流中拖出來,然後使用

left

、right

、top

、bottom

屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊,則相對於

body

元素,即相對於瀏覽器視窗。

div2、相對定位

(position: relative)

如果想為元素設定層模型中的相對定位,需要設定position:relative

(表示相對定位),它通過

left

、right

、top

、bottom

屬性確定元素在正常文件流中的偏移位置。相對定位完成的過程是首先按

static(float)

方式生成乙個元素

(並且元素像層一樣浮動了起來

),然後相對於以前的位置移動,移動的方向和幅度由

left

、right

、top

、bottom

屬性確定,偏移前的位置保留不動。

如下**實現相對於以前位置向下移動50px

,向右移動

100px;

div1{

width:200px;

height:200px;

border:2px red solid;

position:relative;

left:100px;

top:50px;

3、固定定位

(position: fixed)

fixed:表示固定定位,與

absolute

定位型別類似,但它的相對移動的座標是檢視(螢幕內的網頁視窗)本身。由於檢視本身是固定的,它不會隨瀏覽器視窗的滾動條滾動而變化,除非你在螢幕中移動瀏覽器視窗的螢幕位置,或改變瀏覽器視窗的顯示大小,因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置,不會受文件流動影響,這與

background-attachment:fixed?

屬性功能相同。以下**可以實現相對於瀏覽器檢視向右移動

100px

,向下移動

50px

。並且拖動滾動條時位置固定不變。

div1{

width:200px;

height:200px;

border:2px red solid;

position:fixed;

left:100px;

top:50px;

web前端 css知識體系 初學者

1 選擇器 常用的選擇器有類選擇器 標籤選擇器 id選擇器 偽類選擇器 屬性選擇器等。css權重即優先順序順序是 內聯樣式 id選擇器 偽類選擇器 屬性選擇器 類選擇器 標籤選擇器 需要特別注意的是,important 會覆蓋所有樣式規則,即 important 的優先順序最高。2 定位 定位有相對...

初學者web前端學習筆記

對於 if 語句括號裡的表示式,ecmascript 會自動呼叫boolean 轉型函式將這個表示式的結果轉換成乙個布林值。如果值為 true,執行後面的一條語句,否則不執行。通過arguments 物件的length屬性,來智慧型的判斷有多少引數,然後把引數進行合理的應用 比如,要實現乙個加法運算...

什麼是python?python初學者必學知識

1.python是一種精簡 高效 用途廣泛的程式語言 2.idle是python shell,通過輸入文字與程式互動的途徑 3.print 的作用是列印括號的內容到螢幕 4.5.將char和int 混用 6.print huih hui iuh 7.python3對中文編碼相容性很好,這一點在pyt...