CSS基礎知識(一)

2021-08-03 18:29:05 字數 2210 閱讀 1303

css是指層疊樣式表

html描述了要呈現的內容,而css則定義了這些內容的呈現形式,比如字型、顏色等。使用css能夠將頁面內容和呈現形式有效分離,有利於分工合作,也有利於快速更換不同的呈現形式。

使用樣式表有三種方式:

1.內聯樣式

內聯樣式

2.內部樣式

內聯樣式

內部樣式的演示1

內部樣式的演示2

3.外部樣式表

首先要定義乙個外部樣式表檔案:

/*定義了應用於段落的樣式:

字型大小:36

顏色:紅色*/p

然後在需要使用這些樣式的html檔案中引入該樣式表檔案:

外部樣式表使得內容和表現形式徹底分離,有利於分工合作及維護,可在多個html中引用。

css中的顏色:

所有的顏色都可以由紅色,綠色,藍色三種顏色調配而成,這三種顏色稱為三原色。而在css中用8位表示乙個顏色,那麼可以表示28種顏色,既256種顏色。那麼每個顏色值有24位來表示。可以表示256*256*256種顏色(真彩色)。

css中有多種顏色表示形式:

(1)  十六進製制形式:

十六進製制顏色

(2)  rgb顏色

十六進製制顏色

(3)  rgba顏色

在rgb顏色基礎上增加了透明度分量(alpha),該分量的取值範圍為0(完全透明)-1.0(完全不透明)。

rgba顏色表示形式

(4)  hsl顏色

顏色也可以由另外三個分量來表示,既色調、飽和度、和明度。

hsl顏色表示形式

(5)  hsla顏色

在hsl顏色的基礎上增加了alpha分量

hsla顏色表示形式

(6)  預定義顏色

css提供了一些常用的預定義顏色,比如red、green等。

預定義顏色表示形式

尺寸單位:

cm:厘公尺

mm:公釐

in:英吋(inch)

px:畫素(pixel)

%:百分比

em:就相當於「倍」,比如如果設定當前的div的字型大小為1.5em,則當前的div字型大小為:當前div整合的字型大小*1.5。但是當div進行巢狀的時候,em始終是按照當前div繼承的字型大小來縮放。

vw:就是當前螢幕可見高度的1%。(當元素沒有內容的時候,設定height:100%該元素不會被撐開,但是設定height:100vh,鈣元素會被撐開螢幕高度一致)

vh:就是當前螢幕可見高度的1%。(當這只width:100%,被社會的寬度是按照父元素的寬度來設定,但是100vw是相對於螢幕可見寬度來設定的,所以會出現50vw比50%大的情況)

px:絕對單位,%相對尺寸單位。

font-family:字型名稱

font-size:字型大小

font-style:字型的樣式(斜體等)

font-variant:字型變化(如:大寫)

簡寫要按照一定的順序:

font-style font-variantfont-weight font-size font-family,前面三個可以預設,適應預設值,font-size和font-family必須指定值。

主要包括顏色、對齊方式、修飾等。

color:設定文字的顏色

text-decoration:文字的修飾

none 預設值,沒有裝飾效果

underline 加一條下劃線

overline   加一條上劃線

line-through 加刪除線

text-shadow 設定字型的陰影,如:

text-shadow:-2px -3px black; 

定義乙個黑色的陰影顏色,其水平方向上左移5px,垂直方向上移3px。

direction:表示文字的方向。

ltr:自左至右:rtl:自由至左。

text-alion:文字對齊方式。

left:左對齊

right:右對齊

center:居中

justify:兩端對齊

vertical-align:文字垂直對齊方式。

top:靠上對齊

bottom:靠下對齊

middle:垂直居中對齊

text-indent:文字縮排方式。

letter-spacing:字元之間的間距

word-spacing:字(單詞)的間距

line-height:設定行高,實際上是調整行間距。

CSS基礎知識 一

h1表示選擇器 font size和color表示屬性 12px和 fff表示屬性值 p在html中通過使用五 css選擇器 在 css 中,選擇器是一種模式,用於選擇需要新增樣式的元素 所有html語言中的標籤樣式都是通過不同的css選擇器進行控制的 css的選擇器分為三種,分別是 標籤選擇器 類...

CSS基礎知識筆記 一

css 樣式由選擇符和宣告組成,而宣告又由屬性和值組成 選擇符 又稱選擇器,指明網頁中要應用樣式規則的元素,如本例中是網頁中所有的段 p 的文字將變成藍色,而其他的元素 如ol 不會受到影響。宣告 在英文大括號 中的的就是宣告,屬性和值之間用英文冒號 分隔。當有多條宣告時,中間可以英文分號 分隔,如...

CSS 基礎知識

選擇器 元素選擇器 p 後代選擇器 li a id選擇器 intro some text 類選擇器 dateposted 24 3 2006 偽類選擇器 a link 通用選擇器 浮動 定位 框模型 定位的四種模型 相對定位 relative 相對定位的座標原點 該元素在普通流中的位置 特別點 元素...