第二课：CSS

_Kevin_
75 阅读4分钟

CSS

这是我参与「第五届青训营 」笔记创作活动的第2天

概念

CSS（Cascading Style Sheets）：层叠样式表

CSS引入HTML的方式

  • 外链（推荐）
<link rel="stylesheet" href="/assets/style.css" />
  • 嵌入
<style>
li { margin: 0; list-style: none; }
p { margin: lem 0; }
</style>
  • 内联
<p style="margin: lem 0;">实例内容</p>

CSS样式问题

某元素被多个选择器选中时，哪个选择器的样式会生效？

  1. 这里不探讨层叠顺序（@layer）对于样式应用的规则影响
  2. 这里的的样式指的是选择器中的某个属性，而不是选择器中的所有属性
  3. 这里也不考虑!important和内联样式对于样式规则的影响，因为这两个都高于选择器 !!!这里探讨的是多选择器对同一元素产生影响时，具体会应用于哪个选择器的样式!!!
优先级

那么，这个问题就是优先级的问题！

选择器有优先级之分！

  • 一个元素选择器不是很具体，它会选择该页面上该类型的所有元素，所以它的优先级较低一些
  • 一个类选择器稍微具体点，它会选择页面上有特定class属性值的元素，所以它的优先级就要高一些
  • 一个ID选择器更具体一些（因为一个页面上同一个ID只能出现一次），所以它的优先级比类选择器的优先级还高

因此假如有这样两个选择器，.text（类选择器）和p（元素选择器），因为类选择器的优先级比元素选择器的优先级高，所以color: blue;会生效，即使元素选择器顺序更靠后

<style>
.text { color: blue; }
p { color: red; }
</style>

<p class="text">演示文字</p>

那如果并不是这样简单的一种选择器呢？例如p.text span。这就涉及到特异度的概念了

特异度

特异度由三个不同的值相加，（0, 0, 0）它们初始都是0。为了方便，下文中第一个值都叫值一，以此类推

  • 值一： 选择器中包含ID选择器则值一加1分

  • 值二： 选择器中包含类选择器、属性选择器或伪类则值二加1分

  • 值三： 选择器中包含元素、伪元素选择器则值三加1分

  • 注意：选择器（*）、组合符（+、>、~、''）和调整优先级的选择器（:where()）不参加计算

  • 注意：（:not()）和任意匹配（:is()）伪类本身对优先级没有影响，但它们的参数则会带来影响，参数中，优先级的最大值的将作为该伪类的优先级的值

  • PS：MDN官方文档中对于这三个值使用的是百位、十位、个位的介绍方法，但我认为这种方法有不妥之处，因为当一个复杂选择器中存在超过10个元素选择器时，值三并不会进1

接下来你可以看看对于以下这几个选择器的特异度的计算能否理解

选择器ID类元素优先级
h1001（0， 0， 1）
h1 + p::first-letter003（0， 0， 3）
li > a[href*="en-US"] > .inline-warning022（0， 2， 2）
#identifier100（1， 0， 0）
button:not(#mainBtn, .cta)101（1， 0， 1）

样式继承

  • 某些属性会自动继承其父元素的计算值，除非显示指定一个值
  • 例如color属性就会影响到设置该属性的元素的子元素，你可以为它的子元素显示的设置一个color的其它的属性值
  • 但是某些属性不会被继承，但你可以为子元素的该属性显示的指定属性值为inherit，表示此属性的属性值继承自它的父元素（如果父元素没有就一直向上找）
  • 你可以在MDN文档中属性的形式定义一栏中看到属性是否是继承属性

注意

font-family设置字体的问题

在使用该属性设置字体时，最好在最后设置一个通用字体。这样做，当前面的字体在本机都没有时，会在本机按设置的通用字体的类型找一个相近的字体

  • serif：衬线体
  • sans-serif：无衬线体
  • cursive：手写体
  • fantasy：一种夸张的字体
  • monospace：等宽字体

image.png

Web Fonts

当本机不存在改字体时，但又想使用某个字体进行渲染，即可使用Web Fonts

下图所示，当电脑中不存在Megrim这个字体时，首先会进行自动下载

image.png

总结

今天学了在CSS中的一些基本知识，在短期编程中，有些问题可能不会出现，但是时间久了就会出现很多莫名其妙的小问题，而原因可能就藏在今天学的这些知识中，目前还没学完CSS布局的内容，明天继续

avatar
文章
阅读
粉丝