Day.5 「我的样式失灵啦！你有头绪吗？」 —— CSS 选择器 与 权重

「我的样式失灵啦！你有头绪吗？」 —— CSS 选择器 与 权重

了解盒模型後，就要为标签套上各种花样了，上一篇介绍了简单的套用方法，但这个套用方法其实不太好用！

使用标签元素套用就像是画草图上底色，虽然有色彩但不细致，这时为了能够更精雕细琢我们的网页，於是我们要更加精准的设定样式，但有的选择器必须谨慎使用，不然後面要修改就麻烦了。

CSS 的使用方式

  • 在标签内写 style 属性，称为 inline style
  • 在 <head> 标签内添加 <style>，称为 HTML style
  • 还有一个上一篇没介绍的外部载入样式，是用外部连结 <link rel="stylesheet" href="样式网址"> 标签，同样是放在 <head> 内，称为 link style。

这三个有什麽差异与影响？

  • 维护上，inline style 和 HTML style 都是写在 HTML 这个档案内的，HTML 会越来越大，比较不好维护。
  • 载入有顺序性，上面样式属性会被下面同个属性取代，所以 inline style > HTML style > link style。
  • inline style 通常会保留给 Javascript 做网站互动。

如何撰写 link style？

link

  • 新增 .css 副档名的档案，并透过<link rel="stylesheet" href="./样式.css">就可以引入了
    注意 引入自己的档案要使用相对路径来引入
  • 接着就可以在 CSS 档写样式，与在 <style> 内写法相同（不需要写<style>标签）
  • 除了引入自己的档案，也可以引入网路上的 CSS 档案。

CSS 选择器

这里要先补充，选择器锁定的元素不一定只有一个，可以藉由组合，来选择其後代的所有元素
但会建议选择器阶层别超过三层，因为浏览器会一层一层比对，当超过三层浏览器的渲染效率会下降许多。
把握简单原则，当要超过三层时，就可以考虑再新增一个选择器

style
如图如果都是要指定 menu 下的 <a>标签，下面这样指定也能达到同样效果

element 元素选择器

首先先介绍我们最基础最简单直白的元素选择器，阶级分数为 1 分，
用来画草图的选择器。

elements
如图利用<header>&<main>，来区分两个区域的<h2>，另外<body>也是标签可以设定

class 类别选择器

最受欢迎的 class 选择器，
比起有限的标签选择器，能够自由命名的 class 选择器更方便，阶级分数为 10 分，
可以用来构图，也能细琢的，属於最好用方便的选择器。

class
如图利用 class 命名成颜色直接套用

需在标签属性添加 class="red" 属性，透过使用 .red{ 样式 } 来套用样式

id 选择器

id 这个属性有个特性，就是一个 HTML 档案中，每个 id 都要独一无二的。
所以相较受欢迎的 class 选择器，id 选择器也就比较难被使用。阶级分数为 100 分。
因为它的独特性，且阶级分数高，所以在使用上绑手绑脚的，比较不推荐在 CSS 中使用 id 选择器。

id
如图显示 id 选择器阶级分数高，盖过 class 选择器样式

如果要使用，标签属性要添加 id="red" 属性，透过使用 #red{ 样式 } 来套用样式

运算符号选择器

有时候会希望选择器能更灵活的使用，像上一篇的box-sizing: border-box;，如果要一个一个标签都要使用，还不累死，这时就可以使用运算符号选择器，运算符号选择器有个特点，就是本身没有权重。

  • * 选择器，可以把全部的标签都套用的选择器，如：* { box-sizing: border-box; }。

  • > 选择器，可以把子代元素套用样式，不影响孙代元素。常用在阶层列表中。

    何谓子代、孙代？
    如同我们的祖谱，父元素下一层就是子元素，在下一层就是孙元素，此时子元素就是孙元素的父元素，好像有点饶舌。

    class
    透过 > 选择器，只改变第一层颜色

  • + 选择器，可以把选择器同层级第一个遇到的元素套用样式。常用来修正列表边框。
    fix
    透过 + 选择器，搭配上一篇所学的 margin 负值来修正边框。

  • ~ 选择器，跟 + 选择器很像，只是这次不是选取第一个，而是选取全部符合条件的。

  • 还有其他选择器，放在後面的篇章在讲

CSS 权重

上面已经稍微认识权重了，权重大的会盖过权重小的。
注意 虽然用分数来比拟权重，但其实就算使用 11 个 class 选择器，也盖不过 1 个 id 选择器。

  • 元素选择器，权重是 1
  • 类别选择器，权重是 10
  • ID 选择器，权重是 100
  • * 选择器，权重是 0
  • 前面说的 inline style，权重高达 1000
  • !important ，权重最高 10000

!important

没错～!important，就是多麽无敌的存在，连 inline style 都无法保住自己绝对的地位。
所以在使用 !important 时，务必想清楚，最好是别随便的乱使用

important
透过使用 !important 强制盖过样式。

使用方法为，在你需要把权重调最高的样式後添加 !important;。

总结

这边了解如何使用选择器，与权重的概念了，也了解到 HTML 中 id 、 class 与 style 这三个属性，还有几个很重要的观念没说，像是命名的艺术、命名的逻辑、样式的复用性也都是很重要的，碍於篇幅有限，未来有机会再提起，还有一些 CSS 的样式这系列应该不会说那麽细，推荐可以去看 CSScoke 金鱼系列的文章，下一篇我们将介绍 CSS 的 display 属性。


<<:  Day 14 照片铅笔素描效果

>>:  【Side Project】 序

Day 8 - 社交工程 101

出於书本 Chapter 5. Social Engineering 常见的社交工程攻击 向使用者宣...

Android Curv Gradient 曲线渐层

前言 平常我们使用的渐层方式通常都是在drawable用Xml配置参考 或者是在程序中设置Paint...

Internxt Drive - 替代 Google Drive 免费 2 GB 云端空间服务，采用加密与分布式技术保护你的网路资料

Internxt Drive 是世界上最安全的云端储存服务之一，他采用客户端加密与分布布技术，使得所...

Day1 - Android Studio下载教学

前言 在开始写Android APP前 必须先建置开发Android的环境 在这边选择被广为使用的A...

Day5-自制网站卷轴(下)_我就特立独行

今天要介绍的是「如果我就想把卷轴放在不是最右边的位置怎麽办?」 这是自制网站卷轴的最後一篇啦~ 我知...