大家好啊~~又见面惹~
不知道清明连假大家有没有乖乖待在家防疫还是有出远门走走呢?
四天连假只待在离家不远的地方走走运动,其余时间就是待在家休息
感觉待在家才是最安全的防疫方式呢~
当然也不忘写这週的文章啦:)
上次写完 HTML 的语法介绍,今天来试着写写介绍一下我常用的 CSS 语法吧 希望写出来的文章大家能看的懂
CSS 基本写法
在知道有哪些 CSS 语法前,我们要先知道的是如何正确撰写 CSS :
<html> <head> <title> </title> <link rel="stylesheet" href="css/all.css"> </head> <body> </body></html>
一样的,我们先写出一个 HTML 的格式出来,然后再加上<link rel="stylesheet" href="css/all.css">
才能去抓取我们要的 CSS 档案(对了,要记得先新增一个CSS档案才能连动唷)
这段语法中的href="css/all.css"
指的就是连结到你指定的 CSS 档案,所以名称不一定是 all.css唷~
要视你存的什么档名而定(简单来说,就是自订档名啰~)
写出一个 CSS 档案
当引入了 CSS 档案,我们就可以开始写 CSS 为网页增加不一样的风采了,但在写之前要注意的是写 CSS 的格式:
footer { background-color: #e67683; height: 56px; margin-top: 50px; text-align: center; padding-top: 20px;}products { margin: 0 auto; width: 1000px; display: flex; flex-wrap: wrap;}
这是写 CSS 时的格式,其中的 footer、products 就是我们自定义的标籤,而我们就是要针对自定义的标籤去写 CSS 的样式,就是里面的程式码会呈现出不一样的效果。
常见的 CSS 语法
接下来就是要介绍常用的 CSS 语法,其实 CSS 语法很多全列出来可能读者也眼花了(误XD
所以这里列出常见及我常用的 CSS 语法啰XD
font-size
: 字型大小 (很像我们用word写文章的时候会设定的文字大小)font-family
: 设定字型(例如常见的新细明体、标楷体等等)color
: 字的颜色background-color
: 背景的颜色background-image
: 背景的图案border
: 框线a:hover
: 滑鼠滑过时的样式text-align: center
:文字置中text-align: right
:文字靠右对齐text-align: left
:文字靠左对齐line-height
: 设定行高height
: 高width
:宽margin
:外距,设定外边界距离,可以一次设定四个边的外距,也可以分别设定每个边不同的外距。padding
:内距, 可以设定区域的内部距离,也可以设定 HTML 内表格内部的距离。
这些都是我刚开始最常用的语法,基本上新手一刚开始也很常用这些很基本的语法,当然在 CSS 的世界实在是太宽广啦~要一次把所有的 CSS 语法记熟也不是件很容易的事情呢,基本上在排版过程中有遇到真正去实作到才会学习到这个语法的功能呢!往后的文章我也会慢慢分享我学习不同 CSS 语法的心得笔记,祝大家连假愉快!!!