Hello 大家好
我写了一篇关于如何查看网页CSS样式设定的文章，希望能帮助到想要调整网页样式的朋友们～
文章很长，强烈建议使用图文好读版：
https://joserenfu.com/how-know-web-html-css/
不知道刚开始学习的你看了很多网站之后，有没有出现以下的状况：
网站中有很多图片和区块，我要怎么知道它设定多少宽度呢？
网站用的字体好特别，我要怎么知道它用什么字体或设定多大呢？
网站的主色调好美喔！但我要怎么知道它的色码？
…等等以上的问题
透过这篇除了想要分享HTML和CSS的基本知识以外，还要分享2个工具来让你能够找到网页的样式设定
一、CSS是什么？HTML又是什么？
了解网站的样式设定之前，我们得先确保有网页语法的基本认识，就像是我们要认识英文单字之前，我们需要先看得懂ABC英文字母一样
1.HTML是什么？
HTML主要负责建立网页呈现的基本架构，主要是由HTML标签组成的，就像我们人的样子是由各种骨头与器官组成一样，也决定了我们呈现出来的样貌，像是人和狗的骨头形状、数量都不同，所以我们的外貌也就不同
脸部的五官也是如此，我们有一个鼻子有两个鼻孔、一张嘴巴有上唇和下唇…等等，HTML也是用来建构网站网站基本的轮廓，像是页头、内容区块、图片区块、页尾
2.那CSS又是什么？
CSS主要负责视觉的样式设定，如果你有玩过角色扮演的游戏，有些游戏在创立角色时候，可以让我们去客制化角色的样子，像是身高比例、皮肤颜色、眼睛大小、鼻子形状…等等
而CSS就是专门来控制网页上的各种元件的大小、粗细、颜色、字体、对齐和位置…等等这些事情
CSS还有一个核心的功用，就是把重复的事情只做一次设定，例如我的网站上所有的按钮都要用红色底色、白色文字，那我们会取一个名称，在CSS中称为class
然后再对这个class设定它需要有哪些CSS属性，以及这些属性的数值，再来只要将class套用在每个HTML标签上，这些HTML标签就都会有同样的CSS样式设定了，当然CSS若有修改，所有套用同一个class的标签也都会受影响
3.几个关于HTML、CSS疑问
请问CSS能够改变网站HTML原本的内容吗？
答案是不行！！因为CSS就只负责调整外观的样式，无法异动的原本的结构和内容，就像是我们的眼睛原本就只有两个，无法透过化妆而生出第3个眼睛（别跟我提仿真妆，那还是假的眼睛），除非你透过整形
而外科整形手术，在网页中就是修改HTML的结构和内容
请问编写HTML、CSS是在写程式吗？
这不是喔！不管哪种程式语言都会依照你写的运算式，而帮你运算产生出结果，但HTML和CSS并没有运算的能力，所以你写了”1+1=”，在网页上也只会呈现”1+1=”，HTML和CSS并不会给你”2”这个答案
想更全盘了解可以参考
HTML&CSS：网站设计建置优化之道
二、CSSViewer外挂推荐（简易快速）
CSSViewer是Chrome浏览器的扩充套件，是专门用来检示网页CSS样式的工具，他的优点是安装完之后，只要点一下要查看的区块，立即就可显示详细的CSS样式内容，如此一来就可知道，这个网页区块的样式设定值囉！
1.下载/安装
下载连结： Chrome 线上应用程式商店
2.启用CSSViewer
安装完毕后，在网址列后方，就会看到CSSViewer的图示，当要查看网页的CSS样式时，再点一下图示，就可开启CSSViewer，再次点击则是关闭CSSViewer
3.如何使用
点击软件图示后，鼠标光标移动到网页当中，软件会自动侦测你所指定的区块CSS样式设定，并显示出来
CSSViewer的好处是可以很容易的指定到画面的元素，并显示出它所被套用的CSS样式，但缺点是你无法知道CSS的写法是如何
例如：
CSS是直接指定在这个HTML标签上吗？
还是受到其他标签的CSS影响呢？
CSS是直接指定在这个HTML标签上吗？还是受到其他标签的CSS影响呢？
这对于需要编写或改写CSS样式的人来说蛮重要的，因为必须找到CSS真正对应的写法，而下面要分享的就是网页设计师、网页前端工程师必会使用的Chrome浏览器开发者工具
三、Chrome浏览器开发者工具（进阶工具）
Chrome浏览器开发者工具是网页开发者必会使用的工具，它主要是内建在Chrome浏览器之中，只要你是使用Chrome浏览器，将鼠标移到某个元素上(图片、文字…等)，点击鼠标右键，在开启的选单中选择检查，浏览器就会开启这样的画面
如果你跟我长得不一样请不要担心，视窗右上角的三个点图示点击后，会有选项可以改变工具的呈现方式，如下图
1.开发者工具介绍
开发者工具的功能非常多，但这边主要介绍网页设计师必会使用到的两个部分，左边紫色区块是网页HTML，右边蓝色区块是CSS样式设定
这时候我们就可以开始来找找各个元素的CSS设定拉！
2.寻找HTML被套用的CSS样式
因为我刚刚是对网站LOGO点击右键使用检查，所以开发者工具会自动用浅蓝色背景，标示我LOGO图片的HTML所在地方，当鼠标光标移到HTML标签上时，网页画面也会同步标示，你正在选择的地方，你现在可以马上对我的网页试看看
点击HTML标签后，右边的CSS区块也会呈现这个HTML标签所套用到的CSS。这时候眼尖的你可能会发现，套用的CSS设定怎么会这么多，有些还重复被划掉
简单解释的话，是因为HTML标签编写时候是有阶层关系的，就像左边的HTML所呈现方式一样，需要把HTML一一层层展开拨开，如同洋葱一样
而最外层的设定就往内影响所有的HTML，例如我在最外层的HTML设定背景CSS为红色，那只要在这层HTML以下的标签都会受到影响，除非在这其中的HTML又在另外设定背景颜色，那就会以最内部的为主
也可以把它想成是种继承遗传的概念，当我的阿公有秃头的情况时，相对的我的爸爸甚至到我都极有可能会秃头，因为基因遗传的关系，除非在我这就将秃头基因移除，不然我的之后的子子孙孙都应该会是秃头，HTML设定CSS的阶层影响也是这样，越外层影响越大
3.设定CSS看看效果
在Chrome开发者工具中所做的HTML和CSS及其他任何修改，可以立即看到网页的变化，都不会被储存下来，所以重新整理网页又会恢复原样喔
现在以我网站为例子，我要想要将右的侧标题文字改为红色，我会将我鼠标光标指到标题文字上面，并点击右键和选择检视，我即可找到标题的HTML和CSS设定
这时候我会寻找目前真正最后控制标题颜色的CSS写在哪边（常用的CSS属性我有整理在最下方），”最后真正“这词就如我上面所说的，因为阶层关系，它被套用到很多CSS属性，通常最上方式的CSS即是最后被套用到的CSS
如下图，紫线处是class名称，蓝线处则是控制文字颜色的CSS属性
这时候你可以尝试修改蓝线处的CSS数值（鼠标直接点击），如下图
然后不是每个CSS数值一开始就有设定，但你也可以点击空白区块地方，加入新的CSS属性，网页也会立即出现效果
CSS常见语法懒人包在文章下方
四、如何在电脑上模拟手机萤幕
因为智慧型手机普及的关系，网页在手机上都会呈现出不同样子，有没有办法在电脑上就可以模拟了呢？
答案是：有的
开发者工具有一个手机模拟器，启用的按钮在开发这工具视窗的左上角
点开后网页呈现会变成模拟器的样子（开发者工具我先改为视窗右侧显示），紫线处还可以选择不同的装置尺寸喔！
这主要是用来看看手机版是否有跑版，但有些操作难免还是会跟手机上有点不同，但已经非常方便囉！
五、常用CSS语法懒人包
文字CSS
属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-shadow 设置文本阴影。
字体CSS
属性 描述
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-weight 设置字体的粗细。
背景CSS
属性 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。
内边距CSS
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。
边框CSS
属性 描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
外边距CSS
属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。
以上资料来源来至W3C网站
六、结语
CSSViewer和Chrome的开发者工具各有不同的优点
如果你只是要单纯要了解网页CSS目前设定的数值的话，CSSViewer就非常方便快速
但如果你是需要修改和编写CSS的话，就必须要会使用开发者工具，这样才有办法真正设定好CSS在对的HTML标签上
如果你对HTML和CSS想要有更多了解，不妨可以参考下面的书籍喔！
HTML&CSS：网站设计建置优化之道