CSS 入門

講者︰薯羊

OUTLINE

  • CSS 的背景簡介
  • 如何套用 CSS？
  • 選擇器 —— Class & ID
  • 複合選擇器

CSS 的背景簡介

W3C

W3C 全寫為 World Wide Web Consortium，全球資訊網協會。
W3C 是一個制定網頁標準規範的組織，他們所制定的標準包括 HTML, XML, CSS 等等。

值得一提的是，這些標準並非強制要一定遵守，而事實上的取得 W3C 認證的網站不足 5%。

CSS 的源起

早期的 HTML 是把 style 的設定內嵌在自己的標籤內。這種做法使網頁變得難以維護。


CSS的出現就是把這個 style 抽離出來，獨立成為一個設定檔。這種做法可以讓設計更有彈性，更多元化，也更便於維護。

CSS 的版本

CSS 一共有3個版本︰

 

  •  CSS1

CSS1 在1996年發佈，其內容包括比較基本的屬性。

 

  •  CSS2.1

CSS2 於1999年發佈，其內容包括了 媒介控制、表單、區塊等等

 

  •  CSS3

CSS3 於1999年草擬，2011年才正式發佈。

如何套用 CSS？

CSS 格式

要用 CSS 控制 HTML 的呈現，你必須經過指定格式，才能讓 HTML 知道你想要做什麼。
CSS的格式如下︰

 

Selector { property : value }
 

p {
    color:#FFFFFF;
    front-family:"Arial";
}

套用 CSS

要套用 CSS 有以下3種方法︰

  • 行內套用
  • 整頁套用
  • 外部套用

套用 CSS

行內套用 (inline style) 是指把 style 的設定直接套用在 HTML 的標籤內。

例如︰

行內套用︰

<h2 style="color:blue;font-family:'標楷體'">
我不想教課</h2>

套用 CSS

整頁套用 (internal style sheet) 是指，把 style 的設定放在<head></head> 內，讓網頁可以直接從一個 HTML 檔內讀取所有需要的 style 設定。

整頁套用︰

<head>
    <style type="text/css">
        h2 {color:blue;
            front-family:"標楷體";
        }
    </style>
</head>

<body>
    <h2>我想去打球</h2>
</body>

套用 CSS

外部套用 (external style sheet) 是指讓 HTML 檔讀取在外面的 .css 檔案，再從外面檔案的引用 style。
這種做法的好處是方便進行檔案結構化，以便管理與維護。

 

外部套用有 2 種方法，分別是

  • 連結
  • 外部匯入

外部套用︰

套用 CSS

外部套用︰

  • 連結 

<head>
    <link rel=stylesheet type= "text/css" href="../index.css">
</head>
<body>
    <h2>有人想去打球嗎？</h2>
</body>
/*index.css*/
h2{
    color:blue;
    front-family:"標楷體";
}

.css檔

.html檔

套用 CSS

外部套用︰

  • 外部匯入

<head>
    <style>
        @import url("../index.css");
    </style>
</head>
<body>
    <h2>我們下課好不好？</h2>
</body>
/*index.css*/
h2{
    color:blue;
    front-family:"標楷體";
}

.css檔

.html檔

動手寫程式(一)

行內套用

  1. 建立一個<p>的標籤
  2. <p>的內容為: 行內套用
  3. <p> style 要求:

 

background-color: #000;

color:#FFF ;

font-size:20px;

行內套用

<body>
  <p style="background-color: #000; 
  color:#FFF;
  font-size:0px;">
  行內套用</p>
</body>

整頁套用

  1. 建立一個<h1>標籤
  2. <h1>的內容為: 整頁套用
  3. <h1> style 要求︰

 

font-weight: bold;

text-decoration: underline;

font-family:'標楷體';

 

整頁套用

<head>
	<style type="text/css">
		h1 {
			font-weight: bold;
			text-decoration: underline;
			font-family:'標楷體';
		}
	</style>
</head>

<body>
	<h1>整頁套用</h1>
</body

外部套用——連結

  1. 在 html 檔建立一個 <h3> 標籤
  2. <h3> 的內容是: Connect to .css-1
  3. 建立一個 .css 的檔案
  4. css 的內容為更改 <h3> 的屬性︰

 

font-size: 30em

text-align: center;

font-style: italic ;

 

外部套用——連結

<head>
    <link rel=stylesheet type= "text/css" href="css_1.css">
</head>
<body>
    <h3>Connect to .css-1</h3>
</body>
/*css_1.css*/
h3 {
	font-size: 5em;
	text-align: center;
	font-style: italic;
}

.css檔

.html檔

外部套用——外部匯入

  1. 在 html 檔建立一個 <p> 標籤
  2. <p> 的內容是: Connect to .css-2
  3. 建立一個 .css 的檔案
  4. css 的內容為更改 <p> 的屬性︰

 

text-decoration: line-through;

background-color: pink;

color: blue;

外部套用——外部匯入

<head>
    <style type="text/css">
		@import url("css_2.css");
    </style>
</head>
<body>
    <p>Connect to .css-2</p>
</body>
/*css_2.css*/
p {
	text-decoration: line-through;
	background-color: pink;
	color: blue;
}

.css檔

.html檔

 Class & ID

Class 與 ID

Class 及 ID 都是使用者設定的選擇器 (selector)

這兩者最大的不同，是在於 ID 選擇器在一個 HTML 文件中只能被使用一次，而 Class 選擇器在一個 HTML 文件中可以被使用多次。

 

第二個不同的地方，是 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用，而 Class 選擇器無法被 Javascript 運用到。

Class

Class 的宣告法，是先放一個句點  「.」，之後再列出選擇器名稱。設定一個 Class 選擇器的語法如下：

.【Class 名稱】{
  屬性：設定值；
  ...
}

<head>
	<style>
    	.navbar {
			color:#0000FF;
		}
    </style>
<head>

<body>
	<p class="navbar">Class</p>
</body>

例子

Class

一個 Class 可以同時附著於不同的 tag / instance 上，在相同的名字下，有不同的效果。

【型類選擇器】.【選擇器名稱】{
 屬性：設定值；
 ...
}

Class

例子︰

<head>
	<style>
		b.special {
  			color:#0000FF;
	}

		i.special {
  			color:#FF0000;
		}
    </style>
<head>

<body>
	<p><b class="special">Test_A</b> & <i class="special">Test_B</i>.</p>
</body>

ID

ID 的宣告法，是先放一個井字號 (#)，之後再列出選擇器名稱。設定一個 ID 選擇器的語法如下：

#【ID 名稱】{
  屬性：設定值；
  ...
}

<head>
	<style>
    	#footer {
			color:#FF00FF;
		}
    </style>
<head>

<body>
	<p id="footer"> ID </p>
</body>

例子

動手寫程式(二)

Class

  1. 建立一個<h5>的標籤
  2. <h5>的Class為: testing
  3. class - testing 的要求:

 

color: #F00;

background-color:#FFF ;

font-size:80px;

font-decoration:underline;

ID

  1. 建立一個 <h2> 的標籤
  2. <h2> 的 ID 為: thisIsID
  3. ID - thisIsID 的要求:

 

 

複合選擇器

複合選擇器

當設定多個 class 時，可以用「.class1.class2」的形式將選擇器結合在一起( class 中間不可有空格)，如此可以指定出「既有class1也有class2」的選擇器

  • 通用選擇器
  • 群組選擇器
  • 子選擇器
  • 子孫選擇器
  • 相鄰選擇器

通用選擇器

將 style 套用於全部元素標籤中，通常在重置 css 時才會用到此方法。

* { margin: 0px; padding: 0px; }

 群組選擇器

利用「，」串連多個選擇器一併管理的用法，這樣可以將多處不同樣式一次指定，避免重複撰寫相同的 class 內容。

h1,h2,h3 { color: #333333; }
.main-title, .sub-title, .small-title { font-weight: bold; }

子選擇器

利用「>」串連元素間的

親子關係的選擇器。

<head>
  <style type="text/css">
    li { color: #333333; }
    .main-menu > li { color: #ff0000; }
  </style>
</head>
<body>
<ul class="main-menu">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3
      <ul>
          <li>項目3-A</li> 
      </ul>
  </li>
</ul>
</body>

子孫選擇器

利用元素間的親子關係，依序由「父元素→子元素→孫元素 」的形式特定出範圍的選擇器。

#main-list ul li a { color: #ff0000; }

完

CSS入門

By sheep_of_block

Made with Slides.com

CSS入門

  • 79

More from sheep_of_block