CSS 基础

什么是CSS?

CSS (Cascading Style Sheets) 层叠样式表, 用于设置网页的外观(网页的整容医生)

CSS 语法

h1 { /* h1 是选择器 */
  color: red; /* 颜色设置成红色(字体颜色) */
  font-size: 5em; /* 字体大小5em */
}

HTML模版

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>开始学习 CSS</title>
  </head>

  <body>
    <h1>我是一级标题</h1>

    <p>
      这是一个段落文本。在文本中有一个 <span>span element</span> 并且还有一个
      <a href="http://example.com">链接</a>.
    </p>

    <p>这是第二段。包含了一个 <em>强调</em> 元素。</p>

    <ul>
      <li>项目 1</li>
      <li>项目 2</li>
      <li>项目 <em>三</em></li>
    </ul>
  </body>
</html>

如何使用CSS

HTML链接CSS文件

创建文件style.css

h1 {
  color: red;
  font-size: 5em;
}

修改html模版

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>开始学习 CSS</title>
    <link rel="stylesheet" href="styles.css" /> <!-- 引入CSS -->
  </head>

  <body>
    <h1>我是一级标题</h1>

    <p>
      这是一个段落文本。在文本中有一个 <span>span element</span> 并且还有一个
      <a href="http://example.com">链接</a>.
    </p>

    <p>这是第二段。包含了一个 <em>强调</em> 元素。</p>

    <ul>
      <li>项目 1</li>
      <li>项目 2</li>
      <li>项目 <em>三</em></li>
    </ul>
  </body>
</html>

内联CSS

<div style="background: red"></div>

嵌入

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>开始学习 CSS</title>
    <style>
        h1 {
            color: red;
            font-size: 5em;
        }
    </style>
  </head>

  <body>
    <h1>我是一级标题</h1>

    <p>
      这是一个段落文本。在文本中有一个 <span>span element</span> 并且还有一个
      <a href="http://example.com">链接</a>.
    </p>

    <p>这是第二段。包含了一个 <em>强调</em> 元素。</p>

    <ul>
      <li>项目 1</li>
      <li>项目 2</li>
      <li>项目 <em>三</em></li>
    </ul>
  </body>
</html>

导入

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>开始学习 CSS</title>
    <style>
        @import url(style.css);
    </style>
  </head>

  <body>
    <h1>我是一级标题</h1>

    <p>
      这是一个段落文本。在文本中有一个 <span>span element</span> 并且还有一个
      <a href="http://example.com">链接</a>.
    </p>

    <p>这是第二段。包含了一个 <em>强调</em> 元素。</p>

    <ul>
      <li>项目 1</li>
      <li>项目 2</li>
      <li>项目 <em>三</em></li>
    </ul>
  </body>
</html>

选择器

选择器用于标识当前规则应用于与那些HTML元素.

类型选择器

h1 { /* HTML元素的标签 */
}

类选择器

类选择器方便复用CSS的规则

.box { /* box 是类名 */
}

使用box类名

<div class="box"></div>

id选择器

id在一个页面只能有一个

#unique { /* unique是id */
}

使用uniqueid

<div id="unique"></div>

属性选择器

根据元素上的属性是否存在选择元素

a[title] { /* a标签上有title属性, title的值不确定 */
}
a[title="user"] { /* a标签上有title属性, title的值要是user */
}
a[title~="u"] { /* a标签上有title属性, title的值至少包含u, 如果有多个值用空格分割 */
}
a[title|="u"] { /* a标签上有title属性, title的值可以是u, 或者是以u开始的后接连字符, 如u-test, title不能有多个值 */
}

a[title^="u"] { /* a标签上有title属性, title的值以u开头, title可以有多个值 */
}

a[title$="u"] { /* a标签上有title属性, title的值以u结尾, title可以有多个值 */
}
a[title*="u"] { /* a标签上有title属性, title的值包含至少一个u */
}

属性的匹配默认是大小写敏感的, 如果要使用大小写不敏感进行匹配, 在中括号中添加i

li[class^="a" i] {
  color: red;
}

伪类选择器

伪类用于指定元素的特殊样式

a:hover {
  color: red;
}

伪元素选择器

选择元素的一部分

a::first-line { /* 选择a标签的第一行 */
  color: red;
}

关系选择器

后代选择器

用空格组合两个选择器body div, 选择body中的div元素(可以是子元素的子元素的子元素...)

子代选择器

用>连接两个选择器body>div, 选择body的子元素div
兄弟选择器

用+连接div+img选择div后面相邻的img
通用兄弟选择器

用~连接div~img选择div后面的img

全局选择器

*选中文档中所有内容, 或者父元素中的所有元素

@规则

CSS函数

层叠

层叠(覆盖)如果两条规则的优先级一样, 那么后面的规则将覆盖前面的规则

<html>
    <head>
        <style>
            h1 {
                color: red;
            }
            h1 {
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1>This is my heading.</h1>
    </body>
</html>

最终This is my heading.是蓝色的

优先级

CSS的计算中, 最后每一个元素的每一个CSS属性都会有值