CSS入門教學

許桔

css ?

CSS

Cascading Style Sheets
階層式樣式表
排版
控制佈局
添加樣式 ( 字型、間距和顏色 )

CSS應用

行間 CSS
嵌入式 CSS
外部 CSS

行間 CSS


<p style="屬性名稱:屬性值;">.....</p>

<p style="font-size:24px; color:red;">這段文字的大小會是24以及會是紅色的</p>

嵌入式 CSS

<style type="text/css" media="顯示媒介的名稱"> /* printer or screen */
選擇器 {
    屬性名稱:屬性值;
}
</style>

<html>
    <head>
        <style>
        ....
        </style>
    </head>

    <body>
    .....
    </body>
</html>

外部 CSS

<link rel="stylesheet" href="檔案路徑/XXX.css" media="與前面相同">


選擇器{
    屬性名稱:屬性值;
}

/*
    不需前後再加style
*/

該使用哪一種?

正常大部分的情況都應該使用外部CSS
語意：樣式和結構可以切割
效率：寫一次可以套到多個網頁
效能：外部檔案能被快取
例外：首頁的網站

CSS Selectors

常見的Selectors
Class
Id
Type
通用

CLASS Selectors

<html>
<head>
<title>Test Page</title>
<link href="css/xxx.css" rel="stylesheet" >
</head>

<body>
    <p class="selector">根據Class套用CSS</p><br />
    <p class="selector1">class不相同不會套用</p>
</body>
</html>

.selector{
    font-size:36px;
    color:red;
}

ID Selectors

<html>
<head>
<title>Test Page</title>
<link href="css/xxx.css" rel="stylesheet" >
</head>

<body>
    <p id="selector">根據Class套用CSS</p>
    <p id="selector1">Id不同，也不會套用</p>
</body>
</html>

#selector{
    font-size:36px;
    color:red;
}

type Selectors

<html>
<head>
<title>Test Page</title>
<link href="xxx.css" rel="stylesheet" >
</head>

<body>
    <H1>H1會套用紅色!</H1>
    <p>P的大小</p>
</body>
</html>

H1{
    color:red;
}
p{
    font-size:36px;
}

Universal Selectors

<html>
<head>
<title>Test Page</title>
<link href="xxx.css" rel="stylesheet" >
</head>

<body>
    <H1>全部html元素都會套紅色</H1><br />
    <p>全部html元素都會套紅色</p><br />
    <b>全部html元素都會套紅色</b><br />
</body>
</html>

*{
    color:red;
}

常用的選擇器


<div class="bd">
    <p>紅色，20點字，斜體</p>
</div>
<br />

<div id="content">
    <div class="hd">
        <p>紅色，36點字，粗體，斜體</p>
    </div>
</div>

p{
	color:#F00;
	font-style:italic;
	}
.bd{
	font-size:20px;
	}
.hd p{
	font-size:36px;
	}
#content p{
	font-weight:bold;
	}

sELECTOR REFERENCE

http://www.w3schools.com/cssref/css_selectors.asp

屬性介紹

http://www.w3schools.com/cssref/default.asp

練習

Title(font:red,20px,bold)
Content(background:yellow、font:blue、width:750px、height:80px)
More(width:750、text-align:right)

根據上述的文字，替你的文字取id和class，並試著用前面教的來設定樣式

層疊樣式表（英語：Cascading Style Sheets，簡寫CSS）

又稱串樣式清單、級聯樣式表、串接樣式表、層疊樣式表、階層式樣式表，一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言，由W3C定義和維護。目前最新版本是CSS2.1，為W3C的推薦標準。CSS3現在已被大部分現代瀏覽器支援，而下一版的CSS4仍在開發過程中。

詳細更多...

CSS Float

排版常用技巧之一

傳統的排版

<table border="1">
    <tr>
        <td align="left">靠左對齊</td>
        <td align="right">靠右對齊</td>
    </tr>
</table>

float 屬性

<table border="1">
    <tr>
        <td>
        <span style="float:left">靠左對齊</span>
        <span style="float:right">靠右對齊</span>
        </td>
    </tr>
</table>

使用FLOAT前

<table border="1">
    <tr>
        <td>
        <img src="url.jpg">
        層疊樣式表（英語：Cascading Style Sheets，簡寫CSS）又稱串樣式清單、級聯樣...
        </td>
    </tr>
</table>

使用FLOAT後

<table border="1">
    <tr>
        <td>
        <img src="url.jpg" style="float:left">
        層疊樣式表（英語：Cascading Style Sheets，簡寫CSS）又稱串樣式清單、級聯樣...
        </td>
    </tr>
</table>

使用Float的區塊，不會佔到空間

CSS bACKGROUND

適當的把一些東西變成背景，讓讀取更加快速

如何抉擇

何時該用背景? 何時該用IMG標籤?

裝飾性、可有可無之圖片
- 消失也不影響閱讀的圖片
主要內容、主要閱讀用的
- 廣告、圖片標題、LOGO、內容圖片

常見的屬性


.imgg{

background-color:#FFOOOO;    
/* 也可直接指定顏色，red, blue */
background-image:url(xxx.jpg);
background-repeat:no-repeat;
/* repeat-x, repeat-y, repeat */
background-position:center center;
/* 指定開始的位置，30% 30%, 300 300 */

}

<div class="imgg"></div>

CSS Position

用於位置調整、微調

Position

static

absolute

relative

fixed

配合top, left, right, bottom進行更便利的排版

(預設)

(絕對位置)

(相對位置)

(鎖定位置)

.wh{
    width:500px;
    height:150px;
    border-style:solid;
}
.oh{
    width:450px;
    height:100px;
    border-style:dashed;
    position:static;
}

<div class="wh"></div>
<br />
<div class="wh">
    <div class="oh">看我</div>
</div>
<br />
<div class="wh"></div>


.wh{
    width:500px;
    height:150px;
    border-style:solid;
}
.oh{
    width:450px;
    height:100px;
    border-style:dashed;
    position:absolute;
    right:0px;
    bottom:0px;
}


<div class="wh"></div>
<br />

<div class="wh">
    <div class="oh">看我</div>
</div>
<br />

<div class="wh"></div>

absolute


.wh{
    width:500px;
    height:150px;
    border-style:solid;
    position:relative;
}
.oh{
    width:450px;
    height:100px;
    border-style:dashed;
    position:absolute;
    right:0px;
    bottom:0px;
}


<div class="wh"></div>
<br />

<div class="wh">
    <div class="oh">看我</div>
</div>
<br />

<div class="wh"></div>

relative vs absolute


.wh{
    width:500px;
    height:150px;
    border-style:solid;
}
.oh{
    width:450px;
    height:100px;
    border-style:dashed;
    position:fixed;
    bottom:0px;
}


<div class="wh"></div>
<br />

<div class="wh">
    <div class="oh">看我</div>
</div>
<br />

<div class="wh"></div>

fixed

練習

運用剛剛教的來玩個小排版遊戲

width:80px;

height:80px;

border-style:solid;
border-radius:99em;

left:300px;

top:300px;

補充：框線框度(border-width:10px;)

補充

Marign

Border

Padding

常常搞混的三角關係

<div>
讓我們把這段文字當作測試的內容，
來了解一下Padding、Border和Margin之間的關係吧。
</div>

div {
    width: 300px;
    padding: 25px;
    border: 25px solid;
    margin: 250px;
}

CSS 3 必學

background:rgba
background-image:linear-gradient
borer-radius
box-shadow
text-shadow
transition

半透明
漸層
圓角
盒子陰影
文字陰影
換場

實作練習

下載素材1

下載素材2

架構

1.將照片引入HTML內


<img src="images/xxx.png">

2.統一瀏覽器計算方法


*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

3.設定圖片的寬度


img {
  width: 100%;
}

4.將圖片各別放入div中套用樣式


<div class="dynamic">
  <img src="images/xxx.png">
</div>

5.針對dynamic進行相關設定

.dynamic{
  padding: 5px; /*元素與邊框之間的間距*/
  float: left; /*元素排列靠左*/
  width: 33.333333%; /*元素的寬度*/
}

6.將全部元素包到另一個div內套樣式


<div class="container">
  <div class="dynamic">
    <img src="images/xxx.png">
  </div>
</div>

7.針對不同瀏覽寬度套用不同設定


@media (min-width:xxx px) {
  .container {
    width: xxx px;
  }
}

/* 768 , 992 , 1200 */

8.設定磚塊排列模式


@media (min-width:768px) {
  .dynamic {
    width: 16.66666667%;
  }
}

9.讓動態磚置中對齊


*{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  

  margin-right: auto;
  margin-left: auto; 
}

作業提示

可由調整@media 內的container(width:100%)
長方形磚塊
- 可由調整width的%數字來更改
- 可藉由命名不同的class來進行套用
長方形磚塊的class在html那邊加一段 style="height:0px;"
- 即時更新要加一點js才會作用，因此先用這個方法
- <div class="dynamic2" style="height:0px;">

CSS入門教學

許桔

css ?

CSS

CSS應用

行間 CSS

嵌入式 CSS

外部 CSS

該使用哪一種?

CSS Selectors

CLASS Selectors

ID Selectors

type Selectors

Universal Selectors

常用的選擇器

sELECTOR REFERENCE

屬性介紹

練習

CSS Float

排版常用技巧之一

傳統的排版

float 屬性

使用FLOAT前

使用FLOAT後

CSS bACKGROUND

適當的把一些東西變成背景，讓讀取更加快速

如何抉擇

何時該用背景? 何時該用IMG標籤?

常見的屬性

CSS Position

用於位置調整、微調

練習

運用剛剛教的來玩個小排版遊戲

補充

CSS 3 必學

實作練習

下載素材1

下載素材2

架構

1.將照片引入HTML內

2.統一瀏覽器計算方法

3.設定圖片的寬度

4.將圖片各別放入div中套用樣式

5.針對dynamic進行相關設定

6.將全部元素包到另一個div內套樣式

7.針對不同瀏覽寬度套用不同設定

8.設定磚塊排列模式

9.讓動態磚置中對齊

作業提示

作業

參考資料

CSS入門教學

More from nicky30102