快速学习Web前端：CSS入门

最新推荐文章于 2016-05-06 09:56:20 发布

天码营

最新推荐文章于 2016-05-06 09:56:20 发布

阅读量233

点赞数

分类专栏：天码营教程 Java Web开发全栈工程师之路文章标签： css web前端 html5 java web

本文链接：https://blog.csdn.net/sinat_30389651/article/details/50783877

版权

天码营教程同时被 2 个专栏收录

82 篇文章 1 订阅

订阅专栏

Java Web开发全栈工程师之路

43 篇文章 2 订阅

订阅专栏

由David发表在天码营

在Web早期样式和内容是不区分的，比如可以通过<bold>标签来显示加粗字体。随着页面内容的丰富，浏览器性能的提高，内容和样式的耦合使得HTML文件难以理解和维护。CSS的出现正是为了将样式分离到独立的文件中。

层叠样式表（Cascading Style Sheets，CSS），又称串样式列表、层次结构式样式表文件，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。

CSS 的历史

最初主流浏览器为了显示更丰富的web文档，不断地将新的标签和属性添加到HTML标签中。这最终使得文档内容与文档样式偶合在一起，难以创建内容清晰的文档。为了解决这个问题，万维网联盟在 HTML 4.0 之外提出层叠样式表（CSS），使用CSS完成样式与内容的分离。

样式与内容分离是计算机软件开发中的一条重要原则。不仅可以更清晰地分别表达样式或者内容，更重要的是这一分离使得二者不再耦合，样式变得可复用、组件化。

引入 CSS

我们知道HTML文件中根节点是<html>标签，它包含<head>和<body>。我们在<head>中可以引入外部的样式文件，文件中的样式将被应用到当前HTML。例如在上一章中的hello.html中引入我们写好的hello.css：

<link rel="stylesheet" href="./hello.css">

引入前后的变化如下图：

其他引入方式

除了在<head>中引入外部CSS文件，还有两种方式可以引入样式：

设置标签的style属性，例如：
```
 <a style="color: red">Strawberry</a>
```
在<html>的任何地方，添加<style>标签，语法同外部CSS文件。例如：
```
 <style>
   a{
     color: red;
   }
 </style>
```

在实际项目中，一般在<head>引入外部样式文件。相比于上述两种方式，样式文件的分离：

利于协同工作。样式往往由设计师负责，而内容往往由前端工程师负责。这样的分离有利于他们的分工。
样式可复用。引入样式时，可以对不同的样式文件进行组合，便于网站风格的建立和管理。

一个 CSS 文件

这是一个简单的 CSS 文件，先不必在意其细节，大致观察一下CSS的语法。

div p{
  padding-left: 20px;
}

body img, body div{
  float: left;
}

.avatar{
  width: 100px;
  height: 100px;
}

可以观察到上述文件分为3部分内容，每一内容都包含一行逗号分隔的字符串、紧接着的一组大括号、以及大括号内的内容。

每一部分称为一个规则（rule），CSS是由多组“规则”组成的；
大括号前的字符串称为选择器（selector），它用来指定该规则用于怎样的元素；
大括号内是“特性”列表，每个特性都用分号结束。

“特性”由“属性”（property）和“值”（value）组成，以冒号分隔：

属性（property）：某一种特性的名称；
值（value）：该特性的设置值。

类型选择器

类型选择器是最常用的CSS选择器，用于选择指定类型的HTML标签。请看：

body{
  margin: 50px;
}

div p{
  padding-left: 20px;
}

body img, body div{
  float: left;
}

设置body：外边距为50像素；
设置body下的p：左侧内边距为20像素；
设置body下的img和body下的div：向左浮动。

现在页面便有了边距，并且图片和下面的文字排成了一行：

类选择器

类选择器用于选择指定class的HTML标签，在CSS库中很常见。首先需要给HTML标签设置class：

<img src="./catty.jpeg" class="avatar">

然后在CSS中用.来选择对应的类：

.avatar{
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

我们设置<img>的长和高使之变成矩形，再把边框圆角设为半边长，此时图片就变成了圆形：

ID选择器

ID选择器用于选择指定id（这是任何HTML标签都可以有的属性，其定义方式见下面的代码）的HTML标签，常用于自定义样式。同样地，先给HTML标签设置id：

<h2 id="subtitle">i am a little, cute catie...</h2>

在CSS中使用ID选择器：

#subtitle{
  font-style: italic;
  color: grey;
}

这样便可以改变h2的字体和颜色了：

伪类选择器

顾名思义，伪类选择器用于选择伪类。伪类（如:hover,:focus）是浏览器生成的，不出现在HTML文件中，主要用于标识用户操作造成的元素状态改变。

例如鼠标悬停时，鼠标所在的元素便会拥有:focus伪类。继续给.avatar类添加一个伪类：

.avatar:hover{
  filter: blur(20px);
  -webkit-filter: blur(5px);
  cursor: pointer;
}

在鼠标悬停在图片上时：

图片会应用一个滤光器：以5像素的尺度进行模糊；
-webkit-是一种CSS前缀，用来支持webkit核心的浏览器；
鼠标指针会变成手形。

请使用 Chrome 内核的浏览器！鉴于优秀的兼容性和对HTML5、CSS3的支持，请您在整个课程的学习过程中都使用Chrome浏览器。

说起CSS前缀，一般CSS属性名都是以字母起始的，它们由W3C标准化。浏览器厂商为了支持一些新的尚未标准化的特性，会提供一些额外的CSS属性。这些属性都会添加该厂商定义的前缀。有四种常见的CSS前缀：

-moz-：支持Firefox
-webkit-：支持Safari、Chrome
-o-：支持Opera
-ms-：支持Internet Explorer

其他选择器

事实上CSS共有5种基本选择器和2种伪类选择器。

基本选择器

类型选择器（h1,p等）：用于选择指定类型的HTML标签；
类选择器（.classname）：用于选择指定class的HTML标签；
ID选择器（#idname）：用于选择指定id的HTML标签；
通配符选择器（*）：用于选择所有类型的HTML标签；
属性选择器（[foo='bar']）：用于选择某属性为指定值的HTML标签；

属性选择器用来选择特定属性值的元素，例如div[class=avatar]可以选择class属性为avatar的<div>元素，当然HTML元素的属性很多，属性选择器可以匹配任何属性。