目的: Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)是用來描述HTML的樣式
selector(選取器)，也就是要定義的對象。
將樣式套用在 selector(選取器)
我們想設定一些標籤的基本樣式
body {background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
background-color: darkblue;
}
p {
font-size: 20px;
}
</style>
</head>
<body>
<h1>吳濟聰</h1>
<p>輔大資管系助理教授</p>
<p>印地安那大學博士</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="my.css"/>
</head>
<body>
<h1>吳濟聰</h1>
<p>輔大資管系助理教授</p>
<p>印地安那大學博士</p>
</body>
</html>
my.css的內容則不需要有<style></style>，如下面的範例:
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
background-color: darkblue;
}
p {
font-size: 20px;
}
CSS的語法是一開始是selector(選取器)，也就是要定義的對象。
selector可以是
html的基本元素(element)，如:body、h1等等。上面的範例就是針對基本元素定義樣式。
當我們希望只針對某一個特定元件定義樣式，我們可以利用在html中所定義的id定義樣式。
當我們希望只針對某一群元件定義樣式，我們可以利用在html中所定義的class定義樣式。
要針對id定義樣式的話，在selector前加「#」:
<!DOCTYPE html>
<html>
<head>
<style>
#primaryHeading {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 id="primaryHeading">HTML</h1>
<h1>CSS</h1>
</body>
</html>
那就要使用class，要針對class定義樣式的話，在selector前加「.」:
<!DOCTYPE html>
<html>
<head>
<style>
.importantHeadings {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="importantHeadings">HTML</h1>
<h1 class="importantHeadings">CSS</h1>
<h1>JavaScript</h1>
<h1>jQuery</h1>
</body>
</html>
3>利用 tag (p, body, h1) 套用樣式
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
background-color: darkblue;
}
p {
font-size: 20px;
}
</style>
</head>
<body>
<h1>吳濟聰</h1>
<p>輔大資管系助理教授</p>
<p>印地安那大學博士</p>
</body>
</html>
4>div span
雖然div及span都算是html的基本語法，但是，通常是用在樣式的設定上。
div與span的差別在於div是可以用來定義一個區塊的樣式，而且在<div></div>前後會換行。
而span只能在一行之中，而且不會換行
<!DOCTYPE html>
<html>
<head>
<style>
.importantHeadings {
text-align: center;
color: red;
background-color:black;
padding:20px
}
</style>
</head>
<body>
<div class="importantHeadings">
<h1>My Important Heading</h1>
<h1>My Second Heading</h1>
</div>
<p>hello</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.importantHeadings {
text-align: center;
color: red;
background-color:black;
padding:20px
}
</style>
</head>
<body>
<h1><span class="importantHeadings">My Important Heading</span></h1>
<h1><span class="importantHeadings">My Second Heading</span></h1>
<p>hello</p>
</body>
</html>
2>Extjs 的 panel. bodyStyle 設定 兩種方式 CSS 字串
1>CSS字串方式:
bodyStyle: 'background:#ffc; padding:10px;'
bodyStyle: { background: '#ffc', padding: '10px' }
說到font-size，就必須要知道該屬性設定值的問題，font-size可設定的值Amos會將其區分成三大類:
關鍵字 : small , large, larger,
絕對單位:
px (1pixel = 1/96in) , 螢幕上顯示數據的最基本的點
pt (1point = 1/72in) ,是印刷行業常用單位
cm
mm
in (1inch = 96px = 2.54cm)
相對單位: % (百分比)
