前端入门 03：CSS入门

目的

CSS也是前端基础内容中比较简单的一个部分，这篇文章将对CSS入门相关的内容做个记录。

基础语法

CSS用来描述网页的外观特征，比如排版、外形、颜色等。CSS的语法综合来说基本就一条：
选择器 { 声明; ...; 声明; }
其中声明部分又可以分解为 属性 和 值 ，综合一下就是下面这样：
选择器 { 属性:值; ...; 属性:值; }
下面是个具体的语法示意：

CSS语法基本就这一条，其它个别长得不一样的差不多也能看作是这个形式的变种。

选择器

选择器就如其名，用来表明后面大括号中声明的样式规则将应用到什么东西上。选择器根据其选择规则的不同可以分为几种类别，下面将分别进行介绍：

• 元素选择器（也称作标签或类型选择器），用于选择某HTML标签的元素；
  

• 类选择器，用于选择标记为某个类的元素（一个类名可以应用到一个或多个元素中；一个标签也可以使用多个类，以空格分隔）；
  

• ID选择器，用于选择标记为指定ID的元素（同一页面中ID不可重复）；
  
  上面几个是最最常用的选择器，选择器可以单独使用也可以组合在一起使用，使用 , 进行分隔：
  

• 通配选择器，用来匹配任意元素，通常用来选择全部或是与下文属性选择器结合使用；

  	/* *（星号）表示通配选择器，默认情况下表示选中所有内容 */
      * {
          padding: 0;
          margin: 0;
      }
  

• 属性选择器，用于选择具有某种属性特征的元素；
  属性选择器内容比较多，具体的可以查看链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors
  

• 伪类选择器，用于选择指定元素的特定状态；
  伪类选择器通常用于按钮、链接等这些具体多种状态的元素上，具体可用的伪类可以参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
  

• 伪元素选择器，用于选择指定元素的特定部分样式；
  伪元素选择器主要用于静态的样式，具体内容可以参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements
  

• 后代选择器，用于选择嵌套于某一元素中所有的某类元素（跨层级）；
  

• 子代选择器，用于选择嵌套于某一元素中直接相邻的某类元素；
  

• 相邻兄弟选择器，用于选择同一父元素中某元素后第一个相邻的指定元素；
  

• 通用兄弟选择器，用于选择同一父元素中某元素后所有的指定元素；
  

使用方法

在HTML页面中引用CSS主要有下面三种方式：

• 内联方式，将CSS样式写在HTML标签中，作为标签的一个属性；
  
• 嵌入方式，将CSS样式写在style标签之间；
  
• 外部引用，把CSS代码保存为 .css 文件， 在页面中通过 标签进行引用；
  

优先级

如果对同一元素的同一个属性多次设置值会怎么样？

首先CSS全称Cascading Style Sheets，中文名称为层叠样式表。这个名称表面了CSS设置样式时是可以堆叠的，反正不会报错。

接下来说说前面那个问题，这个问题其实就是一个优先级问题，CSS的优先级其实是比较复杂的（具体的要计算权值来看），这里简单说说基础的规则：

• 对于不同的CSS引用方式的优先级： 内联方式 > 嵌入方式 > 外部引用 ；
  
• 对于相同CSS引用方式并且选择器类型不同时，不同选择器有不同优先级 ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素选择器 = 关系选择器(后代、子代、相邻、通用) = 伪元素选择器 > 通配符选择器 ；
  
• 对于相同CSS引用方式并且选择器类型相同时，因为浏览器解析文档是从上往下解析的，所以越下面的样式优先级越高；
  
• 值中包含 !important 的属性拥有最高优先级，如果同时有多个则参考上面；
  

盒子模型

盒子模型是CSS中的一个概念，主要是说一个元素具有 内容(content)、内边距(padding)、边框(border)、外边距(margin) 这些东西，这些东西主要在元素外观和页面布局方面有用处。盒子模型这个东西本身内容并不多，但是有很多坑，最出名的比如 外边距合并(折叠) 。另外新出的flex和grid布局本身又会影响盒子模型默认属性值。所以新手不推荐在这上面话太多时间，有个印象就成。

更多内容可以参考链接：https://zhuanlan.zhihu.com/p/110617108

布局

对于又美观需求的网页来说布局是最基本的要求，早先的时候布局总共有三种方式：

• 流动模型（Flow），这是默认的布局方式；
  流动模型主要有两条规则：块级元素都从上到下排列；行内元素都从左到右排列；
  
• 浮动模型 (Float)
  浮动模型怎么说呢，我觉得这种布局方式挺奇葩的吧。这个东西吧，现在有新布局方式下这个就不推荐去碰了，如果有兴趣可以参考链接：https://www.jianshu.com/p/85fd09b7cc49
• 层模型（Layer）
  层模型通常说的有三种：
  • 固定定位(position: fixed)
    使用固定定位的元素将从文档中独立出来，以网页页面窗口作为定位；
    
  • 相对定位(position: relative)
    使用相对定位的元素位置上不会从原文档中有任何变化，只是视觉上会相对于原位置有个偏移；
    
  • 绝对定位(position: absolute)
    使用绝对定位的元素将从文档中独立出来，以具有定位属性的父级元素作为定位。默认情况下Body元素具有定位属性，可以通过给父级元素加上 position: relative 使之具有定位属性；
    

除了上面几个较早的布局方式，现在还有两种布局可以选择，这两种布局很多时候比上面那些更好用，特别是对于现在越来越流行的 WebApp 来说布局体验更加贴近原生APP。这两种布局方式内容比较多，这里稍微进行介绍：

• 弹性盒子布局(Flex)
  Flex布局一改之前传统的比较难用的布局方式，给前端开发者提供了更加方便的布局方式。目前浏览器大多都已经支持Flex布局。
  简单点说Flex布局可以使元素以水平或垂直的轴线进行排列，这有点类似于原生安卓的线性布局，当然Flex布局比线性布局更加灵活些。
  
  Flex布局内容比较多，更多内容可以参考下面链接：
  《Flex 布局教程：语法篇》 - 阮一峰的网络日志
  《Flex 布局教程：实例篇》 - 阮一峰的网络日志
• 网格布局(Grid)
  Grid布局可以将一个容器变成一个个的网格，然后将其中的东西放到指定网格上。这个布局有点像WPF中的网格布局。我个人觉得Grid布局是比Flex布局更加好用的布局。原生安卓也在几年前的更新中加入了网格布局。
  目前浏览器对Grid布局的支持相比Flex布局要差点。
  
  Grid布局内容比较多，更多内容可以参考下面链接：
  《CSS Grid 网格布局教程》 - 阮一峰的网络日志

动画

CSS的动画功能非常不错，可以简简单单的就实现动态效果，让页面看起来更加鲜活，用户的交互体验也直线上升。CSS动画这块内容本身也不算多，更多的需要靠应用理解，后面会在单独例子中应用上。详细的CSS动画介绍可以参考下面链接：
《CSS动画简介》 - 阮一峰的网络日志

媒体查询

媒体查询本身内容并不多，但是挺有用的，主要是用在 响应式布局 中。入门阶段也没必要急着接触这个，后面我会单独出文章来讲这个的。

总结

CSS的内容要说多也不多，要说少也不算少，上面的内容有些印象其实也就够了，接下来更多的是对各种例程的学习模仿练习等。更多详细内容可以自行在CSDN、博客园、百度w3c、B站、慕课网等地方学习。