`

CSS文本笔录

    博客分类:
  • CSS
CSS 
阅读更多

1. 缩进

 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值

属性值有三种:

  length       定义固定的缩进。默认值:0

  %               定义基于父元素宽度的百分比的缩进

  inherit       规定应该从父元素继承 text-indent 属性的值

【注意:1.任何版本均IE不支持属性值inherit(继承);2.不支持行内元素】

 2. 水平对齐

值 描述
left 把文本排列到左边。默认值:由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。

text-algin:justify在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。两端对齐文本在打印领域很常见

具体使用场景及注意事项我在后面文章http://570109268.iteye.com/blog/2409915里做了总结

 3 . 字间隔

word-spacing 属性可以改变字(单词)之间的标准间隔,其默认值 normal 与设置值为 0 是一样的。

接受一个正长度值或负长度值:如果提供一个正长度值,字间隔增加;为 word-spacing 设置负值,会拉近

 4 . 字母间隔

letter-spacing 属性的可取值包括所有长度,默认关键字是 normal(这与 letter-spacing:0 相同)。输入的长度值会使字母之间的间隔增加或减少指定的量

letter-spacing 与 word-spacing 的【区别】:字母间隔修改的是字符或字母之间的间隔

【适用场景】

段落汉字间距与英文字母用letter-spacing属性,英文段落单词间距用word-spacing属性

 5 . 字符转换

text-transform 属性处理文本的大小写,这个属性有 4 个值:

none(不修改),uppercase(大写),lowercase(小写),capitalize(首字母答案写)

<style type="text/css">
  p.uppercase {text-transform: uppercase}
  p.lowercase {text-transform: lowercase}
  p.capitalize {text-transform: capitalize}
</style>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<p class="capitalize">This is some text in a paragraph.</p>

【好处】

 ① 只需写一个简单的规则来完成这个修改,而无需修改 h1 元素本身;

 ② 如果以后决定将所有大小写再切换为原来的大小写,可以更容易地完成修改

 6 . 文本装饰(下划线,上划线,贯穿线)

text-decoration 有 5 个值:

none(无行为),underline(下划线),overline(上划线),line-through(贯穿线),blink(闪烁)

【效果】

①underline 会对元素加下划线,就像 HTML 中的 U 元素一样;

②overline 的作用恰好相反,会在文本的顶端画一个上划线;

③值 line-through 则在文本中间画一个贯穿线,等价于 HTML 中的 S 和 strike 元素

④blink 会让文本闪烁,类似于 Netscape 支持的颇招非议的 blink 标记

 7 . 处理空白符(换行/不换行)

white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理

通过使用该属性,可以影响浏览器处理字之间和文本行之间的空白符的方式

值 描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

 8 . 文本方向

如果是英文书籍,就会从左到右、从上到下地阅读,这就是英文的流方向。不过,并不是所有语言都如此。古汉语就是从右到左来阅读,当然还包括希伯来语和阿拉伯语等。CSS2 引入了一个属性来描述其方向性

direction 属性:

影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置

 【注释:】

对于行内元素,只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性

direction 属性有两个值:ltr 和 rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl

 9 . 字体

 ① 字体系列/声明

     font-family 规定元素的字体系列,可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表,浏览器会使用它可识别的第一个值

【2种字体系列】

     指定的系列名称:具体字体的名称,比如:"times"、"courier"、"arial(宋体)"

     通常字体系列名称:比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

     注意:使用某种特定的字体系列(Geneva)完全取决于用户机器上该字体系列是否可用;这个属性没有指示任何字体下载。因此,强烈推荐使用一个通用字体系列名作为后路

【字体名带单引号】

只有当字体名中有一个或多个空格(比如 New York),或者如果字体名包括 # 或 $ 之类的符号,才需要在 font-family 声明中加引号

单引号或双引号都可以接受。但是,如果把一个 font-family 属性放在 HTML 的 style 属性中,则需要使用该属性本身未使用的那种引号:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">字体声明加引号</p>

 ②字体倾斜

font-style 属性最常用于规定斜体文本,该属性有三个值:normal(正常),italic(斜体),oblique (斜体)

【italic 和 oblique 的区别】:web浏览器表现无异

 ③字体变形(小型大写字母)

font-variant 属性设置小型大写字母的字体显示文本,所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小

font-variant(字体变形)属性值:normal默认值;small-caps小型大写字母

 ④字体粗细

font-weight 属性设置文本的粗细

值 描述
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
  • 100-900
定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细。

 ⑤ 字体大小

font-size 值可以是绝对或相对值

【绝对值】

将文本设置为指定的大小;不允许用户在所有浏览器中改变文本大小(不利于可用性);绝对大小在确定了输出的物理尺寸时很有用

【相对值】

相对于周围的元素来设置大小;允许用户在浏览器改变文本大小

【注意】如果您没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em)

接下来对比下px(pixels像素)与em:

①px:

    通过像素px设置文本大小,可以对文本大小进行完全控制;

②em:

    通过em设置文本大小,1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变

    浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素

    可以使用下面这个公式将像素转换为 em:pixels/16=em

(注:16 等于父元素的默认字体大小,假设父元素的 font-size 为 20px,那么公式需改为:pixels/20=em)

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

 【em优点】

使用 em 单位,可以在所有浏览器中调整文本大小

【问题】

不幸的是,在 IE 中仍存在问题;在重设文本大小时,会比正常的尺寸更大或更小

【方案】

结合使用百分比和 EM

在所有浏览器中均有效的方案是为 body 元素(父元素)以百分比设置默认的 font-size 值:

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

这样在所有浏览器中,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小

分享到:
评论

相关推荐

    fireworks 4 经典笔录图解(CHM)

    1. **矢量绘图**:Fireworks 4提供了一套完整的矢量图形绘制工具,包括线条、形状、曲线、文本等,使设计师能够精确控制图形的每一个像素,创建出清晰、无损的图像。 2. **图层管理**:支持多图层编辑,可以方便地...

    struts2验证笔录

    - **样式定制**:可以使用`cssStyle`属性来定制错误消息的显示样式,如`&lt;s:actionerror cssStyle="color:red"/&gt;`。 - **表单元素样式**:通过设置`theme`属性来改变表单元素的外观,如`...

    voice100-tts

    ./data/japanese-single-speaker-speech-dataset/transcript.txt应该是笔录数据的路径。 运行预处理, $ python -m voice100.preprocess --dataset css10ja 这将生成data/css10ja_train.npz和data/css10ja_val....

    包容性设计清单:旨在成为有史以来最大的包容性设计清单

    删除可能不敏感或不确定的语言(使用“单数”)[ ] 提供视频内容字幕和成绩单 提供音频内容的笔录 确保主体(段落)文本不小于默认(用户代理)大小[ ] 支持“捏缩放”(删除user-scalable=no如果存在)) 使用相对...

    影刀RPA中级证书-数据处理-列表计算价格

    影刀RPA致力于为各行业客户提供高效、灵活的自动化解决方案。能够实现PC、手机上任何软件的自动化操作,支持Windows、Linux等操作系统,以及桌面软件、Web程序和手机App的自动化。 影刀RPA的核心功能包括数据抓取、解析、校验和自动填表,还支持可视化流程设计器、Python和JavaScript脚本接入,以及流程录制等功能,帮助用户快速搭建自动化流程。影刀RPA结合AI技术,支持机器视觉、自然语言处理等高级功能,进一步提升自动化能力。影刀RPA广泛应用于电商、金融、制造等行业,帮助客户实现订单处理、客户数据录入、财务对账等任务的自动化。影刀实战,影刀证书快速获取,影刀功能定制

    cloud单点登录集成

    cloud单点登录集成

    JAVAFX开发的虚拟桌宠,禁止商用!!!!

    女朋友生日,突发奇想用她喜欢的表情包做了个虚拟桌宠 大家要用只需要替换一下GIF就行

    大学生创新创业大赛项目 - 仿 Envato 的电商项目.zip

    大学生创业项目源码

    open-vm-tools-11.0.5-3.el7-9.9.x64-86.rpm.tar.gz

    1、文件内容:open-vm-tools-11.0.5-3.el7_9.9.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf open-vm-tools-11.0.5-3.el7_9.9.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持:公众号禅静编程坊

    华为网路设备学习-14 (web界面中复原防火墙实验)

    华为网路设备学习-14 (web界面中复原防火墙实验)

    基于springboot框架的Javaweb体育馆管理系统的设计与实现(完整源码+数据库sql文件+项目文档+Java项目编程实战+编程练手好项目).zip

    关键词:海滨体育馆管理,Java技术,MYSQL数据库,Spring Boot框架 1 引言 1 1.1 课题背景 1 1.2 设计原则 1 1.3 论文结构安排 2 2 系统关键技术 3 2.1 JAVA技术 3 2.2 B/S结构 3 2.3 MYSQL数据库 4 2.4 Spring Boot框架 4 3 系统分析 5 3.1 可行性分析 5 3.1.1 技术可行性 5 3.1.2 经济可行性 5 3.1.3 运行可行性 5 3.1.4 法律可行性 5 3.2 系统性能分析 5 3.3 系统功能分析 6 3.4 系统流程分析 7 3.4.1 注册登录流程 7 3.4.2 添加信息流程 8 3.4.3 删除信息流程 8 4 系统设计 9 4.1 系统概要设计 9 4.2 系统结构设计 9 4.3 系统顺序图设计 10 4.4 数据库设计 10 4.4.1 数据库E-R图设计 10 4.4.2 数据库表设计 12 5 系统的实现 15 5.1 登录模块的实现 15 5.2 注册模块的实现 15 5.3 学生管理模块的实现 16 5.4 系统主界面模块的实现 16 5.5 器材管理模块

    Python实现基于IBES-ELM基于改进的秃鹰搜索优化算法优化极限学习机的数据回归预测 多指标的详细项目实例(含完整的程序,GUI设计和代码详解)

    内容概要:本文档详细介绍了一个名为《Python实现基于IBES-ELM基于改进的秃鹰搜索优化算法优化极限学习机的数据回归预测》的项目。该项目旨在通过结合改进的秃鹰搜索优化算法(IBES-EO)和极限学习机(ELM),优化ELM模型以提高其预测精度,尤其针对多指标、高维数据以及噪声数据的处理进行了探讨。项目涵盖了从数据预处理到建模预测的一系列完整流程,并提供了代码案例和GUI界面设计思路。文档详细阐述了模型的工作机制、适用场景及其实现细节。 适合人群:对机器学习有兴趣,特别是对ELM、IBES-EO感兴趣的研究人员、开发人员和技术爱好者。 使用场景及目标:适用于各种回归预测问题,包括但不限于金融预测、气象预测、健康数据分析和智能交通系统等。目标在于提供一种高效的解决方案,提高在大规模复杂数据集中进行回归预测的能力,同时也展示了如何将生物启发式的优化算法运用于改进现有的机器学习模型,为实际应用提供更多可能。 阅读建议:文档按照章节顺序编排,从背景介绍到具体实现再到最终总结。初学者可以从头至尾通读,以掌握全流程概念和技能;有一定经验的读者可以直接跳转至自己感兴趣的环节,例如优化算法的具体设计或者代码实现部分。建议边学习边动手实验,以达到最佳的学习效果,并可通过提供的完整示例代码加深理解和记忆。此外,项目中有关于系统架构设计、API接口搭建等内容也可作为实际工程项目参考。

    智能海报设计助手:AI助力简易高效的海报制作解决方案

    内容概要:本文介绍了一款名为智能海报设计助手的应用程序,该应用程序是一款面向大众使用的AI工具,专注于解决普通人在设计高质量海报时遇到的问题。应用程序拥有强大的创意灵感库,可以根据用户提出的特定需求(例如主题、风格偏好等),快速推荐不同类型的海报设计方案,并配备智能化的一键素材筛选系统和自动排版功能,使得整个海报制作流程更为简化、高效,即使是无设计经验的用户也能独立完成高水平的作品。 适合人群:缺乏专业设计能力的广大非专业人士,如商家营销人员、活动策划者、个体创作者。 使用场景及目标:帮助需要短时间内完成海报宣传材料准备的工作人士提高工作效率,减少人力投入的同时获得媲美专业人士水准的成品。 阅读建议:文章旨在强调此智能海报设计器对普通用户的友好性和便捷性的特点,因此重点在于理解它是怎样利用先进技术来满足一般用户的实际应用需求的,而不仅仅关注具体的操作方法。这有助于潜在用户决定是否采用这一工具来进行海报创建工作。

    STL浅谈,从vector到map

    本文为C++ STL入门指南,详解vector、stack、map等核心容器的用法与底层原理,助你高效掌握标准模板库!

    大创项目驱动.zip

    大学生创业项目源码

    西门子S71511PLC实现PID程序控制阀门开度和模拟量转换:博途WinCC画面搭建完整演示,西门子S71511PLC实现PID程序控制阀门开度和模拟量转换:博途WinCC画面搭建完整演示,7自由度

    西门子S71511PLC实现PID程序控制阀门开度和模拟量转换:博途WinCC画面搭建完整演示,西门子S71511PLC实现PID程序控制阀门开度和模拟量转换:博途WinCC画面搭建完整演示,7自由度车辆动力学模型与联合仿真验证 软件使用:Carsim2020.0+Matlab Simulink2018b 适用场景:为了验证7自由度模型的正确性,与Carsim进行联合仿真验证,采用模块化建模方法,搭建了电机模型、参数计算、轮胎模型、7自由度动力学模型。 包含模块:电机模型模块1和2、参数计算模块、轮胎模型、7DOF模型、详细参考文献及说明文档。 包含:Matlab Simulink源码文件,详细建模说明文档,对应参考资料及相关文献, ,7自由度车辆动力学模型;联合仿真验证;Carsim2020.0;Matlab Simulink2018b;模块化建模方法;电机模型;参数计算模块;轮胎模型;详细参考文献;建模说明文档。,7自由度车辆模型联合仿真验证:Carsim2020.0与Matlab Simulink2018b应用实践

    【css酷炫效果】纯CSS实现立体纸张折叠动效

    对应博客地址:https://blog.csdn.net/u011561335/article/details/146313054

    大创项目前端.zip

    大学生创业项目源码

    大创项目_27.zip

    大学生创业项目源码

    【毕业设计】基于微信小程序的社区团购系统+ssm后端【源码+论文+答辩ppt+开题报告+任务书】.zip

    【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、MATLAB、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。

Global site tag (gtag.js) - Google Analytics