CSS核心基础
CSS核心基礎(chǔ)
CSS樣式規(guī)則
在HTML中,引入CSS的方法 主要有:行內(nèi)式、內(nèi)嵌式、導入式、鏈接式4種。
1.行內(nèi)式:在標記的style屬性中設(shè)定CSS樣式,這種方式本質(zhì)上沒有體現(xiàn)出CSS的優(yōu)勢,因此不推薦使用。
2. 嵌入式:對頁面中的各種元素的設(shè)置集中在<head></head>之間。
3. 導入式和鏈接式:目的都是將一個獨立的CSS文件引入HTML文件中。鏈接式使用HTML的標記引入外部CSS文件,如
<link href="mystyle.css" rel="stylesheet" type="text/css" />.導入式需使用: <style type="text/css"> @import"mystyle.css";</style>
基本CSS選擇器
標記選擇器、類別選擇器和ID選擇器3種。
1 標記選擇器
選擇器包含: 選擇器本身、屬性和值。
如 h1{ color:red,font-size:12px;}.
2 類別選擇器
類別選擇器的名稱由用戶自定義,屬性和值跟標記選擇器一樣,也必須符合CSS規(guī)范。 如 .class{color:green;}
最好通過標記選擇器定義 標記的全局顯示方案,再通過clss選擇器突出標記進行單獨設(shè)置。這樣可提高代碼的編寫效率。
3 ID選擇器
ID選擇器只能在HTML頁面中使用一次,針對性更強。
CSS文本外觀屬性
1文本顏色
顏色屬性被用來設(shè)置文字的顏色。
顏色是通過CSS最經(jīng)常的指定:
十六進制值 - 如: #FF0000
一個RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red
例如:
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
2文本的對齊方式
文本排列屬性是用來設(shè)置文本的水平對齊方式。
文本可居中或?qū)R到左或右,兩端對齊.
當text-align設(shè)置為"justify",每一行被展開為寬度相等,左,右外邊距是對齊(如雜志和報紙)。
例如:
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
3文本修飾
text-decoration 屬性用來設(shè)置或刪除文本的裝飾。
從設(shè)計的角度看 text-decoration屬性主要是用來刪除鏈接的下劃線:
例如:
a {text-decoration:none;}
4文本轉(zhuǎn)換
文本轉(zhuǎn)換屬性是用來指定在一個文本中的大寫和小寫字母。
可用于所有字句變成大寫或小寫字母,或每個單詞的首字母大寫。
例如:
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
5文本縮進
文本縮進屬性是用來指定文本的第一行的縮進。
例如:
p {text-indent:50px;}·
以下是本節(jié)構(gòu)圖:
作業(yè):
運行結(jié)果:
總結(jié)
- 上一篇: maven复习 (进阶+高级)
- 下一篇: css图形动画,CSS3 实现图形下落动