CSS葵花宝典——基础入门

CSS的基本知识很简单，你只要知道有哪些基本样式属性、CSS的选择器，怎么在页面应用CSS，就可以随便倒腾试试手了。

这篇文章属于CSS扫盲教程，讲解CSS语法、详细介绍颜色的表示(十六进制、rgb、hsl)以及长度单位（px、em、rem）；列出了比较完整的CSS选择器参考，后续可能你还需要经常回来。在文章最后，推荐了三本CSS书籍，一本作为新手学习的，一本作为参考手册，还有本属于深入的技巧。

如果你对HTML还不熟，建议先去W3school补充下HTML的知识，觉得OK了，看看我们的HTML专题检测下自己的水平。

CSS如何改变页面样式

我们在页面看到的各种排版、颜色、字体等等都是由CSS来控制的，比如现在我想改变所有段落的颜色为蓝色：

原始index.html如下：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <title>CSS基础知识-四光年</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>如何学好CSS</h1>
    <p>代码不贪多，理解清楚</p>
  </body>
</html>

第一种方法：内部样式表

在head标中加入style标签

<head>
    <title>CSS基础知识-四光年</title>
    <meta charset="utf-8">
    
    <!--内部样式表-->
    <style>
      p{
        color: blue;
      }
    </style>
  </head>

第二种方法：内联样式

在标签内部添加style属性

<p style="color: blue;">代码不贪多，理解清楚</p>

不过，这仅仅修改了这一段落的颜色哈哈哈，要是还有很多p标签，继续加style属性会不会疯了……

第三种方法：外部样式表

新建一个CSS文件（后缀.css），然后在HTML中引入这个文件：

比如我在index.html的同级目录创建一个style.css

style.css文件内容：

p{
  color: blue;
}

然后在我们的index.html的head中添加link标签，引入style.css

<head>
  <title>CSS基础知识-四光年</title>
  <meta charset="utf-8">
  
  <!--外部样式表-->
  <link href="style.css" rel="stylesheet">
</head>

极小概率你会看到@import，它也是引入外部样式表，语法不同，不过并不推荐。

关于link和import的详细讨论，参见Difference between @import and link in CSS

总结

我们大多数时候都是通过外部样式表引入样式，方便代码组织，也不会破坏HTML的整洁。另外两种方法，根据实际情况灵活使用就好了。

基本语法

具体看CSS怎么写，有哪些属性：

我们的样式是由一些列CSS规则共同组成，CSS规则由选择器 + 声明构成，用大括号{}来包裹声明语句。

借用w3chool的一张图：

h1{
  color: red;
  font-size: 14px;
}
.primary-nav{
  background-color: #333;
}

所有h1元素字体颜色设置为红色，字体大小14px；
class为primary-nav的所有元素背景颜色设置为#333。

CSS的属性有很多，后边实际运用中我们会介绍重要而且容易出错的属性，其他的需要你自己去查看手册CSS属性参考手册。

CSS的属性除了包括视觉上的样式，还有听觉样式，不过你工作中几乎不会用到，知道还有听觉呈现这个东西就可以了

CSS的属性，其基础是单位，下面专门把颜色和尺寸讲解清楚，颜色和长度单位的选择对你后边写CSS非常重要，需要额外注意。

颜色

在CSS中我们有4种表示颜色的方式：颜色名、16进制、RGB、HSL

比如红色：

color: red; /* 颜色名 */
color: #ff0000; /* 16进制 */
color: rgb(255,0,0); /* rgb */
color: hsl(0, 100%, 50%); /* hsl */

颜色关键字

CSS定义了16个基本的颜色关键字：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

比如设置重要警告内容为黄色：

.warning{
  color: yellow;
}

使用颜色名简单，但是可选颜色太少，书写也不方便，一般只是用来做一些简单的测试。

RGB和RGBA

rgb分别代表红、绿、蓝，通过组合红绿蓝表示不同的颜色，比如表示红色：

color: rgb(255, 0, 0);

rgb()接收三个参数，分别表述红、绿、蓝，取值区间[0,255]：

0表示没有这个颜色，所以rgb(0, 0, 0)是黑色

255分别表示纯色的红、绿、蓝，如果三个值都是255，那就是白色了；三个值一样，介于0~255之间，就是不同程度的灰色

rgb(255, 0, 0); /* red */
rgb(0, 255, 0); /* green */
rgb(0, 0, 255); /* blue */
rgb(255, 255, 255); /* white */

rgb()除了接受三个整数外，还可以接收三个百分数

rgb(100%, 0%, 0%); /* red */

在工作中，基本都是采用整数的表示方式，百分数表示极少见。

RGBA

RGBA在RGB的基础上增加Alpha通道，设置透明度，Alpha取值区间为[0,1]

0是完全透明，1是完全不透明

rgba(255, 0, 0, 1); /* red */
rgba(255, 0, 0, .5); /* 50% opacity red */

这个最常用的用处就是建立一个半透明的背景遮罩

下面的例子我们在一张图片上加上一个灰色半透明的遮罩：

十六进制

十六进制是RGB色彩空间的另一种表示，和上边的rgb()可以完全转换，语法如下：

#RRGGBB

用三个介于00-FF的十六进制数分别表示红、绿、蓝

#FF0000; /* red */
#00FF00; /* green */
#0000FF; /* blue */
#000000; /* black */

如果组成的十六进制的3组数各自都是成对的，可以简写为3位，比如#F00等同于FF0000

HSL和HSLa

HSL是不同于RGB的色彩模式，HSL分别表示色调、饱和度、亮度，通过这三个通道来表示不同颜色。

H(Hue色调)：表示一个色相环，从0到360度取值，0(或360)是红色，120是绿色，240是蓝色

S(Saturation饱和度)：表示颜色的纯度，取值从 0.0% 到 100.0%，数值越大，颜色中的灰色越少，颜色越接近纯色
L(Lightness亮度)：表示颜色的明暗，取值也是 0.0%——100.0%，0%是彻底变暗（黑），100%彻底变亮（白），50%正常亮度

下面的图比较直观（图片来自维基百科）：

HSLA也是在HSL的基础上添加了透明度

hsl(0,  100%,50%)    /* red */
hsl(120,100%,50%)    /* green */
hsl(240,100%,50%)    /* blue */ 
hsla(0,100%,50%,0.05)   /* 5% opaque red */

颜色表示的选择

一般我们都使用十六进制的表示法，书写简单而且和其他软件通用，在需要透明颜色的时候用rgba，hsl在设计上对颜色的变化更好控制，但是这个东西对于大多数程序员来说不像rgb那么只管，用得并不多，不过hsl有可能今后会成为主流。

长度 px, em, rem

这三个都是表示长度的单位，px作为绝对单位（在web页面上），em、rem则是相对单位。

px本身是一个相对单位，一个像素就是显示器上看到的一个点，每个点的大小，取决于显示器的分辨率；

但是CSS规范做了一个规范：将96ppi作为参考像素，浏览器会根据这个标准进行缩放，保证在所有显示器上显示的长度是确定的

px

在网页中，1 px = 1 / 96 in。对于高度、宽度固定的页面，用px非常方便直观，但是考虑到移动端适配，绝对尺寸就很难办。

html{
  font-size: 16px;
}
body{
  max-width: 960px;
}

浏览器默认会设置一个字体大小：16px；也会限制字体大小的范围：9px ~ 72px。

通过设置根元素(html)字体大小，可以改变浏览器默认字体大小的设置：

/* 为了方便计算，我们把html字体大小设置为10px */
html{
  font-size: 10px;
}

font-size具有继承性，如果未设置字体大小，元素的font-size将继承父元素font-size大小

注意下面两个p标签的字体大小：

html{
  font-size: 16px;
}
.title{
  font-size: 32px
}

<p>这是一个常规段落</p>
<div class="title">
  <p>这是在h2中的段落</p>
</div>

em

em是一个相对长度单位，1em = 使用em单位的元素的字体大小（注意不是参考的它的父元素，而是它自己，很多博客和文档这在有问题）

button{
  font-size: 16px;
  padding: .3em .8em;
}

padding的实际大小为：

上下padding 16*0.3 = 4.8 = 5px

左右padding 16 * 0.8 = 12.8 = 13px

对于带小数点的px，现在的浏览器（IE8+、Chrome、Firefox、Safari）都会采用四舍五入的方法取整

rem

rem与em相似，仅参考对象不同，rem始终参考根元素的字体大小

看下面的例子 px, rem, rem：

px, em ,rem的选择

完全明确、不需要缩放的布局，才使用px
em慎重考虑，一般只用在组件内部，不然会导致很麻烦的嵌套计算……
优先考虑rem

分别看一个可缩放的按钮和响应式页面：

可缩放按钮：在组件内使用em

button{
  padding: .3em .8em;
  border: 1px solid #333;
  border-radius: .2em;
  line-height: 1.5;
}

在button内使用em来进行缩放，只要改变字体，就能创建不同尺寸的按钮！是不很方便！

响应式设计：rem

rem结合媒体查询，改变根元素字体大小，适应不同的设备。

推荐阅读：综合指南: 何时使用Em与Rem

CSS选择器

选择器用于标识是哪些元素需要被应用样式规则。

最简单直接通过标签名，就只可以选择文档中所有的该标签；也通过为HTML标签定义class或者id属性，使用类选择器、id选择器；还有什么属性选择器、伪类选择器……

其实道理都一样，反正就是让被选择的元素应用相应的规则，仅仅是写法不同而已。

看几个例子：

标签选择器：

/* 设置所有p标签字体为16px */
p{
  font-size: 16px;
}

类选择器：

<!-- html -->
<div class="info">
  …
</div> 

<!-- css -->
/* 设置所有class为info的元素颜色为绿色 */
.info{
  color: green;
}

类选择器.class-name和后代选择器ancestor-selector descendant-selector会是你工作中用到最多的两个选择器。

CSS选择器参考

基础选择器

组合选择器

CSS 2.1 属性选择器

注：CSS 2.1 属性选择器还有一个特点就是使用多个选择器，同事满足这多个选择器：blockquote[class=quote][cite] { color:#f00; }

CSS 2.1 中的伪类

CSS 2.1 中的伪元素

CSS 3 的同级元素通用选择器

CSS 3 属性选择器

CSS 3 中与用户界面有关的伪类

CSS3 中的结构性伪类

CSS 3 反选伪类

CSS 3 :target伪类

挑战一下

上边的内容学完后，你觉得可以模仿写一个谷歌商务合作的页面么，不需要考虑什么规范、规则，尽量按照自己想的，看看能做到什么程度。实在写不出来了，再继续学习下一课，这样才会明白下节课的内容到底有什么用。

附上你可能需要的CSS属性参考手册，

CSS推荐书单

入门自学——《精通CSS 高级Web标准解决方案》

不要看这本书有点老了，但是目前为止，我仍然觉得它是入门的最佳选择，里边的知识点都有结合实际应用，不会枯燥的。
参考手册——《CSS权威指南》

这本书适合慢慢啃，讲了很多原理、细节，第一遍看可能有很多看不明白或者觉得没用，但是建议你坚持看，到最后你会觉得，原来如此，有道理（很多时候一些疑难杂症的根源都可以从这本书找到）
使用技巧——《CSS 揭秘》

今年（2016）才出的一本书，广受追捧，里边有很多CSS难点和实用技巧，看完它你CSS提升应该算立竿见影了

原文地址：CSS内功心法——基础入门-4光年

拉了一个微信群，仅允许讨论开发相关的

图片发自简书App

最后编辑于：2017.12.05 04:34:57

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,001评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,210评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 161,874评论 0赞 351
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,001评论 1赞 291
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,022评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,005评论 1赞 295
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,929评论 3赞 416
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,742评论 0赞 271
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,193评论 1赞 309
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,427评论 2赞 331
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,583评论 1赞 346
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,305评论 5赞 342
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,911评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,564评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,731评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,581评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,478评论 2赞 352