在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,如存在就使用該字體來顯示內容,如在字體1不存在的情況下,則會尋找字體2,如字體2也不存在,按字體3顯示內容,如果字體3也不存在;則按系統(tǒng)默認字體顯示;
- (2)當字體是中文字體時,需加雙引號;
- (3)當英文字體中有空格時,需加雙引號如("Times New Roman") -新羅馬字體;
- (4)當英文字體只有一個單詞組成是不加雙引號;如:(Arial) -Aarial字體是挺常用的,它和宋體的區(qū)別在于粗細,更接近國際制版。
- (5)Windows中文版本操作系統(tǒng)下,中文默認字體為宋體或者新宋體,英文字體默認為Arial,新推出的版本也默認為微軟雅黑。
2.文本(字體)大小:{font-size:數(shù)值;}
例:div{font-size: 12px;}
說明:
- (1)屬性值為數(shù)值型時,必須給屬性值加單位,屬性值為0時除外;
- (2)單位還可以是pt(磅),在印刷領域廣泛使用9pt=12px;
- (3)為了減少系統(tǒng)間的字體顯示差異,IE Netscape Mozilla的瀏覽器制作商于1999年召開會議,共同確認16px/ppi為標準字體大小默認值,即lem。默認情況下,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ī)定默認的字體尺寸為"medium",不過有的瀏覽器可能不會遵守這個規(guī)定。因此,實際的字體尺寸還要看瀏覽器的具體設置
3.文本(字體)顏色:{color:顏色值;}
例:div{color: red;}
說明:
- (1)用十六進制表示顏色值:例如: 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 深藍、blue 淺藍、green 深綠、lime 淺綠、teal 靛青、aqua 天藍、maroon 深紅、red 紅色、purple 深紫、fuchsia 品紅、olive褐黃、yellow 明黃、gray 深灰、 white 亮白
4.加粗:
{font-wight:bolder/bold/normal/100-900;}
5.字體傾斜:
font-style:italic(傾斜度小)/oblique(傾斜度大)/normal(取消傾斜,常規(guī)顯示)
6.檢索或設置對象中的文本的大小寫text-transform:none無轉換/capitalize首字母大寫/uppercase全都大寫/lowercase全都小寫。
7.文本是否大小寫 {font-variant:normal(正常的字體)/small-caps(小型的大寫字母字體)}
說明: 對英文內容器作用。
四.CSS文本屬性
1.水平對齊方式 {text-align:left/right/center/justify;}
說明: justify對內容以兩端邊界線對齊顯示,兩端對齊對中文不起作用。
3.行高 {line-height:normal/數(shù)值;}
行高可以用來控制文字的上下行距。
4.文本修飾:
text-decoration:none/underline/overline/linethrough/blink.(高版本瀏覽器不支持blink屬性)
說明: none:沒有修飾、underline:添加下劃線、overline:添加上劃線、line-through:添加刪除線、blink:閃爍
5.首行縮進: text-indent:數(shù)值;設置第一行的縮進值,負值是向前進(可以直接設置長度,或設置百分比)
說明:
- (1)text-indent可以取負值,可實現(xià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(實心圓)/circle(空心圓)/square(實心方塊)/none(去掉列表符號);
2.使用圖片作為列表符號: list-style-image: url(所使用圖片的路徑和全稱);
3.定義列表符號的位置: list-style-position:outside(外邊)/inside(里邊); list-style:none;去掉列表樣式
4.邊框屬性
綜合設置: border: 1px solid red;
說明:
邊框:border:粗細(數(shù)值+單位) 顏色 線型(solid/dashed/dotted/double);
右邊框:border-right
左邊框:border-left
上邊框:border-top
下邊框:border-bottom
solid:實現(xiàn),dashed:虛線,dotted:點狀線,double:雙線。
六、CSS背景類屬性
1.背景顏色 語法: 選擇符{background-color:顏色值;} 簡寫: background:color值
2.背景圖片的設置 語法: background-image: url(背景圖片的路徑及全程);
說明:網(wǎng)頁上有兩種圖片形式:插入圖片、背景圖;插入圖片:屬于網(wǎng)頁內容,也就是結構。背景圖:屬于網(wǎng)頁的表現(xiàn),背景圖上可以顯示文字、插入圖片、表格等。
3.背景圖片的顯示原則
說明:
(1)容器尺寸等于圖片尺寸,背景圖片正好顯示在容器中;
(2)容器尺寸大于圖片尺寸,背景圖片將默認平鋪,直至鋪滿元素;
(3)容器尺寸小于圖片尺寸,只顯示元素范圍以內的背景圖;
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)當兩個值都是center的時候寫一個值就可以代表的是水平位置和垂直位置。
(4)向左方向,向上方向都是負值。
7.背景圖片大小 background-size: 數(shù)值/百分比/auto/cover/contain
8.背景屬性的縮寫語法:background: 屬性值1 屬性值2 屬性值3;
背景縮寫:background:#背景色 url(背景圖片的路徑及全程) np-repeat center top;
9.網(wǎng)頁上常用的圖片格式(壓縮圖片)
- (1)jpg:有損壓縮格式,靠損失圖片本身的質量來減少圖片的體積,適用于顏色豐富的圖像;(像素點組成的,像素點越多會越清晰)
- (2)gif:有損壓縮格式,靠損失圖片的色彩數(shù)量來減少圖片的體積,支持透明,支持動畫，適用于顏色數(shù)量較少的圖像。
- (3)png:有損壓縮格式，損失圖片的色彩數(shù)量來減小圖片的體積,支持透明,不支持動畫,是fireworks的源文件格式,適用于顏色數(shù)量較少的圖像。
七.CSS浮動屬性
1.float:定義網(wǎng)頁中其他文本如何環(huán)繞該元素,滿足我們的頁面排版要求。
有三個屬性值: left:元素活動浮動在文本左面; right:元素浮動在右面; none:默認值,不浮動。
浮動元素的三大特征:
- (1)div塊元素失去"塊狀"換行顯示特征,變成行內塊元素
- (2)緊貼上一個浮動元素(同方向)或父級元素的邊框,如寬度不夠將換行顯示。
- (3)占據(jù)行內元素的空間,導致行內元素圍繞顯示。
負作用: 因為浮動元素脫離了 標準文檔流,會導致父元素高無法被撐開。解決方法:清除浮動。
2.清除浮動的三種方法:
- (1)添加空盒子,較流行。
缺點是為清除浮動,頁面添加的空盒子較多,會造成冗余代碼,新手容易暈菜。
定義:在被浮動的元素(同級元素)后面添加一個空的div,并且定義一個類名,賦給空div。
語法: .clear{clear:both;} - (2)overflow:hidden;較簡單,兼容市面上大部分瀏覽器。
缺點:做開發(fā)時,有些公司會嚴格要求開發(fā)技術點,不建議使用。
定義:先定義一個類名,然后把定義好的類名賦給浮動元素的父級元素。
語法: .clear{display:block;overflow:hidden;} - (3)最流行、最常用、可兼容所有瀏覽器。稱為萬能清除法。
非要說缺點就是代碼量大。開發(fā)推薦使用。
定義: 定義一個類名,使用偽元素:after,并把類名賦給被浮動元素的父級元素。
語法: clear:after{display:block;clear:both;content:".";visibility:hidden;height:0;}
clear{zoom:1;}
作業(yè)
