CSS Cascading Style Sheets 串接 (層疊) 樣式表
在HTML中引入CSS 的方法
- 行內式：
<!DOCTYPE html>
<html>
<header>
<title>測試</title>
</header>
<body>
<h1 style="color: white;background-color: blue">This is a line of Text.</h1>
</body>
</html>
- 嵌入式：
<!DOCTYPE html>
<html>
<header>
<title>測試</title>
<style type="text/css">
h1{color: white;background-color: blue}
</style>
</header>
<body>
<h1>This is a line of Text.</h1>
</body>
</html>
- 匯入式：
<!DOCTYPE html>
<html>
<header>
<title>測試</title>
<style type="text/css">
@import "kkStyle.css"
</style>
</header>
<body>
<h1>This is a line of Text.</h1>
</body>
</html>
kkStyle.css：
h1{color: white;background-color:brown}
- 使用CSS規則引入外部CSS檔
- 網頁閃爍一下才呈現樣式效果
- 需引入多個CSS檔，作法：引入一個目錄CSS檔，再匯入其他獨立的CSS檔
- 連結式：
<!DOCTYPE html>
<html>
<header>
<title>測試</title>
<link href="kkStyle.css" rel="stylesheet" type="text/css"/>
</header>
<body>
<h1>This is a line of Text.</h1>
</body>
</html>
- 使用HTML標籤引入外部CSS檔
- 網頁從一開始便呈現樣式效果
- 僅需引入一個CSS檔
-----------------------------------------------
CSS
基本選擇器selector
- 標記選擇器
<!DOCTYPE html>
<html>
<header>
<title>測試</title>
<style type="text/css">
h1{color: white;background-color:blueviolet}
</style>
</header>
<body>
<h1>This is a line of Text.</h1>
</body>
</html>
- 類別選擇器
<!DOCTYPE html>
<html>
<header>
<title>測試</title>
<style type="text/css">
.kkH1{color: white;background-color:blueviolet}
</style>
</header>
<body>
<h1 class="kkH1">This is a line of Text.</h1>
</body>
</html>
一個標記可以同時擁有兩種類別的效果，如：class="one two" ，one 與 two 分別為2種不同樣式效果
- ID選擇器
<!DOCTYPE html>
<html>
<header>
<title>測試</title>
<style type="text/css">
#kkH1{color: white;background-color:blueviolet}
</style>
</header>
<body>
<h1 id="kkH1">This is a line of Text.</h1>
</body>
</html>
因為要配合 JavaScript 指令也能查找id，所以最好一個id只賦予一個HTML標記
複合選擇器
交集選擇器
聯集選擇器
後代選擇器
CSS層疊衝突時，優先順序：
行內樣式 > ID選擇器 > 類別選擇器 > 標記選擇器
-----------------------------------------------
盒子內部結構
- 邊框 border
- 內邊距 padding
- 外邊距 margin
如果給4個屬性值，依次表示上、右、下、左
如果給3個屬性值，依次表示上、右左、下
如果給2個屬性值，依次表示上下、右左
-----------------------------------------------
單位
相對單位：根據使用者環境而言
em：元素的字體高度，具有繼承關係。
瀏覽器 --> 父 --> 子 ==>> 1em=16px -->1.5em=1.5*16=24px --> 1.5em=1.5*24=36px
建議製作網頁以 em 作為字型單位，因為當使用者瀏覽網頁時，若覺得字型大小不適，就 可以在瀏覽器中按相對比例方式變更所有字型的大小。
ex：小寫字母 x 的高度
px：根據螢幕解析度不同而大小有差異。1024*768 螢幕的 1px 比 1280*800 螢幕的 1px 要大些
%：通常設定於表格與網頁寬度
絕對單位：不受工作環境影響
cm：公分
in：吋 1 in = 2.54 cm
pt：點 1pt = 1/72 in 。Word 固定 pt 大小的文字，無論放大顯示到多大，列印出來大小是固定 的，因為是以列印設備之 pt 單位的解析度為準
pc：皮卡 1 pc = 12 pt
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
HTML5
div、section、article，語義上從無到有，逐漸增強。
div無任何語義，僅僅用作樣式化或者腳本化，
對於一段主題性的內容，比較適用section，
而假設這段內容是可以脫離上下文，作為完整的結構體獨立存在的一段內容，那麼就適合用article。
原則上來說，能使用article的時候，也是可以使用section的。但是視情況而定，假如更適合使用article，那麼就不要使用section了。
-------------------------------- sample ---------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試</title>
<link rel="stylesheet" media="all" href="kkStyle.css">
</head>
<body>
<header>
<h1>網站布局與美化</h1>
<nav>
<ul><li><a href="#">正興網站</a></li></ul>
</nav>
</header>
<section>
<figure>
<figcaption>這是我的電腦桌面</figcaption>
<img src="1.png">
</figure>
<article>
<p>
若親民黨主席宋楚瑜確定參選2020總統大選，則前立法院長王金平總統夢恐破滅，據媒體報導，王金平曾與宋楚瑜談論代表親民黨參選總統的意願，但親民黨較希望宋楚瑜參選，且王希望選正的而非副手，因此合作最後無疾而終。王金平3日於三重彭園湘菜館參加三重雲林同鄉會第五、六屆理事長交接典禮，現場媒體詢問是否和宋楚瑜對面會談？王金平回應，「的確有見過面」，但是報紙所報導的26日，他表示，;.,當時人在南部。
王金平3日於三重彭園湘菜館參加三重雲林同鄉會第五、六屆理事長交接典禮，現場媒體詢問是否和宋楚瑜對面會談？王金平回應，「的確有見過面」，但是報紙所報導的26日，他表示，當時人在南部參加幾場婚禮，26日並未見面。王金平3日於三重彭園湘菜館參加三重雲林同鄉會第五、六屆理事長交接典禮，現場媒體詢問是否和宋楚瑜對面會談？王金平回應，「的確有見過面」，但是報紙所報導的26日，他表示，當時人在南部參加幾場婚禮，26日並未見面。
王金平3日於三重彭園湘菜館參加三重雲林同鄉會第五、六屆理事長交接典禮，1 23456789現場媒體詢問是否和宋楚瑜對面會談？王金平回應，「的確有見過面」，但是報紙所報導的26日，他表示，當時人在南部參加幾場婚禮，26日並未見面。王金平3日於三重彭園湘菜館參加三重雲林同鄉會第五、六屆理事長交接典禮，現場媒體詢問是否和宋楚瑜對面會談？王金平回應，「的確有見過面」。
</p>
<p>
王金平3日於三重彭園湘菜館參加三重雲林同鄉會第五、六屆理事長交接典禮，現場媒體詢問是否和宋楚瑜對面會談？王金平回應，「的確有見過面」，但是報紙所報導的26日，他表示，當時人在南部參加幾場婚禮，26日並未見面。
</p>
<div id="rounded">
<p class="kkp">
據《鏡週刊》報導，王金平和宋楚瑜26日有私下會面，談及合作議題，但因王希望能代表親民黨參選總統，可宋參選總統已是親民黨黨內共識，且王希望能當正的而非副手，因此兩人會談最後無疾而終。
</p>
</div>
</article>
</section>
<footer><p>CopyRight @ All Right Reserve.</p></footer>
</body>
</html>
--------------kkStyle.css
body{
width: 90%;
margin: 0px auto;
background-color: #EEFFBB;
font-family: 新細明體,serif;
color: #444444;
font-size: 1em;
line-height: 1.5em;
letter-spacing: 3px;
}
header,section,footer{
background-color: aliceblue;
border-radius: 10px;
box-shadow: 3px 3px 4px #AAAAAA;
}
header h1{
font-family: 微軟正黑;
font-size: 4em;
color:aliceblue;
text-shadow: -2px -2px 0px #FFFFFF, 2px 2px 0px #444444, 2px 2px 6px #888888;
}
article p{
text-indent: 2em;
text-align:justify;
margin: 20px;
}
#rounded{
border-style: solid;
border-width: 1px;
width: 500px;
padding: 0px;
margin: 0px auto;
border-radius: 20px;
box-shadow: 3px 3px 3px #AAAAAA;
}
.kkp{
display: block;
background-color: #CC6600;
color: #FFFFFF;
padding: 10px 20px 18px;
border-radius: 20px;
//float: right;
}
section{
//padding-left: 0px;
}
section figure img{
width: 30%;
float: left;
margin-right: 15px;
//margin-right: 0px;
}
footer p{
font-family: sans-serif;
font-size: 2.5em;
text-shadow: -2px -2px 0px #FFFFFF, 2px 2px 0px #227700;
}
-------------------------------- sample ---------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mBot</title>
<link rel="stylesheet" media="all" href="kkStyle.css">
</head>
<body>
<header>
<h1></h1>
</header>
<section>
<figure>
<figcaption></figcaption>
<img src="01.png" >
<img src="02.png" >
</figure>
<h2></h2>
<p>實作影片</p>
<video width="400" controls>
<source src="1.mp4" type="video/mp4">
</video>
</section>
<footer><p>Copyright © 2019 GuoChin All Rights Reserved</p></footer>
</body>
</html>
--------------------------------kkStyle.css
body{
font-family: sans-serif;
font-size: 2em;
width: 90%;
margin: auto;
background-color: #F0FBD9 ;
}
header,section,footer{
background-color: #FFF;
display: block;
margin: 0px 0px 0px 0px;
}
header,section,footer{
border: 1px solid #CCC;
border-bottom-right-radius: 0px 0px 50px 0px;
box-shadow: 5px 0px 10px -3px silver;
}
header h1{
font-family: 微軟正黑體;
color: #D1D1D1;
text-shadow: -1px -1px white, 1px 1px #333;
}
figure {
border: thin #D35400 solid;
padding: 5px;
margin-bottom: 200px;
}
figure img{
width: 75%;
margin-bottom: 100px;
}
figcaption {
background-color: #145A32;
color: #fff;
font: italic smaller sans-serif;
padding: 3px;
text-align: center;
width: 75%;
}
h2{
font-family: 微軟正黑體;
color: #FFFC33;
text-shadow: -1px -1px #A80214, 1px 1px #333;
}
section p{
font-family: 標楷體;
text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F;
}
video{
margin-bottom: 100px;
}
footer p{
font-size: 0.75em;
text-shadow: 0.1em 0.1em 0.05em #333;
}
-------------------------------- sample ---------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="WebStyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1></h1>
<nav>
</nav>
</header>
<section>
</section>
<footer><p>Copyright © 2019 GuoChin All Rights Reserved</p></footer>
</body>
</html>
---------------------------------------- sample
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="WebStyle3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id='container'>
<header>
<h1>中華民國</h1>
<nav>
<ul>
<li><a href='#'>線上測驗</a></li>
<li><a href='#'>修改密碼</a></li>
<li><a href='#'>吾聊天地</a></li>
</ul>
</nav>
</header>
<section>
真的是太厲害了，用手抄寫經文，當成家裡壁紙！台南安南區一位75歲的阿伯，他七八年前退休後，就開始抄寫佛經，當成家裡的壁紙，走進他家，牆壁上、貼滿手寫經文，讓人大開眼界，他受訪時笑著說，對他來講，這也是一種修身養性的方式。
經過台南安南區這裡的透天厝，常常有人會被，這醒目的黃色壁紙，給吸引住停下來看，走近一看，上面密密麻麻的，都是用手寫的佛家經文，整整齊齊大小一致，讓人忍不住讚嘆，而作者就是這位已經75歲的徐阿伯。
這是他家不管是鐵捲門，或是壁磚上頭有護貝過的紙張，是他製作的佛經壁紙，七八年前他退休後，開始用手抄寫經文，當成修身養性的方式，慢慢地，這些妝點家裡的壁紙，讓看過的人印象深刻，阿伯的家，也成為這個區域，最有特色的房子。
</section>
<footer><p>Copyright © 2019 GuoChin All Rights Reserved</p></footer>
</div>
</body>
</html>
------------------------------------------
body {
background-color: #f2ffe6;
font-family: Verdana;
}
#container {
width: 960px;
margin: auto;
background-color: #ffffff;
}
h1 {
text-align: center;
font-size: 3em;
color: #445566;
font-family: Times New Roman,Arial Black, Times, Serif;
font-weight: 500;
margin: 0;
padding: 20px;
}
nav {
background-color: #45bcd2;
height: 40px;
margin-bottom: 20px;
text-align: right;
}
nav ul {
list-style: none;
margin: 0;
padding-top: 5px;
}
nav li {
display: inline;
margin-left: 10px;
margin-right: 10px;
}
nav li a {
color: white;
}
footer {
height: 50px;
background-color: lightgrey;
text-align: center;
}
----------------------------------------------------------------------
沒有留言:
張貼留言