HTML5+CSS3从入门到精通之CSS3文字属性
沉沙 2019-03-08 来源 : 阅读 826 评论 0

摘要:本篇文章探讨了HTML5+CSS3从入门到精通之CSS3文字属性,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

本篇文章探讨了HTML5+CSS3从入门到精通之CSS3文字属性,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

HTML5+CSS3从入门到精通之CSS3文字属性

<

文字属性注意的细节:
<!DOCTYPE html>
<html>
<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>
<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>
<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>靠右对齐的文字</p>
<p>这是段落</p>
<a href="">超链接</a>
</body>
</html>    

本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程