css字体 text,css文本样式text、字体样式font

文本样式text

1.文本颜色color

例如h1 {color:red;}

2.文本方向direction,不常用

默认ltr从左到右,rtl表示从右到左

3.文本水平对齐方式text-align

如果文本方向为ltr即从左到右则默认左对齐,如果文本方向为rtl即从右到左则默认右对齐

left、center、right、justify分别表示左对齐、居中、右对齐、两端对齐

4.文本垂直对齐方式vertical-align,一般表格中会用到

默认为baseline,放在父元素的基线上

sub、supper垂直对齐文本的下标、上标,top、middle、bottom把元素的顶端与行中最高、中间、最低元素的顶端对齐,text-top、text-bottom把元素的顶端与父元素字体的顶端、低端对齐

5.设置或删除文本的装饰text-decoration

默认为none标准文本,这对于链接来说会去掉下面的下划线

underline、overline、line-through、blink分别表示文本下的一条线、文本上的一条线、穿过文本的一条线、闪烁的文本

6.文本首行缩进text-indent

默认0不缩进,text-indent:50px表示缩进50px

7.单词间距word-spacing,仅对英文单词有效,不常用

默认为normal,word-spacing:30px表示单词之间的间距为30px

8.字符间距letter-spacing,不常用

默认为normal,letter-spacing:2px表示字符间距为2px,字符间距可取负值

9.行高line-height

默认为normal,可通过具体值或者n%表示

10.文本转换text-transform

uppercase、lowercase、capitalize分别表示将英文字母转换为大写、小写、单词首字母大写

11.元素内空白的处理方式white-space

默认为normal被浏览器忽略,

nowrap:不换行,在上一行继续进行,直到遇到
换行标签

pre:被浏览器保留,类似html中的

标签

pre-nowrap:保留空白符序列,但是正常地进行换行

pre-line:合并空白符序列,但是保留换行符

12.文本阴影text-shadow

默认为none

如果有阴影则需指明水平和垂直方向,即h-shadow v-shadow

语法text-shadow:h-shadow v-shadow blur color

字体样式font

1.字体系列font-family,不常用

如果字体系列的名称超过一个字,则必须用引号;应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体将尝试下一种

font-family:"Times New Roman", Times, serif;

2.字体样式font-style

默认为normal正常字体,italic表示斜体,oblique和italic非常类似

3.字体大小font-size

字体大小用像素px表示,在ie中常用em来表示字体大小

默认字体大小为16px,即1em

4.字体粗细font-weight

默认为normal正常,lighter、bold、bolder分别表示细、粗、更粗的字体

也可直接用数值100-900表示,font-weight:400等同于normal,700等同于bold

5.小型大写字母font-variant

默认为normal正常,small-caps会显示小型大写字母的字体

例如对“My name is Hege Refsnes.”设置small-caps后,显示效果如下

dad0330c113932d0927355e11e36e0b1.png

上述所有设置字体的属性可集合在一起,直接通过font属性表示,按需选择即可。

解读CSS文本(text)样式

通过文本属性,您可以改变文本的颜色.字符间距.对齐文本.装饰文本.文本缩进,等等. color: 该属性用于改变文本的颜色,注意区分background-color. Line-height: 该属性 ...

html网页什么样的字体最好看,css设置各种中文字体样式代码

css代码如下:{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,Mi ...

css 文本属性和字体属性

1.将浮动居中 这需要三个盒子

CSS文本溢出效果&滚动条样式设置

一.文本溢出 1.overflow: hidden;  超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...

text字体样式(多行结尾省略,彩色渐变字体)

text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; ...

CSS 文本样式

1. 文本样式 text .text {color:red;} 2. 文本对齐方式    text-align

Confluence 6 中样式化字体

Confluence 提供了通过层叠样式表(CSS)调整页面展示情况的能力.本页面帮助你理解如何在 Confluence 中使用一些 CSS 样式修改字体样式和字体大小. 下面的代码为自定义的字体代码 ...

CSS文本与连接

CSS文本 CSS文本属性可以定义文本外观,通过文本属性,可以改变文本的颜色.字符间距.对齐文本.装饰文本.对文本缩进等等. 常用的文本属性 属性 描述 color 文本颜色 direction 文本 ...

CSS3:不可思议的border属性&Web字体图标Font Awesome

CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...

css 文本外观属性(text) 和 字体样式属性(font)

css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...

随机推荐

从零自学Hadoop(04):Linux准备下

阅读目录 序 搭建环境 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 我们已经准 ...

[Django]下拉表单与模型查询

前言:本文主要针对自定义下拉表单制作,下拉表单的内容是取至于数据库,即动态实现下拉表单 正文: 动态实现下拉表单有两种方法: 一.自己手动写 html 模板中的

&l ...

PingUtil in Android

Ping a host in Android:“ping -c 1 127.0.0.1”-c 1: The ping times. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1 ...

HTML5适合移动应用开发的几大特性

1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以 ...

Codeforces Round #346 (Div. 2)---E. New Reform--- 并查集(或连通图)

Codeforces Round #346 (Div. 2)---E. New Reform E. New Reform time limit per test 1 second memory lim ...

Java 读写XML文件 API--org.dom4j

om4j是一个Java的XML API,类似于jdom,用来读写XML文件的.dom4j是一个十分优秀的JavaXML API,具有性能优异.功能强大和极其易使用的特点,同时它也是一个开放源代码的软件 ...

关于Yaffs2在u-boot中的支持

开发板是一块2G的MLC的NandFlash,页大小8k+512,为其移植u-boot到yaffs2这了.以前在Mini2440上移植过2k+64的slc的NandFlash的Yaffs2支持,当然也 ...

Domain Model(领域模型) 和 EntityFramework 如何正确进行对象关系映射?

Domain Model(领域模型) 和 EntityFramework 如何正确进行对象关系映射? 写在前面 阅读目录: 设计误区 数据库已死 枚举映射 关联映射 后记 在上一篇<一缕阳光:D ...

python基础学习(一)--数据类型

Python一个 高级语言 2017-09-19 1.1  Python背景简介(感谢伟大的廖雪峰大佬带我们走上一条光头路,嘿嘿) 写了大半年Python代码,感觉收获不是很大,都是现学现卖,没有系统 ...

Redis 队列好处

Redis 队列好处 .降低流量高峰(并不是提升处理能力,系统的整体处理能力不变) .解除耦合(任务格式定好,各自演变,互不影响) .高可用(后台升级/崩溃完全不影响客户端的响应)

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值