文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【CSS】CSS 总结 ② ( CSS 字体文本样式 - 大小 字体 粗细 斜体 颜色 对齐 | CSS 标签显示模式 - 块级元素 行内元素 行内块元素 ) ★

一、CSS 字体文本样式 1、CSS 字体设置 CSS 字体设置 : 大小设置 : font-size 属性值 的单位 推荐使用 px 像素 , Google 浏览器默认文字大小 16 像素 ; font-size...:16px; 字体设置 : 常用 微软雅黑 / 宋体 / 黑体 , 如果 指定了多个字体 , 优先使用前面的字体 ; font-family:"微软雅黑"; font-family:"黑体",Arial...: text-align 属性 , 可以设置 文本对齐方式 , 为标签设置该 CSS 样式 , 标签内的内容就会使用相应的对齐方式 ; text-align 属性 取值 : left : 左对齐..., 该值是默认值 ; right : 右对齐 ; center : 居中对齐 ; text-align:center; 文本行间距 : line-height 属性 , 用于 设置 行间距 , 又称为...行高 = 高度 样式 , 文本即可在 盒子模型 中 垂直居中 ; div { height: 200px; /* 定义容器高度 */ line-height: 200px; /* 与容器高度保持一致

2.7K10

「Adobe国际认证」平面设计师的，终极排版术语综合指南，都包含了哪些设计要点？

字体与字体 这两个术语经常被混淆，但是字体与字体之间是有区别的。字体，有时也称为字体系列，是指字母和数字的设计（字母的外观）。 字体是指在字体本身内分类的不同粗细和样式。...这些字符可能包含重音、装饰性或在同一字体中具有其他变体。 排版分类 有数以千计的字体类型可供选择，找出每种字体的共同特征并对其进行分类会很有帮助。...X-高度 也称为语料库大小，这是基线和字体中小写字母的平均高度之间的距离。通常，这是字体中“x”的高度，因此得名“x-height”。...根据字体的不同，书脊可能接近垂直或接近水平。 曲线的一种。有些人认为终端只是一个衬线字母的笔划，结尾没有衬线。 排版中的手臂或腿是字符的上部或下部元素，从水平或对角线的笔划中分出。...它们用于测量字体大小、行距以及其他整体排版和图形设计中的空间问题。一英寸有 72 个点。 pica 是设计软件中使用的另一种印刷测量单位。它相当于大约 ⅙ 英寸，或 1/72 英尺。

72900
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    《精通CSS》第4章 网页排版

    但要注意的是，在元素继承的时候，继承的是计算后的值。这就会导致如果我们在body上设置1.5em，其他元素继承的并不是1.5em，而是24px。这显然不是我们想要的。...垂直对齐 垂直对齐vertical-align的默认值是基线对齐baseline，即子元素的基线与父元素的基线对齐。...vertical-align不同值对应效果 其中text-top与text-bottom会让当前元素的内容区和父元素的内容区顶部或底部对齐，但只有在行内盒子的 font-size 或 line-height...font-variant更准确的说是字体的一种变体，需要字体支持。 text-transform可以控制英文字母大小写。...如下，我们可以将h1元素中的字母全部大写。 h1 { text-transform: uppercase; } font-variant是字体的特殊变体，需要字体支持。

    1.4K20

    那些不常见，但却非常实用的css属性(整理不易)

    object-position 属性来指定被替换元素的内容对象在元素框内的对齐方式。...在上面 object-fit 的展示中，我们发现可替换元素的对齐方式都是自动的。 比如 object-fit: fill; 的左上角和父容器的左上角对齐。...normal 关闭一切特殊字符变体的使用。 small-caps 允许小型大写字母的使用（OpenType 特性：smcp）。小型大写字母指使用大写形式，但尺寸与对应小写字母相同的字母。...unicase 允许将大写字母转化为小型大写字母与普通小写字母的混用 （OpenType 特性: unic）。 titling-caps 允许首字母大写（OpenType 特性: titl）。...大写字母变体字符通常被设计成用于小写字母。在标题序列中，如果均使用大写字母，可能会带来过于强烈的视觉效果。首字母大写即用来应对这种情况。 ?

    2.3K10

    文字如何实现完美UI？文本排版设计告诉你

    手机端的UI要求简单而干净，使用同种风格的字体是保持界面清爽的关键。避免单调，您可以选择一种辅助字体与主要字体形成对比。这种情况下，界面的字体数量要控制在2到3种，多则混乱。 ?...但如果您足够细心，您可能会注意到，这通常出现在英文文本中，大写字母与小写字母之间的空间和两个小写字母之间的空间不尽相同。这会造成一定的视觉失调，破坏美感。 ?...功能性文本需要突出，可点击的元素应该足够大，以便用户可以点击它们。 ? 8. 对齐 通常，文本对齐方式有4种：左，右，中或两端对齐。哪一种在手机排版中更好？ 关键是要保持舒适清晰的边距。...字型和品牌 同一款app或系统，建议使用单个字型并演变几种不同字体变体和不同尺寸。混合几个不同的字型会使您的界面看起来分散和混乱。通常，品牌或应用程序拥有自己的预设字型。...原型设计 文版排版设计在很多设计范围类都至关重要，原型设计中也是必不可少，优秀的文本排版，能够和其他元素组件共同服务于干净的UI界面。但在原型设计中，文本不需要具备真正的意义。

    2.6K70

    全栈之前端 | 8.CSS3基础知识之文本样式学习

    通过本章将学习如下文本属性，您可以改变文本的颜色、文本及其他元素宽高尺寸、文本方向、对齐文本、文本进行缩进、字符间距、文本装饰以及文本大小和字体等。... width/height 属性 - 元素宽度与高度设置 height 属性设置元素的高度，定义元素内容区的高度，在内容区外面可以增加内边距、边框和外边距，行内非替换元素会忽略这个属性。...# 语法参数: direction: ltr | rtl; # ltr ：可设置文本和其他元素的默认方向是从左到右（默认属性）。 # rtl ：可设置文本和其他元素的默认方向是从右到左。...* center: 居中对齐 * justify：文字向两侧对齐，对最后一行无效。 * justify-all 实验性: 与 justify 一致，但是强制使最后一行两端对齐。...text-transform 属性 - 控制元素中的字母大小写 描述: 此属性指定如何将元素的文本大写，它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。

    38720

    CSS笔记

    文本字体 font-family:设置字体 font-size:字体大小 font-style:斜体(normal正常，italic斜体，oblique偏斜体) font-weight: 加粗(normal...正常，bold粗体，bolder特粗，lighter特细体) font-variant:字体变体 letter-spacing:字母间距 word-spacing:单词间距 text-decoration...text-indent:段落缩进 line-height:调整行高 text-transform:转换英文大小写(lowercase所有小写，uppercase所有大写，capitalize首个大字母大写...display:none 隐藏的元素不会占用任何空间 visibility:hidden 隐藏的元素仍需占用与未隐藏之前一样的空间 定位 postion: absolute(绝对定位)，其位置相对于最近已定位的父元素...left right none 布局-水平&垂直对齐 要水平居中对齐一个元素(如 ), 可以使用 margin: auto; 文本在元素内居中对齐，可以使用 text-align: center; 导航栏

    1.9K20

    【云端架构】前端必备“层叠样式表”精选

    (正常) 行高 {line-height: normal;}(正常) 单位：PX、PD、EM 粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体...{font-variant: small-caps;}(小型大写字母) normal;(正常) 大小写 {text-transform: capitalize;}(首字母大写) uppercase;(.../*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/ 指定背景位置 background-position : 90% 90%; /*背景图片x与y...border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/ 其他框线样式...{font-family:"字体1","字体2","字体3",...} 3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large

    1.1K130

    HarmonyOS-UIAbitity-枚举说明——【坚果派-红目香薰】

    FlexAlign 名称 描述 Start 元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。...Center 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 End 元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。...SpaceBetween Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。...Exchange 将源页面元素移动到目标页面元素位置并适当缩放。 FontStyle 名称 描述 Normal 标准的字体样式。 Italic 斜体的字体样式。...TextCase 名称 描述 Normal 保持文本原有大小写。 LowerCase 文本采用全小写。 UpperCase 文本采用全大写。

    15710

    寒假提升 ｜ Day4 CSS 第二部分

    也可以在index.css文件中通过 @import url(路径) 引入其他css样式 五....(W3C inline-level) 特性 或者其他方法 text-align: 直接翻译过来设置文本的对齐方式 ; MDN:定义行内内容(例如文字)如何相对它的块父元素对齐; 常用的值 left :左对齐...(重要,不过一般仅设置一次) font-family 用于设置 可以设置1个或者多个字体名称; 浏览器会选择列表中第一个该计算机上有安装的字体; 或者是通过 @font-face 指定的可以直接下载的字体...= 行距 line-height 用于设置文本的行高 行高可以先简单理解为一行文字所占据的高度 行高的严格定义是: 两行文字基线(baseline)之间的间距 基线(baseline): 与小写字母...x最底部对齐的线 注意区分 height 和 line-height 的区别 height :元素的整体高度 line-height :元素中每一行文字所占据的高度 应用实例: 假设 div 中只有一行文字

    1.2K30

    16个小的UI设计规则却能产生巨大的影响

    选择单一无衬线字体，并使用具有较高小写字母和适当行高的字体，提升可读性。同时，避免过度使用大写字母，因为它们难以阅读。此外，避免使用纯黑色文本，采用较暗的灰色可以提高可读性并减少眼部疲劳。...3:1 确保文字的对比度为4.5:1 不要仅依赖颜色作为指示器 使用单一的无衬线字体 使用小写字母较高的字体 限制大写字母的使用 只使用常规和粗体字重 避免使用纯黑色的文字 左对齐文字 正文行间距至少为...在我们的例子中，图标容器的视觉样式与“立即预订”按钮相似。这使它们看起来像是可以交互的，尽管它们并非如此。移除图标的蓝色和按钮样式有助于避免它们被误认为是可以交互的元素。...12.使用具有较高小写字母的字体 寻找具有较高小写字母和更大字母间距的字体，因为它们通常在小尺寸下更易读。字体中小写字母的高度被称为 x-height。...将文本左对齐可以提高可读性，并且与上方左对齐的文本保持一致。 16.正文文本的行高应至少为1.5倍 行高是两行文本之间的垂直距离。行与行之间的间距有助于避免人们重读同一行文本。

    36420

    前端程序员要懂的 UI 设计知识

    调整留白前后 对齐 接下来是对齐。这是确保每个元素相对于其他元素正确放置的过程，例如通过对其列在页面上保持向下对齐。...从下图中可以看到，第一页的元素在许多不同的列中（弱对齐）远没有第二页的吸引力和可读性好，而第二页具有很强的对齐性： ? 页面对齐不良 ?...有很多方法可以调整这个设置，包括字体选择、字体大小、对齐方式、字母间距、行高、字体样式、颜色和对比度等。...UI 的某些元素比其他元素更重要。视觉层次结构使我们可以确立这种重要性。 可以用位置、对比度、颜色、比例、样式或以上各项的组合来完成此操作，如下面的第二个图像所示，它有比第一个图更好的视觉层次。...使用字体和颜色建立视觉层次 总结 在本文中，我们介绍了七个主要的设计基础：留白，颜色，对比，比例，对齐方式，版式和视觉层次。

    1.2K10

    6-css样式

    字体族：font-family 字体大小：font-size 字体粗细：font-weight font-weight：400 normal默认 bold加粗 bolder lighter 字体颜色color...:50px 可以将父元素的高度撑起来 文本水平对齐方式：text-align left，center，right 文本所在行高的垂直对齐方式：vertical-align baseline默认 sub垂直对齐文本的下标...，和sub标签一样的效果 super垂直对齐文本的上标，和sup标签一样的效果 top对象的顶端与所在容器的顶端对齐 text-top对象的顶端与所在行文字顶端对齐 middle元素对象基于基线垂直对齐...bottom对象的底端与所在行的文字底部对齐 text-bottom对象的底端与所在行文字的底端对齐 文本缩进text-indent text-indent:2em 通常用在段落开始位置的首行缩进 字母之间的间距...letter-spacing 单词之间间距：word-spacing 文本的大小写text-transform capitalize文本中的每个单词以大写字母开头。

    1.9K20

    自定义 SwiftUI 中符号图像的外观

    这使我们能够将符号的大小与不同的文本样式对齐，确保UI的视觉一致性。...这个修饰符改变符号笔画的粗细，使我们能够将符号与周围的文本匹配或对比。...有三个选项：小、中、大，它们根据字体大小按比例缩放符号。如果没有明确设置字体，符号将从当前环境中继承字体。....imageScale(.large)}.font(.headline)不建议通过应用resizable()修饰符并设置框架来调整符号图像的大小，因为这样做会使图像停止作为符号图像，从而影响其与文本的布局和对齐...为了传达深度和视觉层次，我们应该使用分层渲染模式，它可以提升某些图层，并区分符号内的前景和背景元素。设计变体符号可以有不同的设计变体，例如填充和斜杠，以帮助传达特定的状态和操作。

    12610

    CSS语法小记

    text-align:left/center/right 垂直对齐方式 vertical-align:sub[下标]、super[上标]、top[同行最高元素顶部对齐]、middle[同行元素中部对齐...]、bottom[同行最低元素底端对齐] 空白处理 white-space:normal[自动换行]、pre[换行和空白受保护]、nowrap[强制在同一行显示] 大小写控制 text-transform...:none[正常大小]、capitalize[首字母转大写]、uppercase[转换成大写]、lowercase[转换成小写] 　　注意： 　　　　1.字体的属性最好使用引号引起来，而且在设置字体时可以设置多个样式而且样式之间用逗号隔开...，前者设置英文字体，后者设置汉文字体。 　　　　...2.想要文字在在垂直方向上居中：将行高设置为元素高度（行高=元素高度）（前提：文字的内容不能超过元素的宽度，也就是不能换行）。

    51110

    HTML、CSS温故而知新

    HTML 用于创建网页的标准标记语言 1.1 HTML 语法 标签和属性不区分大小写，但是推荐小写 部分空标签可以不闭合，如 input、meta 属性值推荐使用双引号包裹 属性值为 true 时，可以省略属性值...、large 长度：px、em 百分比：相对于父元素字体大小 2.3.3 字体粗细 font-weight font-weight: 100-900 normal(400), bold(700) 2.3.4...padding 值 + 左右 border 值，box-sizing为 border-box 上两张图片来源：https://www.jianshu.com/p/7dadcc458410 2.6 块级元素与行级元素的区别...块级 行级 不和其他盒子并列摆放 可以和其他行级盒子一起放到一行 适应所有的盒模型属性 盒模型中的 width、height 不适用 2.7 行级排版上下文(IFC)和块级排版上下文(BFC) 2.7.1...vertical-align 决定一个盒子在行内的垂直对齐 避开浮动(float)元素 2.7.2 块级排版上下文(BFC) BlockFormatting Context 某些容器会创建一个 BFC

    91310

    IT课程 CSS基础 022_文本、字体、链接

    : center;">这段文本居中对齐 效果： 行高 使用 line-height 属性，可设置文本行与行之间的高度。...pre-line：保留换行符，合并连续的空白字符，其他空白字符按照正常规则处理。 pre-wrap：保留空白字符，合并连续的空白字符，保留换行符。...none：默认值，保持文本的原始大小写形式。 capitalize：将每个单词的首字母转换为大写。 uppercase：将文本全部转换为大写。 lowercase：将文本全部转换为小写。...使用相对值时，字体大小的大小是相对于父元素的字体大小的。相对值单位包括： em、rem、vw、vh 等。 使用关键字指定字体大小，可以提高可读性和一致性。...bolder: 相对于父元素更粗的字体。 lighter: 相对于父元素更细的字体。 数字值：使用数字值来设置字体的粗细，数字值范围通常从 100 到 900。

    11510
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券