笔记

Appearance

大纲

基本语法 ​

语言简介 ​

CSS 是层叠样式表的简写，用来表现 HTML 或 XML 等文件样式的语言
早期网页简单，块状元素用于表示容器，内联元素用于表示内容，图文信息文档通过流的形式呈现
随着硬件的提升，CSS 不断丰富了视觉上的表现，增加了阴影、渐变、过渡、动画、滤镜、透视 等效果
随着移动端兴起，CSS 增加了媒体查询、弹性布局、网格布局 等适配多端设备的功能

引入方式 ​

  • 外部样式表

    html
    <head>
  <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

  • 内部样式表

    html
    <head>
  <style type="text/css">
    body {
      background-color: #fff;
    }
  </style>
</head>

  • 内联样式

    html
    <p style="text-indent: 2em;">This is a paragraph</p>

样式覆盖 ​

之所以叫层叠样式，是因为元素最终生效的样式是在多种声明后被层层覆盖的

元素中同一属性最终表现遵循

  • 权重大的选择器下的样式优先
  • 等权重下后声明的样式覆盖

说明：选择器权重

  1. 属性 !important 修饰，权重 10000，如 <selector> { prop: value!important }
  2. 内联样式，权重 1000，如 <div style="xxx" />
  3. ID 选择器，权重 100，如 #xxx {}
  4. 类、伪类、属性 选择器，权重 10，如 .xxx{}
  5. 元素选择器、伪元素选择器，权重 1，如 p {}

样式描述 ​

普通声明 ​

CSS 通过对元素的属性进行描述控制元素的表现，格式为

css
/* 花括号内为声明块，这里为注释 */
/* 选择器大小写敏感 */
/* 选择器可以为多个，使用逗号分隔 */
选择器 {
  /* 属性 + 属性值 为声明 */
  /* 属性、属性值 大小写不敏感 */
  属性: 属性值; /* 属性值为若干单词则需要添加引号(如字体值) */
}

AT 规则 ​

@规则，使用 @ 开头的规则，用来描述特定环境下的样式，如 @media、@font-face、@page、@support

  • 常规规则

    css
    @规则 <条件>;

  • 嵌套规则

    css
    @规则 <条件> {
  样式定义
}

选择器 ​

基础选择器 ​

  • 通配选择器: *
  • 标签选择器: tag
  • ID 选择器: #id
  • 类选择器: .class
  • 属性选择器: [attr]、[attr operator value flag]
    • 关系符号(operator)如下
      • =: attr 的值为 value
      • ~=: attr 为以空格为分隔的值列表，其中包含 value
      • |=: attr 的值为 value 或以 value- 作为前缀
      • ^=: attr 的值以 value 作为开头
      • $=: attr 的值以 value 作为结尾
      • *=: attr 的值包含 value
    • 修饰符(flag)如下(可选)
      • i 或 I: 匹配属性值时忽略大小写

关系选择器 ​

  • 相邻兄弟选择器: A + B，B 为紧邻 A 之后同层级且符合条件的单一元素
  • 通用兄弟选择器: A ~ B，B 为位于 A 之后同层级且符合条件的全部元素
  • 子选择器: >
  • 后代选择器: ␣ (空格)
html
<!-- 由于 p1 紧邻的是 div 不符合条件，故没有元素是红色字体 -->
<style>
  .p1 + p {
    color: red;
  }
</style>
<p>0</p>
<p class="p1">1</p>
<div>2</div>
<p>3</p>
<p>4</p>
html
<!-- 3 和 4 将变为红色 -->
<style>
  .p1 ~ p {
    color: red;
  }
</style>
<p>0</p>
<p class="p1">1</p>
<div>2</div>
<p>3</p>
<p>4</p>

伪类选择器 ​

伪类是添加到选择器的关键字(以 : 连接)，指定要选择的元素的特殊状态，一个选择器可以同时配置多个伪类

常用伪类选择器

  • :root: 根选择器，与 html 选择器相同，但优先级更高，一般用于声明全局变量
  • :focus: 元素获得焦点，通用
  • :empty: 元素没有子元素，通用
  • :link: 元素链接被选中状态，用于 <a> 元素
  • :visited: 元素被访问状态，用于 <a>、<button> 元素
  • :hover: 元素被指示设备虚指，通用
  • :active: 元素被激活状态，用于 <a>、<button> 元素
  • :checked: 元素被选择状态，用于 <input type="radio">、<input type="checkbox">、<option>(<select>子元素) 元素
  • :disabled: 元素被禁用状态，用于 <input>、<button> 元素
  • :enabled: 元素被启用状态，用于 <input>、<button> 元素
  • :invalid: 元素未验证通过，用于 <input>、<form> 元素
  • :first-child: 一组兄弟元素中首位元素，通用
  • :last-child: 一组兄弟元素中末位元素，通用
  • :nth-child(an+b): 根据表达式匹配元素

说明

伪元素选择器 ​

伪元素是附加到选择器末的关键词(以 :: 连接)，其选中的是元素的特定部分，一个选择器只能使用一个伪元素

常用伪元素选择器

  • ::before: 创建一个伪元素作为已选元素的第一个子元素
  • ::after: 创建一个伪元素作为已选元素的最后一个子元素
  • ::first-line: 选择块级元素首航
  • ::first-letter: 选择块级元素首行的首个字母，且文字所处行之前没有其他内容(图片或内联表格)
  • ::selection: 文档中被用户高亮的部分(鼠标或其他设备选中)
  • ::file-selector-button: 选择 <input type="file"> 的交互按钮
  • ::placeholder: 选则 <input placeholder> 中 placeholder 的部分

说明

属性值 ​

属性值由以下部分组成

  • 值：如 数值、百分比、长度、色值等
  • 关键字：如 inherit、solid、等
  • 功能符：以函数形式描述，如 url(xx)，rgb(0,0,0)
  • 变量
  • 函数：特点样式中提供的高级描述