https://developer.mozilla.org/zh-TW/docs/Web/Guide/CSS/Getting_started/%E7%82%BA%E4%BB%80%E9%BA%BC%E8%A6%81%E7%94%A8CSS
淺顯易懂 好網站 ㄎ
html 的標籤說明其實可以自己google,
我直接看 wibibi 也是不錯的網站拉,哈哈,
只是用 wibibi 學對我來說好像沒法有效吸收.
如果許多網站介紹的
HTML 著重於內容的描述
CSS 著重於樣式的表現
把內容與樣式分開 利於管理和維護,
可以對於相同標籤同時進行修改,
已可用的標籤來和HTML相比, css 的樣式標籤較多,
不然的話要單獨設計標籤會使得單純的HTML網頁內容龐大,
並利用圖層方式使得網頁有前後關係, 讓使用者設計上更有彈性.
新增一個css檔案叫做style1.css
內容為
strong {color: red}
而在上一篇 [HTML] 學習 001
所新增的 html來檔拿來修改,
為了和第一次的程式區別所以重新命名為 doc2.html,
修改部分用黑體字表示.
doc2.html
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel= "stylesheet" href="style1.css">
</head>
<body>
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
在上一回有提到 <p> 和 </p> ,
利用標籤就可以使段落與段落之間自動分行,
並有一定的間距, 在預設的縮排效果中是沒縮排的,
這時候就可以用 css 來做樣式的變化.
在 html 裡面link標籤位於head中,
用以控制網頁和外部的資源相互關係,
但是引用的css會因為使用者使用的瀏覽器不同導致不同的結果.
<link 屬性 屬性值 種類>
之後就會看到差別囉
來和第一次的網頁顯示比對一下
沒有留言:
張貼留言