【CSS3】媒体查询，高级选择器，outline，@font-face，resize，精灵图，字体图标svg，cusor

李小浦

已于 2023-11-27 15:57:18 修改

阅读量468

点赞数

分类专栏： # CSS 文章标签： css3 css 前端

于 2022-12-03 16:41:16 首次发布

本文链接：https://blog.csdn.net/partworld/article/details/128111358

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

❤️ Author：老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事乐观面对
😍 系列专栏：

媒体查询

这段代码是屏幕大于等于600px小于等于1000px的情况下，颜色是红色的。
media query不会改变选择器的优先级，即使它包裹在media query中
在less和sass中，可以用选择器包裹media query，而在原生的编辑器中不行。

@media

@media(min-width:600px) and (max-width:1000px)
{
	div{color:red}
}

import结合media使用

在这里插入图片描述

link中使用media属性

在这里插入图片描述

例子

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @media(max-width:700px) {
      div {
        color: red;
      }
    }

    @media(max-width:800px) {
      div {
        color: blue;
      }
    }

    @media(min-width:800px) and (max-width:1000px) {
      div {
        color: yellow;
      }
    }

    @media(min-width:1200px) {
      div {
        color: olive;
      }
    }

  </style>
</head>

<body>
  <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est, necessitatibus. Officia commodi pariatur nulla
    odio libero delectus, necessitatibus praesentium accusamus a repellat repellendus, corporis debitis distinctio nemo
    placeat voluptas minima!</div>
</body>

</html>

选择器

选中类名以 ui- 开头的元素

注意第一个*选择器的ui-前面有一个空格

  [class*=" ui-"],[class^="ui-"]{
    color:red;
  }

选中类名以er结尾的元素

    [class*="er "],[class$="er"]{
      color:red;
    }

选中float元素

必须要加波浪线，代表值里面有left即可，这样防止left前面或后面有其他东西

    [float~=left]{
      float:left;
    }

伪类与伪元素

伪类是某一个实际元素在特定条件下的情况，例如：:hover,:active::focus,:nth-child(),:first-child(),:nth-of-type() ；伪元素是一个新的元素，为结构添加内容的，例如：::scrollbar,::placeholder,::before,::after::first-letter(第一个实际字符的前面),::first-line,::selection(这个是被鼠标选中的,可以切换背景色之类的，但是不能切换边框，使用的时候直接::selection{})

:target

这个伪类是选中目标元素，那么何为目标元素，目标元素就是当前地址栏中#后部分所指示的元素，#后面是谁的id，谁就是目标元素，所以也可以说选中id的值为地址中#后面的内容元素

:target{
	color:red;
	background-color:yellow;
}

:disable/:enable

这个搭配input使用，disable是不可以选中的时候，enable是可选中的时候，这两个是互斥的

:valid/:invalid

填对了和没填对

:required/:optional

必填项和选填项

:indeterminate

input状态下的checkbox类型，在处于中间状态的时候，可以触发:indeterminate伪类

checkbox:indeterminate{
}

在这里插入图片描述

通过outline画出一个十字架

outline是不占据空间的，默认显示在border的外面
outline最常用的就是将a元素类型元素，设置outline：none

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      outline: 1px solid red;
      font-size: 0;
    }

    em {
      display: inline-block;
      height: 50px;
      width: 10px;
      vertical-align: middle;
    }

    b {
      display: inline-block;
      width: 20px;
      height: 10px;
      vertical-align: middle;

    }

  </style>
</head>

<body>
  <span><b></b><em></em><b></b></span>
</body>

</html>

@font-face

这个可以加载网络上的任何字体，在部署静态资源的时，将HTML/CSS/JavaScript/Font一起部署在静态服务器

**第一步：**在字体网站上下载一个字体，默认下载下来的是ttf文件
字体网站链接
**第二步：**使用字体，首先将字体放在对应的目录中，然后通过@font-face引入字体

    @font-face {
      /*起名字*/
      font-family: 我的在线字体;
      /*在线的字体*/
      src: url(https://www.baidu.com/foo/bar/baz.ttf);
      /*可以设定字体的类型,这样font-family就可以是一样的名字，然后可以区分是斜体字等等。。*/
      font-style:italic;
    }

italic是专门设计的斜体字，而oblique是倾斜得来的。
**第三步：**使用字体
在这里插入图片描述

FOUT/FOUC

字体加载的时候，可能会因为网速的问题，导致特殊的字体加载的慢一些，变换的时候会发生突变，这种情况就叫做FOUT
FOUC是flash of unstyled content，这个会先展现html的页面，在网速不是特别好的情况下，页面突然闪一下才能加载出css的代码，下面这两个写法是一样的
他们的解决方案：把(更优的方式是把首屏的样式)样式直接写在页面的style里，而不使用import或者是link，然后把其他的样式写进link标签的href中的css中。

resize属性

这个可以设置类似于textarea一样调整大小，值有both，horizontal，vertical，需要搭配overflow：auto

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      resize: both;
      overflow: auto;
      direction: rtl;
    }

  </style>
</head>

<body>
  <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est, necessitatibus. Officia commodi pariatur nulla
    odio libero delectus, necessitatibus praesentium accusamus a repellat repellendus, corporis debitis distinctio nemo
    placeat voluptas minima!</div>
</body>

</html>

精灵图、雪碧图、CSS Sprite

将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
CSS精灵图的好处：1.减少网页的http请求数量，加快网页响应速度，减轻服务器的压力2.减小图片总大小3.解决了图片命名的困扰，只需要针对一张集合的图片命名
精灵图的原理就是通过只显示图片的很小一部分来展示

字体图标

字体可以设计成各式各样的形状，那么我们也可以把字体设计成图标的样子
优势：1.矢量图，无损放大2.可以随意变色3.很好维护，增减图标不用像css精灵图一样考虑图标的位置4.用到很多个图标时，文件相对图片较小，节省空间
劣势：1.一个图标整体只能是一种颜色2.不能动画
字体图标链接

字体图标使用步骤：
1、通过link引入iconfont.css文件
2、使用字体图标
使用字体图标有两种方式
1.通过对应字体的图标的Unicode来显示代码
2.利用已经编写好的class，直接使用即可
在这里插入图片描述

例子：五角星

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <style>
    span {
      font-family: FontAwesome;
      display: inline-flex;
      flex-direction: row-reverse;
    }

    span i {
      font-style: normal;
    }

    span i::before {
      content: '\F006';
    }
    span i:hover::before{
content:'\F005';}
    span i:hover~i::before {
      content: '\F005'
    }

  </style>
</head>

<body>
  <span>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </span>
</body>

</html>

svg

优势：svg是矢量图，放大也不会模糊，不是像素点的；一个图标可以是多种颜色组成；可以动画；
劣势：使用起来不如字体图标方便，因为用的时候要< s v g ><u s e href=“#xxx” / >< svg> ,而字体图标就一个i标签就可以实现了；页面的顶部还得再放一个很大的svg元素。
z是闭合，具体的查文档即可

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <svg height=300 width=600>
<!--     <circle cx="20" cy="30" r="18" fill="red" stroke="black" stroke-width="4 "></circle>
    <rect x="30" y="50" width="80" height="100" fill="pink" stroke="blue" stroke-width="8" rx="15" ry="30" ></rect>
    
    <ellipse cx="200" cy="100" rx="50" ry="30"
      fill="blue"
        stroke="red"
          stroke-width="9"
        
      
    ></ellipse>
    
    <line x1=0 y1=0 x2=60 y2=100 stroke="violet" stroke-width="13"></line>
    /*折线*/
    <polyline points=" 10 0 30 10 40 100 100 30 200 5" stroke="black" stroke-width="2" fill="none"></polyline>
       <polygon points=" 10 0 30 10 40 100 100 30 200 5" stroke="black" stroke-width="2" fill="none"></polygon> -->
    
    <path d="M 20 20 L 50 50 V 80 H 100 A 40 40 93 1 1 100 100  C 180 40 , 270 45,250 128 S 217 247 108 225 z" stroke="black" stroke-width="8" fill="none"></path>
  </svg>
</body>
</html>

之后把svg的格式变成xml的写法，上面要加上

cusor

可以设置光标在元素上面时的显示样式
在这里插入图片描述

————————————————————————
♥♥♥码字不易，大家的支持就是我坚持下去的动力♥♥♥
版权声明：本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章

李小浦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS3】媒体查询，高级选择器，outline，@font-face，resize，精灵图，字体图标svg，cusor

例子resolution属性当像素点放大到原来的两倍的时候，字变成红色，这个主要是用在图片的放大，因为如果分辨率比较高的机器，如果用比较小的图片放大之后就会变糊，因此如果在max-resolution：1.5ddpx的时候，换成更小的图片就会比较好orientation属性控制屏幕的方向，值有两个，横向：landscape，纵向：portraitaspect-ratio属性这个是视口横纵比，aspect-ration：2/1，这个就是视口比是2：1伪类与伪元素伪类是某一个实
复制链接

扫一扫