css

作者: 两分与桥 | 来源:发表于2018-05-02 17:14 被阅读6次

自己练习的css动画（单标签）
CSS背景、文本、字体、链接、列表、轮廓
CSS 教程
CSS样式
CSS高级
前端开发之 CSS入门
CSS第一天
CSS学习笔记（1）
CSS盒子模型、定位、浮动
每个前端工程师都应该懂的前端性能优化总结：

html 中引用 css 样式有四种模式，链接式，导入式，嵌入式，行内式，常用链接式。

<html>
<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>libai</title>
    <!--链接式，常用-->
    <!--<link href="test.css" rel="stylesheet">-->
    <!--导入式， 不常用-->
    <!--<style>-->
        <!--@import 'test.css';-->
    <!--</style>-->
    <!--这个是嵌入式，不常用-->
    <!--<style>-->
        <!--p{-->
            <!--background: yellow;-->
        <!--}-->
    <!--</style>-->
</head>

<body>
    <!--这是行内式，-->
    <p style="color: brown;font-size: larger">css</p>
    <p>hello world</p>
</body>

</html>

css 选择器，id、class。
E,F：多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔

E F：后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔

css 的属性选择器，通过特定的属性来选择标签

伪类，用来给选择器添加一些特殊效果

<html>
<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>libai</title>

    <style type="text/css">
    a:link{
        color: red;
    }
    a:visited {
        color: blue;
    }
    a:hover {
        color: green;
    }
    a:active {
        color: yellow;
    }
    a:before{
        content: "before element a";
        color: red;
    }
    a:after{
        content: "after element a";
        color: green;
    }
    a{
        font-size: 40px;
![html.png](https://img.haomeiwen.com/i11009893/2d39937649f28e7d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    }
</style>
</head>

<body>
    <a href="#"> hello python </a>
</body>

</html>

在Google浏览器中的检查可以看到，记得 after 和 before 好像在 query 中看到，那时并不懂。

下面代码实现的效果是鼠标hover到图片上，图片就切换

<html>
<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>libai</title>
    <style>
        span{
            display: inline-block;
            width: 18px;
            height: 20px;
            background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
        }
        .one{
            background-position: 0 -0px;
        }
        .one:hover{
            background-position: 0 -20px;
        }
        .two{
            background-position: 0 20px;
        }
        .two:hover{
            background-position: 0 40px;
        }
    </style>
</head>

<body>
    <span class="one"></span>
    <span class="two"></span>
</body>

</html>

跟着老师把抽屉主页扣的 css 扣下来了，抽屉主页：https://dig.chouti.com/
css 也倒是挺好玩的，就是修改样式麻烦了点。
扔上来保存着。

百度云链接：链接：https://pan.baidu.com/s/1jP-sjCT_wu93BxbshABoXA 密码：ua70
yuan 老师的 css教程：http://www.cnblogs.com/yuanchenqi/articles/5977825.html