上一篇，我们先是制作了一个再简单不过的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" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<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" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <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" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">这是引入外部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阶段，很多时候也就足够了）
希望能为社会尽一份绵薄之力，更多和您类似的迷惘中的朋友能看到
无论点赞、收藏、分享或是打赏，您的关注，便是我继续写作的动力
原创作品，欢迎转发，但求注明出处，谢谢合作！
