HTML CSS简介与图片映射
1. CSS 入門
內聯樣式：在 HTML 元素中使用 “style” 屬性，需要將表現與內容混在一起；
內部樣式表：在 HTML 文檔頭部 <head> 區域使用 <style> 元素來包含 css；
外部引用：使用外部 css 文件；
一般使用外部引用 css 文件的方式。
?
簡單樣式參考：
background-color：背景色
color：字體顏色
margin-left：左外邊距
font-family：字體
font-size：字號
text-align:center：居中對齊
css 基礎資料查詢：http://www.runoob.com/css/css-tutorial.html。
?
內聯樣式示例：
<body style="background-color:yellow;"> <p style="color:blue;margin-left:20px;">This is a paragraph.</p> <p style="font-family:arial;color:red;font-size:20px;">一個段落。</p> <p style="background-color:green;">這是一個段落。</p> </body>?
內部樣式表：
<head> <style> hr {color:red;} p {text-align:center;} </style> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head>?
外部樣式表：
<head> <link rel="stylesheet" type="text/css", href="test.css"> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head>test.css： p {color:red; text-align:center;}?
層疊次序：
瀏覽器默認設置 -> 外部樣式表 ->?內部樣式表 ->?內聯樣式。
?
ID選擇器：
為標有特定ID的HTML指定特定的樣式，內部外部樣式都可以實現。
一個ID的樣式可以被多個元素選中。
<!DOCTYPE html> <html><head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title><!-- <link rel="stylesheet" type="text/css", href="test.css"> --> <style> #p1 {color:red;text-align:center; } #p2 {color:blue;text-align:center; } #p3 {color:green;text-align:center; } </style> </head><body> <p id="p1">This is a paragraph.</p> <p id="p2">一個段落。</p> <p id="p3">這是一個段落。</p></body> </html>?
Class 選擇器：
.center {text-align:center; } .red {color:red; } .green {color:green; } <!DOCTYPE html> <html><head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title><link rel="stylesheet" type="text/css", href="test.css"> </head><body> <p class="center">This is a paragraph.</p> <p class="center red">一個段落。</p> <p class="center green">這是一個段落。</p></body> </html>?
指定元素的樣式：
p.center {text-align:center; } h1.red {color:red; } .green {color:green; }- h1 標題元素將不受 .center 的影響；
- p 段落元素將不受 .red 的影響；
?
2. HTML 圖像補充：
alt 屬性：在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。
height、width：設置圖片的寬、高，默認單位是像素。
usermap：圖片映射，點擊圖片的位置將鏈接到新的位置。
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"><map name="planetmap"><area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"><area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"><area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map>- area shape=“”：指定響應區域的形狀；
- coords：根據響應形狀提供必要的坐標參數；
?
轉載于:https://www.cnblogs.com/Daniel-Liang/p/5917670.html
總結
以上是生活随笔為你收集整理的HTML CSS简介与图片映射的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： KnockoutJS 3.X API 第
- 下一篇： 前端开发总结