澳门新浦京电子游戏How to learn CSS

本文由码农网 –
小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

(PostCSS)https://github.com/postcss/postcss

PostCSS 是一个允许使用 JS 插件转换样式的工具。
这些插件可以检查(lint)你的 CSS,支持 CSS Variables 和 Mixins,
编译尚未被浏览器广泛支持的先进的 CSS
语法,内联图片,以及其它很多优秀的功能。

PostCSS
在工业界被广泛地应用,其中不乏很多有名的行业领导者,如:维基百科,Twitter,阿里巴巴,
JetBrains。PostCSS 的 [Autoprefixer] 插件是最流行的 CSS 处理工具之一。

前言

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

今天,我想向大家展示如何巧妙地使用HTML、CSS排序动画和SVG滤镜把生活中可能最可爱的东西之一——动物画到网页上。我们将探讨绘制动物的两种技术:一种使用纯HTML和CSS,另一种使用内联SVG背景图像。

插件

截止到目前,PostCSS 有 200 多个插件。你可以在
插件列表
或 搜索目录
找到它们。
下方的列表是我们最喜欢的插件 – 它们很好地演示了我们可以用 PostCSS
做些什么。

如果你有任何新的想法,开发 PostCSS
插件
非常简单易上手。

零、Introduce&Install

此演示高度实验性质——动画SVG滤镜目前仅在Chrome中可用。

解决全局 CSS 的问题

  • postcss-use
    允许你在 CSS 里明确地设置 PostCSS 插件,并且只在当前文件执行它们。
  • postcss-modules

    react-css-modules
    可以自动以组件为单位隔绝 CSS 选择器。
  • postcss-autoreset
    是全局样式重置的又一个选择,它更适用于分离的组件。
  • postcss-initial
    添加了 all: initial 的支持,重置了所有继承的样式。
  • cq-prolyfill
    添加了容器查询的支持,允许添加响应于父元素宽度的样式.

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>

澳门新浦京电子游戏 1

运行效果图

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

所涉及的动画也很复杂,因此本教程将重点介绍创建这些动物以及栩栩如生的动作所涉及的不同技术。放飞你的创意,自行创作独特和俏皮的动物动画吧。

提前使用先进的 CSS 特性

  • autoprefixer
    添加了 vendor 浏览器前缀,它使用 Can I Use 上面的数据。
  • postcss-cssnext
    允许你使用未来的 CSS 特性(包括 autoprefixer)。
  • postcss-image-set-polyfill
    为所有浏览器模拟了
    image-set
    函数逻辑。

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 可读性

  • precss
    囊括了许多插件来支持类似 Sass 的特性,比如 CSS 变量,套嵌,mixins
    等。
  • postcss-sorting
    给规则的内容以及@规则排序。
  • postcss-utilities
    囊括了最常用的简写方式和书写帮助。
  • short
    添加并拓展了大量的缩写属性。

一、语法

  • 澳门新浦京电子游戏,CSS的语法非常简单,如下:

selector{
    property: value;
}
  • 聪明的你应该在上边的示例就明白了吧,CSS语法便是通过选择器指定特定的呈现样式。

澳门新浦京电子游戏 2

图片和字体

  • postcss-assets
    可以插入图片尺寸和内联文件。
  • postcss-sprites
    能生成雪碧图。
  • font-magician
    生成所有在 CSS 里需要的 @font-face 规则。
  • postcss-inline-svg
    允许你内联 SVG 并定制它的样式。
  • postcss-write-svg
    允许你在 CSS 里写简单的 SVG。

二、选择器

在线演示
 
源码下载

提示器(Linters)

  • stylelint
    是一个模块化的样式提示器。
  • stylefmt
    是一个能根据 stylelint 规则自动优化 CSS 格式的工具。
  • doiuse
    提示 CSS 的浏览器支持性,使用的数据来自于 Can I Use。
  • colorguard
    帮助你保持一个始终如一的调色板。

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

塑造动物外形

演示使用两种不同的技术来创建动物不同身体部位的形状。哈士奇使用CSS border-radius属性,狐狸使用内联背景SVG图像,因为后者的形状更复杂。

其它

  • postcss-rtl
    在单个 CSS 文件里组合了两个方向(左到右,右到左)的样式。
  • cssnano
    是一个模块化的 CSS 压缩器。
  • lost
    是一个功能强大的 calc() 栅格系统。
  • rtlcss
    镜像翻转 CSS 样式,适用于 right-to-left 的应用场景。

2 比较重要的两种选择器

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

/*默认所有元素的外边距为2px*/
*{
    margin: 2px;
}
  • !important选择器:当使用一些外部框架(库)跟自己的样式冲突时,可以使用该选择器,从而避免修改外部框架的源代码,影响整个工程(project)。当然不要轻易使用该选择器,应先从选择器优先级方向解决问题。例:

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

/*自定义样式*/
p{
    color: green !important;
}
  • 此时 <p></p> 元素的字体颜色为绿色。

HTML标记

两只动物都使用嵌套的HTML部分对身体部位进行分组。分组的概念对于创造逼真的动画效果非常重要——当头部移动时,眼睛和耳朵也应该保持一起移动,因为它们是长在头上的。

<!-- Markup for the fox head -->
<div class="fox-head">
  <div class="fox-face">            
    <div class="fox-ears">
      <div class="fox-ear"></div>
      <div class="fox-ear"></div>
    </div>
    <div class="fox-skull"></div>
    <div class="fox-front"></div>
    <div class="fox-eyes"></div>
    <div class="fox-nose"></div>
  </div>
</div>

<!-- Markup for the husky head -->
<div class="husky-head">
  <div class="husky-ear"></div>
  <div class="husky-ear"></div>
  <div class="husky-face">
    <div class="husky-eye"></div>
    <div class="husky-eye"></div>
    <div class="husky-nose"></div>
    <div class="husky-mouth">
      <div class="husky-lips"></div>
      <div class="husky-tongue"></div>
    </div>
  </div>
</div>

每个部分均可以独立移动,并随着其父元素的移动而移动,这样会产生更逼真的效果。不知道你发现没有,尾巴是深深嵌套到其他尾部组件中的。当每个尾巴部分相对于其母体定位,然后旋转相同的量时,就会产生均匀曲线的视觉感。

澳门新浦京电子游戏 3

语法

PostCSS 可以转化样式到任意语法,不仅仅是 CSS。
如果还没有支持你最喜欢的语法,你可以编写一个解释器以及(或者)一个
stringifier 来拓展 PostCSS。

  • sugarss
    是一个以缩进为基础的语法,类似于 Sass 和 Stylus。
  • postcss-html
    允许你在 HTML /
    Markdown
    / Vue
    component
    里编写样式。
  • postcss-scss
    允许你使用 SCSS (但并没有将 SCSS 编译到 CSS)
  • postcss-sass
    允许你使用 Sass (但并没有将 Sass 编译到 CSS)
  • postcss-less
    允许你使用 Less (但并没有将 LESS 编译到 CSS)
  • postcss-less-engine
    允许你使用 Less (并且使用真正的 Less.js 把 LESS 编译到 CSS)
  • postcss-js
    允许你在 JS 里编写样式,或者转换成 React 的内联样式/Radium/JSS。
  • postcss-safe-parser
    查找并修复 CSS 语法错误。
  • midas
    将 CSS 字符串转化成高亮的 HTML。

3 选择器优先级

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

用CSS塑造图形

CSS的border-radius属性大量用来塑造哈士奇的形象。对于许多元素要素,需要对每个边界半径进行逐个控制。例如,下面是如何构造哈士奇后腿的代码:

.husky-hind-leg {
  // ...
  border-top-left-radius: 35% 100%;
  border-top-right-radius: 40% 100%;
}

第一个数字表示曲线从顶部/底部边缘开始的深度,第二个数字表示曲线从左/右边缘开始的深度。

其他形状,如前腿,不能单独用border-radius成形,需要使用transform成形:

.husky-front-legs > .husky-leg:before {
  transform: skewY(-30deg) skewX(10deg);
  transform-origin: top right;
}

一旦图形就位,那么每个元素就能在其父元素中被赋予绝对的基于百分比的位置。这确保每个身体部位的精确放置以及响应性。

文章

  • 一些你对 PostCSS
    可能产生的误解
  • PostCSS
    究竟是什么,是做什么的
  • PostCSS
    指南

你可以在
awesome-postcss
列表里找到更多优秀的文章和视频。

4 参考手册

  • w3school选择器参考手册
  • MDN文档选择器优先级

用SVG塑造图形

至于狐狸,Sass-SVG被用来为每个身体部位创建复杂的SVG形状。SVG图像可以用作背景图像,更好的是,只要它们是基于64或UTF-8编码的,就可以被内联编写(为了最大限度的浏览器支持)。

不过,SVG代码手写起来非常棘手。我使用Adobe Illustrator来创建初始形状:

澳门新浦京电子游戏 4

然后我将每个身体部分保存为SVG图像。SVG代码通过Sass-SVG传输到SCSS样式表。例如,这是狐狸的鼻子:

.fox-nose:before {
  @include svg((viewBox: (0 0 168 168))) {
    // the nose
    @include svg('path', (
      fill: $color-nose,
      d: 'M83.7,86.7c3.3,0,11.6-3.9,11.6-7.1c0-3.2-9.4-3.2-11.6-3.2c-2.2,0-11.6,0-11.6,3.2   C72.1,82.8,80.4,86.7,83.7,86.7z'
    ));

    // the line connecting the nose to the mouth
    @include svg('path', (
      stroke: $color-nose,
      fill: none,
      d: 'M83.7,102.3V86.7'
    ));

    // the mouth
    @include svg('path', (
      stroke: $color-nose,
      fill: none,
      d: 'M94.5,104.9c0,0-5.2-2.7-10.8-2.7c-5.6,0-10.8,2.7-10.8,2.7'
    ));
  }
}

这将在`url()`中生成一个编码的内联SVG字符串,看起来像这样:

.fox-nose:before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg...");
}

由于SVG是一个背景图像,因此它可以被转换和动画化,就像一个HTML元素一样。使用Sass-SVG,Sass $variables可用于完全控制SVG填充和笔触颜色。

通过内联SVG使狐狸响应起来很简单。viewbox属性值((viewBox:(0 0 168
168)))直接来自SVG文件,但只要保持高/宽比率,那么包含SVG背景图像的元素可以是任意大小。狐狸头部的所有部分都是绝对定位的,具有与.fox-head相同的高度和宽度。

书籍

  • Alex Libby, Packt 的 网页设计之精通
    PostCSS
    (2016年6月)

三、布局

“Squigglevision”和SVG滤镜

Squigglevision是一种通过摆动形状轮廓来模拟手绘动画的动画技术。这使得像狐狸和哈士奇这样的场景看上去更加动态化和手绘化,即使动物在不动的时候也是如此。

SVG有一个称为<feTurbulence>的滤镜,可以给任何应用了此滤镜的地方“噪声”。结合<feDisplacementMap>滤镜以指定像素在每个过滤器中移动的距离。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="squiggly-0">
      <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/>
      <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" />
    </filter>
    <filter id="squiggly-1">
      <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
    </filter>

    <filter id="squiggly-2">
      <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
    </filter>
    <filter id="squiggly-3">
      <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
    </filter>

    <filter id="squiggly-4">
      <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="1" />
    </filter>
  </defs> 
</svg>

属性的任何元素。要创建“squigglevision”效果,关键帧动画快速地一次设置一个滤镜

@keyframes squigglevision {
  0% {
    -webkit-filter: url('#squiggly-0');
    filter: url('#squiggly-0');
  }
  25% {
    -webkit-filter: url('#squiggly-1');
    filter: url('#squiggly-1');
  }
  50% {
    -webkit-filter: url('#squiggly-2');
    filter: url('#squiggly-2');
  }
  75% {
    -webkit-filter: url('#squiggly-3');
    filter: url('#squiggly-3');
  }
  100% {
    -webkit-filter: url('#squiggly-4');
    filter: url('#squiggly-4');
  }
}

注意:这些SVG滤镜目前在Firefox中似乎不起作用,因此可以将这样的滤镜动画视为一种渐进增强处理。

使用方法

你可以通过简单的两步便开始使用 PostCSS:

  1. 在你的构建工具中查找并添加 PostCSS 拓展。
  2. 选择插件并将它们添加到你的
    PostCSS 处理队列中。

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>

澳门新浦京电子游戏 5

运行效果图

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

<!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>强调<em>重点</em>
    <strong>强调</strong>
</body>
</html>

澳门新浦京电子游戏 6

运行效果图

  • 常见块状元素:

澳门新浦京电子游戏 7

常见块级元素

  • 常见内联元素:
![](https://upload-images.jianshu.io/upload_images/2022163-c29297b753a391b4.png)

Paste_Image.png
  • 常见内联块状元素:<button><map>

  • 块状元素、内联元素、内联块状元素可以通过 display
    属性进行设置。例:

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

给动物添加动画特效

CSS关键帧不能为我们提供一种方便的排序和组合动画的方法。解决这个问题的最好方法是将动画计划(故事板)作为时间轴,并使用预处理器,如Sass,生成关键帧。

例如狐狸,在概述每个动画应发生的故事板之后,转换和绝对时间偏移(秒)被用于对每个身体部分进行动画处理。以下是SCSS中对狐狸鼻子进行概述的一个例子:

$animations: (
  // ...

  'nose': (
    // resting position
    (4s, 5s, 7s): rotateY(-4deg),

    // nose down
    4.5s: rotateY(-4deg) rotateX(-3deg),

    // fox looks left
    (7.5s, 9s): rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg),

    // fox looks right
    (9.5s, 12s): rotateY(7deg),

    // fox looks straight ahead
    13s: rotateY(0),
  ),

  // ...
);

在这里,$animations是一类Sass
map,其中键是动画的名称(例如“nose”)。每个动画名称的值是另一个map,其中键是以秒为单位的偏移或偏移列表(例如(7.5s,9s)),并且值是每个偏移键的transform属性。

那么,我们怎么把这个map变成@keyframe动画呢?首先,设置全局的$duration:
17s变量——这将是每个动画的总持续时间。然后,使用嵌套的Sass @each ... in ... 循环,我们可以通过对$animations map循环为每个动画生成预期的CSS
@keyframe声明:

@each $animation-name, $animation in $animations {
  // keyframe declaration
  @keyframes #{$animation-name} {
    @each $offsets, $transform in $animation {
      @each $offset in $offsets {
        // offset declaration block    
        #{percentage($offset / $duration)} {
          // transform property
          transform: #{$transform};
        }
      }
    }
  }
}

这将生成如下所示的关键帧:

@keyframes nose {
  14.70588% {
    transform: rotateY(-4deg); }
  23.52941% {
    transform: rotateY(-4deg); }
  29.41176% {
    transform: rotateY(-4deg); }
  41.17647% {
    transform: rotateY(-4deg); }
  26.47059% {
    transform: rotateY(-4deg) rotateX(-3deg); }
  44.11765% {
    transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); }
  52.94118% {
    transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); }
  55.88235% {
    transform: rotateY(7deg); }
  70.58824% {
    transform: rotateY(7deg); }
  76.47059% {
    transform: rotateY(0); } }

在不使用SCSS的情况下,这些百分比的计算可能非常繁琐。它们代表动画的每个步骤中每个所需时间值相对于总$duration的百分比偏移量。

然后可以将动画应用于它们各自的身体部位,例如animation: nose $duration
none infinite;。每个动画的持续时间都得是一样的,这样它们可以无缝循环。

Webpack

webpack.config.js 里使用
postcss-loader
:

module.exports = {
    module: {
        rules: [
            {
                test: /.css$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ]
            }
        ]
    }
}

然后创建 postcss.config.js:

module.exports = {
    plugins: [
        require('precss'),
        require('autoprefixer')
    ]
}

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>

澳门新浦京电子游戏 8

运行效果图

逼真的Easing Curves

制作动画的另一个重要组成部分是看上去要逼真,所以要为动画的每个部分仔细选择(或创建)Easing
Curves。最为生动的Easing
Curves是“正弦曲线”——换句话说,是平滑起伏的Easing
Curves。这样一来,自然动作就不会僵硬地起动或停止,animation-timing-function应该能反映出来。

对于狐狸和哈士奇,我使用cubic-bezier(0.645, 0.045, 0.355,
1)(在这里预览)。此曲线(见下文)开始略快,然后平稳地停住。当然,最好试验曲线以找到最适合动画的那种。

澳门新浦京电子游戏 9

最后:在Chrome中,你可以直观地检查所有排序的动画,以确保它们在正确的时间发生。你只需打开控制台,单击Style选项卡,然后单击播放按钮即可:

希望本教程可以帮助启发你创建更多的序列CSS动物动画!

Gulp

使用
gulp-postcss

gulp-sourcemaps.

gulp.task('css', function () {
    var postcss    = require('gulp-postcss');
    var sourcemaps = require('gulp-sourcemaps');

    return gulp.src('src/**/*.css')
        .pipe( sourcemaps.init() )
        .pipe( postcss([ require('precss'), require('autoprefixer') ]) )
        .pipe( sourcemaps.write('.') )
        .pipe( gulp.dest('build/') );
});

3 层模型

  • 绝对定位:将元素从文档流中拖出来,然后使用 leftright
    topbottom
    属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于
    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>

澳门新浦京电子游戏 10

运行效果图

  • 相对定位:通过leftrighttopbottom
    属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按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>

澳门新浦京电子游戏 11

运行效果图

  • 固定定位:表示固定定位,与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>

澳门新浦京电子游戏 12

运行效果图

npm run / CLI

如果需要在你的命令行界面或 npm 脚本里使用 PostCSS,你可以使用
postcss-cli

postcss --use autoprefixer -c options.json -o main.css css/*.css

四、样式美化

浏览器

如果你想编译浏览器里的 CSS 字符串(例如像 CodePen 一样的在线编辑器),
只需使用 Browserify

webpack。它们会把
PostCSS 和插件文件打包进一个独立文件。

如果想要在 React 内联样式/JSS/Radium/其它
CSS-in-JS
里使用 PostCSS,
你可以用
postcss-js
然后转换样式对象。

var postcss  = require('postcss-js');
var prefixer = postcss.sync([ require('autoprefixer') ]);

prefixer({ display: 'flex' }); //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }

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 文本方向

运行器

  • Grunt:
    grunt-postcss
  • HTML:
    posthtml-postcss
  • Stylus:
    poststylus
  • Rollup:
    rollup-plugin-postcss
  • Brunch:
    postcss-brunch
  • Broccoli:
    broccoli-postcss
  • Meteor:
    postcss
  • ENB:
    enb-postcss
  • Taskr:
    taskr-postcss
  • Start:
    start-postcss
  • Connect/Express:
    postcss-middleware

2 盒子模型

澳门新浦京电子游戏 13

盒子模型结构图

  • 示例代码:

<!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>

澳门新浦京电子游戏 14

运行效果图

澳门新浦京电子游戏 15

调试工具下效果图

  • 其中,橙色为 margin,紫色为 border,浅绿色为
    padding,最内层为content

JS API

对于其它的应用环境,你可以使用 JS API:

const fs = require('fs');
const postcss = require('postcss');
const precss = require('precss');
const autoprefixer = require('autoprefixer');

fs.readFile('src/app.css', (err, css) => {
    postcss([precss, autoprefixer])
        .process(css, { from: 'src/app.css', to: 'dest/app.css' })
        .then(result => {
            fs.writeFile('dest/app.css', result.css);
            if ( result.map ) fs.writeFile('dest/app.css.map', result.map);
        });
});

阅读 PostCSS API
文档
获取更多有关 JS API 的信息.

所有的 PostCSS 运行器应当通过 PostCSS
运行器指南。

3 颜色和背景

  • 颜色可以直接使用RGB值
    十六进制值或者英文单词。如下(颜色效果均为白色):

/*RGB*/
color: (255,255,255);
/*十六进制*/
color: #FFFFFF;
/*英文字母*/
color: white;
  • 前景色属性为 color,背景色属性为 background-color,背景图片为
    background-image,背景图重复属性为 background-repeat

配置选项

绝大多数 PostCSS 运行器接受两个参数:

  • 一个包含所需插件的数组
  • 一个配置选项的对象

常见的选项:

  • syntax: 一个提供了语法解释器和 stringifier 的对象。
  • parser: 一个特殊的语法解释器(例如
    SCSS)。
  • stringifier: 一个特殊的语法 output 生成器(例如
    Midas)。
  • map: source map
    选项.
  • from: input 文件名称(大多数运行器自动设置了这个)。
  • to: output 文件名称(大多数运行器自动设置了这个)。

五、动画

Atom

  • language-postcss
    添加了 PostCSS 和
    SugarSS
    代码高亮。
  • source-preview-postcss
    在一个独立窗口里实时预览生成的 CSS。

1 基本语法

  • CSS动画是使元素从一种样式逐渐变化为另一种样式的效果,你可以改变任意多的样式任意多的次数。
  • 定义动画:请用百分比,或用关键词fromto,等同于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动画属性参考表格:

澳门新浦京电子游戏 16

CSS3动画属性

Sublime Text

  • Syntax-highlighting-for-PostCSS
    添加了 PostCSS 代码高亮。

2 框架

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

Vim

  • postcss.vim
    添加了 PostCSS 代码高亮。

六、预编译语言SCSS

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

WebStorm

自 WebStorm 2016.3
开始,提供了
内建的 PostCSS 支持。

文章摘置:https://github.com/postcss/postcss/edit/master/README.cn.md

七、调试工具

  • chrome浏览器按F12:

澳门新浦京电子游戏 17

调试界面

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

八、推荐资料

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注