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：网站设计建置优化之道 --

※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 101.13.169.97 (台湾) ※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1564675030.A.6EF.html