【心得】连结CSS的方法
在没有CSS装潢以前的HTML看起来....
就是一堆文字挤在一起的毛胚房ಠ౪ಠ
看起来当然不是那麽的好看...
今天就来介绍该怎麽让CSS文件跟HTML连结~变身成漂亮的样子吧!
第一种：直接放在elements内--inline-style
<p style="font-size: 20px; color:#f00;">Lorem ipsum dolor sit amet, consectetur, adipisicing elit.</p>
这种方式虽然可以看HTML就知道每一个element样式，但是设定一多看起来就会有点花俏，若是遇到很多个<p>需要字体大小20xp、红色时，要一直重复写这段套到<p>上面
哪天如果要改应该会喷一斗血
第二种：用<style>放到HTML内--Internal Style Sheet
这种方式可以写在同一份HTML里面
跟第一种方式比较起来会让HTML乾净许多~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--- CSS样式 --->
<style>
p{
font-size: 20px;
color:#f00;
}
</style>
<!-------------->
<body>
<p>Lorem ipsum dolor sit amet, consectetur, adipisicing elit.?</p>
</body>
</html>
第三种 另外建立一份CSS--External Style Sheet
在HTML里面用<link>连结到CSS档案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur, adipisicing elit.?</p>
</body>
</html>
注意连结位址(href="")的部分，如果使用的是相对位址就要从HTML开始出发呦!
而一份HTML可以有多个<link>
比如各家浏览器对於标题字体大小、字体粗细、内外距都有不同的设定，为了有统一的视觉效果，重置所有设定的重置CSS是很重要的!
由於HTML的读取是从上而下
重置使用的CSS要放在自订的CSS前面，如此自订的CSS样式才能盖过去
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习</title>
<!-- 重置的CSS -->
<link rel="stylesheet" href="CSS/reset.css">
<!-- 自订的CSS -->
<link rel="stylesheet" href="CSS/style.css">
</head>
优先顺序
第一种 > 第二种 > 第三种
@import 导入
最後来分享我踩过的坑XD
当有数个页面时，我们可以选择：
1.把所有页面的CSS写成一份
2.分页面制作CSS，在HTML的地方建立每个分页的CSS<link>
3.HTML<link>一份主要的CSS，其他CSS档案@import到这一份主要的CSS
事情是这样的
第一次练习有分页的版面觉得好有趣阿~~
想到上课有说过@import的用法，但是一直没实际用过
这真是一个实战的好机会!(握拳)
於是我采用了第3种写法
於是我把@import放在主要CSS的开头位置 <-重点
那时候我以为@import 大概跟那三种连结CSS的方法一样，是有优先权的差异
就做了个实验--我在主要CSS对背景图设定了红色，而@import进来的CSS设定了蓝色
以此看看哪一个优先权比较高
实验结果：背景图呈现红色!
喔!?所以@import CSS优先权会比主要CSS小罗 (呦齁~自以为得到了真理)
检讨作业的时候...发现...大!!!错!!!特!!!错!!!
@import的英文其实就明晃晃的说明了，它是"插入一段句子"的意思
而程序码的基本概念就是
「权重一样的情况下，後面写的会覆盖前面写的」
所以放在开头位置的@import当然会被覆盖掉...囧
反过来说
如果今天在後段插入@import
那背景图就会改成 @import所撰写的蓝色
以上就是连结CSS的方法以及基本的@import使用~
Day-7 带着童年的好朋友任天堂红白机、重新在 HDMI 电视上发光吧！
写了好几天的事前准备、我想大家应该都腻了。终於、准备到了一定程度、可以进入本文了。这篇文章主要的目的...
EIP (OA) 与 BPM 的差异为何?
常有客户问到 EIP (OA)内建的 workflow 与所谓的BPM 有何不同?? 为何两者价格差...
使用storyboard实现代理功能
缘由: 这应该也算是我没学好的项目之一，tableview也算是开发实务里很常见的元件，举凡要连续套...
[机派X] Day 12 - 那些年还没介绍的无人机部件
引言 今天是机派X系列文章的第十二天。 今天会接续昨天的部件介绍，将剩下几个重要的部件介绍给大家。 ...
同步、非同步事件控制
这篇要延伸上一篇提到的单执行绪 ( single thread )，来讲同步 synchronous...