CSS进阶

2018-07-17 04:16:39来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

CSS介绍
CSS:层叠样式表:Cascading Style Sheets:修改HTML样式
CSS引用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引用CSS</title>
    <!-- 第一种:外部样式 -->
    <link rel="stylesheet" href="style.style">
    <!-- 第二种:内部样式 -->
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <!-- 第三种:行内样式 -->
    <p style="color: red">引用样式</p>
</body>
</html>

CSS选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /*标签选择器
        选择所有p标签*/
        p {}
        /*id选择器
        选择id为xiu的标签*/
        #xiu {}
        /*类选择器
        选择所有class为kang的标签*/
        .kang {}
        /*后代选择器
        选择div里面所有class为kang的标签*/
        div .kang {}
        /*子代选择器
        选择div里面子类的所有p标签*/
        div > p {}
        /*交集选择器
        选择p标签且id为kang的标签*/
        p#kang {}
        /*并集选择器
        选择id为id的标签和class为kang的两个标签*/
        #id,.kang {}
        /*伪类选择器 :link未访问的链接 :visited已访问的链接 :hover鼠标移上去的链接 :active选中的链接*/
        p:hover {}
        /*结构伪类选择器
        选择第一个p标签*/
        p:first-child {}
        /*结构伪类选择器
        选择最后一个p标签*/
        p:last-child {}
        /*结构伪类选择器
        选择第2个p标签 n表示所有 2n表示偶数 2n+1表示奇数*/
        p:nth-child(2) {}
        /*结构伪类选择器
        选择所有偶数的p标签 even偶数 odd奇数*/
        p:nth-child(even) {}
        /*属性选择器
        选择属性为href的a标签*/
        a[href] {}
        /*属性选择器
        选择属性href和属性title的a标签*/
        a[href][title] {}
        /*属性选择器
        选择属性和值为href="url"的a标签*/
        a[href="url"] {}
        /*属性选择器
        选择属性和值为href="url"且title="提示"的a标签*/
        a[href="url"][title="提示"] {}
        /*属性选择器
        选择属性的值以url开头的a标签,该值必须是整个单词*/
        a[href|="url"] {}
        /*属性选择器
        选择属性的值以url开头的a标签*/
        a[href^="url"] {}
        /*属性选择器
        选择属性的值以url结尾的a标签*/
        a[href$="url"] {}
        /*属性选择器
        选择属性的值包含url的a标签,该值必须是整个单词*/
        a[href~="url"] {}
        /*属性选择器
        选择属性的值包含url的a标签*/
        a[href*="url"] {}
    </style>
</head>
<body>
    <p>段落</p>
    <a href="url" title="提示">百度</a>
</body>
</html>

CSS字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style>
        p {
            /*设置字体大小*/
            font-size: 20px;
            /*设置字体*/
            font-family: "宋体","微软雅黑";
            /*字体加粗*/
            font-weight: 700;
            /*字体倾斜*/
            font-style: italic;/*normal 取消样式*/
            /*字体颜色 预定义颜色:red;十六进制颜色:#FF0000;RGB颜色:rgb(255,255,255) */
            color: #aa00cc;/* #aa00cc可以简写为#a0c 两两相同才可以*/
            /*设置行高*/
            line-height: 20px;
            /*设置文字对齐方式*/
            text-align: center;
            /*段落首行缩进*/
            text-indent: 2em;
            /*设置字体装饰 underline下划线 overline上划线 line-through删除线 none无装饰 */
            text-decoration: underline;
        }
        h1 {
            /*字体连写,顺序不能交换,size/family不能省略*/
            /*font: font-style font-weight font-size font-family;*/
            font: 25px "宋体";
        }
    </style>
</head>
<body>

    <p>字体</p>
    <h1>标题</h1>
</body>
</html>

元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><title>块级元素</title>
    <style>
        /* 块级元素 block-level
        总是从新行开始
        高度,行高,外边距都可以控制
        宽度默认是容器的100%
        可以容纳内联元素和其他元素
        常见的块元素:<h> <p> <div> <ul> <ol>等等*/

        /* 行类元素 inline-level
        和相邻的行内元素在一行上
        高宽无效,但水平方向的padding和margin可以设置,垂直方向无效
        默认宽度为他本身内容的宽度
        常见的行内样式有:<a> <strong> <em> <s>等等 */

        /*行内块元素 inline-block
        和相邻行内元素在一行上,但之间有空白缝隙
        默认宽度为他本身内容的宽度
        宽度,高度,外边距都可以控制
        常见的行内块元素有:<img> <input> <td> */

        /*可以将行内元素和行内块元素看作文字对待*/
        div {
            /*将块元素转换为行内元素*/
            display: inline;
        }
        span {
            /*将行内元素转换为块元素*/
            display: block;
        }
        a {
            /*将行内元素转换为行内块元素*/
            display: inline-block;
        }
    </style>
</head>
<body>
    <div></div>
    <span></span>
    <a href="#"></a>
</body>
</html>

CSS的特性

  • 层叠性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><title>继承性</title>
    <style>
        /*一般情况下,如果出现样式冲突,会按照CSS的书写顺序,已最后的样式为准
        样式冲突,遵循的原则为就近原则,那个样式离结构进,就执行那个样式,就近原则
        样式不会冲突,不会层叠
        color样式冲突了,就执行最近的一个color,font-size没有冲突,正常执行 */
        p {
            color: red;
            font-size: 20px;
        }
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>段落</p>
</body>
</html>
  •  继承性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><title>继承性</title>
    <style>
        /*子标签会继承父标签的某些属性,比如:字体颜色和字号*/
        .xiu {
            color: red;
        }
    </style>
</head>
<body>
    <div class="xiu">
        <p>段落</p>
    </div>
</body>
</html>
  • 优先性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><title>优先级</title>
    <style>
        /*
        继承或者*的贡献值 0000
        每个元素的贡献值 0001
        每个类,伪类的贡献值 0010
        每个ID的贡献值 0100
        行内样式的贡献值 1000
        每个!important的贡献值 无穷大
        贡献值越大,越先执行
        贡献值可以叠加,比如:
        div ul li {} -- 0003
        .xiu ul li {} -- 0012
        #xiu ul li {} -- 0102
        */
        .xiu {
            color: red!important;/*最先执行*/
        }
        .xiu {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="xiu">
        <p>段落</p>
    </div>
</body>
</html>

 背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><title>背景图片</title>
    <style>
        body {
            /*添加背景颜色*/
            background-color: red;
            /*添加背景图片*/
            background-image: url(1.png);
            /*no-repeat图片不平铺 repeat-x水平平铺 repeat-y垂直平铺*/
            background-repeat: no-repeat;
            /*设置图片位置 top上 bottom下 left左 right右 也可以写数值x,y值 */
            background-position: right bottom;/*如果只写一个,剩下一个为居中center*/
            /*设置图片滚动 fixed固定 scroll默认滚动而滚动*/
            background-attachment: fixed;
            /*设置图片透明度*/
            background: rgba(0,0,0,0.5);
            /*background连写方式*/
            /*background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置*/
        }
    </style>
</head>
<body>
  
</body>
</html>

边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        table {
            width: 100px;
            height: 100px;
            /*设置边框宽度*/
            /*border-width: 1px;*/
            /*设置边框样式 none无边框 solid实线边框 dashed虚线 */
            /*border-style: dashed;*/
            /*设置边框颜色*/
            /*border-color: red;*/
            /*设置上边框*/
            /*border-top: 1px solid red;*/
            /*border连写*/
            border: 1px solid red;
        }
        td {
            border: 1px solid blue;
        }
        table,td {
            /*合并单元格相邻边框*/
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>修抗</td>
            <td>修抗</td>
        </tr>
        <tr>
            <td>牛皮</td>
            <td>牛皮</td>
        </tr>
    </table>
</body>
</html>

 边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距与外边距</title>
    <style>
        /* padding 用于设置内边距:自身的边框与自身内部内容的距离
        margin 用于设置外边距:自身边框与相邻边框的距离

        margin与padding的语法一样:
        padding-top 上内边距
        padding-right 右内边距
        padding-bottom 下内边距
        padding-left 左内边距
        padding: 3px; 上下左右都是3px
        padding: 3px 4px; 上下为3px,左右为4px
        padding: 2px 3px 4px;上2px,左右为3px,下为4px
        padding: 1px 2px 3px 4px; 上1px,左2px,下3px,右4px
        
        padding不能为负数值
        padding在块级元素下,上下左右可以随意设置,会撑开盒子,一般要减去padding设置的高度宽度
        padding在行内元素只有左右边距有效果,上下不识别

        margin: 0 auto;设置水平居中,auto自动 只对块元素起作用
        margin在块级元素下,上下左右可以随意设置
        margin在行内元素只有左右边距有效果,上下不识别 */

        
    </style>
</head>
<body>
    
</body>
</html>
  • 边距问题:1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*外边距合并*/
        .xiu {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 150px;
        }
        .kang {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 100px;/*最终两个盒子的距离已最大的那个为准*/
        }
    </style>
</head>
<body>
    <div class="xiu"></div>
    <div class="kang"></div>
</body>
</html>
  •  边距问题2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套块元素垂直外边距合并</title>
    <style>
        .xiu {
            width: 400px;
            height: 400px;
            background-color: red;
            border:1px solid red;
        }
        .kang {
            width: 100px;
            height: 100px;
            background-color: blue;
            /*嵌套块元素垂直外边距合并
            如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并
            大概意思就是:
            父元素有个margin-top,子元素有一个margin-top 会合并为最大的margin-top 
            即使父元素的上外边距为0
            解决方法有两种:
            1.为父元素定义一个1px的外边框或上内边框  border:1px solid red;/padding-top: 1px;
            2.为父元素添加overflow:hidden;
            */
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="xiu">
        <div class="kang"></div>
    </div>
</body>
</html>
  • 边距问题3
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边距问题3</title>
        <style>
            .xiu {
                /*宽度width/高度height仅适用于块级元素,对行内元素无效(img/input除外)*/
                width: 300px;
                height: 300px;
                background-color: red;
            }
            .kang {
                height: 100px;
                background-color: blue;
                /*如果子元素没有设置宽度,会继承父元素的宽度,而padding-left则不会撑开盒子*/
                padding-left: 20px;
            }
        </style>
</head>
<body>
    <div class="xiu">
        <div class="kang">修抗</div>
    </div>
</body>
</html>

圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框</title>
    <style>
        .xiu {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*设置边框圆角,可以设置百分比*/
            border-radius: 50px;
            /*border-radius: 50px 50px 50px 50px;*/
        }
    </style>
</head>
<body>
    <div class="xiu"></div>
</body>
</html>

盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子阴影</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            /*设置盒子阴影
            box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内部阴影inset; */
            box-shadow: 2px 2px 2px 2px red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        /*浮动会脱离标准流,不占位置 一般会给浮动添加一个父元素设置高度来占位置
        浮动只会影响后面的标准流,不会影响前面的标准流
        浮动不会超过内边距,不会超出父边框
        浮动只有左右浮动 left左 right右 none默认
        如果一个父盒子中一个子盒子浮动了,则其他子盒子都应该浮动,这样才能一行显示
        浮动可以让元素变成行内块元素
        如果已经给行内元素添加了浮动,此时不需要转换这个元素也可以有宽高了
        浮动的作用: 让多个块元素在一行显示 
        清除浮动:
        子盒子是标准流会撑开父盒子的高度(没有设置盒子高度)
        子盒子浮动就不会撑开父盒子的高度(没有设置盒子高度)
        清除动主要为了解决父元素因为子元素浮动引起内部高度为0的问题
        不是所有情况都需要清除浮动,在影响布局的情况下才清除浮动
        清除浮动的方法:
        1.额外标签法: 在浮动最后添加一个空标签
        <div style="clear:both"></div>
        2.父级添加overflow属性方法
        overflow: hidden;
        3.使用after伪元素清除浮动,额外标签法的升级版
        .clearfix:after {
            content:"";
            display: bloak;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            *zoom: 1; 清除ie7以下的浏览器
        }
        */
        .xiu {
            width: 100px;
            height: 100px;
            background-color: red;
            /*左浮动*/
            float: left;
        }
    </style>
</head>
<body>
    <div class="xiu clearfix"></div>
</body>
</html>

 定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        /*position
        定位属性:
        static:静态定位:所有元素的默认定位方式:作用清除定位
        relative:相对定位:已自己左上角的位置移动
        absolute:绝对定位:根据当前最近父元素设置的定位而定位,不占位置跟浮动一样
        fixed:固定定位:随浏览器滚动而滚动 */

        /*z-index: 1;
        设置层叠等级属性
        默认属性值为0,取值越大,定位元素在层叠元素中越居上
        如果取值相同,则后来居上,没有单位
        只有定位的盒子才有该属性 */
        
        /*设置绝对定位居中的盒子*/
        .xiu {
            width: 200px;
            height: 200px;
            border: 1px solid blue;
            /*设置相对定位*/
            position: absolute;
            /*将盒子向右移动50%*/
            left: 50%;
            /*在将盒子向左移动一半的距离*/
            margin-left: -100px;
            /*默认值*/
            z-index: 0;
        }

        
    </style>
</head>
<body>
    <div class="xiu"></div>
</body>
</html>

显示或隐藏隐藏元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示或隐藏元素</title>
    <style>
        .xiu {
            width: 100px;
            height: 100px;
            border: 1px solid red;

            /*hidden隐藏元素,保留位置 visible显示元素*/
            /*visibility: hidden;*/

            /*none隐藏元素,不保留位置 block显示元素*/
            display: block;/*除了转换为块元素,还有可以显示元素*/

            /*visible默认不剪切内容也不添加滚动条 auto超出部分显示滚动条 hidden隐藏超出内容 scroll总是显示滚动条*/
            overflow: hidden;

           /*设置文本换行 nowrap禁止文本换行 normal默认可以换行*/
            white-space: nowrap;

            /*将超出部分用省略号代替 要和overflow/white-space一同使用 */
            text-overflow: ellipsis;
        }
    </style>
 </head>
<body>
    <div class="xiu"></div>
</body>
</html>

用户样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户样式</title>
    <style>
        div {
            /*pointer小手样式 text选择样式 move十字架样式 default默认鼠标样式*/
            cursor: pointer;
        }
        input {
            /*取消边框轮廓线的做法 轮廓线就是点击输入框默认显示的蓝色边框*/
            outline: none;
            /*在输入框添加图片*/
            background-image: url(1.png);
            /*设置输入框边框*/
            border: 1px solid red;
        }
        textarea {
            /*禁止拖动文本框*/
            resize: none;
        }
        img{
            /*设置垂直对齐 baseline默认基线对齐 middle垂直居中 top顶部对齐
            因为图片是默认以基线对齐,所以图片底部有一点缝隙,取消基线对齐或改成块元素可以解决该问题*/
            vertical-align: baseline;/*行内块元素才有效果*/
        }
    </style>
</head>
<body>
    <div>修抗</div>
    <input type="text"/>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <img src="1.png" alt="">
</body>
</html>

 精灵图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精灵图</title>
    <style>
        /*精灵图的作用
        处理一些零碎的背景图像集中在一张大图上,然后将大图应用到网页上
        为了有效减少服务器接收和发送请求的次数,提高页面的加载速度
        */
        div {
            width: 100px;
            height: 100px;
            background: url(1.png) no-repeat -2px -4px;
        }
        /*滑动门*/
        a {
            height: 30px;
            display: inline-block;
            background: url(1.png) no-repeat;
            padding-left: 15px;
        }
        span {
            display: inline-block;
            background: url(1.png) no-repeat right;
            padding-right: 15px;
        }
    </style>
</head>
<body>
    <div></div>
    <a href="#">
        <span>商业</span>
    </a>
</body>
</html>

字体图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体图标</title>
    <style>
        /*字体图标的好处:
        可以做出图片一样的事情,改变透明度,旋转度...
        但其本质是文字,可以任意改变颜色,产生阴影...
        本身体积更小,但携带的信息并没有消减
        没有兼容问题
        字体图标下载地址:
        国内阿里巴巴图标: http://www.iconfont.cn
        国外的字体图标网站: https://icomoon.io/app  
        将图片转换为字体图标:
        图片后缀名为svg,在https://icomoon.io/app 网页中点击 import Icons 上传然后在选中下载就行了
        追加字体图片:
        以前有字体图标,然后需要在加一个图标在https://icomoon.io/app 网页中点击 import Icons 上传 selection.json文件上传然后在选中下载就行了
        */
       
       /*引用字体图标到网页中*/
       /*第一步,引用字体文件夹fonts*/
        @font-face {/*声明字体,引用字体*/
            font-family: 'icomoon'; /*自己取的名字*/
            src:  url('fonts/icomoon.eot?cj3rhu');/*引用fonts文件夹*/
            src:  url('fonts/icomoon.eot?cj3rhu#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?cj3rhu') format('truetype'),
                url('fonts/icomoon.woff?cj3rhu') format('woff'),
                url('fonts/icomoon.svg?cj3rhu#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        span {
            /*第三步:声明字体*/
            font-family: "icomoon";
        }
    </style>
</head>
<body>
    <!-- 第二步:在demo.html中选择想要的图标,复制粘贴 -->
    <span>?</span>
</body>
</html>

 伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style>
        /*选择第一个字*/
        /*p::first-letter {
            font-size: 30px;
        }*/
        /*选择第一行字*/
        /*p::first-line {
            font-size: 30px;
        }*/
        /*选择鼠标选中的文字*/
        /*p::selection {
            color: red;
        }*/
        /*在盒子内容前面添加一个伪元素*/
        div:before {
            /*必须带一个属性content 伪元素 before就是一个行内盒子*/
            content: "";
        }
        /*在盒子内容后面添加一个伪元素*/
        div::after {
            /*必须带一个属性content 伪元素 before就是一个行内盒子*/
            content: "";
        }
    </style>
</head>
<body>
    <p>段落</p>
    <div></div>
</body>
</html>

CSS3盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3内减边框</title>
    <style>
       /*CSS2的模型的盒子大小为width+padding+border
       可以通过CSS3的box-sizing:border-box来设置盒子,盒子的大小就是width,也就是说border与padding在width里面*/
        .xiu {
            width: 300px;
            height: 300px;
            border: 10px solid red;
            padding: 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="xiu">修抗</div>
</body>
</html>

过度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过度</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*transition: 要过度的属性 过度时间 运动曲线(默认ease) 何时开始(默认0s);
            如果有多个属性用逗号隔开*/
            transition: width 2s ease 0s,height 2s ease 0s;
            /*简写为 all所有过度属性
            transition: all 2s*/
        }
        div:hover {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2D效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D效果</title>
    <style>
        /* 2D效果
        transfrom */
        .xiu{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*移动盒子 translate(x,y)
            水平移动盒子 translateX(x)
            垂直移动盒子 translateY(y)*/
            transform: translate(100px,100px);/*如果只有x,y默认为0*/
        }
        .kang{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*放大缩小 scale(x,y)
            水平放大缩小 scaleX(x)
            垂直放大缩小 scaleY(y)*/
            transform: scale(1,2);/*如果只有x,y默认等比例缩放*/
        }
        .sear{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*旋转度数 rotate(deg)*/
            transform: rotate(10deg);
            /*设置旋转的原点 左下角*/
            transform-origin: right bottom;
        }
        .niu{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*倾斜度数 skew(deg)*/
            transform: skew(10deg);
        }
        
        .niu{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*也可以设置多个效果用空格隔开*/
            transform: skew(10deg) rotate(10deg);
        }
    </style>
</head>
<body>
    <div class="xiu"></div>
    <div class="kang"></div>
    <div class="sear"></div>
    <div class="niu"></div>
    <div class="niu1"></div>
</body>
</html>

CSS动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS动画</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*animation:动画名称 花费时间 运动曲线(默认ease) 何时开始(默认0) 播放次数(默认1/infinite无限) 是否逆向播放(默认normal/alternate逆向播放);*/
            animation: xiu 3s;
        }
        /*声明动画*/
        @keyframes xiu {
            0% {/*开始*/
                width: 100px;
            }
            50% {
                width: 150px;
            }
            100% {/*结束*/
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

flex布局

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
ss文本
  • 首行缩进
p {
    text-indent: 10em;
}
  • 水平对齐
p {
    text-align: left;/*(右对齐)*/
    text-align: right;/*(左对齐)*/
    text-align: center;/*(居中)*/
}
  • 单词间隔
p {
    word-spacing: 10em;
}
  • 字间隔
p {
    letter-spcaing: 10em;
}
  • 行间隔
p {
    line-height: 10px;
}
  • 字符转换
p {
    text-transform: uppercase;/*(全大写)*/
    text-transform: owercase;/*(全小写)*/
    text-transform: capitalize;/*(首字母大写)*/
}
  • 文本装饰
p {
    text-decoration: underline;/*(添加下划线)*/
    text-decoration: overline;/*(添加上划线)*/
    text-decoration: line-through;/*(添加删除线)*/
    text-decoration: none;/*取消文本装饰*/
}
  • 处理空白符
p {
    white-space: normal;/*(合并空格)*/
    white-space: nowrap;/*(禁止换行)*/
    white-space: pre;/*(不忽略空格和换行)*/
    white-space: pre-wrap;/*(不忽略空格和换行)*/
    white-space: pre-line;/*(合并空格,可以换行)*/
}
  • 文本方向
p {
    direction: rtl;/*设置文本方向从右向左*/
    direction: ltr;/*(默认)*/
}
  • 文本阴影
    p {
        text-shadow: 5px 5px 5px red;
    } 

     

css字体
  • css字体
Serif字体、Sans-serif字体、Monospace字体、Cursive字体、Fantasy字体
  • 指定字体
p {
    font-family: Georgia,serif;/*如果没有Georgia字体就设置serif字体,以此类推*/
}
  • 字体风格
p {
    font-style: normal;/*文本正常宣示*/
    font-style: italic;/*文本斜体宣示*/
    font-style: oblique;/*文本倾斜宣示*/
    font-style: normal;/*取消字体风格*/
}
  • 字体变形
p {
    font-variant: snall-caps;/*小型大写字母*/
}
  • 字体加粗
p {
    font-weight: 100-900;/*(400==normal 700==bold)*/
}
  • 字体大小
p {
    font-size: 16px;/*(16px==1em)*/
}
css溢出
p {
    overflow: hidden;/*溢出内容修剪*/
    overflow:scroll;/*始终显示滚动条*/
    overflow: auto;/*溢出内容时显示滚动条*/
    text-overflow: ellipsis;/*溢出内容使用省略号代替*/
}
css链接
  • 设置链接的样式
设置样式必须按照下面顺序
a : link{}/*(未被访问的链接)*/
a : visited{}/*(已访问的链接)*/
a : hover{}/*(指针位于链接上方)*/
a : active{}/*(链接被点击的时刻)*/
  • 常见的链接样式
a {
    text-decoration: none;/*(取消下划线)*/
}
css列表
ul {
    list-style-type: square;
    list-style-image: url(xx.png);
}
css表格
  • 表格边框
table,th,td {
    border: 1px solid red;
}
  • 折叠边框
table {
    border-collapse: collapse;
}
  • 表格宽度和高度
table {
    width: 100%
    height: 50px
}
  • 表格文本对齐
td {
    text-align: right;
    text-align: left;
    text-align: center;
}
  • 表格内边距
td {
    padding: 10px;
}

 

  • 表格颜色
th {
    color: red;
}
css轮廓
p {
    outline: red solid red;
}
css框模型
body {
    width : 70px;
    margin: 10px;
    padding: 5px;
}
 
css内边距
h1 {
    padding: 10px 0.1em 2ex 10%;/*(上右下左)*/
    padding: 10px 10px;/*(上下,左右)*/
    padding-top:10px;/*(上)*/
    padding-right: 0.1em; /*(右)*/
    padding-bottom: 2ex;/*(下)*/
    padding-left: 10%;/*(左)*/
}
css边框
  • 边框样式
div {
    border: 1px solid red;/*(宽度 样式 颜色)*/
    border-top-style: solid;/*(设置上边框样式)*/
    border-right-width: 1px;/*(设置右边框宽度)*/
    border-bottom-color: red;/*(设置下边框颜色)*/
    border-color: transparent;/*(透明边框)*/
}
  • border-radius(圆角)
div {
    border-radius: 25px;
}
  • box-shadow(阴影)
div {
    box-shadow: 10px 10px 5px red;
}
 css外边距
div {
    margin: 10px 0.1em 2ex 10%;/*(上右下左)*/
    margin: 10px 10px;/*(上下,左右)*/
    margin-top:10px;/*(上)*/
    margin-right: 0.1em; /*(右)*/
    margin-bottom: 2ex;/*(下)*/
    margin-left: 10%;/*(左)*/
}
css定位
.div {
    position: static;/*(默认)*/
    position: relative;/*(相对定位)*/
    position: absolute;/*(绝对定位)*/
    position: fixed;/*(固定定位)*/
}
css浮动
img {
    float: right;/*(右浮动)*/
    float: left;/*(左浮动)*/
    float: inherit;/*(继承父类浮动)*/
}
通配符选择器
* {
    color: red
}
元素选择器
<h1>标题</h1>
h1 {
    color: red
}
选择器分组
<h1>标题1</h1>
<h2>标题2</h2>
h1, h2 {
    font-size: 10px;
}
css类选择器
<h1 class="xiu">标题</h1>
.xiu {
    color: red;
}
结合元素选择器
<h1 class="xiu">标题</h1>
h1.xiu {
    color: red;
}
css多类选择器
<h1 class="xiu kang">标题</h1>
.xiu {
    color: red;
}
.kang {
    font-size: 1px;
}
id选择器
<h1 id="xiu">标题</h1>
#xiu {
    width: 1px
}
属性选择器
<a href="url" title="提示">链接</a>
/*第1种方法*/
a[href] {
    text-decoration: none;
}
/*第2种方法*/
a[href][title] {
    text-decoration: none;
}
/*第3种方法*/
a[href="url"] {
    text-decoration: none;
}
/*第4种方法*/
a[href="url"][title="提示"] {
    text-decoration: none;
}

 

部分属性值选择
<h1 class="xiu kang">标题</h1>
h1[class~=xiu] {
    color: red;
}
子串匹配属性选择器
后代选择器
<h1><s>内容<s></h1>
 h1 s {
     color: red;
 }
选择子元素
<h1><s>内容</s></h1>
<h1><p><s>内容</s></p></h1>(不受影响)
h1>s {
    color: red;
}
相邻选择器
/*选择h1后面紧挨后面的h2元素*/
h1 + h2{
    color: red;
}
伪类
<a href="#"></a>
a : link {}/*未被访问的链接*/
a : visited {}/*已访问的链接*/
a : hover {}/*指针位于链接上方*/
a : active {}/*链接被点击的时刻*/
<input type="text" value="红色"/>
/*input获取焦点的时候*/
input : focus {
    color : red;
}

 

<ul>
  <li>1<li>
  <li>2<li>
</ul>
/*获取第一个元素*/
li:first-child{
    color: red;
}
css伪元素
  • :first-letter
/*向文本的第一个字符添加样式*/
p:first-letter {
    color: red;
}
  • :first-line
/*向文本的第一行字符添加样式*/
p:first-line {
    color: red;
}
  • :before
/*在元素前面添加内容*/
p:before{
    content: "0";
}
  • :after
/*在元素后面添加内容*/
p:after{
    content: "0";
}
 
2D效果
  • 修改元素的位置

transform: translate(x,y)

transform: translateX(n)*5

transform: translateY(n)*6

img {
    transform: translate(21px,23px);
}
  • 修改元素大小

transform:scale(x,y)

transform: scaleX(n)*3

transform: scaleY(n)*2

img {
    transform: scale(2,2);
}
  • 倾斜元素

transform:skew(x-angle,y-angle)

transform: skewX(angle)*1

transform: skewY(angle)*4

img {
    transform: skew(10deg,10deg);
}

transform: matrix(1,2,3,4,5,6)

  • 旋转元素

transform: rotete(angle)

img {
    transform: rotate(10deg);
}
 
3D转换
  • 翻转元素
transform:rotateX()
transform:rotateY()
transform:rotateZ()
img{
    transform:rotateX(100deg);
}
  •  透视效果

perspective定义3D元素距视图的距离

定义perspective属性时,其子元素会获得透视效果,而不是元素本身

浏览器暂时不支持perspective属性

Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

/*.kang是.xiu的子元素*/
.xiu{
    height: 150px;
    width: 150px;
    margin: 50px;
    padding:10px;
    border: 1px solid black;
    -webkit-perspective:150;
}
.kang{
    padding: 50px;
    border: 1px solid black;
    background-color: yellow;
    transform: rotateX(45deg);
}
  • 嵌套效果

transform-style设置元素3D嵌套

必须和transform属性一同使用

/*.kang是.xiu的子元素*/
.xiu{
    padding:100px;
    background: red;
    transform: rotateY(60deg);
    transform-style: preserve-3d;
}

.kang{
    padding:60px;
    background: yellow;
    transform: rotateY(80deg);
}
  • 设置元素的重心

transform-origin属性改变旋转元素的重心位置

/*.kang是.xiu的子元素*/
.xiu{
    height: 200px;
    width: 200px;
    margin: 100px;
    padding:10px;
    border: 1px solid black;
}

.kang{
    padding:50px;
    background-color: yellow;
    transform: rotate(45deg);
    transform-origin:20% 40%;
}
css过渡
  • transition: 2s

设置过度时间为2秒

.div {
    width: 100px;
    height: 100px;
    background: red;
    transition: 2s;
}
.div:hover {
    background: blue;
}
  • transition: width 2s, height 4s

设置宽度的过度时间为2秒,高度的过度时间为4s

.div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s,height 4s;
}
.div:hover {
    width: 300px;
    height: 300px;
}
  • transition-delay: 2s

等待2秒执行hover

.div {
    width: 100px;
    height: 100px;
    background: red;
    transition-delay: 2s;
}
.div:hover {
    width: 300px;
    height: 300px;
}
css动画
div {
    animation-name: xiu(定义动画的名称)
    animation-duration: 5s(定义动画的时间,默认为0)
    animation-timing-function: linear(定义动画速度曲线)
    animation-delay: 2s(定义动画开始的时间,默认为0)
    animation-iteration-count: infinite(定义动画播放次数,默认为1)
    animation-direction: normal/alternate(定义动画一周后师傅逆向播放)
    animation-plat-state: paused/running(暂停播放动画)
}
.div {
    animation: xiu 5s linera 2s infinite alternate;
}
div{
    background:red;
    animation:xiu 5s;
}
@keyframes xiu{
    0% {
        width:100px;
        height:100px;
    }
    100% {
        width:300px;
        height:300px;
    }
}
css多列
p {
   column-count: 2;/*定义文本多少列*/
   column-gap: 2px;/*定义列之间的距离*/
   column-rule: 1px solid red;/*定义列之间的样式*/
   column-width: 1px;/*定义列的宽度*/
}
css用户界面
  • 允许用户修改div的大小

resize:both

div {
    border: 1px solid red;
    resize: both;
    overflow: auto;
}
  •  在边框外面在加一个边框

outline添加外边框

outline-offset外边框与内边框的间距

div {
    border: 8px solid black;
    outline: 6px solid red;
    outline-offset: 4px;
}

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:html标题与段落(三)

下一篇:01-HTML深入