上一篇，我們先是制作了一個再簡單不過的HTML頁面，接著補充了一些內容，最后稍加美觀的修飾（style），淺嘗輒止
這次，我們就來重點關注一下CSS
CSS是何方神圣？
簡單地理解一下
一個本身和代碼無關的日常例子
要搬家了，新家里，空蕩蕩的，總得有床有飯桌有坐的地方吧？那就在購置這些家具吧，它們就可以理解為HTML中的各元素
從商店里挑選這些家具，放置到家里后，能用但不美觀或是搭配的哪看著哪不順眼
那好，換！但總不好把所有不順眼的都退了再重新購買吧？那就不退，去購買心儀的床單、被套、桌布、椅墊...終于有了漂亮的新家，而這些外觀裝飾就可以理解為CSS，它是一種風格/樣式（style），隨心所欲地改變成自己的格調，而且使用CSS還不用另外花錢 ;)（當然也有收費版的）
Style VS CSS
在實際開發中，通常我們這樣理解它倆的區別（嚴謹的定義請大家參閱其它權威性資料）
-
Style
作為元素的一個屬性，直接寫在元素的范圍內，比如：<input type="text" style="border-radius: 5px; border: solid 1px black; margin: 5px;">表明該文本框四角圓滑，四邊是黑色實線條，它與前后左右的元素拉開一點距離（代碼的具體分析放在稍后講解）
再回顧上一篇最后的部分，頁面中各輸入框的模樣，是否就有所啟示了？ -
CSS
作為單獨的代碼塊，寫在html頁面代碼里指定的地方，比如：<style type="text/css"> input { border-radius: 5px; border: solid 1px black; margin: 5px; } </style>上面提到的Style寫法，看似很方便，直接寫在元素的范圍內就好了，不過，我們還可以通過更規范的方式來達到目的，它就是CSS，同樣是文本框，通過這段代碼塊來達到完全一樣的效果（代碼的具體分析放在稍后講解）
Style和CSS，使用其中任一種手法即可，無需同時使用，請參考以下jsfiddle實例：
Style版 https://jsfiddle.net/codingme/5j6obdgf/
CSS版 https://jsfiddle.net/codingme/wnuczL05/
到這個地方可能還容易搞混淆，那么就接下來就看看具體代碼
分析代碼
代碼的構成
-
首先看看Style
style="border-radius: 5px; border: solid 1px black; margin: 5px;"實際上由三部分組成，每個部分用分號
;隔開，下面分別說明：-
border-radius: 5px
讓外框的四個角都圓滑5個像素單位（px），屬性名稱和屬性值之間用分號:隔開，從編碼規范的角度來說（并不是絕對的規范），分號與值之間再多加一個空格
border和radius是英文邊框和半徑，那么用短橫線-聯結起來便成了一個Style：圓角邊框
像素的概念可能不大好理解，原本是照相和圖片的原理，大家可以在實際寫代碼時改變數值大小試試，目前把它理解成厘米或毫米之類的長度單位就行，差不多和一根頭發絲的寬度相似
border: solid 1px black
外框是實線（還會有虛線dashed和點線dotted），粗細為1個像素單位，而且是黑色的，分別是三個不同的值，它們之間用空格隔開（這里注意，它們的的先后順序是固定的，不能隨意調換位置）
除了border，還有solid和black，是英文固體和黑色，是不是很自然的表述呢
所以，這個時候學好英語的重要性就體現出來了吧 ;) 如果把單詞弄錯了，就不會達到預期的顯示效果margin: 5px
與前后左右的元素拉開5個像素單位的距離（約0.5毫米？）
margin，這里理解為英文頁邊距，使用Word和Excel打印時，這種說法很常見
-
-
再來看看CSS
-
第一行與最后一行
<style type="text/css"> ... </style>只是聲明要這個范圍內要寫css代碼，但并不是直接表現頁面上的效果
一個html頁面的代碼中，理論上來說寫在哪個位置都可以，但一般實際開發中，寫在<head>...</head>范圍內，或者是<body>...</body>范圍內，并且如果是body范圍內，一般寫在開始<body>的正下方，或者結尾</body>的正上方（今后要講解的JavaScript原則上也類似） -
第二行與倒數第二行
input { ... }input 就是
<input>標簽，跟著的{與倒數第二行的}，表明要在這個范圍內寫針對input寫Style的內容 -
中間部分
border-radius: 5px; border: solid 1px black; margin: 5px;這時，可以看出與上面講解的Style在寫法上并沒有什么區別（就算不換行寫成一行也可以），也是由三個部分組成，目的和效果實質上是完全等價的
-
再多理解一點點
把CSS加入HTML頁面代碼中有好幾種方式
https://blog.csdn.net/u011043843/article/details/28284915
http://www.runoob.com/w3cnote/html-import-css-method.html
內容大同小異，比較適合初學者理解，請酌情參考-
怎么知道哪些是Style里該用的單詞，有哪些Style呢？
非常多...可以參看這里 http://www.w3school.com.cn/css/index.asp
不過就像咱們例子中的，適用就好，根本不需要把所有Style都用上，太過張揚了有時候并不是好事嘛 ;)
不過，如果作為練手和加深對Style的理解，主動權在自己，請隨意，保證你的電腦不會冒火花 \^o^/作者畢竟是程序員出身，對CSS并沒有掌握得爐火純青，那主要是網頁UI設計師的職責...
并且已經升級到了CSS3版本，形成了近年來的火熱話題 HTML5 + CSS3
峰回路轉
我是搞編程的，有必要學習CSS和Style嗎？
經常有初學者在知乎等問答平臺上提出類似的疑問
https://www.zhihu.com/question/26091581/answer/32159320
https://www.zhihu.com/question/51938960/answer/128190390
https://www.zhihu.com/question/35092745/answer/61260098
在這里，可以明確地告訴你：理論上沒有必要，但實際上需要那么一點點就好
就像大家平時做微商，你總不可能把商品的圖片發到朋友圈就算完事吧？就算是轉發，那也得了解一下來龍去脈吧
更何況如果真是自己做微商，那么進存銷，以及配送等環境都需要知道一些，才能做得更穩更長遠
不學CSS，我們能做到什么程度？
這里提到的不學CSS，并不是不使用CSS，而是已經有人（第三方）為我們做好了，直接拿來套用就可以，以下分兩種來說明：
非主流
任意的不是自己寫的CSS，比如說同學寫的，開源社區寫的，同事寫的，公司層面寫的，甚至是行業層面寫的，個人感覺都屬于非主流
把按鈕修飾得亮晶晶的，把文本框加陰影等各種效果，把圖片修剪得人不人鬼不鬼的...找到適合自己的非主流CSS，隨意肆意嘗試，使用方式和下面要分享的主流類似，這里不作更多闡述-
主流（推薦）
Bootstrap，有些朋友可能聽說過。什么玩意兒？中英文官網分別給出了以下說明：Build responsive, mobile-first projects on the web with the world's most popular front-end component library
全球最受歡迎的前端組件庫，用于開發響應式布局、移動設備優先的 WEB 項目引用中對關鍵字詞加粗，大家可以挨個去網上查詢一下定義及相關技術資料
不過這些關鍵字詞并不是Bootstrap特有的，是一些設計思想，而Bootstrap把思想發揮到了極致并且大眾化
其實作者本人就很討厭寫CSS，要么是工作中需要才用用，這個Bootstrap卻讓我變得悠然自得
上一篇文章中制作的簡單網頁，通過Bootstrap修飾，變成以下模樣：
Bootstrap修飾后的預約頁面
時間真快啊。。。看看上次寫作的日子，是2018年10月，快2年了，各種原因，只寫到了這里
讓大家久等了，抽了些時間我把下面未寫完的部分補了上來
貼上代碼
（有點長。。。影響全文的“美觀”~_~能折疊就好了）
<head>
<title>填寫信息 | 王老二餐廳預約服務</title>
<link rel="stylesheet" >
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body style="font-family: Microsoft Yahei">
<div class="container">
<h3 class="p-3 mb-2 bg-dark text-white">請輸入您要預約的以下信息：</h3>
<div class="form-group input-group">
<div class="input-group-append">
<label class="input-group-text">姓名</label>
</div>
<input type="text" placeholder="張三" class="form-control">
</div>
<div class="form-group input-group">
<div class="input-group-append">
<label class="input-group-text">電話</label>
</div>
<input type="tel" placeholder="13712345678" class="form-control">
</div>
<div class="form-group input-group">
<div class="input-group-append">
<label class="input-group-text">日期</label>
</div>
<input type="date" class="form-control">
</div>
<div class="form-group input-group">
<div class="input-group-append">
<label class="input-group-text">時間</label>
</div>
<input type="time" class="form-control">
</div>
<div class="row">
<div class="col">
<div class="form-group input-group">
<div class="input-group-append">
<label class="input-group-text">人數</label>
</div>
<input type="number" min="1" placeholder="10" class="form-control">
</div>
</div>
<div class="col">
<div class="dropdown dropright">
<button type="button" class="btn btn-dark dropdown-toggle w-50" data-toggle="dropdown">
包間
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">需要</button>
<button class="dropdown-item" type="button">不需要</button>
</div>
</div>
</div>
</div>
<div class="form-group input-group">
<div class="input-group-append">
<label class="input-group-text">菜品</label>
</div>
<select class="custom-select">
<option selected>隨意點菜</option>
<option>特色餐桌</option>
<option>四季餐桌</option>
<option>家庭餐桌</option>
<option>商務餐桌</option>
<option>豪華餐桌</option>
</select>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<label class="input-group-text">酒水</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-dark">
<input type="radio" name="drink"> 酒水單點
</label>
<label class="btn btn-dark">
<input type="radio" name="drink">酒水全包（+30元/人）
</label>
<label class="btn btn-dark">
<input type="radio" name="drink">僅軟飲料（+10元/人）
</label>
</div>
</div>
<div class="form-group input-group">
<div class="input-group-append">
<label class="input-group-text">備注</label>
</div>
<textarea rows="5" placeholder="例：有老人和3歲小孩各一位，麻煩到時安排一下，謝謝" class="form-control"></textarea>
</div>
<div class="card">
<div class="card-header">
提示
</div>
<div class="card-body">
<p class="card-text text-warning">如果需要包場，請另外聯系</p>
</div>
</div>
<hr>
<input type="submit" value="預約確認" class="btn btn-dark">
</div>
</body>
jsfiddle實例：https://jsfiddle.net/codingme/vjtafeg1/
分析頁面與代碼
頁面的構成
與之前的相比，結構（各項目內容）上并無實質性的變化
之前的寫法在本文中的前半部分有提及，順便再提示一下：
Style版 https://jsfiddle.net/codingme/5j6obdgf/
CSS版 https://jsfiddle.net/codingme/wnuczL05/
代碼的構成
-
html頭部（header）
上一篇介紹HTML時，也提到過head
這次，由于用到了bootstrap，所以就必須要加入引用它的代碼，就需要把以下代碼加入到head內<link rel="stylesheet" > <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>可以看到有兩類標簽（tag）：
link與script<link rel="stylesheet" >這是引入外部CSS代碼的基本語法（寫法）
這次是對boostrap的基本認識，這一行就可以應付了接著，
script<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>這是引入外部Javascript代碼的基本語法（寫法）
一下子來了三行！為什么呢？- 第一行，可能似曾相識吧，是
jquery，只要是做網頁編程，一般都需要，所以死記下來吧（先保存在哪，之后就可以拿出來用）
另外，其中的3.3.1是版本號，是2018年10月當時的標準版本，隨時可以到網上找到最近的版本號所對應的js文件 - 第二行，如果僅僅是顯示頁面外觀的話，本身并不需要，但我要通過它在頁面上做點“手腳”，所以本例中需要，稍后再講解
- 第三行，針對它的使用方法，就是本篇CSS的核心
- 第一行，可能似曾相識吧，是
-
class
現在大部分標簽里，都包含了一個class，而它的值，可能是一個（比如input-group-text），也可能是兩個（比如form-group input-group），用空格分開，比如以下代碼片斷：<div class="form-group input-group"> <div class="input-group-append"> <label class="input-group-text">日期</label> </div> <input type="date" class="form-control"> </div>bootstrap的詳細使用方法，可以參照網上各種例子，及官方文檔：
https://getbootstrap.com/docs/4.1/components -
下拉列表
與之前HTML頁面中有完全不同的表現，這里介紹一下實現時不同點<div class="dropdown dropright"> <button type="button" class="btn btn-dark dropdown-toggle w-50" data-toggle="dropdown"> 包間 </button> <div class="dropdown-menu"> <button class="dropdown-item" type="button">需要</button> <button class="dropdown-item" type="button">不需要</button> </div> </div>其中包間中的兩個選項“需要”與“不需要”，通過bootstrap表現出來是不是比之前更有個性呢
image.png
實現這種表現方式，有以下兩點：
-
還記得上面
head中引入的第二行javascript文件么？<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>有了這個，點擊“包間”時，才會向右彈出兩個選項
也就是說，正是由于咱這個例子中有了下拉列表，我才挑選了這個javascript文件來實現這種效果
而且，網上搜一下，應該會出來一大堆關于下拉列表的表現效果，舉一反三，而且如果是免費的話，拿來主義，用就好 “需要”與“不需要”兩個選項在代碼中的寫法
<button type="button" class="btn btn-dark dropdown-toggle w-50" data-toggle="dropdown"> 包間 </button>這里，以上button標簽中，有一個
data-toggle="dropdown"，與以下button標簽中的class="dropdown-menu"以及class="dropdown-item"上下呼應，形成一套寫法<div class="dropdown-menu"> <button class="dropdown-item" type="button">需要</button> <button class="dropdown-item" type="button">不需要</button> </div>這也就是為什么，我們需要Javascript的原因之一，因為頁面上的各種項目元素真的能“動”起來！
-
下一篇，我們就可以進入Javascript的世界了，前端工程師的必經之路（創作中）
（UI編程，止步于CSS階段，很多時候也就足夠了）
希望能為社會盡一份綿薄之力，更多和您類似的迷惘中的朋友能看到
無論點贊、收藏、分享或是打賞，您的關注，便是我繼續寫作的動力
原創作品，歡迎轉發，但求注明出處，謝謝合作！
