对於HTML里面编写的大多数元素我们都可以赋予它特别的属性,像是在前面章节我们提到,将div赋予了class=”row”的属性後,浏览器会将其内的文字看作同一行并对超过的部分自动换行,而除了这种功能型的属性之外,还有一个非常常见的修饰属性style,style属性後面可以接所谓的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%;
刚刚所有的属性都可以在物件後面接着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
<<: 亚马逊网络服务 SAA-C02 认证考试和通过它的一些技巧
>>: [解题纪录]:Maximum Cost Deletion
前言 已经快到铁人赛的结尾了,但是我现在才想到我好像少讲了一个东西,就是关於传值与传参考的部分,所以...
unRaid系统会要求使用者要先配置硬碟,才能使用各个功能(如VM,共享资料夹…等) 今天先深入了解...
今天的标题一样和 Crypto 没关联 解完题目再来分享 今天干大事来挑战解200分的题 Flags...
JS杂拾-03-运算式与运算子 tags: ithome 内文摘要 Expressions 运算式 ...
Onboarding process 第一周有哪些重点 每个月定期追踪 第三个月是最危险的 ...