从零开始用github架设静态网站入门(3) - CSS客製化

对于HTML里面编写的大多数元素我们都可以赋予它特别的属性，像是在前面章节我们提到，将div赋予了class=”row”的属性后，浏览器会将其内的文字看作同一行并对超过的部分自动换行，而除了这种功能型的属性之外，还有一个非常常见的修饰属性style，style属性后面可以接所谓的css语法对物件作各类修饰，例如颜色、形状、位置等等，接下来我们会介绍一些比较常见的css语法让大家参考。

CSS常见语法

color、background - 板块内字体和背景的颜色，可以用颜色也可以用色码指定，关于色码的对应可以参考这个网站。
Ex: color: red; background: #F05F5C;

font-family – 文字的字型，一些Google的字型可以从这个网站获得 ，点选想要的字型之后，把左边的link标籤像是在引入Bootstrap一样放进head标籤里就可以使用了。
Ex: font-family: 'Open Sans' ;

margin - 用来调整位置用，不过其实我比较常用margin-top、margin-left来指定要在哪个方向取出间隔， 可能不是个好习惯，但我觉得这样比较直观一点(懒)。
Ex: margin-top - 12px;

width、height - 物件的长宽属性，一样是给一个数值当作参数。
Ex: width: 12px;

border-radius – 物件的边缘圆滑程度，可以给一个数值也可以给百分比当参数，像是圆形的按钮或是圆角的长方形都是用这个属性控制的。
Ex: border-radius: 50%;

CSS样式档编写&引入

刚刚所有的属性都可以在物件后面接着style定义，但是如果一个页面中很多文字或物件都是类似的样式，那在每个物件后定义太麻烦了，也会影响整体程式码的整洁，所以这时我们就需要一个专门控管样式的档案，在里面告诉浏览器哪些物件要一起套用一样的样式，以此来维持我们的程式码阅读性。

首先，我们需要创建一个档名以.css结尾的档案，然后把这个档案在head中引入，告诉浏览器之后就按照这个表帮我修饰物件。

<link rel="stylesheet" href="css/style.css">

接着，在CSS样式档内我们可以这样指定我们要的样式。

h1,h2,h3,h4,h5,h6{    font-family: 'Noto Sans';} \\ <h1>~<h6>的标籤都以这个属性修饰p.lead{    font-weight: 600;    color: black;} \\ <p>标籤如果class属性是”lead”都以这个属性修饰#intro .jumbotron{    height: 70vh;} \\ 在id属性为”intro”的标籤内，如果class属性是” jumbotron”都以这个属性修饰\\ id属性通常就是用来特别指定某个物件用的像是，<div class=”row” id=”intro”>header nav a img{    width: 38px;} \\ 在<header>标籤内的<nav>标籤内的<a>标籤内的<img>标籤都以这个属性修饰\\ 主要是想展示如何指定包在其他标籤内的标籤

浏览器开发者工具

看完上面的做法有没有人开始实做看看的啊？如果有的话，应该会发现这样子先写好给数值再去浏览器看效果，不满意的话再修改再看效果，真的很没有效率，所以这边要介绍一个Chrome内建的开发者工具 (我不太确定是不是每个浏览器都有内建)，可以让你在浏览器上面直接改样式设定，这样就不用来回确认了，不过要记得，在开发者工具内的修改都是暂时的，确定好样式设定之后一定要再写回档案内，财不会前功尽弃。

以下就来一步步说明开发者工具的使用流程。

1.先对想要修改的物件按右键-检查

2.在Style栏位中，对element.style修改样式，这是对单一物件的样式修改，如果你想要直接像样式档一样对所有标籤修改，那就不要选element.style选你要的那个标籤群.btn之类的。

在这里我原本就有两行样式设定了，Chrome会自动帮你带入。

3.现在假设我们想要加入一个字体大小的设定，就在括号内连点两下新增或是选取修改。接着，修改好之后，上方的原始码就会是你档案内应该要有的样子，把有修改的地方複製到原本的档案内贴上，注意不要放错地方，或是多複製到东西了。

以上就是CSS在网站内的基本使用了，有了以上的技巧之后，应该可以依照自己的喜好搭建出基本可以展示资讯的静态网站了，后面的章节会再介绍一些小工具的插入等等，让网站更丰富一点，大家快去试做看看这次的技巧吧～

相关文章

从零开始用github架设静态网站入门(1) - 介绍&环境搭建
从零开始用github架设静态网站入门(2) - HTML & Bootstrap
从零开始用github架设静态网站入门(3) - CSS客製化
从零开始用github架设静态网站入门(4) - 其他小功能製作
从零开始用github架设静态网站入门(5) - 部署到Github Pages