CSS初阶（1）

前端开发

# 前言

作为走在漫漫前端学习路上的一位自学者。我以学习分享的方式来整理自己对于知识的理解，同时也希望能够给大家作为一份参考。希望能够和大家共同进步，如有任何纰漏的话，希望大家多多指正。感谢万分！

CSS - “我是一个粉刷匠”

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。- 百度百科

如果把前端开发比作盖房子，HTML是盖墙码砖打地基，那CSS就是刷墙吊顶铺地板了。

Web浏览器将CSS规则应用于文档以影响它们的显示方式。

CSS实例

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

选择器：选择你想要把这些声明应用到哪个元素上面。
声明：有一个属性和一个值组成，中间用冒号(:)分开
CSS声明总是以分号(;)结束。
声明组以大括号({})括起来。
属性值与单位之间不要留空格。(例如：1px是对的，1 px不可以)

h1 {                          /* 应用于<h1>元素 */
  color: blue;                /* 字体颜色设置为蓝色 */
  background-color: yellow;   /* 背景色设置为黄色 */
  border: 1px solid black;    /* 设置边框为1像素，黑色，实体线条 */
}

p {                           /* 应用于<p>元素 */
  color: red;                 /* 字体颜色设置为红色 */
}

在Web浏览器中，上面的代码将产生以下输出：

CSS注释代码

/* 注释语句 */

p {
  color: red; /* 把字体颜色设置为红色 */   
}

什么是选择器？

在前面部分我们已经知道CSS规则由选择器和样式声明组成。

选择器 {
    样式;
}

“选择器” 指明了{}中的 “样式” 的作用对象，也就是 “样式” 作用于网页中的哪些元素。

元素选择器

在 CSS 文档中，元素选择器直接以标签名开头来定义。用来为以此类标签命名的元素修改样式。

p {color: blue;} <!-- 所有p元素的字体颜色设置为蓝色。-->

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

在HTML文档里，我们可以给HTML元素设置id属性。

<p id="para">Hello World!</p>

在CSS中，我们可以根据id属性来设置id选择器。

id 选择器以 "#" 开头来定义。

#para {              /* 将下面的样式应用到以“para”为“id”的HTML元素上 */
  text-align:center;
  color:red;
}

ID属性不要以数字开头。
ID属性只能在每个 HTML 文档中只能出现一次。
每个元素只能有一个ID属性。这是一个段落 <!-- 这是错误的 -- >

class 选择器

class 选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。

在HTML文档里，我们可以给HTML元素设置class属性。

<h1 class="center">标题居中</h1>  
<p class="center">段落居中。</p>

在 CSS 文档中，class选择器以一个点"."号开头来定义。

.center { text-align:center; }

一个元素可以同时具有多个class属性。

<p class="para1", class="para2">这是一个段落</p>

通用选择器

它的作用是匹配html中所有标签元素。

使用星号( * )定义所有元素的样式。

* {color：blue;} /* 所有元素的字体颜色为蓝色。*/

子选择器

使用大于符号( > )，可以选择指定标签元素的 第一代子元素。

<ul class="fruit">
  <li>Apple</li>
  <li>Orange</li>
</ul>

.fruit > li {
    color: red;  /* class属性为"fruit"的子元素"li"的文字颜色设置为红色 */
}

上面这行代码会吧class属性为"fruit"的子元素"li"的文字颜色设置为红色。

包含(后代)选择器

包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。

<body>
  <span>这里有一些字</span>
  <p> <span>一些字</span> 这是一个段落</p>
</body>

body span {
    color: red;
}

上面这行代码可以让body元素里面包含的所有span元素的字体颜色设置为红色。

与子选择器不同，子选择器仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。

分组选择符

分组选择符（ , ）可以让多个标签元素设置为同一样式。

h1, p, span {
    color red;
}

上面这行代码可以把h1元素，p元素，span元素的字体颜色都统一设置为红色。

如何插入CSS样式表

插入样式表的方法有三种:

外部样式表
内部样式表
内联样式

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。

每个页面使用 <link>标签链接到样式表。标签放在HTML文档的<head>标签之中。

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

在这个例子中，浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。

在定义<link>元素时，如果要链接CSS文档，需要定义rel属性为stylesheet。href属性定义被连接文档位置。

外部样式表可以在任何文本编辑器中进行编辑。但注意CSS文档需要保存在一个独立的扩展名为" .css "的文件中

内部样式表

使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表，就像这样:

<head>
  <style>
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
  </style>
</head>

内联样式

使用内联样式，你需要在相关的标签内使用样式（style）属性。内联样式一次只能应用到一个元素上。样式声明为style属性的属性值。

<p style="color:sienna; margin-left:20px">这是一个段落。</p>

内联样式在正式开发中不被推荐使用。因为如果以后要批量更改样式的话，开发者就需要一个一个的改，费力费时，不容维护。

继承

CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。

意思就是说，父元素的样式可以传给子元素。

<p>
  我是一个段落
  <span>我是一段文字</span>
</p>

p{color:red;}

在上面的例子中，如果不单独设置元素字体颜色的情况下，元素字体颜色继承父元素，也是红色。

权值

如果我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?

比如：

<p class="para">我是一个段落</p>

p { color:red; }
.para { color:green; }

在上面这个例子中，元素被两次设置颜色。那么这个时候我们要根据权值来判断使用哪种css样式。

下面是权值的规则：

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

p { color:red; } /*权值为1*/
p span { color:green; } /*权值为1+1=2*/
.para { color:blue; } /*权值为10*/
p span.para { color:purple; } /*权值为1+1+10=12*/
#myNote .notePage p { color:yellow; } /*权值为100+10+1=111*/

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，且权值相同，那么属性值改遵循哪一个呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器默认样式
外部样式表
内部样式表（位于 head 标签内部）
内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，也可以理解为离HTML元素越近的样式，拥有越高的优先权。

!important 规则例外

当 !important规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，无论它处在声明列表中的哪里。!important规则还是与优先级毫无关系。但是使用!important不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

p {
    color: red !important;
}

文本样式 (“text”)

通过CSS的Text属性，你可以改变页面中文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等等。

font-family (字体)

我们可以通过CSS为元素内文本设置字体
在这里需要注意，如果浏览者电脑里有你设置的字体，字体才能正常显示。如果没有就显示浏览器默认字体。
代码示例：body{ font-family:"微软雅黑"; } body{ font-family:"Microsoft Yahei"; }

color （颜色）

颜色属性被用来设置文字的颜色。
代码示例：h1 { color: red; } /* h1字体颜色设置为红色 */

代码示例：p { font-size: 12px; } /* p字体大小设置为12px */ （CSS中使用的单位大小，会在后面介绍）

font-weight (粗体)

使用font-weight属性，我们可以把字体加粗。
代码示例：span { font-weight: bold; } /* 把span内的字体加粗 */

font-style (斜体)

使用font-weight属性，我们可以把字体倾斜。
代码示例：a { font-style: italic; }

text-decoration: underline (下划线)

把元素的text-decoration属性设置为underline，我们可以给元素内文本加上下划线。
#underSpan { text-decoration: underline; } /* 为class属性为“underSpan”的元素内文本加上一条下划线 */

text-decoration: line-through (删除线)

元素的text-decoration属性设置为line-through，我们可以给元素内文本加上删除线。
代码示例：#deleteSpan { text-decoration: line-through; } /* 为class属性为“deleteSpan”的元素内文本加上一条删除线 */

text-indent (缩进)

有的时候我们想在段落开始前加两个空格，用text-indent属性可以实现。
代码示例：p {text-indent: 2em;} ( 2em的意思就是文字的2倍大小。)

line-height (行间距 / 行高)

通过line-height属性，我们可以为段落设置行间距。
代码示例：p { ine-height: 1em; } 这句代码意思就是说行高为文字大小1倍，也就是相同。那么行与行之间就没有间隙了。
代码示例：p { line-height: 2em; }这句代码意思就是说行高为文字大小2倍。

letter-spacing (字间距 / 字母间距)

通过letter-spacing属性，我们可以为字与字之间设置距离。
代码示例：p { line-spacing: 10px; } 这句代码意思是，每个字母或者文字之间距离为10px。

text-align（文本排列）

text-align属性可以为块级元素中的文本、图片设置对齐方法。( 块级元素这个概念会在后面讲 )
文本可居中或对齐到左或右,两端对齐。( "left", "right", "center" )
代码示例：h1{ text-align: center; }

文本简写属性

我们可以讲上面这些属性全部简写到font属性里。

body{
    font-style:italic;
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}

就可以缩写成：

body{ font:italic bold 12px/1.5em "宋体",sans-serif; }

可以按顺序设置如下属性：

font-style
font-variant
font-weight
font-size/line-height
font-family

使用这一简写方式你至少要指定 font-size 和 font-family 属性

其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

小练习

请在CodePen里面设置如下样式。

开头一个<h1>元素，居中排列。
元素字体为 “微软雅黑”。
元素字体颜色为 “蓝色”。
元素字体大小为 “15px”。
元素段落开头“2em”缩进。
元素行高为“1.5em”。
元素字间距为“2px”。
其中包含一个元素设置为“加粗”字体。
其中包含一个元素设置为“斜体”字体。
其中包含一个元素文字有一条下划线。
其中包含一个元素文字有一条删除线。

这是我的示例，可以作为参考。

背景样式 ("background")

CSS 背景属性用于定义HTML元素的背景。

background-color : 设置元素的背景颜色。
background-image : 设置元素的背景图像。
background-repeat : 设置背景图像是否及如何重复。
background-position : 设置背景图像的起始位置。
background-attachment : 背景图像是否固定或者随着页面的其余部分滚动。

那么下面我们结合实例分别来讲解一下每个属性的用法：

background-color

background-color 属性定义了元素的背景颜色。

h1 {
    background-color: green;
}

p {
    background-color: rgb(0,0,255);
}

a {
    background-color: #ffff00;
}

background-image

background-image 属性描述了元素的背景图像。

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

body {
    background-image: url("http://p2fuh27b9.bkt.clouddn.com/18-1-13/17000740.jpg");
}

默认情况下图片会这样排列，很多时候我们是不希望这样的，所有就需要设置background-repeat属性

background-repeat

该属性的属性值说明如下：

repeat：背景图像将向垂直和水平方向重复。这是默认
repeat-x：只有水平位置会重复背景图像
repeat-y：只有垂直位置会重复背景图像
no-repeat：background-image不会重复
inherit：指定background-repea属性设置应该从父元素继承

大家可以在CodePen里面尝试一下每个属性值所带来的不同效果。

background-position

background-position 属性改变图像在背景中的位置

background-position 属性提供值有很多方法。

首先，可以使用一些关键字：top、bottom、left、right 和 center；

其次，可以使用长度值，如 100px 或 5cm；

最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

关键字

图像放置关键字最容易理解的作用就像其名字的意义。
例如，top left 使图像放置在元素内边距区的左上角。
只要保证不超过两个关键字：一个对应水平方向，另一个对应垂直方向，那么你可以设置位置关键字以任何顺序出现。（关键字前后顺序无所谓）
如果只有一个关键字，则会默认另一个关键字为 center。（例：：“center = center center”，“top = top center 或 center top”）
如果希望每个段落的中部上方出现一个图像，只需声明 background-position:top;其中水平关键字默认为 center。

百分数值

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，你可以按照下面的代码进行设置background-position:50% 50%;
图像中心与其元素的中心对齐，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：background-position:66% 33%;

长度值

长度值解释的是图像左上角与元素内边距左上角的偏移距离。（内边距会在后面“盒模型”部分讲解）
比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。

background-attachment

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

属性值:

scroll：背景图片随页面的其余部分滚动。这是默认
fixed：背景图像是固定的
inherit：指定background-attachment的设置应该从父元素继承
local：背景图片随滚动元素滚动

background-repeat:no-repeat;
background-attachment:scroll; /* 默认值，不设置的情况下就是这个值。背景图片随页面的其余部分滚动。*/

background-repeat:no-repeat;
background-attachment:fixed;\\背景图像是固定的。

背景简写属性

在以上实例中我们可以看到页面的背景样式可以通过很多不同属性来控制。

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.

背景颜色的简写属性为 "background":

body { background: #ffffff url('img_tree.png') no-repeat right top; }

当使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-attachment
background-position

以上属性无需全部使用，你可以按照页面的实际需要使用。

小练习

请在CodePen中，试着做下列练习。

把一个元素背景设置为蓝色。
在另一个元素上，把一张图片设置为背景。
图片不重复
图片不随段落滚动而滚动。
图片位于段落背景中上部。

这是我的示例，可以作为参考。

颜色值

大家可能注意到了，在前面写颜色属性值的时候，我用了几种不同的写法。

CSS中，颜色值通常以以下方式定义: （不区分大小写）

颜色名称 : 这种是我们最熟悉的，就是想要什么颜色就写什么颜色的英文就好了。（例：“red”，“green”）
RGB颜色表示法 : 就是红(R:red),绿(G:green),蓝(B:blue),，这三原色混合后呈现出的颜色，其中每种颜色的取值为0~255。（例：“rgb(255,0,0)”，“rgb(0,255,0)”）
RGB百分比颜色表示法 ：就是利用百分比来表示RGB颜色，其中RGB中的0就代表百分比中的0%，RGB中的255就代表百分比中的100%。（例：“rgb(0%, 0%, 100%)”，“rgb(0%, 100%, 0%)”）
16进制颜色表示法 : 就是使用三对十六进制数分别表示RGB中的三原色。

比如“#125AFF”，等价于rgb(18,90,255)。
16进制与十进制的对照关系（1到9和十进制一样，之后 A - 10, B - 11, C - 12, D - 13, E- 14, F - 15）。如果16进制数字为 “D3”，那么它对应的十进制数字为 13 x 16 + 3 = 211。
当 16进制颜色表示法中的两个表示颜色值的数字一样的时候可以简写，比如“color:#ff0000”，就可以简写为“color:#f00”。

在这里 16进制颜色对照表可以很方便查看你想要的颜色的16进制代码。

长度值

总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

像素

像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

就是元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；

但当给 font-size 设置单位为 em 时，此时计算的标准以其父元素的 font-size 为基础。

百分比

p { font-size:12px; line-height:130%; }

设置行高（行间距）为字体的 130%（12px * 1.3 = 15.6px）。

好啦，今天的分享就告一段落啦。下一篇中，我会介绍CSS的盒模型，布局，以及一些CSS实用小技巧。

如果喜欢的话就点个关注吧！谢谢各位的支持！

编辑于 2018-10-14 06:51