css复习3

精灵图的使用

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

使用精灵图核心总结：

精灵图主要针对于小的背景图片使用。
主要借助于背景位置来实现—background-position 。
一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）

字体图标

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

使用步骤：

字体图标的下载
我们可以通过icomoon 字库 http://icomoon.io 或者阿里 iconfont 字库 http://www.iconfont.cn/将所需要的字体图标下载下来
以icomoon 字库为例：
字体图标的引入
字体图标下载以后，把下载包里面的 fonts 文件夹放入页面根目录下

在 CSS 样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中。
在这里插入图片描述
html 标签内添加小图标。

打开这个demo.html复制那个小框框

这个时候直接就能用吗？
给标签定义字体。

结果如下：
在这里插入图片描述
css三角的制作
主旨：给一个没有大小的盒子指定边框

CSS 用户界面样式

鼠标样式 cursor

li {
    
    cursor: pointer; }

在这里插入图片描述
轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

input {
    
    outline: none; }

防止拖拽文本域 resize
实际开发中，我们文本域右下角是不可以拖拽的。

textarea{
    
     resize: none;}

vertical-align 属性应用
CSS 的 vertical-align 属性使用场景：经常用于设置图片或者表单(行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
在这里插入图片描述
解决图片底部默认空白缝隙问题
 溢出的文字省略号显示

布局技巧

margin负值运用：
在这里插入图片描述
1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

文字围绕浮动元素：类似下图的效果
在这里插入图片描述
准备一个大盒子，直接往里面输入文字，普通的标准流就行；左侧放入的图片让其左浮动，这时文字是会环绕着图片的。

行内块巧妙运用：
在这里插入图片描述
页码在页面中间显示:
1.把这些链接盒子转换为行内块，之后给父级指定 text-align:center;
2.利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中
具体代码如下：

<!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>
        .box {
    
    
            text-align: center;
        }
        
        .box a {
    
    
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-decoration: none;
            line-height: 36px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#">8</a>
    </div>
</body>

最终的实现效果如下：
在这里插入图片描述
css三角巧妙运用

   .box1 {
    
    
            width: 0;
            height: 0;
            /* 左边边框和下边边框的宽度设置为0 */
            /* 再把上边框设置的高一点 */
            border-top: 100px solid transparent;
            border-right: 50px solid yellow;
            border-bottom: 0 solid red;
            border-left: 0 solid green;
        }

最终的效果：

在这里插入图片描述

HTML5 的新特性

HTML5 新增的语义化标签

< header>：头部标签
< nav>：导航标签
< article>：内容标签
< section>：定义文档某个区域
< aside>：侧边栏标签
< footer>：尾部标签

HTML5 新增的多媒体标签
新增的多媒体标签主要包含两个：

音频：< audio>
视频：< video>

<video src="文件地址" controls="controls"></video>

在这里插入图片描述

<audio src="文件地址" controls="controls"></audio>

在这里插入图片描述

HTML5 新增的 input 类型
在这里插入图片描述
HTML5 新增的表单属性

input::placeholder {
    
    
color: pink;
}

CSS3 的新特性

CSS3 新增选择器
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。
1.属性选择器
2.结构伪类选择器
3.伪元素选择器

在这里插入图片描述

结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子
关于 nth-child（n）我们要知道 n 是从 0 开始计算的，要记住常用的公式
如果是无序列表，我们肯定用 nth-child 更多
类选择器、属性选择器、伪类选择器，权重为 10。

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
在这里插入图片描述
注意：

before 和 after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法： element::before {}
before 和 after 必须有 content 属性你
before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为 1

CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
1.box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
2.box-sizing: border-box 盒子大小为 width

精灵图的使用

字体图标

CSS 用户界面样式

布局技巧

HTML5 的新特性

CSS3 的新特性

猜你喜欢