在CSS屬性中,字體和大小,子元素可以繼承父元素,但顏色不能
CSS核心屬性
一.CSS屬性組成和作用
1.每個css樣式都必須由兩部分組成:選擇符和聲明。注:聲明又包括屬性和屬性值;
2.css屬性:屬性是指定選擇符具有的屬性,它是css的核心,css2共有150多個屬性;
3.css屬性值:屬性值包括發(fā)動屬性值和常規(guī)的數(shù)值加單位或顏色(colorValue);如(25px)
二.CSS屬性的類型
1.字體類屬性;2.文本類屬性;3.背景類屬性;4.列表類屬性;5.浮動屬性;
三.CSS字體類屬性
1.font-family:
字體類型; {font-family:字體1,字體2,字體3;}
例:font-famy:"微軟雅黑","宋體";
說明:
- (1)瀏覽器首先會尋找字體1,如存在就使用該字體來顯示內(nèi)容,如在字體1不存在的情況下,則會尋找字體2,如字體2也不存在,按字體3顯示內(nèi)容,如果字體3也不存在;則按系統(tǒng)默認(rèn)字體顯示;
- (2)當(dāng)字體是中文字體時,需加雙引號;
- (3)當(dāng)英文字體中有空格時,需加雙引號如("Times New Roman") -新羅馬字體;
- (4)當(dāng)英文字體只有一個單詞組成是不加雙引號;如:(Arial) -Aarial字體是挺常用的,它和宋體的區(qū)別在于粗細(xì),更接近國際制版率碾。
- (5)Windows中文版本操作系統(tǒng)下,中文默認(rèn)字體為宋體或者新宋體,英文字體默認(rèn)為Arial,新推出的版本也默認(rèn)為微軟雅黑叔营。
2.文本(字體)大小:{font-size:數(shù)值;}
例:div{font-size: 12px;}
說明:
- (1)屬性值為數(shù)值型時,必須給屬性值加單位,屬性值為0時除外;
- (2)單位還可以是pt(磅),在印刷領(lǐng)域廣泛使用9pt=12px;
- (3)為了減少系統(tǒng)間的字體顯示差異,IE Netscape Mozilla的瀏覽器制作商于1999年召開會議,共同確認(rèn)16px/ppi為標(biāo)準(zhǔn)字體大小默認(rèn)值,即lem。默認(rèn)情況下,lem=16px,0.75em=12px;注:ppi即每英寸所擁有的像素數(shù)目;
- (4)em:表示元素字體高度,em值是根據(jù)父元素值來確定;em單位可省略;如:font-size:12px;line-height:2;則行高為24px;
- (5)font-size屬性中的絕對尺寸包括xx-small(最小)=9px所宰、x-small(較小)=11px绒尊、small(小)=13px、medium(正常)=16px仔粥、large(大)=19px婴谱、x-large(較大)=13px、xx-large(最大)=27px等7個屬性值躯泰。CSS中規(guī)定默認(rèn)的字體尺寸為"medium",不過有的瀏覽器可能不會遵守這個規(guī)定谭羔。因此,實(shí)際的字體尺寸還要看瀏覽器的具體設(shè)置
3.文本(字體)顏色:{color:顏色值;}
例:div{color: red;}
說明:
- (1)用十六進(jìn)制表示顏色值:例如: color:#FOO
- (2)RGB: color:rgb(0,204,204);
- (3)rgba(00,255,255,0.6) css3新增屬性,rgb三原色,a表示透明度 color:rgba(0,204,204,0.6);
- (4)用顏色名表示:(16種)black 純黑、silver 淺灰麦向、navy 深藍(lán)瘟裸、blue 淺藍(lán)、green 深綠诵竭、lime 淺綠话告、teal 靛青、aqua 天藍(lán)秀撇、maroon 深紅超棺、red 紅色、purple 深紫呵燕、fuchsia 品紅棠绘、olive褐黃、yellow 明黃、gray 深灰氧苍、 white 亮白
4.加粗:
{font-wight:bolder/bold/normal/100-900;}
5.字體傾斜:
font-style:italic(傾斜度小)/oblique(傾斜度大)/normal(取消傾斜,常規(guī)顯示)
6.檢索或設(shè)置對象中的文本的大小寫text-transform:none無轉(zhuǎn)換/capitalize首字母大寫/uppercase全都大寫/lowercase全都小寫夜矗。
7.文本是否大小寫 {font-variant:normal(正常的字體)/small-caps(小型的大寫字母字體)}
說明: 對英文內(nèi)容器作用。
四.CSS文本屬性
1.水平對齊方式 {text-align:left/right/center/justify;}
說明: justify對內(nèi)容以兩端邊界線對齊顯示,兩端對齊對中文不起作用让虐。
3.行高 {line-height:normal/數(shù)值;}
行高可以用來控制文字的上下行距紊撕。
4.文本修飾:
text-decoration:none/underline/overline/linethrough/blink.(高版本瀏覽器不支持blink屬性)
說明: none:沒有修飾、underline:添加下劃線赡突、overline:添加上劃線对扶、line-through:添加刪除線、blink:閃爍
5.首行縮進(jìn): text-indent:數(shù)值;設(shè)置第一行的縮進(jìn)值,負(fù)值是向前進(jìn)(可以直接設(shè)置長度,或設(shè)置百分比)
說明:
- (1)text-indent可以取負(fù)值,可實(shí)現(xiàn)隱藏文本,懸掛縮進(jìn)惭缰。
- (2)text-indent屬性只對第一行起作用,若第一行不是文本則無變化浪南。
6.字符間距 {letter-spacing:value;}控制英文字母、漢字的字距
說明:每個文字以及字母直接的間距
7.詞間距 {word-spacing:normal/數(shù)值;}控制英文單詞詞距漱受。(通常用于英文詞和詞之間的間距)
說明: 完整的單詞之間的間隔,不是字母之間络凿。
10.文本陰影 text-shadow
說明: 例子 text-shadow: 5px 5px 5px #FF0000;(分別表示: 水平偏移值,垂直偏移值,模糊的半徑,陰影的顏色)
五、CSS列表類屬性
1.定義列表符號樣式: list-style-type: disc(實(shí)心圓)/circle(空心圓)/square(實(shí)心方塊)/none(去掉列表符號);
2.使用圖片作為列表符號: list-style-image: url(所使用圖片的路徑和全稱);
3.定義列表符號的位置: list-style-position:outside(外邊)/inside(里邊); list-style:none;去掉列表樣式
4.邊框?qū)傩?br>
綜合設(shè)置: border: 1px solid red;
說明:
邊框:border:粗細(xì)(數(shù)值+單位) 顏色 線型(solid/dashed/dotted/double);
右邊框:border-right
左邊框:border-left
上邊框:border-top
下邊框:border-bottom
solid:實(shí)現(xiàn),dashed:虛線,dotted:點(diǎn)狀線,double:雙線昂羡。
六絮记、CSS背景類屬性
1.背景顏色 語法: 選擇符{background-color:顏色值;} 簡寫: background:color值
2.背景圖片的設(shè)置 語法: background-image: url(背景圖片的路徑及全程);
說明:網(wǎng)頁上有兩種圖片形式:插入圖片、背景圖;插入圖片:屬于網(wǎng)頁內(nèi)容,也就是結(jié)構(gòu)虐先。背景圖:屬于網(wǎng)頁的表現(xiàn),背景圖上可以顯示文字怨愤、插入圖片、表格等赴穗。
3.背景圖片的顯示原則
說明:
(1)容器尺寸等于圖片尺寸,背景圖片正好顯示在容器中;
(2)容器尺寸大于圖片尺寸,背景圖片將默認(rèn)平鋪,直至鋪滿元素;
(3)容器尺寸小于圖片尺寸,只顯示元素范圍以內(nèi)的背景圖;
4.背景圖片平鋪屬性 語法:選擇符 {background-repeat:no-repeat/repeat/repeat-x/repeat-y}
說明: no-repeat:不平鋪憔四、repeat:平鋪、repeat-x:橫向平鋪般眉、repeat-y:縱向平鋪了赵。
6.背景圖片的位置 語法:background-position:值1 值2; 選擇符{background-position:left/center/right/數(shù)值 top/center/bottom/數(shù)值;}
說明：
(1)水平方向上的對齊方式(left/center/right)或值;垂直方向上的對齊方式(top/center/bottom)或值。
(2)兩個值:第一個值表示水平位置的值,第二個值表示垂直的位置甸赃。
(3)當(dāng)兩個值都是center的時候?qū)懸粋€值就可以代表的是水平位置和垂直位置柿汛。
(4)向左方向,向上方向都是負(fù)值。
7.背景圖片大小 background-size: 數(shù)值/百分比/auto/cover/contain
8.背景屬性的縮寫語法:background: 屬性值1 屬性值2 屬性值3;
背景縮寫:background:#背景色 url(背景圖片的路徑及全程) np-repeat center top;
9.網(wǎng)頁上常用的圖片格式(壓縮圖片)
- (1)jpg:有損壓縮格式,靠損失圖片本身的質(zhì)量來減少圖片的體積,適用于顏色豐富的圖像;(像素點(diǎn)組成的,像素點(diǎn)越多會越清晰)
- (2)gif:有損壓縮格式,靠損失圖片的色彩數(shù)量來減少圖片的體積,支持透明,支持動畫埠对，適用于顏色數(shù)量較少的圖像络断。
- (3)png:有損壓縮格式，損失圖片的色彩數(shù)量來減小圖片的體積,支持透明,不支持動畫,是fireworks的源文件格式,適用于顏色數(shù)量較少的圖像项玛。
七.CSS浮動屬性
1.float:定義網(wǎng)頁中其他文本如何環(huán)繞該元素,滿足我們的頁面排版要求貌笨。
有三個屬性值: left:元素活動浮動在文本左面; right:元素浮動在右面; none:默認(rèn)值,不浮動。
浮動元素的三大特征:
- (1)div塊元素失去"塊狀"換行顯示特征,變成行內(nèi)塊元素
- (2)緊貼上一個浮動元素(同方向)或父級元素的邊框,如寬度不夠?qū)Q行顯示襟沮。
- (3)占據(jù)行內(nèi)元素的空間,導(dǎo)致行內(nèi)元素圍繞顯示锥惋。
負(fù)作用: 因為浮動元素脫離了 標(biāo)準(zhǔn)文檔流,會導(dǎo)致父元素高無法被撐開昌腰。解決方法:清除浮動。
2.清除浮動的三種方法:
- (1)添加空盒子,較流行膀跌。
缺點(diǎn)是為清除浮動,頁面添加的空盒子較多,會造成冗余代碼,新手容易暈菜遭商。
定義:在被浮動的元素(同級元素)后面添加一個空的div,并且定義一個類名,賦給空div。
語法: .clear{clear:both;} - (2)overflow:hidden;較簡單,兼容市面上大部分瀏覽器捅伤。
缺點(diǎn):做開發(fā)時,有些公司會嚴(yán)格要求開發(fā)技術(shù)點(diǎn),不建議使用劫流。
定義:先定義一個類名,然后把定義好的類名賦給浮動元素的父級元素。
語法: .clear{display:block;overflow:hidden;} - (3)最流行丛忆、最常用祠汇、可兼容所有瀏覽器。稱為萬能清除法蘸际。
非要說缺點(diǎn)就是代碼量大座哩。開發(fā)推薦使用徒扶。
定義: 定義一個類名,使用偽元素:after,并把類名賦給被浮動元素的父級元素粮彤。
語法: clear:after{display:block;clear:both;content:".";visibility:hidden;height:0;}
clear{zoom:1;}
作業(yè)
