中国第三届CSS开发者大会

最新推荐文章于 2021-05-16 23:31:48 发布

ManGoYi

最新推荐文章于 2021-05-16 23:31:48 发布

阅读量508

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/mangoyiy/article/details/79664100

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

第三届CSS开发者大会并没有视频资料，只能去看PPT啦。
Mathias Bynens：Things I Didn’t Know About CSS

！important的认知

    // html
    <div class="foo">
        Lorem
        <span class="bar">ipsum</span>
        dolor sit amet...
    </div>

    // css
    .foo .bar  {
       color: red;
    }
    .bar {
       color: green;
    }

效果如：这里写图片描述

这里应该十分清楚，因为.bar的权值没有.foo .bar 的权值高，所以会选择使用了高权值对应的CSS样式，字体是红色。我们想要的是让ipsum的字体颜色变成绿色。

// bad 很多人可能都会直接写!import(但是不推荐这样去写)
.foo .bar  {
    color: red;
}
.bar {
    color: green !important;
}

下面是一种非常推荐的写法（我猜大多数人都应该还不知道吧）

// good
.foo .bar  {
    color: red;
}
.bar.bar.bar.bar.bar.bar {     // 备注： 个数大于两个，而且中间不能有任何间隙            
    color: green;
}

Attribute values

<a href="foo">…</a>
<style>
 a[href="foo"] {
     background: hotpink;
 }
</style>

没有引号的属性值

<a href=foo>…</a>
<style>
 a[href=foo] {
     background: hotpink;
 }
</style>

当如下的情况是无法选择到的

<a href=foo|bar>…</a>        // 没有背景色
<style>
 // 错误写法
 a[href=foo|bar] {     
     background: hotpink;
 }
</style>

正确写法如下：

<a href=foo|bar>…</a>
<style>
// 正确写法
 a[href="foo|bar"] {
     background: hotpink;
 }
</style>

Valid HTML
// 虽然一下的写法是正确的合法的，但是永远不要这么写

<!DOCTYPE html>
<html>
 <head>
    <title>Foo</title>
 <body>

大牛的英文PPT实在是读不下去了，后面越来越多的奇门异术，对css研究真的深。

大漠： CSS Grid Layout
现在大量网页设计基于网格布局。虽说人们通常注意不到它，但杂乱无章的布局时代确实已经过去了，现在是整齐结构化的天下。无论从理论、美学和整齐来说，这样的布局都很好平衡。网格结构是所有现代网站的基础，它总能给最终用户完美无瑕的设计。

现代web布局：

Float
inline-block
display： table
position
Frameworks

最佳web布局：
Flexbox 地址
CSS Grid Layout css-grid
Box Alignment css-align

CSS Grid Layout

网格容器和网格项目

<div class="container">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
</div>

这里写图片描述
CSS网格如下

案例：
定义网格

<div class="cards">
    <div class="card">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour1.jpg" alt="Bristol harbour">
    </div>
    <div class="card">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour2.jpg" alt="Bristol harbour">
    </div>
    <div class="card">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/coloured-balloon.jpg" alt="Bristol harbour">
    </div>
    <div class="card">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/champagne-balloons.jpg" alt="Bristol harbour">
    </div>
    <div class="card">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/funfair-balloons.jpg" alt="Bristol harbour">
    </div>
    <div class="card">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/swatch.jpg" alt="Bristol harbour">
    </div>
    <div class="card">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/minion.jpg" alt="Bristol harbour">
    </div>
    <div class="card">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/where-is-the-basket.jpg" alt="Bristol harbour">
    </div>
    <div class="card">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/pink-balloon.jpg" alt="Bristol harbour">
    </div>
</div>

css

// 九宫格
.cards {
    display: grid;
    /* grid-template-columns: 33.33% 33.33% 33.33%; */
    /* grid-template-columns: 1fr 1fr 1fr; */   
    /* grid-template-columns: 500px 1fr 2fr; */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 200px 200px 200px;
    grid-gap: 20px;
}
.cards img {
    object-fit: cover;
    width: 100%;
    height: 200px;
}

grid有很多种意想不到的布局，这里只是最简单的几个属性值。
相关资料：

Grid规范：链接地址
Box Alignment规范：链接地址
Flexbox规范：链接地址
Flexbox教程：链接地址
Grid教程：链接地址
Grid案例：链接地址
Github：链接地址

SVG知识
SVG引入页面方式

<!-- 当图片引用 -->
<img src="../img/a.svg">

<!-- 内联 动画的最主要实现方法 -->
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 960 200">
<path class="st0 js_svg_path" d="M923,107.3c-11.5,41.5-51.2,38.8-66.5,29.5C829,120,836.9,77.9,810,63.3 c-21.5-11.6-59-5-67.5,33.5"></path>
</svg>

<!-- 当背景引用 -->
.svg{
    background-image:url(../img/a.svg);
}

废话：大部分时间在切一张又一张的设计图，写代码发现写了5000行代码，优化了又优化，发现还不如一张背景图大，网页中70%的流量是被切图占据了。曾经在IE6时代，我们使用png8来实现透明底色，现在换成了png24颜色变成了256的三次方。使用了二倍图三倍图来适应分辨率越来越高的屏幕。iconfont一度及其流行，但是毕竟我们的世界没办法只有单一色彩。期待的是：色彩好，质量高，尺寸小，高动效。刚好SVG可以任何缩放，只有png大小的1/5，相比较png的缺点：就是实时渲染耗时。
这里写图片描述

// 
.svg{
    background-image: url(svg.svg);
}
// 3X图
.png{
    width: 40px;
    height: 40px;
    background-image: url(png.png);
    @media query(min-device-pixel-ratio: 3){
        background-image: url(png@3x.png);
        background-size: 40px 40px;
    }
}

.svg{
    width: 40px;
    height: 40px;
    background-image:url(svg.svg);
}

3
// 减少请求，
.svg{
    width: 40px;
    height: 40px;
    background-image: url(data:image/svg+xml;
    base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy
    53My5vcmcvMjAwMC9zdmciIHdpZHRoP
    SIyIiBoZWlnaHQ9IjQ1OCIgdmlld0JveD0iM
    CAwIDIgNDU4Ij4gIDxwb2x5bGluZSBmaWxs
    PSJub25lIiBzdHJva2U9IiM5Nzk3OTciIHBvaW5
    0cz0iMS4zNDQgLjQ2OSAxLjM0NCA1OS43ODEgMS4
    zNDQgMjYxLjQzOCAxLjM0NCAzNzQuMTI1IDEuMzQ0IDQ
    wOS42ODggMS4zNDQgNDI3LjUgMS4zNDQgNDUxLjI
    xOSAxLjM0NCA0NTcuMTU2Ii8+PC9zdmc+);
}

小鷄SVG

    <!-- 小鷄svg -->
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="bird" width="100" viewBox="0 0 64.3 72.2">
        <path class="wing" d="M41.6,37.6c-0.5-0.1-1.1,0.2-1.2,0.8c-0.1,0.5,0.2,1.1,0.8,1.2c1.3,0.3,2.5,2.2,2.9,4.3
    c0.2,0.9-0.3,2.3-1.1,3.4c-0.9,1.1-2,1.9-2.9,2c-1.3,0.1-2.3-2.5-2.6-4c0-0.1,0-0.2-0.1-0.3c-0.1-0.5-0.7-0.9-1.2-0.8
    c-0.5,0.1-0.9,0.6-0.8,1.2c0,0.1,0,0.1,0.1,0.3c0.2,1.4-0.2,3-1.2,4.3c-1,1.4-2.5,2.3-3.9,2.4c-0.6,0.1-1-0.1-1.4-0.4
    c-0.9-0.9-1-2.9-0.9-3.7c0-0.5-0.3-0.9-0.8-1c-0.5-0.1-1,0.2-1.1,0.6c0,0-1.5,4.1-4.4,4.9c-1,0.3-1.4-0.1-1.6-0.2
    c-1-0.8-1.1-3.3-1.1-4.1c0-1.4,1.8-2.6,2.6-3c0.5-0.3,0.7-0.9,0.4-1.3c-0.3-0.5-0.9-0.7-1.3-0.4c-0.4,0.2-3.7,2-3.7,4.9
    c0.1,2,0.3,4.4,1.9,5.6c0.6,0.4,1.3,0.7,2.1,0.7c0.4,0,0.8-0.1,1.2-0.2c1.9-0.5,3.3-1.9,4.3-3.2c0.2,0.7,0.6,1.4,1.1,1.9
    c0.8,0.7,1.8,1.1,2.9,1c2-0.2,4-1.4,5.4-3.2c0.4-0.6,0.8-1.2,1-1.8c0.8,1.1,1.8,2,3.3,1.9c1.5-0.2,3.1-1.2,4.3-2.8
    c1.2-1.6,1.8-3.4,1.5-4.9C45.5,40.5,43.7,38,41.6,37.6z" />
        <path class="eye" d="M40,27.5L40,27.5c0.2,0,0.5,0,0.7-0.1c1-0.2,2-0.9,2.5-1.9c0.4-0.8,0.5-1.7,0.3-2.4
    c-0.6-1.4-3.1-1.9-4.3-1.9c-0.4,0-0.7,0-1,0.1c-0.2,0-0.3,0.1-0.4,0.2c-0.6,0.6-1.4,1.9-0.7,3.5C37.6,26.2,38.2,27.5,40,27.5z
    M39,23.2c0,0,0.1,0,0.2,0c1,0,2.2,0.4,2.4,0.6c0,0.1,0,0.4-0.2,0.7c-0.1,0.2-0.5,0.7-1.1,0.8c-0.1,0-0.2,0-0.3,0h0
    c-0.4,0-0.6-0.2-1.1-1.4C38.7,23.8,38.9,23.5,39,23.2z" />
        <path d="M64.3,29.5c-0.3-1-1.6-1.3-2-1.3l-4.5-0.8c4.8-2.6,4.8-3.7,4.8-4.1c0-0.5-0.3-1-0.8-1.2
    c-1.7-0.8-7.5-1.7-8.5-1.8c-1.8-3.5-5-6.4-9.4-8.9c0,0,0,0-0.1-0.1c-0.4-0.3-7.2-5.6-11.7-9.1C32.1,2.2,32,2.1,32,2.1
    c-0.6-0.2-2.4-1-3.6-0.2c-0.5,0.3-0.8,0.9-0.8,1.5c-3.6-2.7-5.9-3.8-6.9-3.2c-0.3,0.1-0.9,0.5-0.8,1.6c0.2,2.6,2.6,5.9,4.4,7.7
    c-0.2,0.1-0.4,0.1-0.6,0.2c-3.2,1.3-2.6,13.1-2.3,18.1l0.1,7.6c0,1.6-1.1,2.9-2.7,3.2c-1.5,0.2-3,0.3-4.6,0.3
    c-0.8,0-1.7-0.1-2.7-0.1c0.6-3.8-0.6-8.2-2.4-9.1c-0.8-0.4-1.6-0.2-2.2,0.5c-0.6,0.7-0.9,1.8-1,3.3c-0.5-1.2-0.9-2.1-0.9-2.2
    c-0.5-1.2-1.6-3.1-3-2.8c-1.3,0.2-1.7,1.9-1.8,3.4c-0.5,4.7,1.4,7.3,2.3,8.3c0,0,0,0,0,0c-0.1,0.4-3.3,9,1.7,14.9
    c2.9,3.4,6.6,6.9,12.1,9v7.2c0,0.6,0.4,1,1,1s1-0.4,1-1v-6.5c2.5,0.7,5.3,1.1,8.6,1.2v4.1c0,0.6,0.4,1,1,1s1-0.4,1-1v-4.1
    c12.5-0.4,20.3-6.7,23.4-12.7c2.2-4.1,3.4-10.9,3.6-17.8c2.4-0.6,4.9-1.9,7.5-3.8C64.1,30.9,64.5,30.2,64.3,29.5z M60.1,23.6
    c-0.9,0.8-2.9,1.9-4.9,2.9c-0.1-0.6-0.2-1.1-0.3-1.6c-0.2-0.8-0.4-1.7-0.7-2.4C56.3,22.8,58.7,23.2,60.1,23.6z M31.1,3.9
    c2.9,2.3,5.1,4,6.7,5.3C36.7,9,35.4,9,34.2,8.9c0,0,0,0,0,0c-2.3-2.1-4.4-4.5-4.6-5.3C29.9,3.5,30.5,3.7,31.1,3.9z M26.7,9
    c-0.7-0.5-4.2-4.1-4.8-6.9c1.6,0.7,5.5,3.6,9.2,6.7C29.7,8.9,28.2,8.9,26.7,9C26.7,9,26.7,9,26.7,9z M8.3,31.5
    c0.7,0.7,1.8,3.8,1.1,7.2c-0.6,0-1.1,0-1.7,0.1c0-0.2,0-0.4,0-0.6C7.6,34.5,7.8,32.3,8.3,31.5z M2.1,32.1c0.1-0.6,0.2-1,0.2-1.3
    c0.3,0.3,0.6,0.9,0.8,1.3c0.6,1.4,2.2,5.2,2.6,6.9c-0.5,0.1-1,0.1-1.4,0.2c-0.1-0.1-0.1-0.2-0.2-0.2C4.1,39,1.6,37,2.1,32.1z
    M50.4,52.3c-2.9,5.5-10.3,11.5-22.3,11.6l-0.6,0c-11.7,0-17.5-4.9-22-10.1c-3.7-4.3-2-10.7-1.5-12.4c1.3-0.4,3.7-0.6,6.9-0.6
    c1.1,0,2.2,0,3.1,0.1c1.6,0.1,3.3,0,4.9-0.3c2.5-0.4,4.4-2.6,4.4-5.1l-0.1-7.7c-0.6-8-0.1-15.6,1-16.2c0.9-0.4,3.5-0.6,6.9-0.6
    c4.2,0,7.7,0.3,8.2,0.6c0.1,0.1,0.4,0.2,0.8,0.4c2.8,1.2,11.2,5,12.7,13.5C54.9,35.6,53.2,47.1,50.4,52.3z M55.8,33.3
    c0-1.4-0.1-2.9-0.2-4.3l6.2,1.1C59.7,31.7,57.7,32.7,55.8,33.3z" />
    </svg>

ManGoYi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
中国第三届CSS开发者大会

第三届CSS开发者大会并没有视频资料，只能去看PPT啦。 Mathias Bynens：Things I Didn’t Know About CSS！important的认知 // html &lt;div class="foo"&gt; Lorem &lt;span class="bar"&gt;ipsum&lt;/span&gt; ...
复制链接

扫一扫

专栏目录