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;">

作業

將磚塊排滿整個螢幕
可用多磚塊排滿
使用長方形的磚塊圖