HTML5-CSS(二)
一、 CSS 文本样式
1.font-size
p {
font-size: 50px;
}
解释:设置文本的大小。
xx-small、x-small、small、medium、large、x-large(固定大小)
xx-large、smaller、larger(设置字体相对于父元素字体的大小)
数字+px (使用 CSS 像素长度设置字体大小)
数字+% (使用相对于父元素字体的百分比大小)
2.font-variant
p {
font-variant: small-caps;
}
解释:设置字体是否以小型大写字母显示。
normal: 表示如果以小型大写状态,让它恢复小写状态。
small-caps: 让小写字母以小型大写字母显示。
3.font-style
p {
font-style: italic;
}
解释:设置字体是否倾斜。
normal 表示让倾斜状态恢复到正常状态。
italic 表示使用斜体。
oblique 表示让文字倾斜。区别在没有斜体时使用。
4.font-weight
p {
font-weight: bold;
}
解释:设置字体是否加粗。
normal 表示让加粗的字体恢复正常。
bold 粗体
bolder 更粗的字体
lighter 轻细的字体
100 ~ 900 之间的数字 600 及之后是加粗,之前不加粗
5.font-family
p {
font-family: 微软雅黑;
}
解释:使用指定字体名称。这里使用的字体是浏览者系统的字体。有时为了兼容很多浏览者系统的字体,可以做几个后备字体。
6.font
p {
font: 50px 楷体;
}
解释:字体设置简写组合方式。格式如下:[是否倾斜|是否加粗|是否转小型大写] 字体大小 字体名称;
7.text-decoration
p {
text-decoration: underline;
}
解释:设置文本出现下划线。属性值如下表:值 说明
none 让本身有划线装饰的文本取消掉
underline 让文本的底部出现一条下划线
overline 让文本的头部出现一条上划线
line-through 让文本的中部出现一条删除划线
blink 让文本进行闪烁,基本不支持了
8.text-transform
p {
text-transform: uppercase;
}
解释:设置英文文本转换为大小写。值 说明
none 将已被转换大小写的值恢复到默认状态
capitalize 将英文单词首字母大写
uppercase 将英文转换为大写字母
lowercase 将英文转换为小写字母
9.text-shadow
p {
text-shadow : 5px 5px 3px black;
}
解释:给文本添加阴影。其中四个值,第一个值:水平偏移;第二个值:垂直偏移;第三个值:阴影模糊度(可选);第四个值:阴影颜色(可选)。
10.text-align
p {
text-align: center;
}
解释:指定文本的对齐方式。值 说明
left 靠左对齐,默认
right 靠右对齐
center 居中对齐
justify 内容两端对齐
start 让文本处于开始的边界
end 让文本处于结束的边界
start 和 end 属于 CSS3 新增的功能,但目前 IE 和 Opera 尚未支持。
11.white-space
p {
white-space: nowrap;
}
解释:处理空白排版方式。
值 说明
normal 默认值,空白符被压缩,文本自动换行
nowrap 空白符被压缩,文本不换行
pre 空白符被保留,遇到换行符则换行
pre-line 空白符被压缩,文本会在排满或遇换行符换行
pre-wrap 空白符被保留,文本会在排满或遇换行符换行
12.letter-spacing
p {
letter-spacing: 4px;
}
解释:设置文本之间的间距。值 说明
normal 设置默认间距长度值 比如:“数字”+“px”
13.word-spacing
p {
word-spacing: 14px;
}
解释:设置英文单子之间的间距。值 说明
normal 设置默认间距
长度值 比如:“数字”+“px”
14.line-height
p {
line-height: 200%;
}
解释:设置段落行高。值 说明
normal 设置默认间距
长度值 比如:“数字”+“px”
数值 比如:1,2,3
% 比如:200%
15.word-wrap
p {
word-wrap: break-word;
}
解释:让过长的英文单词断开。值 说明
normal 单词不断开
break-word 断开单词
16.text-indent
p {
text-indent: 20px;
}
解释:设置文本首行的缩进。值 说明
normal 设置默认间距
长度值 比如:“数字”+“px”
HTML5-CSS(二)的更多相关文章
- HTML5 & CSS初学者教程(详细、通俗易懂)
前端语言基础:HTML5 & CSS (一) HTML5:超文本标记语言 (1) 基本概念 是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 ) 这些标签以的形式出现 ...
- 使用 HTML5 & CSS 实现一个自定义开关按钮 switch button
使用 HTML5 & CSS 实现一个自定义开关按钮 switch button switch button <div class="switch"> < ...
- 酷炫,用Html5/CSS实现文字阴影
前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过 ...
- html5/css学习笔记
请始终将正斜杠添加到子文件夹.假如这样书写链接:href="http://www.w3cschool.cc/html",就会向服务器产生两次 HTTP 请求.这是因为服务器会添加正 ...
- css(二)
重新排传智的首页!头部和左边的部分完成了! <!doctype html> <html lang="en"> <head> <meta c ...
- 【原】无脑操作:HTML5 + CSS + JavaScript实现比赛排程
1.背景:朋友请帮忙做一个比赛排程软件 2.需求: ① 比赛人数未知,可以通过文本文件读取参赛人员名称: ② 对参赛人员随机分组,一组两人,两两PK,如果是奇数人数,某一个参赛人员成为幸运儿自动晋级: ...
- html5 css选择器。 井号,句号的区别
.理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:“body”),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的font-family ...
- 学习总结:CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型
一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...
- html5(二)
*{ margin:0px; padding:0px;} h1{ font:bold 20px verdana,sans-serif;} h1{ font:bold 14px verdana,sans ...
- CSS(二)属性--文本设置
HTML代码一 <body> <div>这是一个很黑很黑的夜晚,黑云密布,没有任何光亮透过.卖火柴的小姑娘.......</div> </body> C ...
随机推荐
- PyTorch全连接ReLU网络
PyTorch全连接ReLU网络 1.PyTorch的核心是两个主要特征: 一个n维张量,类似于numpy,但可以在GPU上运行 搭建和训练神经网络时的自动微分/求导机制 本文将使用全连接的ReLU网 ...
- GPU 硬件虚拟化Hardware Virtualization
GPU 硬件虚拟化Hardware Virtualization 1. Principles 一个物理GPU可以虚拟化为多个vGPUs.VMs可以绑定到vGPUs以直接访问一些物理GPU资源. 2. ...
- Kettle通过Http post请求webservice接口以及结果解析处理
kettle中有两种方式请求webservice服务,一个是Web服务查询,但是这个有缺陷,无法处理复杂的需求,遇到这种情况就需要用Http post来处理了. 网上也有很多关于Http post请求 ...
- 通过Dapr实现一个简单的基于.net的微服务电商系统(十七)——服务保护之动态配置与热重载
在上一篇文章里,我们通过注入sentinel component到apigateway实现了对下游服务的保护,不过受限于目前变更component需要人工的重新注入配置以及重启应用更新componen ...
- Django(63)drf权限源码分析与自定义权限
前言 上一篇我们分析了认证的源码,一个请求认证通过以后,第二步就是查看权限了,drf默认是允许所有用户访问 权限源码分析 源码入口:APIView.py文件下的initial方法下的check_per ...
- 20个提高开发效率的JavaScript技巧
减少代码行数和加快开发的技术! 我们在开发中,经常要写一些函数,如排序.搜索.寻找唯一的值.传递参数.交换值等,在这里我列出了我搜集的一些技术资源,可以像高手一样写出这些函数! JavaScript确 ...
- 【NX二次开发】Block UI 选择对象
属性说明 属性 类型 描述 常规 BlockID String 控件ID Enable Logical 是否可操作 Group ...
- centos 7 iotop 安装
安装指令:yum -y install iotop 指定查看aubunt 用户的读写状态:iotop -u aubunt -P -k -t 允许在非交互模式下每隔3秒刷新一次,只刷新6次:iotop ...
- Spring @Transaction 注解是如何执行事务的?
前言 相信小伙伴一定用过 @Transaction 注解,那 @Transaction 背后的秘密又知道多少呢? Spring 是如何开启事务的?又是如何进行提交事务和关闭事务的呢? 画图猜测 在开始 ...
- Golang中的各种时间操作
Golang中的各种时间操作 需求 时间格式的转换比较麻烦,自己写了个工具,可以通过工具中的这些方法相互调用转成自己想要的格式,代码如下,后续有新的函数再添加 实现代码 package utils i ...