继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【九月打卡】第8天 前端工程师2022版 文本与字体属性第一讲

artimis_new
关注TA
已关注
手记 39
粉丝 3
获赞 19

课程名称:前端工程师2022版

课程章节:文本与字体属性


课程讲师: elex

课程内容:

1.文字属性:

{

常用文本样式属性


color属性 可设置文本内容的前景色


color:#ff0000;黑色#000,白色#fff,灰色有#ccc,#333,#2f2f2f


rgb表示法


color:rgb(255,0,0);


rgba表示法,最后一个参数表示透明度


color:rgba(255,0,0,.65);


rgba从IE9开始兼容




font-size属性 用来设置字号,单位通常为px


font-size:30px;


网页正文通常16px,浏览器最小支持10px




font-weight属性 设置字体的粗细程度,通常就normal和bold两个值


normal 正常粗细


bold 加粗




font-style属性 设置字体倾斜


normal 取消倾斜


italic 倾斜字体


oblique 倾斜字体




text-decoration


none 没有修饰线


underline 下划线


line-through 删除线

}




字体属性:{




font-family    设置字体


    font-family: serif, "Times New Roman", "微软雅黑";


    字体可以是列表的形式,用逗号区分,后面的字体是前面字体的备用字体


    字体名称中有空格与中文书写的字体,需要用引号包裹


    一般英文字体放前面,以防中文字体中的英文字体覆盖英文字体


    字体通常用用户计算机中已经安装好的字体


    若自定义字体则需要引入字体文件,格式有 eot woff2 woff ttf svg


    一般只将需要的文字创建新字体,以缩小文件大小


    使用 @font-face 定义新字体


        @font-face {


            font-family: '字体名称';


            font-display: swap;


            src: url('字体文件地址.eot');


            /* IE9*/


            src: url('字体文件地址.eot?#iefix') format('embedded-opentype'),


                /* IE6-IE8 */


                url('字体文件地址.woff2') format('woff2'),


                url('字体文件地址.woff') format('woff'),


                /* chrome、firefox */


                url('字体文件地址.ttf') format('truetype'),


                /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/


                url('字体文件地址.svg#字体类型') format('svg');


            /* iOS 4.1- */


        }




注意:引号嵌套要用单双相间的方式,"111'22"3"22'111"


阿里巴巴普惠体


网址:https://www.iconfont.cn/webfont

  

 }


段落属性{

text-indent:2em;   首行缩进2个字符

/* 单词间隔 */

word-spacing: 10px;



line-height:1.5;定义行高 


    可以以px为单位的数值


    可以是没有单位的数值,表示字号的倍数(最推荐)


    可以是百分数,表示字号的倍数,150%




如果想让单行文本垂直居中,设置行高=盒子高度


text-align:center,即可实现文本水平居中

div{

            width: 500px;

            height: 200px;

            border: 1px solid #000;

            /* 垂直居中行高等于盒子高 */

            text-align: center;

            line-height: 200px;


        }




font合写属性


font-style,font-weight,font-size,line-height,font-family


font:20px/1.5 Arial,"微软雅黑"


字号20px 行高1.5倍 字体


font:italic bold 20px/1.5 Arial,"微软雅黑"

font: bold italic 40px/1.5 "Time New Roman","宋体"


倾斜 加粗 字号/行高 字体   顺序不能换*/


英文字体写着前面中文字体写在后面


}



继承性{

继承性


以下标签具有继承性


color


font-开头的


list-开头的


text-开头的


line-开头的



就近原则

在继承情况下,选择器权重计算失效,而是"就近原则"




课程收获:

谢谢老师,讲的非常细致,很容易懂。



打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP