文字属性注意的细节：

<!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. <四则运算>第二次冲刺

    这一次冲刺的主要内容是完善我们的界面,是我们的APP界面更规划更标准一点, 然后还要添加一些新算法. 距离客户的需求已经一半了. 代码正在完善中,稍后上传...

  2. 关于HashMap和Hashtable的区别

    Hashtable的应用非常广泛,HashMap是新框架中用来代替Hashtable的类,也就是说建议使用HashMap,不要使用Hashtable.可能你觉得Hashtable很好用,为什么不用呢? ...

  3. 异常 try – finally 注意的地方

    finally 异常机制中还有一个重要的部分,就是finally, catch后面可以跟finally语句,语法如下所示:   try{ //可能抛出异常 }catch(Exception e){ / ...

  4. atcoder B - Frog 2 （DP）

    B - Frog 2 Time Limit: 2 sec / Memory Limit: 1024 MB Score : 100100 points Problem Statement There a ...

  5. Java设计模式之工厂模式（Factory模式）介绍（转载）

    原文见:http://www.jb51.net/article/62068.htm 这篇文章主要介绍了Java设计模式之工厂模式(Factory模式)介绍,本文讲解了为何使用工厂模式.工厂方法.抽象工 ...

  6. .NET 使用 RabbitMQ 图文简介

    前言 最近项目要使用RabbitMQ,园里里面已经有很多优秀的文章,Rabbitmq官网也有.net实例.这里我尝试下图文并茂之形式记录下使用的过程. 安装 RabbitMQ是建立在erlang OT ...

  7. vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法

    vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法 在vue 里面<style scoped></style> 是为了让样式只影响本身自己组件的样式,不改变全 ...

  8. [转帖] IIS经典模式和集成模式的区别

    在 IIS 7.0 中,应用程序池有两种运行模式:集成模式和经典模式. https://blog.csdn.net/hongwei_23/article/details/44300923 这里面添加一 ...

  9. Win2012r2 以及win2016 安装.NET3.5

    自从微软的内核 6.2以上的版本之后 win2012 win2016 已经自带了 .net4.0的版本 但是很多应用还需要.net 3.5的版本,虽然微软的安装盘里面有 .net 3.5的安装文件,但 ...

  10. oracle小知识点

    一 . procedure和function: procedure和function在语法上几乎完全一样,使用上却有小小的差别, procedure可以单独的调用 在命令行直接exec pro_xxx ...