CSS基礎(chǔ)語(yǔ)法
CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成:選擇器,以及一條或多條聲明.
每條聲明由一個(gè)屬性和一個(gè)值組成.
每個(gè)屬性有一個(gè)值.屬性和值被冒號(hào)分開(kāi).
例如:下面這行代碼的作用是將 h1 元素內(nèi)的文字顏色定義為紅色,同時(shí)將字體大小設(shè)置為 14 像素.
在這個(gè)例子中,h1 是選擇器,color 和 font-size 是屬性,red 和 14px 是值.
h1 {color:red; font-size:14px;}//看見(jiàn)后面有分號(hào),如果是一個(gè)屬性或者這個(gè)屬性在尾部可以不加分號(hào),除了這兩種情況必須加 不然頁(yè)面是很錯(cuò)亂的
=======================
頁(yè)面居中問(wèn)題
可以先設(shè)置
body{margin:0 auto;}
有的瀏覽器即使設(shè)置這個(gè)也不會(huì)居中的那么就要加上這句DTD申明代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
===================
body和div背景設(shè)置問(wèn)題
①、background-color//背景顏色屬性
②,、background-image:url('背景圖片路徑');//背景圖片屬性
body { background-color:blue;} p{ background-image:url('背景圖片路徑');}
③,、如果需要在頁(yè)面上對(duì)背景圖像進(jìn)行平鋪,可以使用 background-repeat 屬性.
背景定位
可以利用 background-position 屬性改變圖像在背景中的位置.
下面的例子在 body 元素中將一個(gè)背景圖像居中放置垂直平鋪:
body
{
background-image: url(http://www./logo.gif);
background-repeat: repeat-y;//垂直方向平鋪repeat-x水平方向的repeat兩個(gè)方向都平鋪 no-repeat都不平鋪
background-position:center;//居中
}
body是標(biāo)簽名,background-color,background-image,background-repeat是屬性,blue是屬性值等
當(dāng)然這些屬性可以用一句話綜合寫起來(lái) 看下面屬性綜合寫法
=================
多個(gè)標(biāo)簽組合
h1,h2,h3 {color:red;}//是逗號(hào)分開(kāi)的 一般用在有的標(biāo)簽樣式一樣就可以寫在一起這樣就減少代碼的使用,能重復(fù)調(diào)用
把標(biāo)題<h1><h2><h3>的字體顏色都變?yōu)榧t色
=================
屬性綜合寫法
div {font:italic normal bold 11pt arial;}// 這是字體相關(guān)屬性的綜合寫法
div的字體風(fēng)格(font-style)屬性值是italic,字體變量(font-variant)屬性值是normal,字體濃淡(font-weight)屬性值是bold,字體大小(font-size)屬性值是11pt,字體名稱(font-family)屬性值是Arial
p{border:1px solid #dddddd}//這是邊距屬性綜合寫法 大小 樣式(solid為實(shí)線 dashed為虛線 dotted為點(diǎn)線...還有自己總結(jié))你看到?jīng)]我這一句css代碼結(jié)尾沒(méi)分號(hào);是可以的上面已經(jīng)講過(guò)了
================
標(biāo)簽嵌套
div h1 {color:blue;}
div里面的<h1>字體顏色為藍(lán)色.
div是 h1的父親 h1是div的兒子 我在寫css樣式都是用這樣的為什么呢?
原因是你想想就知道了 世界有很多人難道都是你父親嗎 你用標(biāo)簽嵌套,即使這個(gè)父親的兒子名字一樣但是這個(gè)兒子還是這個(gè)父親的不會(huì)是另個(gè)人的,所以當(dāng)你嵌套了就不怕 在其他地方重復(fù)用這個(gè)標(biāo)簽名或類名(ID選擇器是唯一的不能重復(fù))
===============
定義id
#main {background:#ff0000;width:100%;}
<div id="main">hello</div>//那么直接調(diào)用#mian
這里是用#+id名是方式,也可以用標(biāo)簽名加+#+id名,如div#main,一般不這么用.
================
定義class
.red {color:red;}
<div class="red" >hello</div>
同id的寫法差不多,把"#"改為"." ,如果一個(gè)標(biāo)簽同時(shí)定義了id跟class,id具有優(yōu)先級(jí).
*表示該標(biāo)簽下的所有元素樣式
body * {padding:0px;}
用得比較少
================
好了沒(méi)時(shí)間就總結(jié)這么多 最好要記住
樣式優(yōu)先級(jí)
(1) 標(biāo)簽中的style > id > class
(2) 標(biāo)簽中的style > 頁(yè)面中的style > 導(dǎo)入的樣式@import
(3) 用link,如<link rel='stylesheet' type='text/css' href='' />,更寫在頁(yè)面上同等級(jí)的.
如果同樣的樣式定義了2次,后面出現(xiàn)的具有優(yōu)先級(jí).
|
