RWD網頁切版(二){CSS如何控制HTML物件、常用css屬性}

寫css的地方

1.<head></head>

在<head></head>之間寫<style></style>,就可以把css寫在<style></style>裡了~

rwd-02-01

2.CSS檔

rwd-02-02

CSS檔裡面大概像這樣

rwd-02-03

html檔裡面大概像這樣

rwd-02-05

3.行內

rwd-02-04

優先順序

如果在不同位置都針對同一個物件設定了屬性,則行內css是最優先順序,再來就看css寫在越下面的越優先

例如

<style></style>

<link href="style.css" rel="stylesheet" type="text/css">

<link href="index.css" rel="stylesheet" type="text/css">

這樣寫是以index.css為優先

 

<link href="style.css" rel="stylesheet" type="text/css">

<link href="index.css" rel="stylesheet" type="text/css">

<style></style>

這樣寫是以<style>為優先

 

其實是因為程式讀取的順序的關係,因為程式是從上讀到下,所以同樣的設定讀取到第二次就會把第一次的覆蓋,再讀到第三次就會把第二次的覆蓋,所以一定都會是以最後被讀取到的程式為“被執行"的程式

css選取器

.常用選取器

1.標籤

2.id

3.類別

名稱 用途
標籤tag html標籤 針對頁面內所有相同的html物件
ID #英文數字(第一個字只能小寫英文) 針對頁面內只會出現一次的物件
類別class .英文數字(第一個字只能小寫英文) 針對頁面內會出現多次的物件

常用css屬性

  • color:#FFF; >> 文字顏色
  • background-color:#FFF; >> 背景顏色
  • font-size:12px; >> 字級
  • line-height:1.5em; >> 行高
  • text-align:center; >> 文字對齊
  • width:100px; >> 寬
  • height:100px; >> 高

 

css選取器完整介紹

CSS 選擇器、選取器(CSS Selector)

Leave a Reply