CSS 属性

CSS 属性

和 字体(font) 相关的属性

  • font-size : 设置 字体的大小 ,值支持 像素 、 em (相对自身px单位) 、 rem (相对根元素) 、 pt (打印) 、 支持 百分比

    • 10px
    • 80%
  • font-weight : 设置 字体的 粗细 、支持 数字 和 单词

    • 100 ,200, 300, 400, 500, 600, 700, 800, 900 (其中 400是正常字体大小 , 小于 400 字体变细、 大于 400 字体 加粗)
    • normal (正常) 、 bold (加粗) 、 bolder (较粗) 、 lighter (变细)
  • font-style : 设置 字体的 风格

    • normal (正常字体) , italic (斜体、如果字体没有斜体、可以自动使用 倾斜体) 、 oblique (倾斜体)
  • font-family : 设置 字体 , 浏览器 默认采用 微软雅黑

    pre {font-family: mzd;
    }@font-face {font-family: mzd;src: url(./ttf/mzd.ttf);
    }
    

和文本(text) 相关的属性

  • text-align : 对块级元素中的 文本内容 设置 水平对齐方式

  • left (左对齐, 默认值)

  • right (右对齐)

  • center (居中)

  • text-indent : 对块级元素的 第一行内容 实现 缩进 (正值) 或者 悬挂 (负值) 效果、 支持 px 和 em 等单位。

  • text-transform : 对 文本内容 进行大小写转换

    • capitalize (每个单词的首字母 转大写)
    • lowercase : 全部转小写
    • uppercase : 全部转大写
  • text-decoration : 对 文本内容 进行装饰 , 是 text-decoration-line, text-decoration-color , text-decoration-style 的简写

    • underline : 添加下划线
    • overline : 添加上划线
    • line-through : 添加中划线
    • none : 取消 线。
  • text-decoration-line : 设置文件装饰的线条,值由 underline, overline, line-through, none

  • text-decoration-color : 设置文件装饰的线条颜色 , 默认颜色 是 #000

  • text-decoration-style : 设置 线条的类型 , 默认类型是 solid

    • solid : 直线
    • dotted : 点状线
    • dashed : 虚线
    • double : 双直线
  • text-overflow : 设置 文本溢出的解决方案

    • clip : 剪切 (默认值)
    • ellipsis 显示省略号
     /* 当内容超过了一行 、显示 省略号   */
    white-space: nowrap; /* nowrap 强制内容不换行*/
    text-overflow: ellipsis; /*默认值 clip , ellipsis 显示省略号 */
    overflow: hidden;  /*当内容超出了盒子的大小 、 hidden 隐藏 *//* 当内容超过了指定的行数、显示省略号 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
    
  • text-shadow : 设置 文本的 投影效果

    • x y r color , […x y r color]
      • x : 投影在 x 轴的位置
      • y : 投影在 x 轴的位置
      • r : 投影的模糊的半径
      • color : 投影的颜色
  • line-height : 用来设置 每一行文本内容 占用的 高度

    如果一个盒子 有且只有一行内容, 且希望内容垂直居中 ,则可以设置 line-height , 通常 行高 等于 盒子的高度

  • color : 用来设置 文本的 颜色 , 颜色的表示方式 主要有 3种,

    • 英文单词表示颜色 。 支持的颜色单词比较少, red, green , blue , yellow , black , white , lightblue …
    • 使用 rgb 模式 , rgb(a, b, c) a , b , c 的取值范围均为 0 ~ 255, rgb(0, 0, 0) (黑色), rgb(255, 255, 255) 白色, rgb(255, 0, 0) 红色, rgb(0, 255, 0) 绿色 rgb(0, 0, 255) 蓝色, rgb(255, 255, 0) 黄色 , rgb(255, 0 , 255) 紫色
    • 使用 16进制表示 、 使用 # 作为 前缀 , 后跟面 6位 16进制数 、 后者 3位 16进制数
    • rgba 模式 rgba(a, b, c , d) : d 是代表 透明度, 是一个小数, 取值范围是 0 ~ 1 , 0 代表完全透明、 1 代表 不透明
  • overflow-x , overflow-y , overflow: 盒子内容 溢出行为

    • visible : 默认值 , 代表 溢出的时候显示对应的内容
    • hidden : 隐藏溢出的内容
    • scroll : 无论是否溢出, 均显示 滚动条
    • auto : 当溢出后 自动产生滚动条。
  • white-space : 空白符保留策略

    • nowrap : 不换行
    • pre-wrap : 预设换行,效果 和 pre 标签相同 。
  • letter-spacing : 设置 文本内容的字符间隙

  • word-spacing : 设置 文本内容 中的 单词间隙

  • word-wrap : 设置 文本内容 是否 强制进行单词换行

    • normal : 正常行为
    • break-word : 强制实现单词换行
  • list-style : 列表样式

    • none : 去掉列表样式 。
    • disc : 实心圆
    • circle : 空心圆
    • url(…) : 自定义图片

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

雨晨 2610(2)0.2510 Windows 11 24H2 Iot 企业版 LTSC 2024 极简 2in1

文件: 雨晨 2610(2)0.2510 Windows 11 24H2 Iot 企业版 LTSC 2024 极简 2in1 install.esd 索引: 1 名称: Windows 11 IoT 企业版 LTSC 极简 26100.2510 描述: Windows 11 IoT 企业版 LTSC 极简 26100.2510 By YCDISM RTM 2025 24-12-07 大小: 8,176,452,990 个字节 索引: 2 …

PHP保存base64编码图片,图片有一部分是灰色块儿,原因和解决办法

文章目录 场景原因解决方案完整的代码前端代码php代码 场景 我有个需求,移动端h5上传多张的图片。用input file可以上传多张,但是现在照片体积越来越大,同时上传多张会因为体积过大,导致上传失败。如果是小程序会好很多&#xff…

【CSP CCF记录】202212-2第28次认证 训练计划

题目 样例1输入 10 5 0 0 0 0 0 1 2 3 2 10 样例1输出 1 1 1 1 1 10 9 8 9 1 样例1解释 五项科目间没有依赖关系,都可以从第 1 天就开始训练。 10天时间恰好可以完成所有科目的训练。其中科目 1 耗时仅 1天,所以最晚可以拖延到第 10 天再开始训练&…

gitee

Git 是一个开源的 [ 分布式 ][ 版本控制系统 ] ,用于敏捷高效地 处理任何或小或大的项目 Git 非常容易学习,低植入,高性能。因为拥有轻量的本地分支,易用的暂存区,和多工作流的特点,它超越了类似Subversio…

Spring——SpringBean初始接口

摘要 本文详细介绍了Spring框架中SpringBean的初始化接口和注解,包括BeanPostProcessor接口、InitializingBean接口和PostConstruct注解。文章解释了这些接口和注解的原理、作用、适用场景,并提供了示例代码。最后,对比了不同SpringBean初始…

「嵌入式系统设计与实现」书评:学习一个STM32的案例

本文最早发表于电子发烧友论坛:【新提醒】【「嵌入式系统设计与实现」阅读体验】 学习一个STM32的案例 - 发烧友官方/活动 - 电子技术论坛 - 广受欢迎的专业电子论坛!https://bbs.elecfans.com/jishu_2467617_1_1.html 感谢电子发烧友论坛和电子工业出版社的赠书。 …

操作系统——大容量存储结构

笔记内容及图片整理自XJTUSE “操作系统” 课程ppt,仅供学习交流使用,谢谢。 大容量存储结构概述 磁盘 磁盘为现代计算机系统提供大量外存。每个盘片为平的圆状(类似CD),普通盘片直径为4.5~9.0厘米。盘片的两面都涂着…

Redis从入门到进阶(总结)

以下内容均以CentOS7为背景。 一、Redis安装及启动 mysql(读:2000/s;写:600/s) redis(读:10w/s;写:8w/s)通过官方给出的数据单机并发可以达到10w/s&#xf…

Java进阶(注解,设计模式,对象克隆)

Java进阶(注解,设计模式,对象克隆) 一. 注解 1.1 什么是注解 java中注解(Annotation),又称java标注,是一种特殊的注释 可以添加在包,类,成员变量,方法,参数等内容上 注解会随同…

使用 Gin 框架构建 RESTful 博客 API

使用 Gin 框架构建 RESTful 博客 API 引言 在现代 Web 开发中,RESTful API 是一种非常流行的设计风格,它通过 HTTP 协议与客户端进行通信,提供了灵活且易于扩展的接口。Go 语言以其高效的并发处理能力和简洁的语法,成为了构建高…

Leecode刷题C语言之骑士在棋盘上的概率

执行结果:通过 执行用时和内存消耗如下: 代码如下: static int dirs[8][2] {{-2, -1}, {-2, 1}, {2, -1}, {2, 1}, {-1, -2}, {-1, 2}, {1, -2}, {1, 2}};double knightProbability(int n, int k, int row, int column){double dp[200][30][30];mem…

21. C++STL 7(8000字详解list及其迭代器的模拟实现)

⭐本篇重点:STL中的list及其迭代器的模拟实现和测试 ⭐本篇代码:c学习 橘子真甜/c-learning-of-yzc - 码云 - 开源中国 (gitee.com) 目录 一. list的节点 二. list的迭代器 2.1 迭代器框架 2.2 迭代器实现 三. list的实现 3.1 list的构造函数 3.…

Docker打包SpringBoot项目

一、项目打成jar包 在进行docker打包之前,先确定一下,项目能够正常的打成JAR包,并且启动之后能够正常的访问。这一步看似是可有可无,但是能避免后期的一些无厘头问题。 二、Dockerfile 项目打包成功之后,需要编写Doc…

零基础学鸿蒙开发--第九篇--网络请求

12. ⽹络请求 鸿蒙系统提供了 http 模块 ⽤于发送 http 请求,另外, OpenHarmony社区基于该模块将前端开发中常⽤的⽹络请 求库 axios 移植到了鸿蒙系统,因此我们也可以在鸿蒙系统中使⽤ axios 发送 http 请求,下⾯重点为⼤家介绍…

133.WEB渗透测试-信息收集-小程序、app(4)

免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 内容参考于: 易锦网校会员专享课 上一个内容:132.WEB渗透测试-信息收集-小程序、app(3) 输入命令:…

Pointnet++改进71:添加LFE模块|高效长距离注意力网络

简介:1.该教程提供大量的首发改进的方式,降低上手难度,多种结构改进,助力寻找创新点!2.本篇文章对Pointnet++特征提取模块进行改进,加入LFE模块,提升性能。3.专栏持续更新,紧随最新的研究内容。 目录 1.理论介绍 2.修改步骤 2.1 步骤一 2.2 步骤二 2.3 步骤三 1.理…

Android仿美团左右联动购物列表

Android仿美团左右联动购物列表 左右联动购物列表,不难。 一、思路: 两个RecycleView 二、效果图: 三、关键代码: public class MainActivity extends AppCompatActivity {private RecyclerView rl_left;private RecyclerVie…

Mitel MiCollab 企业协作平台 任意文件读取漏洞复现(CVE-2024-41713)

0x01 产品简介 Mitel MiCollab是加拿大Mitel(敏迪)公司推出的一款企业级协作平台,旨在为企业提供统一、高效、安全的通信与协作解决方案。通过该平台,员工可以在任何时间、任何地点,使用任何设备,实现即时通信、语音通话、视频会议、文件共享等功能,从而提升工作效率和…

深度学习camp-第J3-1周:DenseNet算法 实现乳腺癌识别

🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 我的环境 语言环境:Python 3.12编译器:Jupyter Lab深度学习环境:Pytorch 2.4.1 Torchvision 0.19.1数据集:乳腺…

Elasticsearch 单节点安全配置与用户认证

Elasticsearch 单节点安全配置与用户认证 安全扫描时发现了一个高危漏洞:Elasticsearch 未授权访问 。在使用 Elasticsearch 构建搜索引擎或处理大规模数据时,需要启用基本的安全功能来防止未经授权的访问。本文将通过简单的配置步骤,为单节…