「CSS」文本编排相关的CSS属性设置

1、font-family:设置字体族。

格式为font-family:字体1,字体2,……,通用字体族|inherit。

通用字体族,是指一类相似的字体。W3C的CSS规则规定,要指定一个通用字体族,避免客户端没有安装指定字体时能使用本机上的通用字体族中的字体。该属性及其值的涵义如下图

2、font-size:设置文本的大小。该属性及其值的涵义如下图

3、font-weight:设置文本加粗。该属性及其值的涵义如下图

4、font-style:可设置字体是正常还是斜体。该属性及其值的涵义如下图

5、line-height:设置文本的行高,它是指上下文本行的基线之间的垂直距离。其属性及其值的涵义如下图

6、字体属性font:是字体设置的简写形式,其格式及解释如下:

其中,用[]括住的属性是可选的,而font-size和font-family是必须要写的两个属性,其他属性若不写,则网页将使用它们对应的默认值。另外,font-size/line-height必须用/组成一个,不能分开写。例如:

这段CSS设置了字号为12像素,2倍行距,字体族为arial 和arial black。

7、字体颜色color属性:

8、text-align属性:设置文本的水平对齐方式。其值有三,分别是左对齐left(默认)、居中对齐center、右对齐right。

9、首行缩进属性text-indent:其属性值及涵义见下图。

10、文本修饰属性text-decoration:用来设置文本是否带有下划线或删划线等,其值及涵义如下图:

11、字符间距属性letter-spacing:设置字符与字符之间的间隔,正值是拉宽字符间距,负值是缩小字符间距。其值及涵义如下图:

12、字间距属性word-spacing:设置单词与单词之间的间隔。该属性对包含两个词以上的英文有作用,对汉字是没有作用的。

例如,定义一种文本样式,其字体族为“黑体,宋体,新宋体”,字体粗细为500,斜体,大小16像素,行距26像素,红色,带下划线,则代码应写成下图所示:

原文地址:https://www.cnblogs.com/wrxblog/p/9768697.html

时间: 2024-10-12 01:24:21

「CSS」文本编排相关的CSS属性设置的相关文章

Css颜色定义的方法汇总color属性设置方式

颜色的定义方式用rgb()里面带上十进制的数字来定义. color:rgb(211,123,135); 用预定义的颜色名称. color:red; rgba()最后一个参数是不透明度. color:rgba(1,23,45,0.5); 用hsl()函数 color:hsl(78,70%,90%); 用hsla()函数 color:hsla(234,100%,45%,0.9); 用hex表示. color:#02a2e2;

「HTML+CSS」css升华篇

经验之谈: inline\inline-block\block元素 inline\inline-block文本类元素 凡是带有inline的元素都有文本类特点 诸如:->->->文本类元素有回车,空格 再如:-> -> 再如: 淘宝顶栏布局: inline-block 文本类元素,和里面的元素进行低对其 vertical 「HTML+CSS」css升华篇 原文地址:https://www.cnblogs.com/apelles/p/11634846.html

「HTML+CSS」css基础属性

当权重相等,后来先到覆盖 颜色 div{ border:100px solid black; width: 0px; height: 0px; border-left-color: blue; border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; } 「HTML+CSS」css基础属性 原文地址:https://www.cnblogs.com/apelles

css基础-css选择器和css文本样式相关

css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>class选择器>标签选择器 如果设置了同样的类样式,类样式与元素里类的顺序没

web前端入门到实战:css选择器和css文本样式相关

[文章来源微信公众号:每天学编程]---关注,后台领取编程资源 css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url("*.css");使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>

「CSS」css基础

1. 文字水平居中 将一段文字置于容器的水平中点,只要设置text-align属性即可: text-align:center; 2. 容器水平居中 先该容器设置一个明确宽度,然后将margin的水平值设为auto即可. div#container { width:760px; margin:0 auto; } 3. 文字垂直居中 单行文字的垂直居中,只要将行高与容器高设为相等即可. 比如,容器中有一行数字. <div id="container">1234567890<

与换行相关的css属性简单介绍

与换行相关的css属性简单介绍:在css布局中可能需要人为的进行操作是否换行,如何换行,本章节就就做一下简单介绍.一.word-break属性:此属性用来设定文本如何进行换行.语法结构: word-break:normal | break-all | keep-all 参数解析:1.normal:默认值,原则上规定在断字点换行,通俗的说就是在单词与语单词之间可以进行换行,但是如果单词特别的长,超出了行的长度,可以从单词内部断开进行换行.2.break-all:此属性值能够实现强制将单词从内部截断

推荐20款基于 jQuery &amp; CSS 的文本效果插件

jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQuery 插件. 所以今天我们将展示一些很酷的文本效果插件,将帮助你为你的 Web 页面创建一些很酷的和动态的东西.这里是20个基于 jQuery & CSS 的文本效果插件. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件

「wxParser」小程序插件:想在小程序中快速部署富文本?这个插件让你一步搞定

上期,我们在<「微信同声传译」小程序插件:快速实现语音转文字.文本翻译.语音合成等能力>一文中介绍了「微信同声传译」小程序插件的意义.作用以及应用.而在此之前,我们还介绍过「腾讯地图」.「腾讯视频」.「医院 LBS 位置服务」插件,有兴趣了解的读者可以点击「微信极客WeGeek」公众号底部菜单「极客干货 - 小程序插件」了解. 今天我们为大家推荐的是一款富文本渲染插件「wxParser」,目前 wxParser 支持对一般的富文本内容包括标题.字体大小.对齐和列表等进行解析.同时也支持表格.代