CSS字体设置的一些技巧(行高,加粗,强制换行等)

文本是网页中最重要的一种内容形式,文本几乎可以写在任何地方,块级元素中可以写行内元素中也可以写。文本都是由一个个字符组成的,在css布局中,每一个字符都有一个em框,通常font-size设置的大小就是设置的em框的大小;这样再由这些各个字符的em框串在一起组成的框就是这些文本的内容区。在没有行间距的情况下即line-height为1时,上下两行的内容区是紧紧相连的,此时font-size的大小就是基线之间的距离大小。如果设置了line-height,在布局时就会用line-height减去font-size所得的值再一分为二平均分配在内容区的上下两端,这样就得到了行内框。

此时有两点特性:
1.line-height 减 font-size 等于 行间距。
2.line-height的值就是基线之间的距离大小。当然这前提是line-height要大于font-size的。如果设置的line-height比font-size还要小,那么就会有负的行间距,这负的行间距外在表现就是行与行之间会重叠,重叠的高度是他俩差的绝对值。

设置文本相关的样式有:
1.font-size 设置字体大小  语法<length>|<percentage>

2.font-family 设置字体类型  语法[<family-name>]#,当设置多个类型的时候后面的是前面的备选


3.font-weight 设置字体加粗  语法bold|normal|100|200|...


4.font-style 设置字体倾斜   语法normal|italic


5.line-height 设置行高      语法normal|<number>|<length>|<percentage>
行高有一个要注意的地方就是在继承行高的时候,百分数和数字的继承是有区别的,数字是直接继承,就是说继承过来的line-height还是数
字,子元素的行高再根据这个数字进行计算。百分数是继承计算后的值,例如父元素line-height是50%,font-size是20px,那么子元素继承
的不是50%,而是20*50&=10px。

font的值缩写语法:[<font-style>||<font-weight>]?<font-size>[/<line-height>?<font-family>],最少要有大小和类型

6.text-shadow 设置文本阴影  语法none|[<length>{2,3}&&<color>?]  第一个值表示x轴的偏移,第二个值是y轴的偏移,第三个可选的值
是阴影模糊半径

7.text-decoration 设置文本划线  语法none|[underline||overline||line-through] 表示下划线、上划线、管穿线

8.text-overflow   设置文本溢出处理  语法clip|ellipsis    ellipsis表示溢出时加......省略号
这里要注意,text-overflow一般不单独使用,要配合overflow和white-space使用,例如h2 {text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}


关于设置文本行的样式有:
1.text-align 这是设置水平对齐方式的,是设置所有行的,并且这个样式只能应用在块级元素。语法left|right|center|justify

2.vertical-align 这是设置垂直对齐方式的,只能应用于行内元素上,不能继承,设置的是这个行内元素中的文本相对于父元素中的文本的垂直位置。
语法baseline|sub|supper|top|...

3.text-indent 设置的是第一行的缩进,只能应用于块级元素。语法<lenght>|<percentage> 负数的缩进会把文本隐藏掉而不是溢出。

4.white-space 设置的是文本中换行和空格的处理  语法nowrap|pre|pre-wrap|pre-line
nowrap表示不换行
pre表示保留文本的换行和空格,并且在溢出时仍然不换行
pre-wrap表示保留文本的换行和空格,但在溢出时自动换行
pre-line 只保留换行

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java memcache 队列_基于memcache的java分布式队列实现。

主要有两个类&#xff0c;一个队列类和一个job的抽象类。保证队列类中的key的唯一性&#xff0c;就可以用spring配置多个实例。水平有限&#xff0c;欢迎吐槽。上代码&#xff1a;1、队列类import net.spy.memcached.MemcachedClient;import net.spy.memcached.internal.Operat…

【题解】 [ZJOI2009]假期的宿舍 (二分图匹配)

懒得复制题面&#xff0c;戳我 Solution: 处理出床位、要留校的人&#xff08;注意来访问的人一定住校&#xff09;&#xff0c;和人与人的关系&#xff08;连边&#xff09;再接着就是二分图。注意的就是连向的人必须是有床位的还要注意的就是只用判断住校的同学二分图板子都打…

android-线程池-最顺手的写法

引子 关于线程池&#xff0c;在这里写出几种最顺手的写法&#xff0c;至于原理以及各种细节。放后面再填&#xff1b; 经过查证&#xff0c;凡是 以前new Thread&#xff08;&#xff09;的地方&#xff0c;貌似都可以用线程池来执行&#xff0c;优化内存消耗。 代码 系统提供的…

使用Java和Google GSON解析ESPN API

在我的第一篇文章中&#xff0c;我将解释如何解析ESPN API。 可以在http://developer.espn.com/docs上找到API文档。 首先&#xff0c;您需要请求一个API密钥&#xff0c;然后可以开始查询REST API以检索JSON响应。 在下面的示例中&#xff0c;我将简单地查询在英格兰英超联赛…

java string对象创建对象_Java String 创建了几个对象

我们首先来看一段代码&#xff1a;Java代码String strnew String("abc");紧接着这段代码之后的往往是这个问题&#xff0c;那就是这行代码究竟创建了几个String对象呢&#xff1f;相信大家对这道题并不陌生&#xff0c;答案也是众所周知的&#xff0c;2个。接下来我们…

js 图片不保存的回显功能/图片尺寸验证/图片大小验证 /图片类型验证

大部分转自&#xff1a;http://blog.csdn.net/qq_39200924/article/details/79198766 在项目中经常用到input标签来上传文件&#xff0c;而这些文件通常是图片文件。图片有很多格式我们只需要其中的几种&#xff0c;就需要对用户上传的文件进行验证&#xff0c;在HTML5中有一个…

sqlx使用说明

sqlx使用指南 参考链接: http://jmoiron.github.io/sqlx/ sqlx是一个go语言包&#xff0c;在内置database/sql包之上增加了很多扩展&#xff0c;简化数据库操作代码的书写 资源 如果对go语言的sql用法不熟悉&#xff0c;可以到下面网站学习:http://go-database-sql.org/ 如果对…

填充一个池需要多少个线程?

近几个月来&#xff0c;我们一直看到一小部分但持续的操作失败&#xff0c;并带有一个奇怪的异常– org.springframework.jdbc.CannotGetJdbcConnectionException –“无法获得JDBC连接&#xff1b; 嵌套异常是java.sql.SQLException&#xff1a;客户端尝试检出Connection的尝试…

@font-face 用字体画图标

HTML 1 <body>2 <!-- ul.layout>li*5>a[href#]>i.icon -->3 <!-- Sublime Text 快捷拼写 -->4 <ul class"layout">5 <li><a href"#"><i class"icon">&#xe601;</…

java mapfile_基于文件的数据结构:关于MapFile

MapFile是已经排过序的SequenceFile&#xff0c;它有索引&#xff0c;所以可以按键查找1.MapFile的写操作MapFile的写操作类似于SequenceFile的写操作。新建一个MapFile.Writer实例&#xff0c;然后调用append()方法顺序写入文件内容。如果不按顺序写入&#xff0c;就抛出一个I…

linux scp 命令

scp 命令 scp 命令 意思是 secure copy 即安全拷贝&#xff0c;可以把它看做是 cp 命令的高级版&#xff0c;可以跨主机拷贝。 经常用来在局域网内不同主机之间分享文件&#xff0c;或者在本机与远程主机中分享文件。 在使用的时候就像使用cp 命令一样&#xff0c;第一个参数是…

工厂设计模式–一种有效的方法

如您所知&#xff0c;工厂方法模式或俗称工厂设计模式是“创意设计模式”类别下的一种设计模式。 模式背后的基本原理是&#xff0c;在运行时&#xff0c;我们根据传递的参数获得类似类型的对象。 关于这种模式有很多文章&#xff0c;开发人员可以通过各种方式来实现它。 在本文…

java 循环依赖_解决Java循环依赖的问题

最近看到一个问题&#xff1a;如果有两个类A和B&#xff0c;A类中有一个B的对象b&#xff0c;B类中有一个A的对象a&#xff0c;那么如何解决这两个类的相互依赖关系呢&#xff0c;几天就给大家说一下Java的循环依赖&#xff0c;raksmart服务器。举个栗子1&#xff1a;可以看到A…

CSS块元素水平垂直居中的实现技巧

针对之前遇到过的一些特殊样式的实现&#xff0c;我今天做个总结&#xff0c;目的有二&#xff1a;一是将这些方法记录下来&#xff0c;以便将来需要用到时查找使用。二为将这些大神们智慧的结晶发扬光大&#xff0c;让广大前端程序猿们能够少走弯路。此贴为更新帖&#xff0c;…

Intellij IDEA 将工程转换成maven工程 详解

1> 右键工程&#xff0c;点击 Add Framework Support2> 选中 Maven&#xff0c;再点击 OK3> 工程根目录自动生成 pom.xml 文件&#xff0c;这样 工程就支持 Maven版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 http://blog.csdn.net/che…

设置Apache Hadoop多节点集群

我们正在分享有关在基于Linux的机器&#xff08;多节点&#xff09;上安装Apache Hadoop的经验。 在这里&#xff0c;我们还将分享我们在各种故障排除方面的经验&#xff0c;并在将来进行更新。 用户创建和其他配置步骤– 我们首先在每个集群中添加一个专用的Hadoop系统用户。…

数据结构(七)排序---直接插入排序(稳定)

经典排序算法----直接插入排序算法及其改进&#xff08;稳定&#xff09; 定义&#xff1a; 直接插入排序的基本操作是将一个记录插入到已经排好序的有序表中&#xff0c;从而得到一个新的&#xff0c;记录数加一的有序表。 实现思想 我们预留了一个哨兵&#xff0c;这里我们将…

CSS3中的透明属性opacity的用法实例

实例设置 div 元素的不透明级别&#xff1a;div{opacity:0.5;}完整例子&#xff1a;<!DOCTYPE html><html><head><style> div{background-color:red;opacity:0.5;filter:Alpha(opacity50); /* IE8 以及更早的浏览器 */}</style></head><…

java嵌套类型 无法隐藏外层类型_java内部类深入详解 内部类的分类 特点 定义方式 使用...

java内部类 内部类的分类 特点 定义方式 使用 外部类调用内部类 多层嵌套内部类 内部类访问外部类属性 接口中的内部类 内部类的继承 内部类的覆盖 局部内部类 成员内部类 静态内部类 匿名内部类内部类定义将一个类定义放到另一个类的内部,这就是内部类内部类与组合是完…

java.io.FileNotFoundException: generatorConfig.xml (系统找不到指定的文件。)

在使用MyBatis的逆向工程生成代码时&#xff0c;一直报错java.io.FileNotFoundException: generatorConfig.xml (系统找不到指定的文件。)&#xff0c;如图 文件结构如下&#xff1a; 代码如下&#xff1a; import java.io.File; import java.util.ArrayList; import java.util…