六角學院｜網頁編輯器、HTML、CSS

一、
<a> →文字連結(後接href)
<img src="圖片路徑" alt="看不見圖片時候的替代檔名">→(單一標籤,沒有結尾要關起來.)
補充連結:http://www.w3school.com.cn/tags/att_img_alt.asp
head+網頁相關資訊(網頁名稱/載入之css/載入之js)

 相對路徑：以自己檔案位置去對比要使用之檔案的相對位置
絕對路徑：網址連到對方檔案的位置

 a+target＝"_blank"→另開新視窗
a+title=""→告訴使用者連到哪裡
a href="#"→無作用連結

 項目符號：有主題性的項目

 ol:1.2.3.4....的數字條列顯示
ul:圓點條列顯示

 二、
<link rel="stylesheet" href="">
→告訴瀏覽器我將採用一個樣式表文件.亦即告訴瀏覽器我將採取什麼編碼對內容進行處理.

 選擇器{
屬性: 設定值;
        屬性: 設定值;
}

 文字顏色（color:＿）
example:

 h1{
color: blue;
}

 字體大小(font-size:_px)
example:

 h1{
font-size: 99px;
}

 類別選擇器
(html)
p class=style1
(css)
.style1{
color=blue;
}
擬態選擇器
-常用於a、p
-點進去/滑進去要有功能性(連結動作/導入至其他頁面/點入產生動畫效果)
a:hover{
color:gray;
}

 a:active{
color:yellow;
}
相關文章：
https://dotblogs.com.tw/johnny/archive/2010/01/24/13248.aspx
用css優化文字排版:

 -字體 font-family: Arial;
-字體大小font-size: 18px;
-行距line-height: 2;
-水平對齊text-align: right;
 用途是水平對齊，可以設定靠左、靠右、置中甚至是使左右對齊本文等特性，要注意的是text-align 只能設定水平  
 對齊，無法設定垂直方向的對齊.
-首行縮排text-indent: 36px;
-底線text-decoration: line-through中線;
                                    underline下底線;
                                    none把線去掉;

 在 HTML 標籤上加上線條(border):

 border: __px 樣式(solid實線) 顏色(red)
                               dashed虛線
                               dotted細線

 CSS reset:https://meyerweb.com/eric/tools/css/reset/

 作業:file:///Users/user/Desktop/project/index16.html
三、

 行內元素inline:與文字段落並排在一起
區塊元素block:表示會盡量把容器佔滿/版型.

  →從開發人員工具觀察其CSS排版預設是block或inline,從編譯器的CSS去修改.

 DIV 與 SPAN 的使用時機、CSS 後代選擇器:
-純粹為網頁排版使用所設計,未具有任何語意.
-CSS 後代選擇器:以先指定的style,後再去指定該範圍內的元素設定你想呈現的方式.
-div區塊元素;span行內元素.
CSS中display:block與display:inline差異

display:block - 區塊，元素會以區塊方式呈現，除非設定 position 或 float。
display:inline - 所有文字或圖片均不換行，也就是全部都會是同一行的意思。

block 的特性是可以設定高度（height）、寬度（width）、上方與下方距離，像是 div、p、ul、li 均屬 block。而 inline 高度與寬度都不能設定，文字或圖片所佔的寬度就是他的寬度，像是 span、a、input、img、em 均屬 inline。

example:(利用display:block製作檔案下載按鈕)
(HTML)
  <a href="#" title="Download Link" class="download">檔案下載</a>
(CSS)
.download:hover { 
background: #000;
} 
.download{
  display: block;  
  margin: 10px 0;
  padding: 15px;
  width: 100px;
  background: blue;
  color:white;
  text-decoration: none;
  text-align: center;  
}
使用 margin、padding 來推擠距離

 -padding內距:(將文字)向(方框)內推→上下/左右
example:
padding:15px 20px;
上下內距都是 15px 而左右內距都是 20px

 -margin邊界:(將文字)向(方框)外推→上/右/下/左
example:
margin:5px 10px 15px 20px
上外距為 5px，右外距為 10px，下外距為 15px 而左外距則為 20px

 example:
margin: 0 auto 0 auto;
           : 0 auto;
Box Model（盒模型）

 .box+tab=<div class="box"></div>















實際寬高＝padding+border+實際所設定的寬x高(margin不影響故以虛線表示)
但margin確實會在瀏覽器上加上你設計的距離.

 相關連結:
padding:http://www.wibibi.com/info.php?tid=111
margin:http://www.wibibi.com/info.php?tid=110

使用 margin: auto 讓版型置中

<div class="wrap">
<div class="header"></div>
<div class="content"></div>
</div>
在此範例中div是區塊元素,wrap為其容器,會盡量占滿一整個區塊,直到達到其寬度為止.

補充教材：不想算盒模型的推擠？試試 CSS3 box-sizing 吧！

 * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

}

about box-sizing:http://zh-tw.learnlayout.com/box-sizing.html
can I use:https://caniuse.com

 盒子模式:http://www.1keydata.com/css-tutorial/tw/box-model.php
邊界 (margin):http://www.1keydata.com/css-tutorial/tw/margin.php
留白 (padding):http://www.1keydata.com/css-tutorial/tw/padding.php
邊框 (border):http://www.1keydata.com/css-tutorial/tw/border.php
背景 (background):http://www.1keydata.com/css-tutorial/tw/background.php





评论

发表评论

热门博文