CSS——字体背景(Font Background)

一、字体族

    1、字体的相关样式:

color    用来设置字体颜色(前景颜色)

font-size  字体的大小

                     和font-size相关的单位: em  相对于当前元素的一个font-size

                                                            rem 相对于根元素的一个font-size

font-family  字体族(字体的格式)       指定字体的类别,浏览器会自动使用该类别下的字体

                         可选值:   serif  衬线字体

                                         sans-serif   非衬线字体

                                         monospace   等宽字体

           font-family 可以同时指定多个字体,多个字体间用逗号(,)隔开,字体生效时优先使用第一个,第一个无法使用时则使用第二个,以此类推。

font-face  可以将服务器中的字体直接提供给用户去使用

                      问题:加载速度慢、版权问题、字体格式

                     格式:  @font-face{

                                                     font-family: ;    /*指定字体的名字*/

                                                     scr:url(    );   /*服务器中字体的路径*/

                                                     }

二、图标字体(iconfont)

    1、在网页中经常需要使用一些图标,可以通过图片来引入图标,但是图片大小本身比较大,并且非常不灵活,所以在使用图标时,我们还可以将图标直接设置为字体,然后通过font-face的形式来对字体进行引入,这样我们就可以通过使用字体的形式来使用图标。

    2、用法:将all.css(即所有图标的样式文件)引入到网页中,然后直接通过类名来使用图标字体:  class=“fas  fa-bell”或者class=“fab  fa-accessible-icon”

                    其中,class里面的fas或者fab都是不能修改的,后面跟图标字体的名字。也可修改大小跟颜色。

    3、其他用法

 通过伪元素来设置图标字体:① 找到要设置图标的元素通过before或者after选中

                                                ② 在content中设置字体的编码

                                                ③ 设置字体的样式:

                                                                  fab类:font-family:‘Font Awesome 5 Brands’;

                                                                  fas类:font-family:‘Font Awesome 5 Free’;font-weight:900;

通过实体来使用图标字体:格式  ——   &#x图标字体的编码;

三、行高(line height)

    1、行高指的是文字占有的实际高度。

    2、可以通过line-height来设置行高,行高也可以指定一个大小(px  em),也可以直接为行高设置一个整数,如果是一个整数的话,行高将会是字体的指定的倍数。

    3、行高经常还用来社会文字的行间距。

          行间距=行高-字体大小

    4、字体框:字体框就是字体存在的格子,设置font-size实际上就是设置字体框的高度。

    5、行高会在字体框中进行上下平均分配。

四、字体的简写属性

    1、font  可以设置字体相关的所有属性。

                    语法:font:字体大小/行高   字体族  【中间必须空格隔开,行高可以省略不写,如果不写则使用默认值】

    2、font-weight   字重,字体的加粗

                                可选值:normal   默认值,不加粗

                                              bold       加粗

    3、font-style   字体的风格

                             可选值: normal   正常的

                                            italic       斜体的

    五、文本的水平和垂直对齐

     1、text-align:文本的水平对齐

                            可选值:  left   左侧对齐

                                            right  右侧对齐

                                            center  居中对齐

                                            justify    两端对齐

      2、 vertical- align:设置元素垂直对齐的方式

                                   可选值: baseline   默认值,子元素和父元素基线对齐

                                                  top    顶部对齐

                                                  bottom   底部对齐

                                                  middle   居中对齐(与字母x的中点对齐)

                                                  也可以设置任意数值,正值向上对齐,负值向下对齐

       3、对于图片的垂直对齐问题,也会默认跟基线对齐,为了取消这种对齐方式,让图片跟基线之间没有缝隙,可以采用 vertical-align:top;或者vertical-align:bottom;或者vertical-align:middle;来进行设置,取消图片与基线之间的缝隙。

    六、其他的文本样式

     1、 text-decoration:设置文本修饰

                                      可选值: none   默认值,什么修饰都没有

                                                    underline    下划线

                                                    line-through   删除线

                                                    overline  上划线

    2、 white-space:设置网页如何处理空白

                                 可选值:  normal   默认值,对空白部分不加处理

                                                 nowrap   不换行

                                                 pre  保留空白

    3、 overflow:hidden;    对溢出内容进行裁剪

         text-overflow:ellipsis;   对溢出内容用省略号表示

七、背景

    1、background-color   设置背景颜色

    2、background-image   设置背景图片

                                             语法:  background-image:url()     【括号里面写图片的路径,可添加双引号也可以没有双引号】

    3、可以同时设置背景颜色和背景图片,这样背景颜色将会成为图片的背景色。

    4、如果背景图片大小小于元素的大小,则背景图片会自动在元素中平铺将元素铺满。

    5、如果背景图片大于元素,则会有一部分背景图片无法完全显示。

    6、如果背景图片和元素一样大,则会直接正常显示。

    7、background-repeat   用来设置背景图片的重复方式

                                            可选值:   repeat  默认值,背景图片会沿着x轴、y轴双方向重复

                                                             repeat-x   沿着x轴方向重复

                                                             repeat-y   沿着y轴方向重复

                                                             no-repeat   背景图片不重复

    8、background-position   用来设置背景图片的位置

               设置方式:① 通过  top 、left 、right 、bottom 、center 几个表示方位的词来设置背景图片的位置。使用方位词必须指定两个值,如果只写一个则第二个默认是center。

                                 ② 通过偏移量来指定背景图片的位置:水平方向的偏移量  垂直方向的偏移量

 9、background-clip   设置背景的范围

                                        可选值:  border-box    默认值,背景只会出现在边框的下边

                                                        padding-box   背景不会出现在边框,只会出现在内容区和内边距

                                                        content-box     背景只会出现在内容区

   10、background-origin   背景图片的偏移量计算的原点

                                            可选值:    padding-box   默认值,background-position从内边距处开始计算

                                                              content-box   背景图片的偏移量从内容区处开始计算

                                                              border-box     背景图片的变量从边框处开始计算

   11、background-size   设置背景图片的大小

                                         可选值:  第一个值表示宽度    第二个值表示高度     【如果只写一个,则第二个默认是auto】

                                                        cover    图片的比例不变,将元素铺满

                                                        contain   图片的比例不变,将图片在元素中完整显示

   12、background-attachment     设置背景图片是否跟着元素移动

                                                        可选值: scroll    默认值,背景图片跟随元素移动

                                                                       fixed   背景图片固定在页面中,不会跟随元素移动

   13、background    背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置,没有顺序要求,也没有哪个属性是必须写的。

                                  注意:① background-size必须写在background-position后面并且中间用/隔开,即background-position/background-size

                                            ② background-origin必须写在background-clip前面

   八、按钮练习

  九、雪碧图

雪碧图的使用步骤:

  ① 先确定要使用的图标

  ② 测量图标的大小

  ③ 根据测量结果创建一个元素

  ④ 将雪碧图设置为元素的背景图片

  ⑤ 设置一个偏移量以显示正确的图片

雪碧图的特点:一次性将多个图片加载进页面,降低请求的次数,加快访问速度,提升用户体验。

   十、线性渐变

(1)通过渐变可以设置一些复杂的背景颜色,可以实现从一个颜色向其他颜色过渡的效果

(2)渐变是图片,需要通过background-image来设置

(3)线性渐变【 linear-gradient()】:颜色沿着一条直线发生变化

                         语法 :background-image:linear-gradient(方向,颜色1 ,颜色2)

        例如:  linear-gradient(red,yellow)    表示红色在开头,黄色在结尾,中间是过渡区域

       线性渐变的开头,我们可以指定一个渐变的方向:   to left  向左渐变

                                                                                         to right      向右渐变

                                                                                         to bottom  向下渐变

                                                                                         to top        向上渐变

                                                                                         xxxdeg      deg表示度数

                                                                                         xxxturn      turn表示圈

(4)渐变可以同时指定多个颜色,多个颜色默认情况下平均分布,也可以手动指定渐变的分布情况,颜色后面加入像素即可。

(5)repeating-linear-gradient()   可以平铺的线性渐变

  十一、径向渐变

(1)radial-gradient()   径向渐变(放射性的效果)

(2)默认情况下径向渐变的形状根据元素的形状来计算:

                                                                                       正方形——>圆形

                                                                                       长方形——>椭圆形

       也可以手动指定渐变的位置,语法: radial-gradient(大小   at 位置,颜色1    位置,颜色2   位置,······)     【注:大小、位置可省略不写

                                                   其中,① 大小的可选值:

                                                                                        circle   圆形

                                                                                        ellipse   椭圆形

                                                                                        closest-side    距离原点最近的边(近边)

                                                                                        closest-corner   距离原点最近的角(近角)

                                                                                        farthest-side     远边

                                                                                        farthest-corner   远角

                                                              ② 位置的可选值:top    right  left  center   bottom

本文分享就到这里,欢迎大家一同讨论学习,下一篇跟大家补充一下HTML的表格和表单的内容。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/402764.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

命令行参数环境变量

目录 前言: 命令行参数: 现象: 这些参数的意义: 为什么要这么做? 这些事是谁做的呢? 环境变量 现象: 创建环境变量: 结合程序理解: 前言: 我们在前…

1.Linux_常识

UNIX、Linux、GNU 1、UNIX UNIX是一个分时操作系统,特点是多用户、多任务 实时操作系统:来了请求就去解决请求 分时操作系统:来了请求先存着,通过调度轮到执行时执行 2、Linux Linux是一个操作系统内核 发行版本&#xff1…

C++(10)类语法分析(1)

C(10)之类语法分析(1) Author: Once Day Date: 2024年8月17日 一位热衷于Linux学习和开发的菜鸟,试图谱写一场冒险之旅,也许终点只是一场白日梦… 漫漫长路,有人对你微笑过嘛… 全系列文章可参考专栏: 源码分析_Once-Day的博客-CSDN博客 …

基于单片机的智能晾衣系统设计

摘 要 :在网络信息技术的推动下,智能家居得到了广泛应用,文章根据当前的市场动态,针对基于单片机的智能晾衣系统设计展开论述,具体包括两个方面的内容———硬件设计和软件设计。 关键词 :单片机&#xff…

【数据结构篇】~顺序表

顺序表前言 想要学好数据结构的三大基本功:1.结构体2.指针3.动态内存开辟,这三样将是贯彻整个数据结构的工具。(可以去这里了解这三大基本功) 顺序表也是线性表的一种,那线性表又是什么呢? 线性表(linear …

应急响应-DDOS-技术指南

初步预判 通常,可从以下几方面判断服务器/主机是否遭受DDoS攻击查看防火墙、流量监控设备、网络设备等是否出现安全告警或大量异常数据包。如图所示,通过流量对比,发现在异常时间段存在大量UDP数据包,并且与业务无关。 通过安全设…

uniapp多图上传uni.chooseImage上传照片uni.uploadFile,默认上传9张图

uniapp多图上传uni.chooseImage上传照片uni.uploadFile 代码示例: /**上传照片 多图*/getImage() {uni.chooseImage({count: 9, //默认9sizeType: [original, compressed], //可以指定是原图还是压缩图,默认二者都有sourceType: [album], //从相册选择/…

8 Java常用API(基本语法6)-- Object和Objects类、Math、System、浅克隆和深克隆、手动下载导入第三方jar包

文章目录 前言一、Math(工具类)1 属性2 常见方法二、System(工具类,和系统相关的)1 public static void exit(int status) --- 终止当前运行的 Java 虚拟机。2 public static long currentTimeMillis() --- 以毫秒为单位返回当前unix时间。3 public static void arraycopy(Obj…

在Windows上配置VSCode MinGW+CMake(包括C++多线程编程的两套API:posix和win32)

创建目录 首先,需要电脑上安装VSCode, 并且创建三个文件夹:cmake、MinGW-posix、MinGW-w32 文件下载 下载posix-seh posix和win32分别是c多线程变成的两套API,可根据不同需求安装,现在先下载配置环境需要的几个文件 百度搜索MinGW-64 点…

Apache--简介与基本使用

前言:本博客仅作记录学习使用,部分图片出自网络,如有侵犯您的权益,请联系删除 一、Apache简介 Apache HTTP Server(在Red Hat发行版中俗称Apache或httpd)是由Apache Software Foundation在Apache License…

WPF打印控件内容

当我们想打印控件内容时&#xff0c;如一个Grid中的内容&#xff0c;可以用WPF中PrintDialog类的PrintVisual()方法来实现 界面如下&#xff1a; XAML代码如下 <Grid><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition Width"300"…

pygame开发课程系列(4): 游戏元素

第四章 游戏元素 在本章中&#xff0c;我们将深入探讨如何在 Pygame 中处理游戏元素&#xff0c;包括键盘输入、鼠标输入、图像加载和声音播放。这些元素是构建互动游戏的基础&#xff0c;能够让你的游戏变得更生动、更有趣。 4.1 处理键盘输入 键盘输入是控制游戏角色或元素…

Redis相关介绍

本文介绍了Redis&#xff0c;一种开源的内存数据结构存储系统&#xff0c;强调其高性能、多种数据结构支持、内存存储、持久化策略、发布订阅功能及工作原理。 一、Redis的介绍 Redis&#xff08;Remote Dictionary Server&#xff09;&#xff0c;即远程字典服务&#xff0c…

[000-01-030].第7节:Zookeeper工作原理

1.Zookeeper工作原理&#xff1a; 1.1.Zookeeper的工作机制 1.Zookeeper从设计模式角度来理解&#xff1a;是一个基于观察者模式设计的分布式服务管理框架&#xff1b;2.Zookeeper负责存储和管理大家都关心的数据&#xff0c;然后接受观察者的注册&#xff0c;一旦这些数据的…

Unity Recttransform操作

1、拉伸铺满 RectTransform rect GetComponent<RectTransform>();rect.anchorMin Vector2.zero;rect.anchorMax Vector2.one;rect.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, Screen.width);rect.SetSizeWithCurrentAnchors(RectTransform.Axis.Verti…

Ciallo~(∠・ω・ )⌒☆第二十篇 入门mysql 数据库

要入门MySQL数据库&#xff0c;首先需要了解数据库的基本概念和原理。MySQL是一种广泛使用的开源关系型数据库管理系统&#xff0c;它能够处理大量的数据&#xff0c;并提供了多种功能。 一、创建数据库 连接到MySQL后&#xff0c;你可以使用SQL语句来创建数据库。例如&#x…

【leetcode】删除链表的倒数第 N 个结点-25-5

方法&#xff1a;递归 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int x, ListNode *next) : val(x), ne…

css 文字图片居中及网格布局

以下内容纯自已个人理解&#xff0c;直接上代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…

微信小程序实例代码解读

以微信 小程序开发工具给的示例代码为例&#xff1a; 主页代码&#xff1a; index.wxml 这个文件是一个微信小程序页面的 WXML 结构,主要功能是展示一个快速开始教程的步骤和内容。 源代码&#xff1a; <!--index.wxml--> <view class"container">&l…

GAMES104:07游戏中渲染管线、后处理和其他的一切-学习笔记

文章目录 前言一&#xff0c;Ambient Occlusion环境光遮蔽1.1 Precomputed AO1.2 Screen Space Ambient Occlusion(SSAO)1.3 Horizon-based Ambient Occlusion(HBAO)1.4 Ground Truth-based Ambient Occlusion(GTAO)1.5 Rat-Tracing Ambient Occlusion 二&#xff0c;雾效2.1 D…