How to learn CSS

作者: 唐紫依 | 来源:发表于2016-09-27 02:03 被阅读471次

前言

本人垃圾，害人无数。望各位高人路过批评指正，不胜感激。本文仅介绍笔者所认为的CSS知识主干，学习的方法跟HTML类似，只需记住属性及属性值的种类即可。

零、Introduce&Install

1 语言介绍

层叠样式表（Cascading Style Sheets），常缩写为CSS，是一门样式表语言，用来描述HTML、XML文档的呈现。CSS描述了在屏幕、电子纸、音频或其他媒体上如何渲染元素。话不多说，直接上代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My title</title>
    <style>
        p{
            color: red;
            background-color: gray;
        }
    </style>
  </head>
  <body>
    <p>This is a paragraph.</p>
  </body>
</html>

运行效果图

如上代码，CSS代码描述了 <p></p> 元素的字体颜色为红色 color: red; 和字体背景颜色为灰色 background-color: gray;。

2 引入样式表

link标记（在<head></head>里）：

<!-- 推荐使用这种 -->
<link rel="stylesheet" type="text/css" href="..example/sheet.css" media="all" />

style元素（在<head></head>里）：

<style type="text/css">
     selector{
        property: value;
    }
</style>

内联样式（对应标签里）：

<p style="color: red;"> red </p>

一、语法

CSS的语法非常简单，如下：

selector{
    property: value;
}

聪明的你应该在上边的示例就明白了吧，CSS语法便是通过选择器指定特定的呈现样式。

二、选择器

1 常见的三种选择器

类选择器（Class selectors）：通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。文档中的多个元素可以拥有同一个类名。例：

<h1 class="red">This is a  heading.</h1>
<p class="red">This is a paragraph.</p>

.red{
    color: red;
}

ID选择器（ID selectors）：通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。例：

<p id="red">This is a paragraph.</p>

#red{
    color: red;
}

伪类选择器（Pseudo-classes selectors）：CSS伪类是加在选择器后面的用来指定元素状态的关键字。比如 :hover 会在鼠标悬停在选中元素上时应用相应的样式。例：

<button>button</button>

button{
    opacity: 0.8;
}
button:hover{
    opacity: 1.0;
}

按钮默认透明度为0.8，鼠标悬浮在上面时为1.0

2 比较重要的两种选择器

*选择器：选择所有元素，主要用于对所有元素制定统一样式。例：

/*默认所有元素的外边距为2px*/
*{
    margin: 2px;
}

!important选择器：当使用一些外部框架（库）跟自己的样式冲突时，可以使用该选择器，从而避免修改外部框架的源代码，影响整个工程（project）。当然不要轻易使用该选择器，应先从选择器优先级方向解决问题。例：

/*外部框架样式*/
p{
    color: red;
}

/*自定义样式*/
p{
    color: green !important;
}

此时 <p></p> 元素的字体颜色为绿色。

3 选择器优先级

以下是一份优先级逐级增加的选择器列表：

权值	选择器类型
0	元素选择器、伪元素选择器
1	类选择器、属性选择器、伪类选择器
2	ID选择器

通用选择器 * ，组合符号 +、>、~和否定伪类 :not() 不会影响优先级。
给元素添加的内联样式可看作是具有最高的优先级。
方才提到的 !important 是个例外，技术上与优先级毫无关系。另外，当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更高优先级的声明将会被采用。

4 参考手册

三、布局

1 流动模型

流动模型（Flow）是默认的网页布局模式。也就是说网页在默认状态下的HTML网页元素是根据流动模型来分布网页内容的。
流动模型有以下两个比较典型的特征：
- 块状元素都会在所处包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%，都会以行的形式占据位置。例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流动模式下的块状元素</title>
<style type="text/css">
#box1{
    width:300px;
    height:100px;
}
div,h1,p{
    border:1px solid red;
}
</style>
</head>
<body>
    <div id="box2">box2</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 
    <h1>标题</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 
    <p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 
    
    <div id="box1">box1</div><!--块状元素，由于设置了width:300px，宽度显示为300px-->
</body>
</html>

运行效果图

- 内联元素都会在所处的包含元素内从左到右水平分布显示。例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流动模式下的内联元素</title>
<style type="text/css">

</style>
</head>
<body>
    <a href="http://www.imooc.com">www.imooc.com</a><span>强调</span><em>重点</em>
    <strong>强调</strong>
</body>
</html>

运行效果图

常见块状元素：

常见块级元素

常见内联元素：

Paste_Image.png
常见内联块状元素：<button> 、<map> 等
块状元素、内联元素、内联块状元素可以通过 display 属性进行设置。例：

<style>
    /*设置为内联块级元素*/
    p{
        display: inline-block;
    }
    /*设置为块级元素*/
    p{
        display: block;
    }
    /*设置为内联元素*/
    p{
        display: inline;
    }
</style>

2 浮动模型

任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如 <p>，<div>，<table>，<img> 等元素都可以被定义为浮动。如下代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My title</title>
    <style>
        div{
            width:200px;
            height:200px;
            border:2px red solid;
        }
        #div1{float:left;}
        #div2{float:right;}
    </style>
  </head>
  <body>
    <div id="div1"></div>
    <div id="div2"></div>
  </body>
</html>

运行效果图

3 层模型

绝对定位：将元素从文档流中拖出来，然后使用 left 、right 、top、bottom 属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于 body 元素，即相对于浏览器窗口。例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My title</title>
    <style>
        div{
            width:200px;
            height:200px;
            border:2px red solid;
            position:absolute;
            left:100px;
            top:50px;
        }
    </style>
  </head>
  <body>
    <div id="div1"></div>
  </body>
</html>

运行效果图

相对定位：通过left、right、top、bottom 属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My title</title>
    <style>
        div{
            width:200px;
            height:200px;
            border:2px red solid;
            position:relative;
            left:100px;
            top:50px;
        }
    </style>
  </head>
  <body>
    <div id="div1"></div>
  </body>
</html>

运行效果图

固定定位：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。无论浏览器页面怎么滑动，该元素相对于浏览器窗口的位置不变。例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative样式</title>
<style type="text/css">
#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position: fixed;
    top: 50px;
    right: 100px;
}

</style>
</head>
<body>
    <div id="div1"></div>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
        <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
</body>
</html>

运行效果图

四、样式美化

1 字体及文本属性

字体样式属性表格：

Property	Value（example）	description
font-family	微软雅黑	设置字体
font-size	1.2em	设置字体大小
font-style	italic	字体风格
font-variant	small-caps	字体变形
font-stretch	wider	字体拉伸
font-weight	800	字体加粗
line-height	20px	增加行高

字体属性表格：

Property	Value（example）	description
text-indent	20px	文本缩进
text-align	center	水平对齐方式
vertical-align	sub	垂直对齐方式
word-spacing	2px	字间距
letter-spacing	2px	字母间隔
text-transform	uppercase	文本转换
text-decoration	overline	文本装饰
text-shadow	2px	文本阴影
direction	right	文本方向

2 盒子模型

盒子模型结构图

示例代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative样式</title>
<style type="text/css">
    div{
        margin: 10px 20px;
        border:5px blue solid;
        padding: 5px 5px;
        height:20px;
        width: 100px;
    }
</style>
</head>
<body>
    <div>文本</div>
</body>
</html>

运行效果图

调试工具下效果图

其中，橙色为 margin，紫色为 border，浅绿色为 padding，最内层为content 。

3 颜色和背景

颜色可以直接使用RGB值 ，十六进制值或者英文单词。如下（颜色效果均为白色）：

/*RGB*/
color: (255,255,255);
/*十六进制*/
color: #FFFFFF;
/*英文字母*/
color: white;

前景色属性为 color，背景色属性为 background-color，背景图片为 background-image，背景图重复属性为 background-repeat。

五、动画

1 基本语法

CSS动画是使元素从一种样式逐渐变化为另一种样式的效果，你可以改变任意多的样式任意多的次数。
定义动画：请用百分比，或用关键词from和to，等同于0%和100%。以下是一个定义动画的实例：

/* 一般浏览器 */
@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
/* 火狐、谷歌浏览器 */
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

使用动画实例：

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

查看动画运行效果，以下为CSS3动画属性参考表格：

CSS3动画属性

2 框架

方便易用的CSS3动画库很多，比如animate.css，还有在线预览效果，使用非常方便。

六、预编译语言SCSS

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。相比CSS，SCSS代码更加简洁，且逻辑层次更加清晰。
相关教程请参考慕课网Sass入门篇及慕课网Sass进阶篇。

七、调试工具

chrome浏览器按F12：

调试界面

左侧点击对应的元素，右侧会显示相关选择器及样式表，且可以直接更改属性值进行调试。

八、推荐资料

工具书：《CSS3权威指南》
慕课网入门教程
慕课网CSS3教程
MDN文档
W3c文档

How to learn CSS

前言

零、Introduce&Install

1 语言介绍

2 引入样式表

一、语法

二、选择器

1 常见的三种选择器

2 比较重要的两种选择器

3 选择器优先级

4 参考手册

三、布局

1 流动模型

2 浮动模型

3 层模型

四、样式美化

1 字体及文本属性

2 盒子模型

3 颜色和背景

五、动画

1 基本语法

2 框架

六、预编译语言SCSS

七、调试工具

八、推荐资料

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

JC专题

华南理工大学无线电爱好者协会软件小组

首页投稿（暂停使用，暂停投稿）

程序员

我爱编程