30天打造品牌特色电商网站 Day.8 CSS基础

了解HTML以後，CSS也一定要熟悉一下！
CSS用来定义文件的样式、布局，甚至可以做出简单的动画。
今天就来认识几个基本常用的语法。

基本架构

先来解说CSS的结构：

p {
font-size：14px；
color：#000000；
}

开头的p是指针对HTML里所有p元素做CSS宣告，
我们可以称此为选择器，
後面一定都用 { } 括弧。
{ } 里我们会放样式的宣告，
宣告中以：接上想要的样式，後面用；做结尾。

{ } 前面选择器怎麽选

选择器可以有不同的形式：

1. HTML原生标签
   指定HTML里所有元素，直接接大括弧

body { 
font-family：Roboto；
}

2. ID选择器
   控制id名称的标签，名称前加上＃

<p id="first_paragraph">...</p>
#first_paragraph {
color：#000000；
}

3. Class选择器
   控制class有相同名称的元素，名称前加上 .

<h2 class="small-title"></h2>
.small-title {
font-size：14px；
font-weight：600； 
}

4. 属性选择器
   控制特定属性的元素，属性放在 [ ] 里面

<input type="text">
<input type="checkbox">
input [ type = checkbox ] { 
border: 1px solid green ;
}

以上就只会对type是checkbox的input做样式的设置

5. 特定情况下的选择器
   控制某些情况下的样式，把：放在选定元素的後面

button：hover {
background-color：blue；
}

hover代表滑鼠在button上时的状态，移走的话这项样式又会消失。

大小距离位置

1. width 宽度、height 长度
   以上也可以设定最小、最大值，
   分别是min-width、min-height、max-width、max-height。
   常见是使用长度单位 em、rem、px、％ 或 auto（让浏览器自动设定）
   那以下顺便介绍CSS里常见的单位们

2. CSS常见长度单位
   em：每个 "子元素" 乘__倍 "父元素" 的px值
   ％：每个 "子元素" 用百分比乘上 "父元素" 的px值
   rem：每个 "元素" 乘__倍 "根元素" 的px值
   px：装置萤幕中每个点（pixel）
   vw：萤幕宽度的比例，最大是100vw
   vh：萤幕高度的比例，最大是100vh

3. display 显示状态
   常见的参数设定：

   • block：物件以区块排列，会换行、预设使用整个宽度
   • inline：物件在同一行排列
   • flex：这个是个很好用的东西

4. margin 外边界距离
   物件上下左右与其他物件的距离，所以不会有物件本身的颜色，
   搭配上面的长度单位来设定。
   如果只要特定一边距离，可以用margin-top、margin-bottom、margin-left、margin-right。

5. padding 内边界距离
   物件上下左右的留白，
   在border(边框)跟物件的中间，
   会保留物件的颜色，但是绝不会让物件跑到这个区域。
   搭配上面的长度单位来设定。
   这是很常用的功能，因为物件太靠近边框会有压迫感。
   它也一样可以设定特定边：padding-top、padding-bottom、padding-left、padding-right。

颜色相关

1. 颜色的表示
   • 十六进位表示法
     3或6位数字组成的
     例如：黑色 #000000 、白色 #ffffff
   • 十进位
     两种方式
     rgb(red,green,blue) 里面放上红绿蓝的数值
     rgba(red,green,blue,alpha) 里面是上红绿蓝及透明度的数值
     其实很多选择
     上次提到的figma也可以找到颜色的表示法
2. background-color 背景颜色
3. color 常用於字型颜色
4. border 边界
   物件的边界，在margin跟padding中间
   会加上粗细、样式、颜色

div {
   border： solid 2px #000000；
}

5. outline 外围轮廓
   不同於border，他是外围轮廓的颜色，不占据空间。

字体相关

1. font-family 字型
2. font-size 字体大小
3. font-weight 字
4. letter-spacing 字与字的距离
5. line-height 行高
6. text-align 段落靠齐方向
7. text-decorations 字的装饰
   常见的是 <a></a> 超连结，
   本身预设有下底线，就是用这项参数。

以上若有需要，W3School都有更详尽的说明，
接下来的教学也会适时用上！