认识前端--CSS｜ 青训营笔记

Followinsider
133 阅读8分钟

认识前端--CSS(二)

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

CSS整体语法结构

CSS的顶层样式表由两种规则组成的规则列表构成，一种是at-rule即at规则，另一种是qualified rule，也就是普通规则。

at规则

  • @charset

    • @charset 用于提示 CSS 文件使用的字符编码方式，它必须是样式表中的第一个元素，而前面不得有任何字符。
    • @charset"UTF-8"

  • @import

    • @import 用于引入一个 CSS 文件，除了 @charset 规则不会被引入，@import 可以引入另一个文件的全部内容。
    • @import "mystyle.css";
@import url("mystyle.css");

  • @media

    • media 能够对设备的类型进行一些判断。在 media 的区块内，是普通规则列表。
    • @media print {
    body { font-size: 10pt;
}

  • @page

    • page 用于分页媒体访问网页时的表现设置，页面是一种特殊的盒模型结构，除了页面本身，还可以设置它周围的盒。
    • @page {
  size: 8.5in 11in;
  margin: 10%;
@top-left {
    content: "Hamlet";
  }
@top-right {
    content: "Page " counter(page);
  }
}

  • @counter-style

    • counter-style 产生一种数据，用于定义列表项的表现。
    • @counter-style triangle {
  system: cyclic;
  symbols: ‣;
  suffix: " ";
}

  • @keyframes

    • keyframes产生一种数据，用于定义动画关键帧。
    • @keyframes diagonal-slide {
​
  from {
    left: 0;
    top: 0;
  }
​
  to {
    left: 100px;
    top: 100px;
  }
​
}

  • @fontface

    • fontface 用于定义一种字体，icon font 技术就是利用这个特性来实现的。
    • @font-face {
  font-family: Gentium;
  src: url(http://example.com/fonts/Gentium.woff);
}
​
p { font-family: Gentium, serif; }

  • @supports

    • support 检查环境的特性，它与 media 比较类似。可以进行特性查询，。该规则可以放在代码的顶层，也可以嵌套在任何其他条件组规则中。
    • @supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    float: right;
  }
}

  • @namespace

    • 用于跟 XML 命名空间配合的一个规则，表示内部的 CSS 选择器全都带上特定命名空间。
    • /* 默认命名空间 */
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";
​
/* 命名空间前缀 */
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";

普通规则

普通规则主要是由选择器和声明区块构成。声明区块由属性和值构成。

image-20220728095852462.png

CSS的选择器

基础选择器

  1. 标签选择器

    与html元素进行匹配的

    <p>
  今天学习CSS选择器,标签选择器
</p>

    <style>
  p {
    font-size:14px;
    background-color:#411;
    padding:2em;
  }
</style>

    image-20220728151125032.png

  2. 类选择器

    匹配到html元素中有class属性的，每个元素可以有多个class属性，多个用空格分隔开

    <p class="p_class_selector">
  今天学习CSS选择器,类选择器
</p>

    <style>
  .p_class_selector{
    font-size:14px;
    background-color:#003399;
    padding:2em;
  }
</style>

    image-20220728151308009.png

  3. id 选择器

    匹配到htm元素中有 id 属性的，id 选择器只能用在一个html元素，每个元素仅能有一个 id 属性

    <h1 id="logo">
  CSS 文档
<h1>

    <style>
  #logo {
    font-size: 60px;
    font-weight: 200;
    color: #663366;
  }
</style>

    image.png

  4. 通配选择器

    即对各个元素通用的，可以结合组合器进一步扩展

    <div id="footer">
  <h1>HTML5 文档</h1>
  <p>今天学习CSS选择器,通配符选择器</p>
</div>
<div>
  <h1>HTML5 文档</h1>
  <p>今天学习CSS选择器,通配符选择器</p>
</div>

    <style>
  div#footer ~ * {
    font-size:1.2em;
    color: blue;
  }
</style>

    image-20220728153719489.png

属性选择器

匹配html元素定义的属性

  • [attr]匹配存在属性的元素

    <p>今天学习CSS选择器,属性选择器</p>
<label>
  <input type="radio" id="check_radio"/><span>完成了吗？</span>
</label>

    <style>
  [id] + span{
    font-size:18px;
    color:white;
    background-color:#003366;    
  }
</style>

    image-20220728154544760.png

  • [attr=val]匹配属性值等于val的元素

    <p>今天学习CSS选择器,属性选择器</p>
<a href="http://demo1.com">网址1</a>
<a href="http://demo2.com">网址2</a>

    <style>
  a[href="http://demo2.com"] {
    display:inline-block;
    color: red;
    border: 1px solid gray;
    padding: 14px;
    text-decoration:none;
  }
</style>

    image-20220728155052514.png

  • [attr^=val]匹配属性值以val开头的元素

    <p>今天学习CSS选择器,属性选择器</p>
<a href="http://demo1.com">网址1</a>
<a href="http://demo2.com">网址2</a>

    <style>
  a[href^="http"] {
    display:inline-block;
    color: red;
    border: 1px solid gray;
    padding: 14px;
    text-decoration:none;
  }
</style>

    image-20220728155242654.png

  • [attr$=val]匹配属性值以val结尾的元素

    <p>今天学习CSS选择器,属性选择器</p>
<a href="http://demo1.com">网址1</a>
<a href="http://demo2.com">网址2</a>

    <style>
  a[href$="demo1.com"] {
    display:inline-block;
    color: red;
    border: 1px solid gray;
    padding: 14px;
    text-decoration:none;
  }
</style>

    image-20220728155340177.png

  • [attr*=val]匹配属性值存在val的元素

    <p>今天学习CSS选择器,属性选择器</p>
<a href="http://demo1.com">网址1</a>
<a href="http://demo2.com">网址2</a>

    <style>
  a[href*="demo"] {
    display:inline-block;
    color: red;
    border: 1px solid gray;
    padding: 14px;
    text-decoration:none;
  }
</style>

    image-20220728155401492.png

  • [attr|=val]匹配属性值存在以val开头， ”-“ 为连字符的元素，典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。

    <p>今天学习CSS选择器,属性选择器</p>
<p id="my-Address">I live in Duckburg</p>
<p id="myabc">I have many friends:</p>

    <style>
  [id|="my"] {
    color: white;
    background-color: #333300;
  }
</style>

    image-20220728202658286.png

  • [attr~=val]表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 val。

    <p>今天学习CSS选择器,属性选择器</p>
<p id="my-Address">I live in Duckburg</p>
<p id="my abc">I have many friends:</p>

    p{
    padding: 10px;
}
p[id~="my"] {
    
    color: white;
    background-color: #333300;
}

    image-20220728223209521.png

伪类选择器

针对选择元素具备某种状态进行修饰，是一系列由 CSS 规定好的选择器，它们以冒号开头。

  • 树结构关系伪类选择器

    :root匹配文档树的根元素。对于 HTML 来说， :root 表示<html>元素，除了优先级更高之外，与 html 选择器相同。

    <p>今天学习CSS选择器,属性选择器</p>
<p id="my-Address">I live in Duckburg</p>
<p id="myabc">I have many friends:</p>

    <style>
  :root {
    --main-color:hotpink;
  }
  p#myabc {
    color: var(--main-color);
  }
</style>

    :empty CSS伪类代表没有子元素的元素。子元素只可以是元素节点或文本 （包括空格） 。注释或处理指令都不会产生影响。

    <div class="container">
  <div class="box"></div>
  <div class="box">I will be pink</div>
  <div class="box">
    <!-- I will be pink because of the whitespace around this comment -->
  </div>
</div>

    <style>
  .container {
    display: flex;
    justify-content: space-between;
  }
  .box {
    background: pink;
    height: 80px;
    width: 80px;
  }
  .box:empty {
    background: hsl(48, 100%, 55%);
  }
</style>

    image-20220728203731190.png

    :nth-child 和 :nth-last-child两个函数型的伪类，CSS的An + B 语法基本用法(MDN有个很不错的示例可以体验一下)：

    1ebdba2978a22c13844d108318b271a9.png

    <h3><code>span:nth-child(2n+1)</code>, WITHOUT an
   <code>&lt;em&gt;</code> among the child elements.</h3>
<p>Children 1, 3, 5, and 7 are selected.</p>
<div class="first">
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>
​
<br>
​
<h3><code>span:nth-child(2n+1)</code>, WITH an
   <code>&lt;em&gt;</code> among the child elements.</h3>
<p>Children 1, 5, and 7 are selected.<br>
   3 is used in the counting because it is a child, but it isn't
   selected because it isn't a <code>&lt;span&gt;</code>.</p>
<div class="second">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>
​
<br>
​
<h3><code>span:nth-of-type(2n+1)</code>, WITH an
   <code>&lt;em&gt;</code> among the child elements.</h3>
<p>Children 1, 4, 6, and 8 are selected.<br>
   3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>,
   not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects
   children of that type. The <code>&lt;em&gt;</code> is completely skipped
   over and ignored.</p>
<div class="third">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>

    html {
  font-family: sans-serif;
}
​
span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}
​
.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
  background-color: lime;
}

    image-20220728205853526.png

    :nth-last-child 从兄弟节点中从后往前匹配处于某些位置的元素。

    :first-child 、:last-child 分别表示第一个和最后一个元素。

    :only-child 匹配没有任何兄弟元素的元素

    <div class="first">
    <p>今天学习CSS选择器,伪类选择器1</p>
    <p>今天学习CSS选择器,伪类选择器2</p>
    <p>今天学习CSS选择器,伪类选择器3</p>
    <p>今天学习CSS选择器,伪类选择器4</p>
    <span>今天学习CSS选择器,伪类选择器4.1</span>
    <p>今天学习CSS选择器,伪类选择器5</p>
</div>
<div class="third">
    <span>今天学习CSS选择器,伪类选择器8</span>
</div>

    p,span{
    padding: 10px;
}
/* span不能匹配到，没有作用 */
.first p:nth-last-child(2) {
    color: white;
    background-color: #6699CC;
}
/* 匹配 3 */
.first p:nth-last-of-type(3) {
    color: white;
    background-color: hsl(48, 100%, 55%);
}
/* 匹配 1 */
.first p:first-child {
    color: white;
    background-color: #CCCC66;
}
/* 匹配 5 */
.first p:last-child {
    color: white;
    background-color: #663366;
}
span:only-child {
    color: white;
    background-color: #99CCFF;
}

    image-20220728213339622.png

  • 链接与行为伪类选择器

    :link 表示未访问过的链接，

    :visited 表示已经访问过的链接。

    :hover 表示鼠标悬停在上的元素。

    :active 表示用户正在激活这个元素，如用户按下按钮，鼠标还未抬起时，这个按钮就处于激活状态。

    :focus 表示焦点落在这个元素之上。

    :target 用于选中浏览器 URL 的 hash 部分所指示的元素。

    :any-link 表示任意的链接，包括 a、area 和 link 标签都可能匹配到这个伪类。

  • 逻辑伪类选择器

    如:not 伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。

伪元素选择器

  • ::before 选择器在被选元素的内容前面插入内容
  • ::after 选择器在被选元素的内容后面插入内容
  • ::first-letter用于选取指定选择器的首字母
  • ::first-line选取指定选择器的首行

复合选择器

多个基础选择器连接（不使用空格或者其他组合器）组成一个复合（compound）选择器（例如：h1.page-header）。 复合选择器选中的元素将匹配其全部基础选择器。 例如，.dropdown.is-active 能够选中<div class="dropdown is-active">，但是无法选中<div class="dropdown">

组合器

  1. 空格( )——匹配属于指定元素后代的所有元素。例如div p
  2. 子组合器（>）——匹配的目标元素是其他元素的直接后代。例如：.parent > .child。
  3. 相邻兄弟组合器（+）——匹配的目标元素紧跟在其他元素后面。例如：p + h2。
  4. 通用兄弟组合器（~）——匹配所有跟随在指定元素之后的兄弟元素。注意，它不会选中目标元素之前的兄弟元素。例如：li.active ~ li。

声明区块

声明部分是一个由“属性: 值”组成的序列。

属性是由中划线、下划线、字母等组成的标识符，CSS 还支持使用反斜杠转义。我们需要注意的是：属性不允许使用连续的两个中划线开头，这样的属性会被认为是 CSS 变量(如下)。

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}

值的部分，主要在标准 CSS Values and Unit，根据每个 CSS 属性可以取到不同的值，这里的值可能是字符串、标识符。

CSS 属性值可能是以下类型。

  • CSS 范围的关键字：initial，unset，inherit，任何属性都可以的关键字。
  • 字符串：比如 content 属性。
  • URL：使用 url() 函数的 URL 值。
  • 整数 / 实数：比如 flex 属性。
  • 维度：单位的整数 / 实数，比如 width 属性。
  • 百分比：大部分维度都支持。
  • 颜色：比如 background-color 属性。
  • 图片：比如 background-image 属性。
  • 2D 位置：比如 background-position 属性。
  • 函数：来自函数的值，比如 transform 属性。

参考文章

www.w3schools.com/cssref/trys…

time.geekbang.org/column/arti…

github.com/febobo/web-…

avatar
文章
阅读
粉丝