CSS基础

本文最后更新于：2023年2月28日 下午

1. 语法

层叠样式表 (Cascading Style Sheets) 组成部分：

  1. 选择器

    指定 HTML 元素

  2. 声明块

    声明块被花括号包裹

    声明块包含一或多条声明，分号分隔

    每条声明是一个属性和值的键值对

css组成

选择器

CSS选择器

基本选择器

  • 通配选择器 (universal selector)

    选择所有元素。可以将其限制为特定的名称空间或所有名称空间 ()。

    1
    2
    3
    *[lang^=en]{color:green;}
    *.warning {color:red;}
    *#maincontent {border: 1px solid blue;}
    1
    2
    3
    4
    5
    6
    <p class="warning">
      <span lang="en-us">A green span</span> in a red paragraph.
    </p>
    <p id="maincontent" lang="en-gb">
      <span class="warning">A red span</span> in a green paragraph.
    </p>

  • 元素/类型选择器 (type selector)

    选择给定名称所有匹配元素。语法：<elementname>

    1
    2
    3
    4
    span {
      background-color: DodgerBlue;
      color: #ffffff;
    }

  • 元素选择器 (type selector)

    按照给定的 class 属性的值，选择所有匹配的元素。语法：.<classname>

    1
    2
    3
    span.classy {
      background-color: DodgerBlue;
    }
    1
    2
    <span class="classy">Here's a span with some text.</span>
    <span>Here's another.</span>

  • ID选择器 (ID selector)

    按照 id 属性选择一个与之匹配的元素 (同一文件下id唯一)。语法：#<idname>

    1
    2
    3
    span#identified {
      background-color: DodgerBlue;
    }
    1
    2
    <span id="identified">Here's a span with some text.</span>
    <span>Here's another.</span>

  • 属性选择器 (attribute selector)

    通过已经存在的属性名或属性值匹配元素。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    /*
    a[attr]: 带有以 attr 命名的属性的元素
    a[attr=value]: 带有以 attr 命名的属性，且属性值为 value 的元素
    a[attr`=value]: 带有以 attr 命名的属性，且属性值是以 value 开头的元素
    a[attr$=value]: 带有以 attr 命名的属性，且属性值是以 value 结尾的元素
    */
    a {
      color: blue;
    }
    /* 以 "#" 开头的页面本地链接 */
    a[href`="#"] {
      background-color: gold;
    }
    /* 包含 "example" 的链接 */
    a[href*="example"] {
      background-color: silver;
    }
    /* 包含 "insensitive" 的链接，不区分大小写 */
    a[href*="insensitive" i] {
      color: cyan;
    }
    /* 包含 "cAsE" 的链接，区分大小写 */
    a[href*="cAsE" s] {
      color: pink;
    }
    /* 以 ".org" 结尾的链接 */
    a[href$=".org"] {
      color: red;
    }
    1
    2
    3
    4
    5
    6
    <ul>
      <li><a href="#internal">Internal link</a></li>
      <li><a href="http://example.com">Example link</a></li>
      <li><a href="#InSensitive">Insensitive internal link</a></li>
      <li><a href="http://example.org">Example org link</a></li>
    </ul>

    效果

分组选择器（Grouping selectors）

  • 选择器列表 (selector list)

    多个选择器的组合。

    1
    2
    3
    4
    5
    #main,
    .content,
    article {
      font-size: 1.1em;
    }

组合器（Combinators）

  • 后代组合器（Descendant combinator）

    “ ”（空格）组合器选择前一个元素的后代节点。语法：<A> <B>

    1
    2
    3
    4
    5
    6
    7
    /* 
    List items that are descendants of the "my-things" list 
    匹配所有位于任意 div 中的 span 元素
    */
    div span {
      margin: 2em;
    }

  • 直接子代组合器（Child combinator）

    > 组合器选择前一个元素的直接子代的节点。 语法：A > B

    1
    2
    3
    4
    div > p
    {
    	background-color:yellow;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    <div>
        <p>I will be styled.</p>
    </div>
    <div>
    	<span>
    		<p>I will not be styled.</p>
    	</span>
    </div>

  • 一般兄弟组合器（General sibling combinato）

    ~ 组合器选择兄弟元素。同层级元素，后一个节点在前一个节点后面的任意位置。

    1
    2
    3
    p ~ span {
      color: red;
    }
    1
    2
    3
    4
    5
    <span>
        <p>Here is a paragraph.</p>
        <code>Here is some code.</code>
        <span>And here is a span.</span>
    </span>

  • 紧邻兄弟组合器（Adjacent sibling combinator）

    + 组合器选择相邻元素。同层级元素，即后一个元素紧跟在前一个之后。

    1
    2
    3
    4
    /* 图片后面紧跟着的段落将被选中 */
    img + p {
      font-weight: bold;
    }

伪选择器（Pseudo）

  • 伪类

    是通过 : 添加到选择器的关键字，指定要选择的元素的特殊状态。

    LVHA 顺序 (对于<a>标签，有特殊的样式定义先后顺序)

    • a:link 超链接的默认样式

    • a:visited 已经访问过的链接的样式

    • a:hover 处于鼠标悬停状态的链接的样式

    • a:active 被激活（鼠标左键按下的一瞬间）的链接的样式

    • :focus 获得焦点的元素（如表单输入）

    • :checked 用户通过勾选/选中元素或取消勾选/取消选中的状态

    • :nth-child(an+b) 匹配属于其父元素的第 an+b 个子元素

      1
      2
      3
      4
      5
      6
      7
      8
      p:nth-child(2)
      {
      	background:#ff0000;
      }
      /*
      2n+0/2n: 匹配位置为 2、4、6、8...的元素(从1开始), 可以使用关键字 even 来替换此表达式。
      2n+1: 匹配位置为 1、3、5、7...的元素, 可以使用关键字 odd 来替换此表达式。
      */
      1
      2
      3
      4
      5
      6
      7
      8
      9
      <body>

          <h1>这是标题</h1>
          <p>第一个段落。</p>
          <p>第二个段落。</p>
          <p>第三个段落。</p>
          <p>第四个段落。</p>

      </body>

      <p>第一个段落。</p> 被匹配

  • 伪元素

    是通过 :: 添加到选择器的关键字，允许对被选择元素的特定部分修改样式。

    • ::first-line 块级元素的第一行文本
    • ::before/::after 在匹配元素内部的前/后添加修饰性内容

@规则

在 CSS 中包含两种语法规则：

  • 普通规则：由选择器、属性和值构成
  • @规则：以@开头后面跟随一个关键字的形式构成，也被称为“AT规则”，根据使用方法的不同又可以分为“常规规则”与“嵌套规则”两种

常规规则

语法：@[KEYWORD] (RULE);

  • @charset "<charset>";

    字符编码需要使用双引号""包裹起来

    多种字符编码规则，它们的优先级顺序如下：

    • HTML 文件开头的字符编码声明；
    • HTTP 请求头中的字符编码声明；
    • CSS 文件中使用 @charset 定义的字符编码声明；

  • @import <url>;

    向当前 CSS 样式文件中导入其它样式文件

    1
    2
    @import url(global.css);
    @import "global.css";

嵌套规则

语法：`

1
2
3
@[KEYWORD] {
    /* 嵌套语句 */
}

  • @font-face{}

    从远程服务器或者用户本地加载指定的字体

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* 定义 @font-face 规则 */
    @font-face {
        /* 指定字体名称 */
        font-family: "Open Sans";
        /* 指定字体文件的路径 */
        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
             url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
    }
    /* 字体的应用 */
    p {
        font-family: "Open Sans";
    }

优先级

ID选择器 > 类选择器、属性选择器 > 元素/类型选择器、伪元素选择器

2. 创建

在 HTML 中：

  • 外部样式 (External style sheet)

    1
    2
    3
    <head>
    	<link rel="stylesheet" type="text/css" href="<css文件路径>">
    </head>

  • 内部样式 (Internal style sheet )

    1
    2
    3
    4
    5
    6
    7
    <head>
    	<style>
            hr {color:sienna;}
            p {margin-left:20px;}
            body {background-image:url("images/back40.gif");}
    	</style>
    </head>

  • 内联样式 (Inline style)

    1
    <p style="color:sienna;margin-left:20px">这是一个段落。</p>

优先级：

内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

软件工程
前端 html/css/js

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！