`

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如果存在)) 使用相对...

    顶刊复现,基于Lyapunov的模型预测控制MPC方法,用于控制水下机器人AUV的路径跟踪问题trajectory tracking 具体的方法和建模过程可以参考文献 本代码包括水下机器人的fos

    顶刊复现,基于Lyapunov的模型预测控制MPC方法,用于控制水下机器人AUV的路径跟踪问题trajectory tracking 具体的方法和建模过程可以参考文献 本代码包括水下机器人的fossen动力学模型,matlab的优化算法求解器,还包括非线性反步法backstepping 的对比代码非常划算,两种对比都有 ,顶刊复现; Lyapunov模型预测控制MPC; 水下机器人AUV路径跟踪; Fossen动力学模型; Matlab优化算法求解器; 非线性反步法backstepping对比,基于Lyapunov模型预测控制的水下机器人AUV路径跟踪方法对比研究

    光学成像技术-极化敏感强度衍射断层扫描的原理与应用(适用于3D各向异性样品)(可复现,有问题联系博主)

    内容概要:本文由Seungri Song等人发表于期刊《光科学与应用》,主要介绍了新型计算三维极化敏感强度衍射断层扫描(PS-IDT),一种无需基准参考和惯性的基于矢量多切片束传播方法(MSBP)的3D成像新技术。这种方法利用明场显微镜附加LED环形阵列以及偏振组件即可完成多角度测量,实现3D琼斯矩阵重建并获得弱散射和多重散射样本的空间分布和光学各向异性的信息。文章不仅描述了实验装置、数据获取流程、重建步骤以及自我校准程序,还展示了对多种样品的成功测试,如马铃薯淀粉粒、小球藻和水熊虫,进一步验证了这一成像方式的应用前景和技术优势。 适用人群:光学工程研究人员、材料科学家及相关领域的学者与专业人士。 使用场景及目标:PS-IDT特别适合透明的微观结构,特别是那些存在复杂的光学特性并且可能引发多次散射现象的情况;旨在为生物医学研究提供高分辨率无损成像工具。此外它也可以扩展应用于需要精确表征物质内部结构特征的研究任务。 其他说明:目前该平台存在采集时间长的问题。未来发展方向可以考虑提高光源利用率来减少曝光时长以加快成像速度。与此同时,还可以探索将深度学习算法整合进重建过程中从而提升效率而不降

    实验环境安装及其它介绍.html.zip

    实验环境安装及其它介绍.html.zip

    wd表我我我我我我叫你家才能

    档位档位多

    鸡骨白汤W-5001检验表格(食品添加剂食用香精质量验收记录表).docx

    鸡骨白汤W-5001检验表格(食品添加剂食用香精质量验收记录表).docx

    【机器人项目】飞行器与机器人通用控制体系项目集合-chy5-zip

    【机器人项目】飞行器与机器人通用控制体系项目集合-chy5.zip,整合了飞行器与机器人共用的控制体系,涵盖核心算法、硬件接口及通信协议。项目旨在实现跨平台的高效控制,适用于多种应用场景,提升系统兼容性与开发效率。

    基于STM32的直流电机加减速正反转控制串口输出控制系统(P 1100009-基于STM32的直流电机加减速正反转控制串口输出控制系统(PCB 原理图 报告 源代码 proteus lcd1602)

    基于STM32的直流电机加减速正反转控制串口输出控制系统(P 1100009-基于STM32的直流电机加减速正反转控制串口输出控制系统(PCB 原理图 报告 源代码 proteus lcd1602) 功能描述:基于STM32平台 1、实现了电机控制正转、反转的功能 2、实现了电机控制加速、减速的功能 3、实现了串口输出控制信息的功能 4、串口可以模拟WIFI 蓝牙 RS232 等带有串口的功能。 资料包含: 1、源代码工程文件 2、仿真工程文件 3、lunwen报告1W字以上 4、原理图工程文件 5、PCB工程文件 ,核心关键词:STM32、直流电机、加减速、正反转控制、串口输出、控制信息、WIFI、蓝牙、RS232、源代码工程文件、仿真工程文件、原理图工程文件、PCB工程文件。,基于STM32的电机串口控制综合系统(含正反转、加减速及多种串口通信功能)

    网络流量采样在高吞吐量链路异常检测中的应用研究

    内容概要:本文探讨了高吞吐量网络链路异常检测中流量采样技术的应用及其效果。面对现代分布式信息系统频繁遭受的网络安全威胁,特别是互联网服务提供商(ISP)面临的威胁,作者提出一种通过减少数据采样频率以降低异常检测计算复杂度的方法。文中介绍了实验环境、系统架构、采用的数据聚合与采样方法以及用于检测异常的人工智能模型(基于自编码器神经网络)。通过对一个真实中型ISP生产环境中实际网络流量数据进行研究,该研究展示了即使在较低采样频率情况下仍能保持较高的异常检测准确性,尤其是针对持续时间较长的DDoS攻击更为显著。此外,论文还验证了所提系统的有效性和应用潜力,为构建高效的网络安全监控机制提供了新思路。 适用人群:对于计算机网络安全、数据分析或机器学习有兴趣的研究人员和从业人员,特别是那些专注于提高异常检测性能和应对高流量数据流的技术人员。 使用场景及目标:适用于希望在不影响业务操作的前提下引入额外层次防护措施的企业级网络管理员;研究者可参考本文中提出的流量预处理方式来探索不同的统计分布和采样间隔设置;企业可以通过部署该类系统快速响应潜在的安全事件并降低成本。

    [matlab程序系统设计]MATLAB的视频图像去雾(处理视频,GUI界面).zip

    该项目是个人实践项目,答辩评审分达到90分,代码都经过调试测试,确保可以运行!,可用于小白学习、进阶。 该资源主要针对计算机、通信、人工智能、自动化等相关专业的学生、老师或从业者下载使用,亦可作为期末课程设计、课程大作业、毕业设计等。 项目整体具有较高的学习借鉴价值!基础能力强的可以在此基础上修改调整,以实现不同的功能。 欢迎下载,欢迎沟通,互相学习,共同进步!提供答疑!

    常用电子管原理图封装库(AD库)

    在电子设计领域,尤其是模拟电路设计中,电子管起着至关重要的作用。这些古老的设备,尽管在现代数字电路中已不常见,但在某些特定的应用,如音频放大器、复古音响设备以及某些高功率射频系统中,电子管仍然占据主导地位。Altium Designer是一款广泛使用的电路设计软件,它提供了丰富的元器件库来支持各种设计需求,包括电子管。 标题"常用电子管原理图封装库(AD库)"指的是这个压缩包中包含了一系列常用电子管的原理图封装,适用于Altium Designer平台。这些封装是设计师在绘制电路原理图时需要用到的图形符号,它们精确地表示了电子管的引脚布局和电气特性,使得设计者能够直观地理解并连接各个元器件。 描述中的"6L,6S,12AU,5879,7199"列举了一些具体的电子管类型。这些型号分别代表了不同种类和用途的电子管。例如: - 6L和6S:这可能是对6系列电子管的泛称,6系列通常包含多种小型玻璃外壳的双三极管,用于音频放大和振荡电路。 - 12AU:这是一个常见的五脚功率放大管,常用于音频功放电路中,其内部结构可能包括一个控制栅极、两个屏极和两个阴极。 - 5879:这是一种九脚的电子管,常被用作音频功率放大器,具有较高的输出功率。 - 7199:这是一种特殊的高压大功率电子管,多用于雷达、工业设备或实验设备中。 ".SchLib"格式是Altium Designer的原理图库文件格式,这些封装库文件可以方便地导入到项目中,为设计者提供了一站式的电子管元器件选择,无需自己创建每个电子管的封装。 压缩包中的"4.5 - 电子管.SchLib"文件,很可能包含了上述所有电子管的封装,设计者可以通过Altium Designer打开并使用这些封装,直接拖放到原理图中,大大提高了设计效率和准确性。在使用时,设计师需要确保选择的封装与实际将要使用的电子管型号相符,以保证设计的电路能够正确地工作。 总结起来,这个"常用电子管原理图封装库(AD库)"是Altium Designer用户进行电子管相关电路设计的重要资源,它提供了多种常见电子管的封装,方便设计师快速绘制原理图,提高设计流程的效率。对于那些热衷于模拟电路和复古电子设备的人来说,这样的库是不可或缺的工具。。内容来源于网络分享,如有侵权请联系我删除。

    《电力电子技术(第5版)》-王兆安-逆变电路

    《电力电子技术(第5版)》_王兆安_逆变电路

    Matlab代码模拟枝晶生长可视化界面 ,Matlab; 枝晶生长; 代码模拟; 可视化界面; 生长过程模拟,Matlab模拟枝晶生长可视化界面

    Matlab代码模拟枝晶生长可视化界面 ,Matlab; 枝晶生长; 代码模拟; 可视化界面; 生长过程模拟,Matlab模拟枝晶生长可视化界面

    PFC5.02D煤层开挖案例代码,分步开挖,采用分步开挖 ,PFC5.02D;煤层开挖;分步开挖;案例代码,PFC5.0煤层分步开挖案例代码

    PFC5.02D煤层开挖案例代码,分步开挖,采用分步开挖 ,PFC5.02D;煤层开挖;分步开挖;案例代码,PFC5.0煤层分步开挖案例代码

    java-springboot+vue基于用户兴趣的影视推荐系统设计与实现源码(项目源码-说明文档).zip

    系统采用B/S架构,集成Spring Boot(后端)、Vue.js(前端)和MySQL(数据库),通过RESTful API实现前后端分离。采用MyBatis-Plus优化数据访问,模块化设计与自动配置提升开发效率,结合数据库索引和读写分离确保性能,Element UI提供友好交互,整体具备高扩展性和可维护性。

    花椒油检验表格(食品企业原辅料质量验收记录表).docx

    花椒油检验表格(食品企业原辅料质量验收记录表).docx

    java-springboot+vue汉服文化平台网站实现源码(项目源码-说明文档).zip

    系统采用B/S架构,集成Spring Boot(后端)、Vue.js(前端)和MySQL(数据库),通过RESTful API实现前后端分离。采用MyBatis-Plus优化数据访问,模块化设计与自动配置提升开发效率,结合数据库索引和读写分离确保性能,Element UI提供友好交互,整体具备高扩展性和可维护性。

Global site tag (gtag.js) - Google Analytics