CSS学习归纳6

最新推荐文章于 2024-07-13 20:38:58 发布

SPIRIT_SYF

最新推荐文章于 2024-07-13 20:38:58 发布

阅读量877

点赞数 24

文章标签：学习 css html 前端

本文链接：https://blog.csdn.net/SPIRITE_SYF/article/details/137563937

版权

前面几节中，学习了很多主干内容。尤其是浮动，定位极为关键。在实际的页面设计中也十分常用。今天我们学习一些更为细节的内容，有助于提高运行效率和显示效果。

一、精灵图

1.1 什么是精灵图

精灵图其实就是由很多小图片集合而成的大图片。

使用精灵图可以减少网络请求，减少了浏览器向服务器发送的请求次数,提高了网页加载速度。

1、精灵图主要针对背景图片使用的。2、使用 backgroun-position 调用。3、x向右为正，y向下为正。

1.2 精灵图使用的原理

给一个盒子设置好长宽，将精灵图导入，然后调整精灵图的位置，使想要的内容显示在我们设置好的盒子内。

1.3如何使用精灵图

有两种书写模式，一种是分开写，一种是合并写。

    .box {
      width: 60px;
      height: 60px;
      /* 分开写 */
      /* background-image: url(images/sprites.png);
      background-position: -182px 0; */
      /* 一起写 */
      background: url(images/sprites.png) no-repeat -155px -106px;
    }

1.4使用精灵图拼写名字的案例

这个的思路其实就是设置一个大盒子，内部防止很多行内块，设置行内块大小，然后导入精灵图，移动至合适位置。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 60px;
      height: 60px;
      /* 分开写 */
      /* background-image: url(images/sprites.png);
      background-position: -182px 0; */
      /* 一起写 */
      background: url(images/sprites.png) no-repeat -182px 0;
    }

    .box2 {
      width: 60px;
      height: 60px;
      /* 分开写 */
      /* background-image: url(images/sprites.png);
      background-position: -182px 0; */
      /* 一起写 */
      background: url(images/sprites.png) no-repeat -155px -106px;
    }

    .box3 span {
      display: inline-block;
    }

    .box3 .s {
      width: 100px;
      height: 112px;
      background: url(images/abcd.jpg) no-repeat -260px -420px;
    }

    .box3 .p {
      width: 100px;
      height: 112px;
      background: url(images/abcd.jpg) no-repeat -490px -280px;
    }

    .box3 .i {
      width: 70px;
      height: 112px;
      background: url(images/abcd.jpg) no-repeat -320px -135px;
    }

    .box3 .r {
      width: 100px;
      height: 112px;
      background: url(images/abcd.jpg) no-repeat -140px -410px;
    }


    .box3 .t {
      width: 100px;
      height: 112px;
      background: url(images/abcd.jpg) no-repeat -370px -420px;
    }
  </style>
</head>

<body>
  <h1>为什么使用精灵图</h1>
  将小图片整合到大的图片中。减少网络请求 将多个图像合并成一个精灵图,减少了浏览器向服务器发送的请求次数,提高了网页加载速度。
  <h1>使用精灵图 sprite 的原理</h1>
  1、精灵图主要针对背景图片使用的。
  2、使用 backgroun-position 调用
  3、x向右为正，y向下为正
  <h1>如何使用精灵图</h1>
  <div class="box1"></div>
  <div class="box2"></div>
  同一张图片，改变了位置。
  <h1>拼一个名字</h1>
  <div class="box3">
    <span class="s"></span>
    <span class="p"></span>
    <span class="i"></span>
    <span class="r"></span>
    <span class="i"></span>
    <span class="t"></span>
  </div>
  <h1>精灵图的缺点</h1>
  1、图片文件比较大。2、图片本身放大和缩小会失真。3、一旦图片制作完成想改变会很困难。

</body>

</html>

1.5 精灵图的缺点

1、图片文件比较大。

2、图片本身放大和缩小会失真。

3、一旦图片制作完成想改变会很困难。

二、字体图片

2.1 字体图片的使用场景

首先明确，字体图片是字体不是图片。其次字体图片向我们展示的是形式是图片。

用于网页显示中通用、常用的小图标。这是因为精灵图的缺点，所以选择使用字体图片解决。

2.2 字体图片的特点

展示的是图标，但是本质是字体。所以可以改变文字的属性。

1、轻量级：字体图标比一般的图像小。一旦字体加载了，图标立刻加载，减少了服务器请求。

2、灵活性：本质是文字，所以可以改变颜色、阴影、透明效果、旋转

3、兼容性强：几乎支持所有的浏览器。

注意：字体图片是对精灵技术的一些提升优化，但是不能代替精灵图。

2.3 字体图片的总结

1、遇到结构和样式简单的，可以使用字体图标。

2、如果一些结构和样式复杂的，可以使用精灵图。

2.4 字体图片如何下载

可以使用下面的网址：

1、http://icomoon.io

2、http://www.iconfont.cn/

2.5 字体图片如何使用

1、将下载后的压缩文件中的fonts文件放在页面的根目录下（和HTML同级）。注意到：fonts文件有多个格式，是为了兼容性考虑。

2、css字体声明，从下载的icomoon的文件下的style.css中直接复制即可。

3、通过下的文件下的demo查看自己的图标，直接复制对应的小方框。

4、给标签声明字体font-family：。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 字体声明 */
    @font-face {
      font-family: 'icomoon';
      src: url('fonts/icomoon.eot?p4ssmb');
      src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
        url('fonts/icomoon.woff?p4ssmb') format('woff'),
        url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }

    /* 给标签声明字体 */
    span {
      font-family: 'icomoon';
    }
  </style>
</head>

2.6 字体图片文件如何扩充

1、当原先的字体图标不够用时，需要要添加新的字体图标进来。

2、压缩包找到selection.json在网页中重新上传，然后选择想要添加的图标，然后重新下载新的压缩包，替换原有fonts文件即可。

三、用CSS画一个三角形

我们一般给一个盒子会增加边框，但是如果当我们让这个盒子的长宽都为0，再去设置边框，会是如下的效果。

所以如果我们适当的设置某3个的背景为透明色，那么就可以得到三角形。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 0;
      height: 0;
      border-top: 100px solid green;
      border-right: 100px solid blue;
      border-bottom: 100px solid red;
      border-left: 100px solid chocolate;
    }

    .box2 {
      width: 0;
      height: 0;
      border-top: 100px solid transparent;
      border-right: 100px solid transparent;
      border-bottom: 100px solid transparent;
      border-left: 100px solid chocolate;
    }
  </style>
</head>

<body>
  <h1>盒子没有长宽时，如果只设置边框 </h1>
  <div class="box1"></div>
  <h1>所以如果将其他的改成透明transparent，就可以出现三角 </h1>
  <div class="box2"></div>
</body>

</html>

四、用CSS画一个一般的三角形

如果我们设置4条边框都存在，将会得到上部分的结果。但是如果我们让其中的某几条边框不存在亦或是像素不一样，是不是样子就变了呢。

所以如果画一个一般的三角形则需要我们，设置某几条边框不存在亦或是像素不一样。

比如，设计一个这样的内容：

思路分析：

1、需要一个大盒子承装旧价格，新价格。在新价格中我们需要再使用定位技术定位一个白色的三角形实现中间斜线的效果。

2、新价格，旧价格应该采用浮动一个靠左，一个靠右。

3、新价格应该包括两个内容，一个是文字，一个是通过定位实现覆盖效果的小三角。因为小三角是定位，所以应该是绝对定位。所以新价格的标签应该增加一个相对定位的属性。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box1 {
      width: 0;
      height: 0;
      border-top: 200px solid transparent;
      border-right: 100px solid blue;
      border-bottom: 0px solid red;
      border-left: 0px solid chocolate;
    }

    .box2 {
      width: 0;
      height: 0;
      border-top: 200px solid transparent;
      border-right: 100px solid blue;
      border-bottom: 0px solid red;
      border-left: 0px solid chocolate;
    }

    .price {
      width: 160px;
      height: 24px;
      line-height: 24px;
      margin: 0 auto;
      border: 1px solid red;
    }

    .price .new {
      position: relative;
      float: left;
      width: 90px;
      background-color: red;
      text-align: center;
      color: #fff;
      font-weight: 700;

    }

    .price .new i {
      position: absolute;
      right: 0;
      width: 0;
      height: 0;
      border-color: transparent #fff transparent transparent;
      border-style: solid;
      border-width: 24px 10px 0 0;
    }

    .price .old {

      /* float: right; */
      margin-left: 12px;
      text-align: center;
      text-decoration: line-through;

    }

    .box3 {
      width: 0;
      height: 0;
      border-top: 200px solid aquamarine;
      border-right: 100px solid blue;
      border-bottom: 0px solid red;
      border-left: 0px solid chocolate;
      margin: 50px auto;
    }
  </style>
</head>

<body>
  <h1>前面学到的是正方形取等边三角形，但是其他的还没学习</h1>
  <div class="box1"></div>
  <h1>写一个例子</h1>
  <div class="price">
    <span class="old">$459</span>
    <span class="new">$299
      <i></i>
    </span>
  </div>
  <div class="box3"></div>
</body>

</html>

五、使用CSS优化用户操作界面

其实感觉有关用户界面优化的内容都比较生动，因为我们自己在学习的过程中也在感受这个优化的过程，学习起来比较生动，不枯燥。

5.1 鼠标样式 cursor（鼠标移至不同的行不同的效果）

1、default 默认

2、pointer 小手

3、move 移动

4、text 文本

5、not-allowed 禁止

5.2 轮廓样式 outline

一般我们在对输入框点击后，边框会高亮，如果需要取消高亮，我们则需要重新设置。

outline: none;

5.3 防止表单域拖拽 rezize

注意：文本域书写代码时，保持在一行，否则内部自带空白区域

一般的文本域是可以拖动改变大小的，所以我们需要重新对这一属性进行设置。

resize: none;

5.4 上述3个内容的综合测试

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>什么是界面样式</h1>
  就是改变用户操作的样式，比如将鼠标改成小手，放大镜等...，提高交互体验
  <h1>将要学习的内容</h1>
  <ul>
    <li>1、改变用户的鼠标样式</li>
    <li>2、修改表单轮廓</li>
    <li>3、防止表单域拖拽</li>
  </ul>
  <h1>鼠标样式 cursor（鼠标移至不同的行不同的效果）</h1>
  <ul>
    <li style="cursor: default;">1、default 默认</li>
    <li style="cursor: pointer;">2、pointer 小手</li>
    <li style="cursor: move;">3、move 移动</li>
    <li style="cursor: text;">4、text 文本</li>
    <li style="cursor: not-allowed;">5、not-allowed 禁止</li>
  </ul>
  <h1>轮廓样式 outline</h1>
  <input type="text" value="我会高亮">
  <input type="text" name="" id="" style="outline: none;" value="我不会">
  <h1>防止表单域拖拽 rezize，文本域书写时，保持在一行，否则内部自带空白区域</h1>
  <textarea name="" id="" cols="30" rows="10">我可以改变大小</textarea>
  <textarea name="" id="" cols="30" rows="10" style="resize: none;outline: none; ">我不可以改变大小，且取消了高亮</textarea>
</body>

</html>

六、垂直居中

6.1 使用场景

用于设置图片、行内块元素和文字的垂直对齐。

用户头像和用户名的对齐就是一个常见的例子。

6.2 解决图片和文字的对齐问题

这个图很好的显示了中线，基线，顶线，底线的位置关系。甚至有行高的展现。

垂直居中的使用方法：vertical-align : 参数；

1、baseline：默认值。元素放在父亲的基线上。

2、top：元素顶端和行中最高的元素的顶端对齐。

3、middle：元素的中心和父亲的中心对齐。

4、bottom：素底端和行中最低的元素的底端对齐。

这是一些直观的感受。

6.3 解决图片底部默认白色空隙

当图片放在一个大盒子里的时候，下面会有空隙。因为盒子要为文字基线到底线这一部分预

留位置，所以会存在这样一部分，使得图片不能完全贴合。

下方距离盒子边缘有白色缝隙。

解决方案：1、给图片添加vertical-align，只要不基线对齐就可以。2、让图片转换成块级元素，但是会挤下去文字。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      vertical-align: middle;
    }

    .box2 {
      vertical-align: top;
    }

    img {
      height: 300px;
      height: 250px;
    }

    .box3 {
      vertical-align: bottom;
    }

    .box4 {
      border: 1px solid red;
    }

    .box4 img {
      vertical-align: bottom;
      /* display: block; */
    }

    .box5 {
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <h1>使用场景</h1>
  用于设置图片、行内块元素和文字的垂直对齐
  <h1>用法：vertical-align : 参数</h1>
  <ul>
    <li>1、baseline：默认值。元素放在父亲的基线上</li>
    <li>2、top：元素顶端和行中最高的元素的顶端对齐</li>
    <li>3、middle：元素的中心和父亲的中心对齐</li>
    <li>4、bottom：元素底端和行中最低的元素的底端对齐</li>
  </ul>
  <img src="images/xzq.jpg" alt="">这里是默认的基线对齐<br>
  <img src="images/xzq.jpg" class="box1">这里是中线对齐<br>
  <img src="images/xzq.jpg" class="box2">这里是最高对齐<br>
  <img src="images/xzq.jpg" class="box3">这里是最低对齐<br>
  <h1>解决图片底部默认白色空隙</h1>
  当图片放在一个大盒子里的时候，下面会有空隙。<br>
  因为是为文字的下方预留的。<br>
  解决方案：1、给图片添加vertical-align，只要不基线对齐就可以。2、让图片转换成块级元素，但是会挤下去文字
  <div class="box5"><img src="images/xzq.jpg"></div>
  <br>

  <div class="box4"> <img src="images/xzq.jpg">hajp</div>


</body>

</html>

七、溢出文字的设置

这个在网页中比较常见，文字超出盒子大小的部分，显示省略号。

7.1 单行文本溢出的情况

1、强制将文字一行内显示。

2、设置超出部分隐藏。

3、设置超出部分同省略号代替。

    .box1 {
      width: 150px;
      border: 1px solid red;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

7.2 多行文本溢出的情况

注意：这种情况有很大兼容性的问题

1、设置超出部分隐藏。

2、设置超出部分同省略号代替。

3、设置弹性伸缩盒子显示。

4、限制块级元素显示文本的行数。

5、设置伸缩盒子对象的子元素的排列方式。

    .box2 {
      width: 150px;
      height: 45px;
      border: 1px solid red;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;

    }

7.3 上述两种的代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 150px;
      border: 1px solid red;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .box2 {
      width: 150px;
      height: 45px;
      border: 1px solid red;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;

    }
  </style>
</head>

<body>
  <h1>超出大小的部分，显示省略号</h1>
  <h1>单行文本溢出的情况</h1>
  <ul>
    <li>1、强制将文字一行内显示</li>
    <li>2、设置超出部分隐藏</li>
    <li>3、设置超出部分同省略号代替</li>
  </ul>
  <div class="box1">111111111111111111</div>
  <h1>多行文本溢出的情况</h1>
  <ul>
    <li>注意：这种情况有很大兼容性的问题</li>
    <li>1、限制块级元素显示文本的行数</li>
    <li>2、设置超出部分隐藏</li>
    <li>3、设置超出部分同省略号代替</li>
    <li>4、设置弹性伸缩盒子显示</li>
    <li>5、设置伸缩盒子对象的子元素的排列方式</li>
  </ul>
  <div class="box2">如果没有实现，可能是兼容的问题11111111111111111111111111111111111111111</div>
</body>

</html>

八、三个实用技巧

8.1 margin为负值的用处

解决当盒子存在边框时，浮动排列，边框重叠的问题。

思想：让浮动的盒子都移动一个边框粗细的举例，可以解决重叠带来的问题。

除此之外，为了显示鼠标经过不同的颜色，可以通过z-index 提高层级显示，保证显示效果。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 li {
      list-style: none;
      float: left;
      margin-left: -1px;
      height: 200px;
      width: 150px;
      border: 1px solid red;
    }

    .box1 li:hover {
      /* position: relative; */
      z-index: 100;
      border: 1px solid blue;
    }
  </style>
</head>

<body>
  <h1>浮动排列，边框重叠的问题</h1>

  <ul class="box1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <br><br><br><br><br><br><br><br><br><br><br>

  <ul>
    <li>1、鼠标经过，为了凸显不同，需要压在其他盒子之上加以显示，所以相对定位</li>
    <li>2、还可以通过 z-index 提高层级显示，保证显示效果</li>

  </ul>

</body>

</html>

8.2 文字围绕

这里其实用到的就是浮动的初衷，最开始设计浮动就是为了实现文字环绕，图片不遮盖文字。

所以，只需要设置图片为浮动即可。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width= , initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: relative;
      margin: 100px auto;
      width: 200px;
      height: 70px;
      background-color: antiquewhite;
      width: 300px;
      padding: 5px;
    }

    .box .img1 {
      float: left;
      height: 100%;
      margin-right: 15PX;
    }

    .box p {
      font-weight: 400px;
    }
  </style>
</head>

<body>
  <h1>文字浮动技巧</h1>
  <div class="box">
    <img src="images/xzq.jpg" class="img1">
    <p>【预售】天外来物三巡演唱会，将于2024年5.1日于xxxxxxx举办</p>
  </div>

  <h1>解决思路</h1>
  <ul>
    <li>1、设置一个大盒子</li>
    <li>2、图片设置为浮动，浮动本质就是文字环绕</li>
  </ul>
</body>

</html>

8.3 行内块的使用

最常见的一个使用是页面的跳转。

设计思路：1、设计大的盒子承装所有的内容，内部是行内块且是链接。2、链接<a>使用边框包裹，文字居中，设置为行内块。3、选中的界面去除边框。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 a {
      display: inline-block;
      width: 40px;
      height: 40px;
      border: 1px solid red;
      line-height: 40px;
      text-decoration: none;
      color: black;
    }

    .box1 {
      border: 1px solid rebeccapurple;
      height: 120px;

      margin: 0 auto;
      /* 使得盒子内的行内块、行内元素全部居中显示 */
      text-align: center;
      padding-top: 60px;
    }

    .box1 .selected,
    .box1 .more {
      border: 1px solid transparent;
    }

    .box1 input {
      height: 40px;
      width: 40px;
    }

    .box1 button {
      height: 40px;
      width: 60px;
      line-height: 40px;
    }
  </style>
</head>

<body>
  <h1>页码跳转的设计</h1>
  <div class="box1">
    <a href="#">
      &lt; &lt;</a>
    <a href="#" class="selected">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#" class="more">...</a>
    <a href="#"> &gt; &gt;</a>
    到第
    <input type="text" style=" outline: none; ">页
    <button>确定</button>
  </div>
</body>

</html>

九、CSS初始化

不同浏览器对标签的默认值不同，为了消除差异，所以初始化操作。

SPIRIT_SYF

关注

24
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
CSS学习归纳6

精灵图其实就是由很多小图片集合而成的大图片。使用精灵图可以减少网络请求，减少了浏览器向服务器发送的请求次数,提高了网页加载速度。1、精灵图主要针对背景图片使用的。2、使用 backgroun-position 调用。3、x向右为正，y向下为正。1、遇到结构和样式简单的，可以使用字体图标。2、如果一些结构和样式复杂的，可以使用精灵图。
复制链接

扫一扫