CSS 常用語法

 


1. 基本的常用語法

超連結的連結樣式

a   加入所有超連結樣式
a:link   加入超連結文字樣式
a:hover   加入滑鼠指標指著連結樣式
a:active   加入按下啟用連結的樣式


文字風格樣式  CSS文字風格樣式範例

color: #0f0f0f;   文字顏色
font-family: Arial, Tahoma;   文字風格字型
font-size: 13px;   文字大小
font-weight: bold;   文字粗體
font-style: italic;   文字斜體
font-variant: small-caps;   小字體
letter-spacing: 1px;   字體間距離
line-height: 18px;   設定行高


text-decoration: line-through;   加上刪除線
text-decoration: underline;   加上底線
text-decoration: none;   刪除連結底線
text-transform: capitalize;   字首大寫
text-transform: uppercase;   英文大寫
text-transform: lowercase;   英文小寫


text-align: right;   文字靠右對齊
text-align: left;   文字靠左對齊
text-align: center;   文字置中對齊
text-align: justify;   文字分散對齊


vertical-align: sub;   下標字
vertical-align: super;   上標字
vertical-align: top;   垂直向上對齊
vertical-align: bottom;   垂直向下對齊
vertical-align: middle;   垂直置中對齊
vertical-align: text-top;   文字垂直向上對齊
vertical-align: text-bottom;   文字垂直向下對齊


word-spacing: 5px;   設定詞的間距(詞間需有空白)
word-wrap: break-word;   任意斷字，適用於英文
word-wrap: nowrap;   強制水平排序不斷行


文字風格樣式   CSS項目樣式範例

list-style-type: none;  沒有標誌，不編號
list-style-type: disc;  實心圓形符號
list-style-type: circle;   空心圓形符號
list-style-type: square;   實心方形符號
list-style-type: decimal;   阿拉伯數字
list-style-type: decimal-leading-zero;   阿拉伯數字(十進制前置零)
list-style-type: lower-roman;   小寫羅馬數字
list-style-type: upper-roman;   大寫羅馬數字
list-style-type: lower-alpha;   小寫英文字母
list-style-type: upper-alpha;   大寫英文字母
list-style-type: lower-greek;   希臘語
list-style-type: armenian;   亞美尼亞
list-style-type: georgian;   格魯吉亞語
list-style-image: url(dot.gif);   圖片式符號
list-style-position: outside;   凸排(預設值)
list-style-position: inside;   縮排


背景樣式  CSS背景樣式範例

background-color: #5f5f5f;   背景色彩
background: transparent;   透明背景
background-image : url(bg.gif);   背景圖片
background-attachment : fixed;   浮水印固定背景
background-repeat : repeat;   重複排列-網頁預設
background-repeat : no-repeat;   不重複排列
background-repeat : repeat-x;   在 X 軸重複排列
background-repeat : repeat-y;   在 Y 軸重複排列
background-position : 90% 90%;   背景圖片 X 與 Y 軸的位置
background-position : top;   向上對齊
background-position : bottom;   向下對齊
background-position : left;   向左對齊
background-position : right;   向右對齊
background-position : center;   置中對齊


指定滑鼠游標的型態   CSS滑鼠樣式範例

cursor: move;   十字箭頭
cursor: help;   協助加一問號
cursor: wait;   等待中；漏斗
cursor: pointer;   手型，表示超連結
cursor: not-allowed;   無法使用


2. CSS元素邊界關係：border、padding 、 margin

剛開始學還被padding跟margin搞得滿亂的~

border很簡單就是邊框 

<div class="box">hello world</div>

<style type="text/css">
	.box{
		height: 300px; /*設定高度300px*/
		width: 300px; /*設定寬度300px*/
		border: 1px solid black; /*設定邊框為 : 粗度為1px solid為實體線 black為黑色*/
	}
</style>

圖示 : 


margin 為 外距 : 向外的距離

<div class="box">hello world</div>

<style type="text/css">
	.box{
		height: 300px;/*設定高度300px*/
		width: 300px;/*設定寬度300px*/
		border: 1px solid black;/*設定邊框為 : 粗度為1px solid為實體線 black為黑色*/
		margin: 50px;/*設定外距 : 50px*/
	}
</style>

說明 : 就是邊框往外的距離增加50px

圖示:



padding 為 內距 : 向內的距離

<div class="box">hello world</div>

<style type="text/css">
	.box{
		height: 300px;/*設定高度300px*/
		width: 300px;/*設定寬度300px*/
		border: 1px solid black;/*設定邊框為 : 粗度為1px solid為實體線 black為黑色*/
		margin: 50px;/*設定外距 : 50px*/
		padding: 50px;/*設定內距 : 50px*/
	}
</style>

說明 : 就是邊框往內的距離增加50px

圖示 : 



3. Position 物件定位

static:
這是原本的預設值，套用這個語法，將不會被特別被定位在某地方，而是照著瀏覽器原本的位置。

*relative:
基本上，如果這與法沒有特定設定top、right、bottom、left來定義他的位置
那他也是照著瀏覽器原本的位置。

*absolute:
這是在做網頁設計時，很廣泛被使用的語法，通常會和relative一起使用
這語法會在除了static以外的第一個父元素定位
通常會用在圖片做遮罩，或是寫文字使用

fixed:
這是在瀏覽器的畫面做定位
是在做網頁的浮動區塊使用，可以設定top、right、bottom、left來定義他的位置


4. 進階排版 display: flex


display: flex

block element 的 display 值預設為 block，因此三個小方塊-紅、藍、綠皆呈現一直行排三列狀態。


html

<div class="container">
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
</div>

css

.container {
  display: block;
}
.item {
  width: 50px;
  height: 50px;
  margin: 10px;
}
.red {
  background: red;
}
.blue {
  background: blue;
}
.green {
  background: green;
}

若將父元素 container 改為 display: flex，則會呈現一橫列狀態。


.container { 
  display: flex; 
}


justisfy-content

  • flex-start
  • flex-end
  • center
  • space-between


flex-start 靠左對齊



.container { 
    display: flex; 
    justify-content: flex-start; 
}


flex-end 靠右對齊



.container { 
    display: flex; 
    justify-content: flex-end; 
}


center 置中對齊



.container { 
    display: flex; 
    justify-content: center; 
}


space-between



.container { 
    display: flex; 
    justify-content: space-between; 
}


align-content

  • flex-start
  • flex-end
  • center
  • space-between


每行貼齊交錯軸線最前端


align-content: flex-start

每行貼齊交錯軸線最末端



align-content: flex-end

每行對齊交錯軸線中間


align-content: center

第一行與最後一行分別對齊交錯軸線最前端與最末端



align-content: space-between

每行平均分配每行間距


align-content: space-around

預設值，每行內容元素全部撐開至 flexbox 大小



align-content: stretch


5. @media screen  說明教學

響應式網頁設計(Responsive Web Design)簡稱RWD，又稱適應性網頁、響應式網頁設計、回應式網頁設計、多螢網頁設計，這是一項開始於2011年由Ethan Marcotte 發明的術語 Responsive Web Design (RWD)。
2012年後被公認為是日後網頁設計開發技術的趨勢，網站使用CSS3，以百分比的方式以及彈性的畫面設計，在不同解析度下改變網頁頁面的佈局排版，讓不同的設備都可以正常瀏覽同一網站，如電腦、平板、手機、電視都能夠得到最佳的預覽視覺效果，是個因移動平台的用戶大量增加而想出的一個對應方法，也是愛貝斯擅長的網頁設計技術之一。

Max Width

若瀏覽區域的寬度小於600像素，則下方的CSS描述就會立即被套用：

@media screen and (max-width: 600px){ 
    .class{ 
        background: #ccc; 
    } 
}

記憶技巧 : 看到 max 就記得 (以下) ,上述範例 : 600px以下背景顏色改變成#ccc

Min Width

若瀏覽區域的寬度大於900像素，則下方的CSS描述就會立即被套用：

@media screen and (min-width: 900px) { 
    .class { 
	    background: #666; 
	} 
}

記憶技巧 : 看到 min 就記得 (以上) ,上述範例 : 900px以上背景顏色改變成#666

min-width and max-width

瀏覽區域寬度範圍在321px~768px，則下方CSS描述會立即被套用：

@media only screen and (min-width: 321px) and (max-width: 768px) { 
	.class { 
		background: #666; 
	} 
}


參考網址 :

https://coolong124220.nidbox.com/diary/read/9959355

https://cythilya.github.io/2017/04/04/flexbox-basics/

https://w3c.hexschool.com/flexbox/d0e569ef

https://www.ucamc.com/e-learning/css/102-rwd-css-media-type


留言

張貼留言

這個網誌中的熱門文章

網頁入門教材目錄

  0.網頁運作原理 網頁運作原理與專業名詞 1.程式編輯器sublime 3 介紹 sublime 3 使用介紹 2. PHP開發環境介紹  Xampp介紹 3. 認識HTML HTML介紹 4. 認識CSS CSS基礎篇 CSS基礎語法 5.認識 Javascript Javascript基礎 6. 認識 Jquery Jquery與ajax介紹 7. Bootstrap 4 基礎介紹 Bootstrap 4 介紹 Bootstrap 4 範例製作 8. 資料庫入門 MariaDB入門教學 9. PHP介紹 PHP基礎用法 - 1 PHP基礎用法 - 2 PHP物件導向 PHP與資料庫連線 10. Laravel框架入門 Laravel 基礎概念 Laravel下載安裝、MVC流程編寫、資料庫設定 Laravel 新增資料與顯示資料 Laravel 資料修改與刪除 Laravel 完整筆記本範例
閱讀完整內容

什麼是HTML?

圖片
  1. HTML 是什麼呢 ? html介紹 HTML 的英文原文是 HyperText Markup Language ，中文譯為「超文字標示語言」。為什麼要說「 超文字 」呢？如果你曾經用過 Windows 上的「記事本」打過字，你應該知道一般的純文字輸入是無法顯示不同的字型大小、不同的文字顏色、甚至插入與文字說明相關的圖片的。而 超文字則可包含這些不同的文字變化、加入圖片或影音多媒體、畫表格、甚至可做一些基本的排版功能 。而「標記語言」指的是 HTML 透過一些定義好的結構化標籤 (Tag) 語法，讓你把超文字放到你所想要的位置、或去指定它的呈現方式。因此，再簡單的說， HTML 就是可以讓你將您所想要呈現給別人看的資料，儘可能以較豐富的方式去呈現。 我可以用什麼工具編寫 HTML 網頁？ 很簡單，用 Windows 內建的「記事本」小軟體，就可以拿來練習編寫網頁了。但如果可以的話，真心推薦您使用以下其中一套「免費的進階版記事本」小軟體：  Notepad++  、  sublime ，因為它們可以幫您將 HTML 語法和您的網頁文章內容用不同的顏色做一些區隔，讓您更方便閱讀 HTML 內容，並且也可以及早讓您發現可能的編寫錯誤，讓您的學習之路更為順暢。 我要如何瀏覽及測試我的 HTML 網頁呢？ 當您使用前述的「記事本」工具編寫完內容後， 可以將檔案儲存成 test.html 這樣的檔名 ， test 即是您網頁的主檔名，而 .html 則為網頁的副檔名。假設您的檔案是儲存在「桌面」，您可用檔案總管或是任何可能的方式到桌面去找到 .html 的檔案，例如前述的 test.html 檔，然後用 滑鼠在 test.html 檔案上按左鍵快速點選兩下 ，則電腦即會自動以您系統預設的  網頁瀏覽器  開啟這個練習的網頁 2. HTML 基本語法 基本的HTML文件格式 < HTML > 　 < HEAD > 　　 < TITLE > 網頁主題 </ TITLE > 　　 < Meta > 　 </ HEAD > 　 < BODY > 　　網頁內容的主要呈現部分 　 </ BODY > </ H...
閱讀完整內容

網頁是怎麼運作的呢?

圖片
  短期來看，在撰寫網站程式碼時，這些理論並不是非懂不可，但在之後，了解這些背後原理，對你會很有幫助。 網頁know-how : 用戶端與伺服器端 用戶端 是網路用戶的典型上網設備（像是連到 Wi-Fi 的電腦、或是連到手機網路的手機），這些設備通常有能夠上網的軟體（通常是 Firefox 或 Chrome 之類的瀏覽器）。 伺服器端 是放著網頁、網站、或著 app 的電腦。當用戶端設備要訪問網頁時，網頁的副本會從伺服器下載到用戶端，以便顯示在用戶的瀏覽器。 IP位址 為Internet Protocol Address的縮寫，中文被稱為網際協議位址。 是一種在Internet上的給主機編址的方式。  IP位址可以說是網頁伺服器的門牌 讓系統可以透過這個號碼找到正確的網頁伺服器在哪裡。 DNS Domain Name System的縮寫，中文又稱領域名稱解析系統。 是網際網路的一項的服務，是個可將網址和IP位址相互對應的資料庫，能夠使人更方便的存取網際網路。( 不用記長長一串的數字啦！ ) 伺服器 伺服器作為硬體來說，通常是指那些具有較高計算能力，能夠提供給多個使用者使用的電腦。伺服器與PC機的不同點太多了，例如PC機在一個時刻通常只為一個使用者服務。伺服器與主機不同，主機是透過終端給使用者使用的，伺服器是透過網路給用戶端使用者使用的。 而近期 雲端伺服器 越來越盛行,常見的雲端服務有 AWS , GCP , AZURE 等.... , 雲端伺服器擁有非常多的服務, 可以節省開發時間 , 直接使用服務(但通常都不便宜...) 、擁有高擴展的硬體資源, 隨時調整你的硬體資源、安全性高等等.... , 想必之後會成為伺服器的主流 網頁伺服器 又叫做 Web Server 。 Apache是接洽的服務員負責將網頁畫面傳遞給瀏覽器，只要網頁中有需要資料的部分Apache就會向DB索取資料後一起交給瀏覽器。 DB(Data Base)就是存放資料的地方。 web server 的種類有： apache、nginx、iis apache 和nginx的差別在於nginx可能速度會比較快，用的資源少。 iis是微軟做的，如果是寫 asp.net  就可用這套iis但環境就是要在window server上。 瀏覽器輸入網址的流程 :...
閱讀完整內容