掌握前端基础：CSS入门指南

发表时间: 2020-07-27 18:48

Introduction

CSS 是指层叠样式表（Cascading Style Sheets）。

CSS 可以定义 HTML 元素如何显示。

CSS 大大提高工作效率，可以将 HTML 代码与样式代码分离，让原本 HTML 不能描述的效果，通过 CSS 描述出来。

Syntax

CSS 语法规则由两个主要的部分构成：选择器，以及一条或多条声明

选择器 { 属性:值; 属性:值 } -- 在大括号中可以有多个声明，声明是由属性与值组成，它们之间使用 : 分开，而多个声明之间，使用的是 ; 来分开

选择器的主要作用就是用于确定当前的 CSS 修饰的是哪一个元素

关于 CSS 中书写的值的注意事项：

CSS 不区分大小写，但是对于 id 与 class 的值是区分的。
对于数组，可以使用具体数值，也可以使用百分比，它默认的单位是 px。CSS 也可以使用其它的单位 mm，cm 等。
如果属性值是由多个单词组成，那么需要加上引号。

Integrate CSS into HTML

内联样式

在 HTML 标签上通过 style 属性来引用 CSS 代码。简单方便，但只能对一个标签进行修饰。

内部样式表

在 <head> 标签内通过 <style> 标签来声明 CSS。可以通过多个标签进行统一的样式设置，但只能在本页面上进行修饰。

外部样式表

引用外部 CSS 样式有两种方案：

在 HTML 页面中 head 标签内使用 <link> 标签。
在 HTML 页面中 style 标签内使用 @import 导入。

对比：

@import 方式导入会先加载 html，然后才导入 css 样式，如果网络条件不好，就会先看到没有修饰的页面，然后才看到修饰后的页面；如果使用 link 方式，它会先加载样式表，也就是说，看到的直接就是修饰的页面。
@import 方式导入 css 样式是不支持 javascript 的动态修改，而 link 支持。

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。一般优先级如下：

内联样式 Inline style > 内部样式 Internal style sheet > 外部样式 External style sheet > 浏览器默认样式

CSS 的使用

CSS 选择器

ID 选择器

只能选择一个元素，使用 "#" 引入，引用的是元素的 id 属性值。

类选择器

类选择器在使用时使用 "." 来描述，它描述的是元素上的 class 属性值。

元素（标签）选择器

可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称。

选择器分组

让多个选择器可以同时使用同样的一段 css，注意选择器之间使用逗号分开。

派生选择器

在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器。

派生选择器允许根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器可以使 HTML 代码变得更加整洁。

CSS 伪类

CSS 伪类可对 CSS 的选择器添加一些特殊效果

锚伪类：

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}     /* 未访问的链接 */a:visited {color: #00FF00}  /* 已访问的链接 */a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */a:active {color: #0000FF}   /* 选定的链接 */

:first-child 伪类：

可以使用 :first-child 伪类来选择元素的第一个子元素。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>CSS 伪类</title>        <style>            p:first-child {font-weight: bold; color:blue}            li:first-child {text-transform:uppercase; color:red}        </style>    </head>    <body>          <div>            <p>我是第一个</p>            <ol>                <li>I'm the first;</li>                <li>I'm the second;</li>                <li>I'm the third;</li>            </ol>            <p>我是第二个</p>        </div>    </body></html>

CSS 基本属性

字体属性

CSS 字体属性定义字体，加粗，大小，文字样式。

在CSS中，有两种类型的字体系列名称：

通用字体系列 - 拥有相似外观的字体系统组合，如 Serif 或 Monospace。Serif: 衬线体（即“白体”），中国大陆地区和港台的印刷界称之为宋体；Monospace：等宽字体（微软雅黑）。
特定字体系列 - 一个特定的字体系列，如 Times 或 Courier（打字机上的一种字体）。

font-family 属性设置文本的字体系列。多个字体系列是用一个逗号分隔指明，如：

p{font-family:"Times New Roman", Times, serif;}

font-style 属性最常用于规定斜体文本。如：

p.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;}

font-weight 属性设置文本的粗细。如：

p.thick {font-weight:bold;} /* bold 关键字可以将文本设置为粗体 */

font-size 属性设置文本的大小。

p {font-size:14px;}p {font-size:0.875em;} /* 14px/16=0.875em */body {font-size:100%;}p {font-size:0.875em;}

文本属性

CSS 文本属性可定义文本的外观。通过文本属性可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

背景属性

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

尺寸属性

CSS 尺寸属性允许控制元素的高度和宽度。同样，还允许增加行间距。

列表属性

作用如下：

设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像

有两种类型的列表：

无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 - 列表项的标记有数字或字母

使用CSS，可以列出进一步的样式，并可用图像作列表项标记。

浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

边框

CSS 边框属性允许指定一个元素边框的样式和颜色。

轮廓属性

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓和边框的区别：边框 (border) 可以是围绕元素内容和内边距的一条或多条线；轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

盒子模型

CSS盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。所有 HTML 元素可以看作盒子，在 CSS 中，box model 这一术语是用来设计和布局时使用。

盒子模型允许在其它元素和周围元素边框之间的空间放置元素。

CSS 定位

CSS 定位（Positioning）属性允许你对元素进行定位。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

分类属性

CSS 分类属性允许控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。

想了解更多，欢迎关注我的微信公众号：Renda_Zhang