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 相對定位的座標原點 該元素在普通流中的位置 特別點 元素...