CSS3：文字属性
文字属性注意的细节：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
p {
/*font-family: "unknow font","Microsoft Yahei";*/
font-family: "Times New Roman","Microsoft Yahei";
}
</style>
</head>
<body>
<!--
1：如果设置的字体不存在，那么系统会使用默认的字体来显示宋体
2：如果设置的字体不存在，而我们又不想用默认的字体来显示怎么办？
可以给字体设置备选方案：font-family: "unknow font","Microsoft Yahei";
3：如果想给中文和英文分别设置单独的字体，怎么办？
但凡是中文字体，里面都包含了英文；但凡是英文字体，里面都没有包含中文
也就是说中文字体可以处理英文，而英文字体不能处理中文
所以英文字体的设置要写在中文字体设置的前面：font-family: "Times New Roman","Microsoft Yahei"; 补充：在企业开发中最常见的字体有以下几个：
中文：宋体 (SimSun)/黑体(SimHei)/微软雅黑 (Microsoft YaHei)
英文："Times New Roman"/Arial
以上字体，在操作系统中默认就有
因为中文字体其实都有自己的英文名称，所以是不是中文字体主要看能不能处理中文
-->
<p>ABC这是一个段落</p>
</body>
</html>
文字属性的缩写格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
p {
/*font-style:italic;
font-weight:bold;
font-size:10px;
font-family:"Microsoft YaHei";*/
font:italic bold 10px "Microsoft YaHei";
}
</style>
</head>
<body>
<!--
p {
font-style:italic;
font-weight:bold;
font-size:10px;
font-family:"Microsoft YaHei";
}
缩写的格式为：
p {
font:italic bold 10px "Microsoft YaHei";
}
注意点：
1：在缩写格式中有的属性值可以省略，如：style , weight属性
2：在缩写格式中style和weight的位置可以互换
3：size与family两个属性不能省略且位置不能互换，size属性一定写在family的前面
-->
<p>ABC这是一个段落</p>
</body>
</html>
文本相关属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
p {
text-decoration:underline;
}
a {
text-decoration: none;
}
.right {
text-align: right;
}
</style>
</head>
<body>
<!--
1：文本装饰的属性
text-decoration:underline;
该属性的取值如下：
underline：下划线
line-through：删除线
overline：上划线
none：常见用途就是去掉超链接的下划线
2：文本水平对齐的属性
text-align: right;
取值：
right：右
left：左
center：居中
3：文本缩进的属性
text-indent: 2em
取值：
2em：em是单位，一个em代表缩进一个文字的宽度 --> <u>这是带下划线的文字</u>
<s>这是带删除线文字</s>
<o>这是带删除线文字</o>
<p class="right">靠右对齐的文字</p>
<p>这是段落</p>
<a href="">超链接</a>
</body>
</html>
CSS3：文字属性的更多相关文章
- 使用CSS3各个属性实现小人的动画
使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: <!DOCTYPE html> <html&g ...
- css3新增属性API
写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz- 主要是firefox火狐 -webikt-主要是chr ...
- 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果
摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...
- CSS3文字描边 CSS3字体外部描边
给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...
- 两点补充——CSS3新属性以及弹性布局
CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...
- css3新属性的学习使用
display 可选值:none隐藏元素: block显示为块级元素: inline显示为行级元素 inlineblock显示为内联块级元素,本身将是一个行级元素,但是拥有 块级元素的所有属性,比如宽 ...
- 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现（含h5/css3新增属性）
大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...
- CSS3 高级属性
尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...
- CSS3文字阴影实现乳白文字效果
CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...
随机推荐
- Beta阶段爬取数目预估
预计于12月29号能进行Beta版本发布. Beta阶段我们的爬取动作应该更有针对性,在爬取期间如若数据处理小组有需求,会优先爬取数据处理小组提供的种子链接.预估在项目展示之前能够爬取的数目: 普通网 ...
- 一些调格式的经验 & 插入图注和尾注
一些调格式的经验(以Word2010为例) 1. 从目录正文分别编页码 将光标放在要重新编写页码起始页的最开始位置 分节:页面布局->分隔符->分节符(连续) 插入页码后,选中页码起始页页 ...
- DockerHub使用简介
常用的Docker镜像文件都有,就不用自己费劲的一点点配置了,这才是Docker的真正目的.就像Ghost里边含office,直接还原,不用一台台机器安装呢,省时省力,与高效工作的理念相契合. 至于, ...
- Jmeter 常用断言使用
响应断言 可根据要测试响应字段和模式匹配规则来设置断言,比如下方截图是匹配返回的结果中是否包含"code:200,",如果包含则表示断言成功,否则失败.响应断言可添加多个,但是多个 ...
- Linux中gcc与g++编译器的区别
一.对于C文件 对于C文件gcc和g++所做的事情确实是一样的,g++在编译C文件时调用了gcc. 二.对于C++文件 1.预处理 预处理gcc与g++做了相同的事. 2.编译 gcc无法自动和c++ ...
- java面向对象的核心思想
java面向对象的特征之一:封装 1.封装性的使用 package edu.tongji.classdemo; /* 封装性 1.封装的目的:保护某些属性和方法不被外部所见 2.封装的实现 为属性和方 ...
- ACM数论之旅12---康托展开（(*ﾟ▽ﾟ*)装甲展开，主推进器启动，倒计时3,2,1......）
在我们做题中,搜索也好,动态规划也好,我们往往有时候需要用一个数字表示一种状态 比如有8个灯泡排成一排,如果你用0和1表示灯泡的发光情况 那么一排灯泡就可以转换为一个二进制数字了 比如 0110011 ...
- hive存储、数据模型、内部表
创建内部表 加一列元素 删除表
- Java之枚举类范例
代码如下: package catf.component.http.model; /** * @Auther:gongxingrui * @Date:2018-04-17 * @Description ...
- CSS实现水平垂直同时居中的6种思路
前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的6种思路 水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂直居中 <style ...