文字属性注意的细节:

<!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:文字属性的更多相关文章

  1. 使用CSS3各个属性实现小人的动画

    使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: <!DOCTYPE html> <html&g ...

  2. css3新增属性API

    写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz-  主要是firefox火狐 -webikt-主要是chr ...

  3. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

    摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...

  4. CSS3文字描边 CSS3字体外部描边

    给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...

  5. 两点补充——CSS3新属性以及弹性布局

    CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...

  6. css3新属性的学习使用

    display 可选值:none隐藏元素: block显示为块级元素: inline显示为行级元素 inlineblock显示为内联块级元素,本身将是一个行级元素,但是拥有 块级元素的所有属性,比如宽 ...

  7. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性)

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  8. CSS3 高级属性

    尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...

  9. CSS3文字阴影实现乳白文字效果

    CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...

随机推荐

  1. NLP笔记:词向量和语言模型

    NLP问题如果要转化为机器学习问题,第一步是要找一种方法把这些符号数学化. 有两种常见的表示方法: One-hot Representation,这种方法把每个词表示为一个很长的向量.这个向量的维度是 ...

  2. JS 字符串转换为number

    // '+ "42"' --> + 加上数字字符串可转换成数值 console.log(typeof (+ "42")); // 输出为 number

  3. yii框架通过IP地址来使用gii

    这里使用的YII框架的版本是2.0.13 详情请参考官方文档:用Gii生成代码 使用gii的主要步骤 1.生成模型(Model Generator) 2.生成CRUD代码 注意点 1.在生成CURD代 ...

  4. eclipse repository connector

  5. C语言ODBC数据库操作

    今天我们来介绍一下C语言操作数据库的方法,这里我们使用的是ODBC方式.环境是WIN7+VC6.其他环境也差不多,具体情况具体分析. 首先是环境的配置以及数据源的添加.这里就不去解释了,相关资料网上有 ...

  6. SpringBoot(十五)_springboot实现预览pdf

    最近,项目上要做个打印的东西,还要预览.我想就直接生成pdf预览,然后用户选择打印 于是,昨天找了找资料.一般用itext 进行转pdf.于是我就用springboot试了试,代码比较简单,现在只是简 ...

  7. 如何禁止复制电脑文件到U盘、禁止U盘拷贝文件

    在公司局域网中,有时候我们处于保护电脑文件安全和商业机密的需要,会禁止局域网电脑使用U盘.禁用USB存储设备:或者禁止通过U盘复制电脑文件.禁止U盘拷贝公司电脑文件.那么,怎样实现呢?本文提供两种方法 ...

  8. [代码]--c#-实现局域网聊天

    服务器端: using System; using System.Collections.Generic; using System.Linq; using System.Net; using Sys ...

  9. BBS论坛项目

    一.表结构设计: 1.帖子: class Article(models.Model): title = models.CharField(max_length=255,unique=True) cat ...

  10. BZOJ5343[Ctsc2018]混合果汁——主席树+二分答案

    题目链接: CTSC2018混合果汁 显然如果美味度高的合法那么美味度低的一定合法,因为美味度低的可选方案包含美味度高的可选方案. 那么我们二分一个美味度作为答案然后考虑如何验证? 选择时显然要贪心的 ...