CSS基础介绍(1)

来轻松聊聊

学会如何利用HTML编辑网页架构後，再来要进入让网页美化的CSS了。还不知道什麽是HTML的人，没关系，只要花两天就可以学到基础概念罗! 学HTML看这边!!
CSS的内容就比较多了，将会用较多篇幅来做分享哦，那就开始吧!

CSS的三种写法

在对HTML文件编辑CSS效果时，从三种方法中择一使用:
- 第一种是前篇文章中所提到，将CSS写在<head>的<style>中。
- 第二种是写在一个.css结尾的档案，再将其嵌入HTML中。
- 第三种是直接将CSS样式写在<body>内的标签中，请看范例。
- 不论何种写法，每一个CSS属性值後面都必须加上分号;，代表结束。
若不是直接将style属性写在HTML标签内部，是如何让浏览器侦测该效果是要让什麽部分做出改变呢?
这时候就要使用CSS选择器来将HTML文件的标签(或是id、class等)写明白，并在後方的大括号内放入你的CSS属性。在范例中，h2就是一个CSS选择器。

范例

<style>
    h2 {
        color:blue;
        font-style:italic;
    }
</style>
<h2 style="color: blue; font-style:italic;">大家好</h2>

显示效果如下

CSS选择器

若不是直接将style属性写在HTML标签内部，是如何让浏览器侦测该效果是要让什麽部分做出改变呢?
这时候就要使用CSS选择器来将HTML文件的标签(或是id、class等)写明白，并在後方的大括号内放入你的CSS属性。在范例中，h1就是一个CSS选择器。
若使用id属性(id为唯一值)的选择器，要在其值的前方加上#，而class属性(多个标签可以拥有一样的class)则是在前方加上.。
可以看到在范例中，虽然不同的选择器各自设定不同的字体颜色，但是显示出来的结果是id属性的值，说明了选择器是有先後顺序的。依据排序为:id>class>标签(h1)，大家也可以试试看把部分注解(ctrl+/)或删除，看看效果如何。

范例

<style>
    h1 {
        color:gray;
    }
    #page-title {
        color:blue;
    }
    .title {
        color:red;
    }
</style>
<h1 id="page-title" class="title">Jacky's Home</h1>

显示效果如下

字体效果

要让字体产生变化，有许多不同的属性可以使用，以下分享几种常见的项目:
- color属性用来设定字体的颜色，表示方式有三种:
  - 直接写颜色，例:color: red;。
  - 16进位表示法，以一个#加上6个16进位数字，例:color:#FFFFFF;(白色)、color:#000000;(黑色)。
  - rgba表示法，rgba分别为Red(红)、Green(绿)、Blue(蓝)，值为0~225任一数字或以百分比表示；a代表透明程度，值为0~1之间包含小数，例:rgba(20, 20, 30, 1)、rgba(35%, 25%, 46%, 0.6)。
- font-size用来改变字体的大小，常用的单位有:px(pixel点像素)、em(前方数字X父元素的字体大小)、rem(前方数字X16px)。
- font-family指的是字体的字型为何，有许多内建可用的字型，也可以在网路上找到许多支援各种浏览器的字型，以<link>嵌入。
- font-style常用来使字体倾斜，例:font-style:italic;。
- font-weight用来设定字体的粗细程度，为100~900任一数字或一个形容词(bold、lighter等)。

范例

<!-- HTML -->
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css" />
<h1>Taiwan</h1>
<!-- CSS -->
h1 {
  color:rgba(20, 20, 30, 0.7);
  font-size:3rem;
  font-family:Lobster;
  font-weight:150;
}

显示效果如下

图片大小及边框

调整图片的长宽有许多种方法，只要调整其width(宽度)、height(高度)的值，值的单位与字体大小所使用的相同。
border为边框属性，其值可以空格填入宽度、颜色与样式，也可以分别以border-width、border-color、border-style做设定。
border-radius用来调整边框的圆角程度，其值与字体大小单位相同，若想制造类似於FB的圆形大头贴效果，可以将值设定为50%。
边框四个边可以单独设定，border-top、border-bottom、border-left、border-right。

范例

<!-- HTML -->
<img src="https://upload.wikimedia.org/wikipedia/zh/thumb/1/14/Taipei_2017_Summer_Universiade_Official_Mascot-%E7%86%8A%E8%AE%9ABravo.svg/800px-Taipei_2017_Summer_Universiade_Official_Mascot-%E7%86%8A%E8%AE%9ABravo.svg.png">
<!-- CSS -->
img {
  width:30%;
  border:3px solid green;
  border-radius:50%;
}