[前端学习笔记] CSS基础笔记03-CSDN博客

本文链接：https://blog.csdn.net/sillyxue/article/details/120589772

一、精灵图

为了有效的减少服务器接收和发送请求的次数，把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，提高页面的加载速度。

<!-- 
        1、设置盒子的高度和宽度
        2、通过 background-position 移动精灵图x、y的位置，来显示图片的部分内容 
        3、背景图片默认左上角对齐的，要往上/左移动图片，是负的。
-->
<style>
        .box2 {
            width: 27px;
            height: 25px;
            margin: 200px;
            background: url(images/sprites.png) no-repeat -155px -106px;
        }
</style>

二、字体图标

鉴于精灵图存在以下缺点：
1）图片文件还是比较大
2）图片放大缩小会失真
3）图片更换很复杂
一些小图标可以使用“字体图标”。字体图标本质是文字，需要下载icomoon字库或阿里iconfont字库。
https://icomoon.io/app/#/select

<!-- 从下载好的demo.html中的复制过来 -->
<span></span>

<style>
    /* 字体声明，用的时候复制style.css中的即可 */
@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?uh4mmv');
    src: url('fonts/icomoon.eot?uh4mmv#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?uh4mmv') format('truetype'),
        url('fonts/icomoon.woff?uh4mmv') format('woff'),
        url('fonts/icomoon.svg?uh4mmv#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
 }
span {
   font-family: 'icomoon';
   font-size: 100px;
   color: pink;
}
</style>

字体图标的使用在实际开发中。通常会结合伪元素选择器、绝对定位来实现：

<style>
@font-face {
       font-family: 'icomoon';
       src: url('fonts/icomoon.eot?uh4mmv');
       src: url('fonts/icomoon.eot?uh4mmv#iefix') format('embedded-opentype'),
       url('fonts/icomoon.ttf?uh4mmv') format('truetype'),
       url('fonts/icomoon.woff?uh4mmv') format('woff'),
       url('fonts/icomoon.svg?uh4mmv#icomoon') format('svg');
       font-weight: normal;
       font-style: normal;
       font-display: block;
}
div {
       position: relative;
       width: 200px;
       height: 35px;
       border: 1px solid red;
}
div::after {
      position: absolute;
      top: 10px;
      right: 10px;
      font-family: 'icomoon';
      /* 或 content: ''; */
      content: '\e9ef';
      color: red;
      font-size: 18px;
}
</style>

字体图标定位

三、CSS边框制作三角

利用CSS的边框可以制作三角形。制作的三角可以通过

.box1 {
/* 长宽必须为0 */
      width: 0;
      height: 0;
      /* 三角形的大小取决于边框的大小 */
      border-top: 10px solid pink;
      border-right: 10px solid red;
      border-bottom: 10px solid blue;
      border-left: 10px solid green;
}
.box2 {
      width: 0;
      height: 0;
      /* 一个三角只需要让一个边框有颜色，其他三个边框透明色即可 */
      border: 10px solid transparent;
      border-left-color: pink;
      margin: 100px auto;
}

CSS三角
一个三角
特殊三角的制作：

.box1 {
      width: 0;
      height: 0;
      /* 1.只保留右边的边框有颜色 上右下左 */
      border-color: transparent red transparent transparent;
      /* 2. 样式都是solid */
      border-style: solid;
      /* 3. 上边框宽度大，右边框宽度稍小，其余的边框该为0 */
      border-width: 20px 10px 0 0;
}

直角三角形

四、用户界面样式

取消表单轮廓
点击表单输入框时默认显示高亮的轮廓，通过以下方式取消：

input,
textarea {
    outline: none;
}

防止拖拽文本域
文本域默认可以通过拖拽右下角改变大小，通过以下方式取消：

textarea {
    resize: none;
}

鼠标样式

<ul>
        <li style="cursor: default;">默认的鼠标样式</li>
        <li style="cursor: pointer;">鼠标小手样式</li>
        <li style="cursor: move;">鼠标移动样式</li>
        <li style="cursor: text;">鼠标文本样式</li>
        <li style="cursor: not-allowed;">鼠标禁止样式</li>
</ul>

五、转换与CSS动画

2D转换【二维平面转换】
转换transform是CSS中具有颠覆性的特征，可以实现元素的位移、旋转、缩放等效果。
1）2D转换之移动translate

    <style>
        div {
            width: 200px;
            height: 200px;
            /* 2.可用百分比：为盒子宽度和高度的百分比！！！ */
            transform: translateY(50%); 
        }
        div:first-child {
            background-color: pink;
            /* 双坐标移动（x,y） */
            /* 1.translate不会影响其他盒子的位置！！！ */
            transform: translate(100px, 50px);
        }
        span {
            /* 3.translate对行内元素无效！！！ */
            transform: translate(100px, 50px);
        }
    </style>

2）2D转换之旋转rotate

.center_rotate {
     width: 150px;
     height: 150px;
     background-color: orange;
     margin: 100px auto;
     transition: all 0.5s;
     /* 设定转换中心，跟方位名词或像素值 */
     transform-origin: left bottom;
}

.center_rotate:hover {
	 /* 顺时针旋转，加负号是反向转，注意单位！！ */
     transform: rotate(360deg);
}

3）2D转换之缩放scale
放大或缩小，不会影响其他盒子。

.test:hover {
      /* 1. 里面放倍数，到原来的多少倍 */
      transform: scale(2, 2);
      /* 2. 只写一个数是等比例缩放 */
      transform: scale(2);
      transform: scale(0.5);
}

4）2D转换综合顺序
顺序不同，效果也会不同。

div:hover {
       /* 先旋转会改变坐标轴方向，所以一半情况下位移放前面 */
       transform: translate(100px, 100px) rotate(180deg);
}

CSS动画

<!-- 
    可以设置多个节点来精确控制一个/一组动画，实现复杂的动画效果。
    动画可以实现更多变化，更多控制，连续自动播放等效果。
    ·动画常见属性：
      animation-name            动画名（必写）
      animation-duration        动画一个周期的时间（必写）
      animation-timing-function 动画的速度曲线，默认ease，linear为匀速
      animation-delay           动画延迟开始时间，默认0s
      animation-iteration-count 动画循环次数，默认1，infinite无限循环
      animation-direction       是否反方向播放，默认normal，alternate下周期反方向
      animation-fill-mode       动画结束后状态，默认backwards回到起始状态，forwards保持结束状态
      animation-play-state      动画运行running/暂停pause
    ·动画简写：
      animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画状态
-->
    <style>
        /* 1. 定义动画 */
        @keyframes move {
            /* 百分比必须为整数！！百分比是对时间的划分 */
            /* 动画序列：0%是动画的开始，100%是动画的完成 */
            /* 开始状态，等价于from */
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(1000px, 0);
            }
            50% {
                transform: translate(1000px, 500px);
            }
            75% {
                transform: translate(0, 500px);
            }
            /* 结束状态，等价于to */
            100% {
                transform: translate(0, 0);
            }
        }
        /* 2. 使用动画 */
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
            /* 调用动画 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 5s;
            animation-timing-function: ease;
            animation-delay: 1s;
            animation-iteration-count: 2;
            /* 下一周期逆向播放 */
            animation-direction: alternate;
        }
        div:hover {
            /* 鼠标放上去暂停 */
            animation-play-state: paused;
        }
    </style>

3D转换【三维平面转换】
3D具有近大远小；物体后面遮挡看不见的特点。

<!-- 
        三维坐标
            x 右边为正值
            y 下面为正值
            z 朝外为正值
        透视
            即视距，人的眼睛到屏幕的距离，单位是像素，产生近大远小的视觉立体效果
-->
    <style>
        body {
            /* 透视写到被观察元素的父盒子上面。数值越大，眼睛离的越远，看到的越小 */
            perspective: 200px;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 两种写法 */
            transform: translateX(100px) translateY(100px) translateZ(100px); 
            /* 三个坐标不能省略，如果没有就写0 */
            transform: translate3d(400px, 100px, 100px);
            /* 数值越大离我们眼睛越大，看到的就越大 */
            transform: translateZ(0);
            /* 旋转方向：“左手准则” */
            transform: rotateX(45deg);
            /* 简写，绕谁谁1 */
            /* transform: rotate3d(x,y,z,deg); */
            transform: rotate3d(1, 0, 0, 45deg);
           /* 让子元素保持3d立体空间环境，默认不开启3D，很重要！常用！给父元素添加 */
            transform-style: preserve-3d;
        }
    </style>

六、设置网页浏览器标签小图标

在线生成ICO图标制作一个.ico文件，文件名必须要favicon.ico，然后放在服务器根目录下面，一般浏览器会自动默认在跟目录下面查找。可以使用下面网站转换生成，并根据方法来使用。在线ico图标转换工具
在这里插入图片描述

七、搜索引擎优化

通过title、description、keyword三种方式优化，列举一些容易被搜索到的关键词。

<title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="description"
        content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

logo搜索引擎优化如下：

<h1>
    <a href="index.html" title="品优购商城">品优购商城</a>
</h1>

八、其他

图片、表单与文字垂直对齐

<!-- 
    vertical-align：只针对行内元素/行内块元素
        baseline 默认基线对齐
        top    顶线对齐
        middle 中线对齐
        bottom 底线对齐
-->
<style>
     img {
        vertical-align: middle;
     }
</style>

文字溢出显示省略号
1）单行溢出显示省略号

<!-- 
        white-space:
            normal 文字显示不开则自动换行
            nowrap 文字显示不开也必须强制一行内显示
        text-overflow: 
            ellipsis 文字溢出的时候用省略号来显示
-->
<style>
        div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 1. 必须强制一行内显示 */
            white-space: nowrap;
            /* 2. 溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3. 溢出的时候用省略号*/
            text-overflow: ellipsis;
        }
</style>

2）多行溢出显示省略号

<!-- 有兼容性问题，适合于WebKit浏览器、移动端 -->
<!-- 推荐由后台人员直接设置显示多少字 -->
<style>
        div {
            width: 150px;
            height: 65px;
            background-color: pink;
            margin: 100px auto;

            overflow: hidden;
            text-overflow: ellipsis;
            /* 这三行复制即可 */
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
</style>

margin负值的妙用

<style>
        ul li {
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            /* 先浮动后压住，右边盒子压住左边盒子的边框 */
            margin-left: -1px;
        }
       ul li:hover {
           /* 1. 如果li没有定位，则鼠标经过添加相对定位即可 */
        position: relative;
        border: 1px solid blue;
       } 
       ul li:hover {
            /* 2.如果li都有定位，则利用z-index提高层级 */
            z-index: 1;
            border: 1px solid blue;
       }
</style>

margin的妙用
4. CSS3盒子模型

<!--
        box-sizing: content-box 默认的，盒子大小为 width+padding+border
        box-sizing: border-box  CSS3盒子模型，盒子大小为 width 
-->
<style>
        /* 在默认里这样写：CSS的盒子模型，盒子大小为width  */
        * {
            margin: 0;
            padding: 0;
            /* padding border 不会撑大盒子了 */
            box-sizing: border-box;
        }
</style>

图片模糊处理

<!-- 滤镜filter：将模糊或颜色偏移等图形效果应用于元素 -->
<style>
        img {
            /* blur函数 括号里面数值越大，图片越模糊 注意数值要加px单位！*/
            filter: blur(15px);
        }
        img:hover {
            filter: blur(0);
        }
</style>

CSS3宽度计算函数

<!-- 计算函数calc() 可以做加减乘除运算 -->
    <style>
        .father {
            width: 300px;
            height: 200px;
            background-color: pink;
        }
        .son {
            /* 宽度为150px多30px */
            width: calc(150px + 30px);
            /* 子盒子宽度永远比父盒子小30像素 */
            width: calc(100% - 30px);
            height: 30px;
            background-color: skyblue;
        }
    </style>

CSS3过渡效果

<!-- transition: 变化的属性 花费时间 运动曲线 何时开始; 
                 (后两个可以省略，默认为ease,0s)
     其中运动曲线：
         linear      匀速
         ease        低速-高速-低速【默认】
         ease-in     加速
         ease-out    减速
         ease-in-out 先加速后减速
-->

    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 谁做过渡给谁加transition */
            /* 如果想要写多个属性，利用逗号进行分割 */
            transition: width .5s, height .5s;
            /* 如果想要多个属性都变化，属性写all就可以了 */
            transition: all 0.5s;
        }
        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>

浏览器私有前缀

    <!-- 
        浏览器私有前缀是为了兼容老版本的写法，新版本的浏览器则无需添加
            -moz-       firefox浏览器私有属性
            -ms-        IE浏览器私有属性
            -webkit-    Safari、Chrome私有属性
            -o-         Opera私有属性
     -->
     <style>
        body{
            /* 提倡的写法 */
            -moz-border-radius:10px;
            -ms-border-radius:10px;
            -o-border-radius:10px;
            border-radius:10px;
        }
     </style>