当前位置: 首页 > news >正文

前端零基础学习Day-Eight

CSS字体和文本样式

CSS文字样式
  • 字体:font-family

    • 语法:font-family:[字体1][,字体2][,...]

      • p{font-family:"微软雅黑","宋体","黑体";}

    • 含空格字体名和中文,用英文引号括起

    • 属性值:具体字体名,字体集

      • 字体集:Serif,Sans-serif,Monospace,Cursive,Fantasy

      • p{font-family:"微软雅黑","宋体","黑体",sans-serif;}

    • 多个字体,用英文逗号隔开

    • 引号嵌套,外使用双引号,内使用单引号

      • 如行内样式<h1 style="font-family:'宋体';">


  • 文字大小:font-size

    • 语法:font-size:绝对单位|相对单位

    • 绝对单位:

      属性值说明
      in英寸,1英寸=2.54厘米
      cm1厘米=0.394英寸
      mm毫米
      pt磅,印刷的点数,72磅=1英寸
      pcPica,1pc=12pt
      属性值CSS2缩放系数1.2
      xx-small9px
      x-small11px
      small13px
      medium16px
      large19px
      x-large23px
      xx-large28px
      • 当不设置字体大小时,默认为浏览器默认值,一般默认字体是16px

      • 绝对大小,不能随浏览器分辨率或父元素大小的改变而改变

    • 相对单位:

      • px像素

      • em/% (相对值)都是针对父元素

      • 文字大小受显示器分辨率影响

      • 属性值larger:相对父元素的文字大小变大

      • 属性值smaller:相对父元素的文字大小变小


  • 文字颜色:color

    • 语法:color:颜色名|十六进制|RGB

      • 十六进制:#000000

        • 每一位值:0~F

        • 简写,#008800可简写成#080

        • 不区分大小写,大写A和小写a效果一样

        • Web安全色:www.bootcss.com/p/websafecolors/

      • RGB(红,绿,蓝):rgb(250,250,250)、rgb(50%,50%,50%)

        • 数字:0~255,小于0会修正成0,大于255会修正成255

        • 百分比:0%~100%,小于0%会修正成0%,大于100%会修正成100%


  • 文字粗细:font-weight

    • HTML语法:<b>标签,<strong>标签

    • 语法:font-weight:normal | bold | bolder | lighter | 100~900

    • 默认值:normal

    • 400等同于normal,700等同于bold


  • 文字样式:font-style

    • HTML语法设置斜体:<em>标签,<i>标签

    • 语法:font-style:normal | italic(常用) | oblique


  • 字体变形:font-variant

    • 设置元素中文本为小型大写字母

    • 语法:font-variant:normal | small-caps


  • font属性(简写)

    • 语法:font:font-style font-variant font-weight font-size/line-helight(行高) font-family

    • 值之间空格隔开

    • 同时设置font-size和font-family,属性才会起作用

    • 注意书写顺序

    • font-italic bold small-caps 50px "黑体","宋体";

CSS文本样式
  • 水平对齐方式:text-align

    • 设置元素内内联元素(如文本和图片)的水平对齐方式

    • text-align:left | right | center | justify

    • 图片居中(设置图片的对齐方式,需要设置图片父元素的text-align属性):

      • 错误方法:img{text-align:center;}

      • 正确方法:div{text-align:center;}

        <div><img src="img/logo.png"/></div>

    • CSS text-align属性并不控制块级元素的对齐方式,它控制块级元素里面的内联元素的对齐方式。虽然这个属性的名称为text-align,但是块级元素中的所有内联元素都会被这个属性影响。


  • 行高:line-height

    • 设置元素中文本行高

    • 语法:line-height:长度值 | 百分比

    • 设置px时行高不会因字体大小改变而改变,而em和%于字体大小有关系

    • 实际开发中一般使用em这个单位

    • 浏览器有默认行高,不同浏览器默认行高不一样

    • 行高可继承,继承的是计算后的值,而不是直接把em或%的值继承过来


  • 垂直方式vertical-align属性

    • 设置元素内容的垂直方式

    • 语法:vertical-align:baselline | sub(下标) | super(上标) | top | text-top | middle | bottom | text-bottom

      vertical-align:长度 | 百分比

      • 基于文本基线移动

      • 上移:vertical-align:15px;

        vertical-align:100%;

      • 下移:vertical-align:-15px;

        vertical-align:-100%;

    • 对行内元素生效,对于块级元素不生效

    • 文字基线

    • 也可应用于单元格元素


  • 单行文字垂直水平居中:

    • 设置行高

    • text-align:center;

  • 多行文字垂直水平居中


  • 文本样式属性:

字体属性说明
word-spacing设置元素内单词之间间距
letter-spacing设置元素内字母之间间距
text-transform设置元素内文本的大小写 capitalize(首字母大写) | uppercase(大写) | lowercase(小写) | none
text-decoration设置元素内文本的装饰 underline(上划线) | overline(下划线) | line-through(贯穿线) | blink(闪烁效果,有兼容性问题) | none

间距属性值可以是正值也可以是负值,可以使用px也可以使用em

可以设置多个装饰样式属性值,中间用空格隔开

相关文章:

前端零基础学习Day-Eight

CSS字体和文本样式 CSS文字样式 字体&#xff1a;font-family 语法&#xff1a;font-family:[字体1][,字体2][,...] p{font-family:"微软雅黑","宋体","黑体";} 含空格字体名和中文&#xff0c;用英文引号括起 属性值&#xff1a;具体字体名&…...

贪心算法day3(最长递增序列问题)

目录 1.最长递增三元子序列 2.最长连续递增序列 1.最长递增三元子序列 题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;我们只需要设置两个数进行比较就好。设a为nums[0]&#xff0c;b 为一个无穷大的数&#xff0c;只要有比a小的数字就赋值…...

【论文复现】MSA+抑郁症模型总结(三)

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀MSA抑郁症模型 热门研究领域&#xff1a;情感计算的横向发展1. 概述2. 论文地址3. 研究背景4. 主要贡献5. 模型结构和代码6. 数据集介绍7. 性…...

【软件测试】敏捷模型(Scrum模型)和V模型、W模型

敏捷模型 前面的那些模型以前非常流行&#xff0c;但现在开发人员在使用的时候会遇到各种问题。主要困难包括在项目开发期间处理来自客户的变更请求&#xff0c;以及合并这些变更所需要的高成本和时间。 在实际工作中&#xff0c;一款产品的功能是不断在变化的 所以为了克服这…...

【go从零单排】接口(interface)和多态(Polymorphism)

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 在Go语言中&#xff0c;interface 是一种重要的类型&#xff0c;用于定义一组方法…...

SI5319C-C-GM,SiliconLabs芯科 SI5319C-C-GMR,时钟合成器/抖动清除器 封装 QFN-36 在售 20000PCS 23+

SI5319C-C-GM是SiliconLabs公司生产的时钟合成器和抖动清除器。它是一款高性能的时钟解决方案&#xff0c;可用于各种应用领域&#xff0c;包括通信、数据中心、消费电子等。 该器件采用了SiliconLabs独有的DSPLL技术&#xff0c;能够提供低抖动和高精度的时钟信号。它具有多个…...

使用批处理脚本批量删除Maven无效依赖

背景 在开发过程中&#xff0c;我们经常会遇到以下情况&#xff1a; 在pom.xml文件中错误地指定了依赖的名称。因为网络问题&#xff0c;某些依赖下载不完全。依赖版本号错误&#xff0c;导致下载的文件无法使用。 这些情况会导致Maven在本地仓库中留下一些无效的文件&#…...

腾讯cos对象存储,下行流量费贵,是否可以加入服务器减少费用,架构如何设计

腾讯云COS&#xff08;Cloud Object Storage&#xff09;对象存储服务提供了一种高效、安全、低成本的方式存储大量数据。然而&#xff0c;当涉及到外网下行流量时&#xff0c;确实会产生一定的费用&#xff0c;这可能会增加整体的成本。为了减少这些费用&#xff0c;可以通过以…...

【SAP】关于权限的继承

关于权限的父role和子role的权限继承&#xff0c;既可以 从子role主动去父role那里“取”。从父role“推”到子role 我自己之前一直用的是方法1&#xff0c;但由于子role很多&#xff0c;一个一个手工维护花了不少时间。 后来得知有方法2&#xff0c;特此测试。 我准备了父R…...

SpringBoot技术下的共享汽车运营平台

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理共享汽车管理系统的相关信息成为必然。开发…...

SwiftUI开发教程系列 - 第7章:数据流和状态管理

SwiftUI 的核心优势之一在于其声明式的数据绑定和状态管理系统&#xff0c;使得在多视图间传递和更新数据变得更加直观和高效。在本章中&#xff0c;我们将讨论如何使用 ObservedObject、EnvironmentObject、StateObject 等属性包装器进行复杂的数据管理&#xff0c;确保应用的…...

Ubuntu系统安装NVIDIA驱动、CUDA、PyTorch等GPU深度学习环境

学习目标&#xff1a; 在Ubuntu系统上安装CUDA、PyTorch等GPU深度学习环境&#xff0c;主要目标是为深入研究深度学习和深度强化学习提供高效的计算支持。通过构建GPU环境&#xff0c;计划掌握深度学习的基本概念和算法应用&#xff0c;提高模型训练效率&#xff0c;特别是在复…...

电子学会2024年3月青少年软件编程(图形化)等级考试试卷(三级)真题,含答案解析

我们今天分享的资料是:电子学会2024年3月青少年软件编程(图形化)等级考试试卷(三级)真题,含答案解析 电子学会 2024 年 3 月青少年软件编程(图形化)等级三级考试的主要考点包括但不限于以下内容: 理解变量的概念:能够新建变量,知道如何在舞台区显示或隐藏变量,理解…...

初学者指南:用例图——开启您的软件工程之旅

目录 背景&#xff1a; 基本组成&#xff1a; 关联&#xff08;Assciation&#xff09;&#xff1a; 包含&#xff08;Include&#xff09;&#xff1a; 扩展&#xff08;Extend&#xff09;&#xff1a; 泛化&#xff08;Inheritance&#xff09;&#xff1a; 完整银行…...

二叉树遍历/算法数据结构

六、树 6.1遍历算法 6.1.1前中后序 在做递归时&#xff0c;最重要是三步骤 确定递归函数的返回值和参数 确定终止条件 确定单层递归的逻辑 伪代码 void travel(cur, vec) {if (cur null) {return ;}vec.push(cur->middle, vec); // 递归中节点vec.push(cur->left, …...

C#字符串的不可变性:内存管理与线程安全的优势分析

在C#编程中&#xff0c;字符串&#xff08;String&#xff09;被设计为不可变对象&#xff0c;这意味着一旦创建字符串对象后&#xff0c;其内容是不可更改的。这种设计通过在每次修改字符串时创建一个新实例&#xff0c;而不是直接更改原有字符串实例&#xff0c;来实现不可变…...

【杂记】之语法学习第四课手写函数与结构体

函数 如同我们数学中学的 f(x) ax b &#xff0c;函数就是把一个东西丢进去&#xff0c;然后进行类似的操作变化&#xff0c;最终得到的可以是一个数&#xff0c;也可能什么都得不到而只是进行一项操作。 如sqrt() &#xff0c; max() 和 swap() 这样的其实都是函数&#x…...

细说STM32单片机USART中断收发RTC实时时间并改善其鲁棒性的另一种方法

目录 一、工程目的 1、目标 2、通讯协议及应对错误指令的处理目标 二、工程设置 三、程序改进 四、下载与调试 1、合规的指令 2、不以#开头&#xff0c;但以&#xff1b;结束&#xff0c;长度不限 3、以#开头&#xff0c;不以;结束&#xff0c;也不包含;&#xff0c;长…...

python使用turtle画图快速入门,轻松完成作业练习

turtle介绍 turtle是一个绘图库&#xff0c;可以通过编程进行绘图。其模拟了一个乌龟在屏幕上的运动过程。该库通常用于给青少年学习编程&#xff0c;当然&#xff0c;也可以使用其进行作图。 在一些学校中&#xff0c;可能在python学习的课程中&#xff0c;要求完成turtle绘…...

【C++】新手入门指南

> &#x1f343; 本系列为初阶C的内容&#xff0c;如果感兴趣&#xff0c;欢迎订阅&#x1f6a9; > &#x1f38a;个人主页:[小编的个人主页])小编的个人主页 > &#x1f380; &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐文章 > ✌️ &#x1f91e; &#x1…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

第八部分:阶段项目 6:构建 React 前端应用

现在&#xff0c;是时候将你学到的 React 基础知识付诸实践&#xff0c;构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段&#xff0c;你可以先使用模拟数据&#xff0c;或者如果你的后端 API&#xff08;阶段项目 5&#xff09;已经搭建好&#xff0c;可以直接连…...

在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率:以冒泡排序为例

目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码&#xff1a;冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...