CSS3开坑_不定期更新

2019-02-14

自己之前稍微开了一下html5的坑，换一个心情，记录一下自己从0学CSS3遇到的一些知识点

主要的学习资料就还是HTML5+CSS3从入门到精通以及一些网上的资料

里面一些图片可能有水印，是因为我没有云啦，就把图片直接弄在CSDN上然后复制过来了，偷个懒

选择器

其实一开始我都没听说过这名词，后来发现就是指# .classname这些定义CSS的方法

就先罗列一下选择器的种类吧，遇到了慢慢学就好：

元素选择器；关系选择器；属性选择器；伪类选择器；伪对象选择器

案例样式

里面会涉及到不少选择器，效果我就不展示了，标一下注释给自己看看

按钮样式

<!DOCTYPE html>
<html lang="en">
<style>
    ul{list-style: none;}
    a.button{
        display: block;float: left;
        position: relative;
        height: 25px; width: 120px;
        margin: 0 10px 18px 0;
        text-decoration: none;
        font: 12px 'Helvetica Neue',Helvetica,Arial;
        font-weight: bold;
        line-height: 25px;
        text-align: center;
    }
    .gray{
        color:#555;
        border-bottom: 4px solid #b2b1b1;
        background: #eee;
    }
    .gray:hover{background: #e2e2e2;}
    /*设置元素在其鼠标悬停时的样式*/
    a.button:before,a.button:after{
        content: '';
        height: 25px;
        width: 120px;
        left: -1px;
        bottom: -1px;
        position: absolute;
        border-radius: 3px;
    }
    /*伪对象选择器*/
    a.button:before{
        height: 23px;
        bottom: -4px;
        border-top: 0;
        border-radius: 0 0 3px 3px;
        box-shadow: 0 1px 1px 0 #bfbfbf;
        /*阴影*/
    }
    a.button{border-radius: 3px;}
    /*圆角*/
</style>
<head>
    <meta charset="UTF-8">
    <title>按钮</title>
</head>
<body>
    <ul id="container">
        <li><a href="#" class="button gray">灰色风格按钮</a></li>
        <li><a href="#" class="button pink">粉红风格按钮</a></li>
        <li><a href="#" class="button blue">蓝色风格按钮</a></li>
        <li><a href="#" class="button green">绿色风格按钮</a></li>
        <li><a href="#" class="button turquoise">天蓝色风格按钮</a></li>
        <li><a href="#" class="button black">黑色风格按钮</a></li>
        <li><a href="#" class="button darkgray">深灰色风格按钮</a></li>
        <li><a href="#" class="button yellow">黄色风格按钮</a></li>
        <li><a href="#" class="button purple">紫色风格按钮</a></li>
        <li><a href="#" class="button darkblue">银灰色风格按钮</a></li>
    </ul>
</body>
</html>

列表样式

这个样式蛮有意思的，我试着做一个手机上小说的目录，蛮有趣的，但遗憾的是找不到好的背景图，比如显示榜单排名热度的标识，本来是打算标识是有颜色的正好，现在就有点枯燥了

<!DOCTYPE html>
<html lang="en">
<style>
    #wrap{
        height: 276px;
        width: 260px;
    }
    #wrap ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
        font-size: 16px;
        color: #777;
    }
    #wrap li{
        line-height: 30px;
        padding: 1px 0 0 28px;
    }
    #wrap li a{
        text-decoration: none;
        color: #777;
    }
    #wrap li a:hover{color: #F63;}
    #wrap li:first-child{
        font-size: 19px;
        color: #81736c;
    }
    /*第一个子元素*/
    #wrap li:nth-child(2){font-weight: bold;}
    /*第二个子元素*/
</style>
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <div id="wrap">
        <ul id="container">
            <li>双周热门推荐</li>
            <li><a href="#">呐喊</a></li>
            <li><a href="#">三体-死神永生</a></li>
            <li><a href="#">白菜鸡肉粉丝包</a></li>
            <li><a href="#">可爱的xiaoyuyu</a></li>
            <li><a href="#">南师虽去，精神永存</a></li>
            <li><a href="#">出师表</a></li>
            <li><a href="#">高等数学A</a></li>
            <li><a href="#">老九门</a></li>
        </ul>
    </div>
</body>
</html>

还有一些蛮有用的伪类比如:disabled;:enabled;:target;:checked都是挺实用的

文本模块

文字怎么书写其实挺细的，就先介绍一些我自己觉得比较常用的吧，反正也是给自己看的233，案例比较靠谱

案例样式

火焰一般的特效字（text-shadow）

<!DOCTYPE html>
<html lang="en">
<style>
    body{background: #000;}
    p{
        text-align: center;
        font: bold 60px helvetica,Arial,sans-serif;
        color: red;
        text-shadow: 0 0 4px white,
            0 -5px 4px #ff3,
            -2px -15px 11px #fd3,
            2px -25px 18px #f20;
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>Text</title>
</head>
<body>
    <div>
        <p>HTML+CSS3</p>
    </div>
</body>
</html>

content与before和after的配合

这个其实emmmm，我还想不出实际意义，可能所有有相同元素的模块都漏东西没加上，用这一招同意增加还是不错的，就不用麻烦js了

<!DOCTYPE html>
<html lang="en">
<style type="text/css">
    a[href $=".pdf"]:after{content: url(xiaoyuyu.jpg)}
    a[rel = "external"]:after{content: "xiaoyuyu"}
</style>
<head>
    <meta charset="UTF-8">
    <title>Content</title>
</head>
<body>
    <a href="http://www.book.com/1688.pdf">HTML+CSS从入门到精通</a><br>
    <a href="http://www.book.com/1688/" rel="external">HTML+CSS从入门到精通</a>
</body>
</html>

能插入的还蛮多的，string/attr/url，挺实用的

网络字体@font-face

<!DOCTYPE html>
<html lang="en">
<style type="text/css">
    @font-face {
        font-family: "lexograph";
        src: url(http://randsco.com/fonts/lexograph.eot);
        src: local("lexographer"),url(http://randsco.com/fonts/lexograph.ttf)format("truetype");
    }
    h1{
        font-family: lexograph,Verdana,sans-serif;
        font-size: 4em;
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>Font-face</title>
</head>
<body>
    <h1>https://woaixiaoyuyu.github.io/</h1>
</body>
</html>

有些时候会有问题，也很迷，但格式差不多就是这样，反正特殊字体，还是换成图片靠谱点，如果数量不多的话

Background

主要就是背景图的操作，CSS3新增了不少

案列样式

设计优惠券（径向渐变）

<!DOCTYPE html>
<html lang="en">
<style type="text/css">
    .stamp{
        width: 387px;
        height: 140px;
        padding: 0 10px;
        position: relative;
        overflow: hidden;
    }
    /*before 设计底色*/
    .stamp:before{
        content: "";
        position: absolute;
        z-index: -1; /* 让该层在文本层下面*/
        top: 0;
        bottom: 0;
        left: 10px;
        right: 10px;
    }
    /*after 设计底色阴影*/
    .stamp:after{
        content: "";
        position: absolute;
        left: 10px;
        top: 10px;
        right: 10px;
        bottom: 10px;
        box-shadow: 0 0 20px 1px rgba(0,0,0,0.5);
        z-index: -2;  /*最底部*/
    }
    /*设计高亮面*/
    .stamp i{
        position: absolute;
        left: 20%;
        top: 45px;
        height: 190px;
        width: 390px;
        background-color: rgba(255,255,255,.15);
        transform: rotate(-30deg);
    }
    /*设计左侧文本*/
    .stamp .par{
        float: left;
        padding: 16px 15px;
        width: 220px;
        border-right: 2px dashed rgba(255,255,255,.3);
        text-align: left;
    }
    /*文本样式*/
    .stamp .par p{
        color: #fff;
        margin: 6px 0;
    }
    .stamp .par span{
        color: #fff;
        margin-right: 5px;
        font-size: 50px;
    }
    .stamp .par .sign{font-size: 34px;}
    .stamp .par sub{
        position: relative;
        top: -5px;
        color: rgba(255,255,255,0.8);
    }
    .stamp .copy{
        display: inline-block;
        width: 100px;
        vertical-align: text-bottom;
        color: rgba(255,255,255,1);
        padding: 10px 6px 10px 12px;
        font-size: 24px;
    }
    .stamp .copy p{
        font-size: 13px;
        margin-top: 12px;
        margin-bottom: 16px;
    }
    .stamp .copy a{
        background-color: #fff;
        color: #333;
        font-size: 14px;
        text-decoration: none;
        text-align: center;
        padding: 5px 10px;
        border-radius: 4px;
        display: block;
    }
    /*风格*/
    /*鹅黄*/
    .stamp_yellow{
        background: #F39B00;
        background: radial-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,0) 5px,#F39B00 5px);
        background-size: 15px 15px;
        background-position: 9px 3px;
    }
    .stamp_yellow:before{background-color: #f3c120
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>Lottery</title>
</head>
<body>
    <div class="stamp stamp_yellow">
        <div class="par">
            <p>上品折扣店</p>
            <sub class="sign">$</sub><span>50.00</span><sub>优惠券</sub>
            <p>订单满 100.00 元</p>
        </div>
        <div class="copy">副券
            <p>2019-02-17<br>
                2019-02-23</p>
            <a href="#">立即使用</a>
        </div>
        <i></i>
    </div>
</body>
</html>

结果还是不错的，以假乱真哈哈

在这里插入图片描述

用户接口样式

控制与用户接口界面相关效果的呈现方式，emmm，听上去很高级，其实就是用户看到的一些像界面边框之类的

案例样式

咕咕咕

本文作者： xiaoyuyu
本文链接： http://woaixiaoyuyu.github.io/2019/02/14/CSS3%E5%BC%80%E5%9D%91-%E4%B8%8D%E5%AE%9A%E6%9C%9F%E6%9B%B4%E6%96%B0/
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！