1.2 CSS字体属性、文本属性与引入方式 Bertha 。 2022-11-19 01:15 167阅读 0赞 **声明**:本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记,如果想详细了解的可以搜索以下网址: 1. H5C3+移动布局:[ 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩][_pink_ HTML5_CSS3_-flex_rem_-] 2. JavaScript系列 :[JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程(持续更新)][JavaScript_-dom_bom-es6-jQuery-_echarts-_pink] ### 文章目录 ### * * 3. CSS字体属性 * * 3.1 字体系列 * 3.2 字体大小 * 3.3 字体粗细 * 3.4 文字样式 * 3.5 字体复合属性 * 4. CSS文本属性 * * 4.1 文本颜色 * 4.2 对齐文本 * 4.3 装饰文本 * 4.4 文本缩进 * 4.5 行间距 * 5. CSS引入方式 * * 5.1 内部样式表 * 5.2 行内样式表 * 5.3 外部样式表 * 5.4 CSS样式总结 * 5.4 CSS样式总结 -------------------- ## 3. CSS字体属性 ## *CSS Fonts(字体)属性用于定义***字体系列、大小、粗细和文字样式**(如斜体)\* ### 3.1 字体系列 ### *CSS使用 font-family 属性定义文本的字体系列* p { font-family:"微软雅黑"; } div { font-family: Arial, "Microsoft Yahei", "微软雅黑"; <!-- 各个字体之间英文逗号分隔--> } 尽量使用系统默认自带字体,最常见的字体:body\{font-family: ‘Microsoft Yahei’, tahoma, arial, ‘Horagino Sans GB’;\} ### 3.2 字体大小 ### CSS使用 font-size属性定义字体大小 p { font-size: 20px; } * px(像素)大小是我们网页的最常用的单位,谷歌浏览器默认文字大小为16px * 不同浏览器可能默认字体大小不一致,所以尽量给明确的大小,不要使用默认值 * 可以给body指定整个页面文字的大小,但是标题标签比较特殊,需要单独指定文字大小 ### 3.3 字体粗细 ### CSS使用 font-weight 属性定设置字体粗细 .bold { /* font-weight: bold; */ /* normal(正常,400),bold(加粗,700) */ font-weight: 700; /* 实际开发中,提倡使用数字表示加粗或变细(100-900),注意不跟单位!! */ } h2 { /*font-weight: normal;*/ font-weight: 400; /* 标题一般需要单独指定,而不使用body */ } ### 3.4 文字样式 ### CSS使用 font-style 属性设置文本的风格 p { font-style: normal; } <table> <thead> <tr> <th align="center">属性值</th> <th align="center">作用</th> </tr> </thead> <tbody> <tr> <td align="center">normal</td> <td align="center">默认值,浏览器会显示标准的字体样式</td> </tr> <tr> <td align="center">italic</td> <td align="center">浏览器会显示斜体的字体样式</td> </tr> </tbody> </table> 注意:平时我们很少给文字加斜体,反而要给斜体标签(em, i)改为不倾斜字体 ### 3.5 字体复合属性 ### 复合属性可以把以上文字样式综合来写,这样可以更节约代码 body { /*font: font-style font-weight font-size/line-height font-family; 各个属性空格隔开,不能够调换顺序(倾斜。加粗,大小,字体)*/ font: italic 700 16px 'Microsoft yahei'; } 注意:不需要设置的属性可以省略(取默认值),但是必须保留font-size和font-family属性,否则font属性将不起作用 ## 4. CSS文本属性 ## *CSS Text (文本) 属性可定义文本的外观,比如文本的颜色,对齐文本、装饰文本、文本缩进、行间距等。* ### 4.1 文本颜色 ### color属性用于定于文本的颜色 div { color: red; } <table> <thead> <tr> <th>颜色表示</th> <th>属性值</th> </tr> </thead> <tbody> <tr> <td>预定义的颜色值</td> <td>red、green、blue、pink。。。</td> </tr> <tr> <td>十六进制(开发中最常用)</td> <td>#FF0000、#FF6600、#29D794</td> </tr> <tr> <td>RGB代码</td> <td>rgb(255, 0, 0)或 rgb(100%, 0%, 0%)</td> </tr> </tbody> </table> ### 4.2 对齐文本 ### text-align属性用于设置元素内文本内容的水平对齐方式 div { text-align: center; /*本质是让盒子里的文字水平居中对齐 */ text-align: right; text-align: left; /*左对齐,默认值*/ } ### 4.3 装饰文本 ### text-decoration 属性规定添加到文本的修饰,可以给文本添加下划线、删除线、上划线等。 div { text-decoration: underline; } a { text-decoration: none; /*常用来取消链接a自带的下划线*/ } <table> <thead> <tr> <th>属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>none</td> <td>默认,没有装饰线(最常用)</td> </tr> <tr> <td>underline</td> <td>下划线,链接a自带下划线(常用)</td> </tr> <tr> <td>overline</td> <td>上划线(几乎不用)</td> </tr> <tr> <td>line-through</td> <td>删除线(几乎不用)</td> </tr> </tbody> </table> ### 4.4 文本缩进 ### text-indent 属性用来指定文本的第一行的缩进,通常是将段落的首行缩进 div { text-indent: 10px; } 通过设置该属性,所有元素的第一行都会缩进一个给定的长度,甚至该长度可以为负值 p { text-indent: 2em; } **em**是一个相对单位,就是当前元素(font-size)的一个文字的大小,如果当前元素没有设置大小,就会按照父元素的一个文字大小 ### 4.5 行间距 ### line-height 属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离 p { line-height: 26px; /*字体默认16px,则上下间距各为5px*/ } ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KkZO9RBk-1618323117595)(C:\\Users\\lp\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210413214026899.png)\]][img-KkZO9RBk-1618323117595_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210413214026899.png] ## 5. CSS引入方式 ## 按照CSS样式书写的位置(或者引入的方式),CSS样式表可以分为三大类 * 行内样式表(行内式) * 内部样式表(嵌入式) * 外部样式表(链接式) ### 5.1 内部样式表 ### 内部样式表是写到html页面内部,是将所有CSS代码抽取出来,单独放到一个<style>标签中 <style> div { color: red; } </style> * <style>标签理论上可以放到html文档中任意位置,但一般都会放到文档的<head>标签中。 * 通过此种方式,可以方便控制当前整个页面中的元素样式设置 * 代码结构清晰,但是并没有完全实现结构和样式完全分离,通常练习时比较常用 ### 5.2 行内样式表 ### 行内样式表是在元素标签内部的style属性中设定CSS样式,适合于修改简单样式 <div style="color:red;"> 123 </div> * style其实是标签的属性,在双引号中间设置样式,不推荐大量使用 ### 5.3 外部样式表 ### 样式表单独写到CSS文件中,之后再把CSS文件引入到HTML文件中使用,实际开发中最常用,适合样式比较多的情况 引入外部样式表分为两步: * 新建一个后缀名为.css的CSS文件,把所有CSS代码放到此文件中 * 在html页面中,使用<link>标签引入这个文件 <link rel="stylesheet" href="css文件路径"> ### 5.4 CSS样式总结 ### CSS文件引入到HTML文件中使用,实际开发中最常用,适合样式比较多的情况 引入外部样式表分为两步: * 新建一个后缀名为.css的CSS文件,把所有CSS代码放到此文件中 * 在html页面中,使用<link>标签引入这个文件 <link rel="stylesheet" href="css文件路径"> ### 5.4 CSS样式总结 ### ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nachrhm9-1618323117597)(C:\\Users\\lp\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210413220857225.png)\]][img-nachrhm9-1618323117597_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210413220857225.png] [_pink_ HTML5_CSS3_-flex_rem_-]: https://www.bilibili.com/video/BV14J4114768?spm_id_from=333.788.b_636f6d6d656e74.6 [JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]: https://www.bilibili.com/video/BV1Sy4y1C7ha?spm_id_from=333.788.b_636f6d6d656e74.7 [img-KkZO9RBk-1618323117595_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210413214026899.png]: /images/20221022/dae40eacbc264a83a65907c79717b844.png [img-nachrhm9-1618323117597_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210413220857225.png]: /images/20221022/0ed433efd1134648b202997f3a13870e.png
还没有评论,来说两句吧...