css知識點
| 01 cSS基礎語法 |
| 02 | CSS 規則由兩個主要的部分構成:選擇器,以及一條或多條聲明. |
| 03 | 每條聲明由一個屬性和一個值組成. |
| 04 | 每一個屬性有一個值.屬性和值被冒號分開. |
| 05 | 例如:下面這行代碼的做用是將 h1 元素內的文字顏色定義爲紅色,同時將字體大小設置爲 14 像素. |
| 06 | 在這個例子中,h1 是選擇器,color 和 font-size 是屬性,red 和 14px 是值. |
| 07 | h1 {color:red; font-size:14px;}//看見後面有分號,若是是一個屬性或者這個屬性在尾部能夠不加分號,除了這兩種狀況必須加 否則頁面是很錯亂的 |
| 08 | ======================= |
| 09 | 頁面居中問題 |
| 10 | 能夠先設置 |
| 11 | body{margin:0 auto;} |
| 12 | 有的瀏覽器即便設置這個也不會居中的那麼就要加上這句DTD申明代碼 |
| 13 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| 14 | =================== |
| 15 | body和div背景設置問題 |
| 16 | ①、background-color//背景顏色屬性 |
| 17 | ②、background-image:url('背景圖片路徑');//背景圖片屬性 |
| 18 | body { background-color:blue;} p{ background-image:url('背景圖片路徑');} |
| 19 | ③、若是須要在頁面上對背景圖像進行平鋪,可使用 background-repeat 屬性. |
| 20 | 背景定位 |
| 21 | 能夠利用 background-position 屬性改變圖像在背景中的位置. |
| 22 | 下面的例子在 body 元素中將一個背景圖像居中放置垂直平鋪: |
| 23 | body |
| 24 | { |
| 25 | background-image: url(http://www.iiwnet.com/logo.gif); |
| 26 | background-repeat: repeat-y;//垂直方向平鋪repeat-x水平方向的repeat兩個方向都平鋪 no-repeat都不平鋪 |
| 27 | background-position:center;//居中 |
| 28 | } |
| 29 | body是標籤名,background-color,background-image,background-repeat是屬性,blue是屬性值等 |
| 30 | 固然這些屬性能夠用一句話綜合寫起來 看下面屬性綜合寫法 |
| 31 | ================= |
| 32 | 多個標籤組合 |
| 33 | h1,h2,h3 {color:red;}//是逗號分開的 通常用在有的標籤樣式同樣就能夠寫在一塊兒這樣就減小代碼的使用,能重複調用 |
| 34 | 把標題<h1><h2><h3>的字體顏色都變爲紅色 |
| 35 | ================= |
| 36 | 屬性綜合寫法 |
| 37 | div {font:italic normal bold 11pt arial;}// 這是字體相關屬性的綜合寫法 |
| 38 | div的字體風格(font-style)屬性值是italic,字體變量(font-variant)屬性值是normal,字體濃淡(font-weight)屬性值是bold,字體大小(font-size)屬性值是11pt,字體名稱(font-family)屬性值是Arial |
| 39 | p{border:1px solid #dddddd}//這是邊距屬性綜合寫法 大小 樣式(solid爲實線 dashed爲虛線dotted爲點線...還有本身總結)你看到沒我這一句css代碼結尾沒分號;是能夠的上面已經講過了 |
| 40 | ================ |
| 41 | 標籤嵌套 |
| 42 | div h1 {color:blue;} |
| 43 | div裏面的<h1>字體顏色爲藍色. |
| 44 | div是 h1的父親 h1是div的兒子 我在寫css樣式都是用這樣的爲何呢? |
| 45 | 緣由是你想一想就知道了 世界有不少人難道都是你父親嗎 你用標籤嵌套,即便這個父親的兒子名字同樣可是這個兒子仍是這個父親的不會是另我的的,因此當你嵌套了就不怕 在其餘地方重複用這個標籤名或類名(ID選擇器是惟一的不能重複) |
| 46 | =============== |
| 47 | 定義id |
| 48 | #main {background:#ff0000;width:100%;} |
| 49 | <div id="main">hello</div>//那麼直接調用#mian |
| 50 | 這裏是用#+id名是方式,也能夠用標籤名加+#+id名,如div#main,通常不這麼用. |
| 51 | ================ |
| 52 | 定義class |
| 53 | .red {color:red;} |
| 54 | <div class="red" >hello</div> |
| 55 | 同id的寫法差很少,把"#"改成"." ,若是一個標籤同時定義了id跟class,id具備優先級. |
| 56 | *表示該標籤下的全部元素樣式 |
| 57 | body * {padding:0px;} |
| 58 | 用得比較少 |
| 59 | ================ |
| 60 | 好了沒時間就總結這麼多 最好要記住 |
| 61 | 樣式優先級 |
| 62 | (1) 標籤中的style > id > class |
| 63 | (2) 標籤中的style > 頁面中的style > 導入的樣式@import |
| 64 | (3) 用link,如<link rel='stylesheet' type='text/css' href='' />,更寫在頁面上同等級的. |
| 65 | 若是一樣的樣式定義了2次,後面出現的具備優先級 |
相關文章
- 1. css（知識點）
- 2. css知識點
- 3. css 知識點
- 4. HTML&CSS知識點
- 5. CSS知識點-- Padding
- 6. html css知識點
- 7. CSS知識點（一）
- 8. CSS重點知識
- 9. css小知識點
- 10. Css知識點4
- 更多相關文章...
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • 適用於PHP初學者的學習線路和建議
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. css（知識點）
- 2. css知識點
- 3. css 知識點
- 4. HTML&CSS知識點
- 5. CSS知識點-- Padding
- 6. html css知識點
- 7. CSS知識點（一）
- 8. CSS重點知識
- 9. css小知識點
- 10. Css知識點4