【慕课网】前端零基础入门---步骤二：页面化妆师CSS---02-CSS文本样式
2024-05-11 05:33:45
02-CSS文本样式
第1章 字体样式
1-1 字体属性（font-family）
因此，标题可以使用Serif字体集，大段文字可以使用Sans Serif。
注意：使用常用的字体，而不要将自己安装的字体来设为网页的字体，这样别人在预览你的页面的时候，如果他的电脑上没有这个字体的时候，文字不会美观。
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style type="text/css">p{font-family: "微软雅黑","隶书";}</style>
</head>
<body><h3 style="font-family: '宋体',serif;">css样式表</h3><p>css目前最新版本为css3</p>
</body>
</html>
1-2 字体大小（font-size）
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style type="text/css">div{font-size: 20px;}h3{font-family: "宋体";font-size: 2em;}.em{font-family: "微软雅黑";font-size: 1.5em;}a{font-size: 1.5em;}</style>
</head>
<body><div><h3>web前端工程师</h3><p class="em"><a href="#">Web前端开发工程师</a>，主要职责是利用HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。</p></div>
</body>
</html>
1-3 字体颜色（color）
这么多颜色不可能一一记住，可以通过百度web安全色来查询每种颜色相对应的16进制。
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style type="text/css">div{font-size: 20px;}h3{color: rgb(100%,0%,0%); font-family: "宋体"; font-size: 1.5em;}p{font-family: "微软雅黑";}span{color: #336699; font-size: 2em;}</style>
</head>
<body><div><h3>css层叠样式表</h3><p><span>CSS</span>目前最新版本为css3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，css能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。css能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</p></div>
</body>
</html>
1-4 文字样式（其他）
italic为倾斜
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style type="text/css">*{color: blue;font-size: 2em;font-family: "微软雅黑";}.bold{font-weight: bold;}.italic{font-style: italic;}.small-caps{font-variant: small-caps;}</style>
</head>
<body><div class="bold">font-weight属性规定字体的粗细</div><div class="italic">font-weight属性规定字体的粗细</div><div class="small-caps">font-weight属性规定字体的粗细</div>
</body>
</html>
1-5 简写font属性
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style type="text/css">.a{font:italic small-caps bold 20px "微软雅黑"; color: red;}.b{font-weight: bold;font-variant: small-caps;color: blue;}</style>
</head>
<body><div class="a">WEB前端工程师（WEB FRONT SIEGE LION）</div><div class="b">CSS层叠样式表<span>（CASCADING STYLE SHEETS）</span></div>
</body>
</html>
第2章 文本样式
2-1 文本对齐方式（text-align）
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body><div style="text-align: right;"><img src="http://climg.mukewang.com/58c137930001b08102000065.jpg"></div><div style="text-align: center;">666666666666666666666666666666666666666666666666666666666666666666666666</div>
</body>
</html>2-2 行高（line-height）
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style type="text/css">/*补充代码*/</style>
</head>
<body><div><h2>1.《三体》</h2><p class="p1">《三体》是刘慈欣创作的系列长篇科幻小说，由《三体》、《三体II·黑暗森林》、《三体III·死神永生》组成，第一部于2006年5月起在《科幻世界》杂志上连载，第二部于2008年5月首次出版，第三部则于2010年11月出版。作品讲述了地球人类文明和三体文明的信息交流、生死搏杀及两个文明在宇宙中的兴衰历程。其第一部经过刘宇昆翻译后获得了第73届雨果奖最佳长篇小说奖。</p></div><div><h2>2.《盗墓笔记》</h2><p class="p2">《盗墓笔记》系列是南派三叔的代表作，其堪称近年来中国出版界的经典之作，获得百万读者狂热追捧。南派三叔也凭此作名满天下，跻身中国超级畅销书作家行列。</p></div><div>3.《福尔摩斯侦探小说全集》</h2><p class="p3">本套书分为上中下三卷，主要章节包括了上卷：血字分析、第一部原陆军军医部医学博士约翰·H·华生回忆录、第二部圣徒的故园、四签名、冒险史、巴斯克维尔的猎犬；中卷：回忆录、福尔摩斯的归来；下卷：最后奉献、恐怖谷、第一部伯尔斯通的悲剧、第二部亡命党徒、新探索详情内容。</p></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style type="text/css">.p1,.p2,.p3{text-indent: 2em;}.p1{font-family: "微软雅黑";color: orange;line-height: 20px;}.p2{color: green;line-height: 1.5em;}.p3{color: red;line-height: 200%;}</style>
</head>
<body><div><h2>1.《三体》</h2><p class="p1">《三体》是刘慈欣创作的系列长篇科幻小说，由《三体》、《三体II·黑暗森林》、《三体III·死神永生》组成，第一部于2006年5月起在《科幻世界》杂志上连载，第二部于2008年5月首次出版，第三部则于2010年11月出版。作品讲述了地球人类文明和三体文明的信息交流、生死搏杀及两个文明在宇宙中的兴衰历程。其第一部经过刘宇昆翻译后获得了第73届雨果奖最佳长篇小说奖。</p></div><div><h2>2.《盗墓笔记》</h2><p class="p2">《盗墓笔记》系列是南派三叔的代表作，其堪称近年来中国出版界的经典之作，获得百万读者狂热追捧。南派三叔也凭此作名满天下，跻身中国超级畅销书作家行列。</p></div><div>3.《福尔摩斯侦探小说全集》</h2><p class="p3">本套书分为上中下三卷，主要章节包括了上卷：血字分析、第一部原陆军军医部医学博士约翰·H·华生回忆录、第二部圣徒的故园、四签名、冒险史、巴斯克维尔的猎犬；中卷：回忆录、福尔摩斯的归来；下卷：最后奉献、恐怖谷、第一部伯尔斯通的悲剧、第二部亡命党徒、新探索详情内容。</p></div>
</body>
</html>2-3 vertical-align
多行文字水平垂直居中
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style type="text/css">.warp1{height: 80px;width: 100%;background-color: #14191e;/*在此补充代码*/}.warp1 h1{color: #fff;/*在此补充代码*/}.warp2{height: 400px;width: 100%;border: 1px #14191e solid; /*在此补充代码*/}.content p{width: 500px;font-family: "微软雅黑";margin: 0 auto;/*在此补充代码*/}</style>
</head>
<body><div class="warp1"><h1>欢迎来到慕课网</h1><div class="warp2"><div class="content"><p>慕课网，只学有用的！</p><p>慕课网（IMOOC）是IT技能学习平台。慕课网（IMOOC）提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。并且富有交互性及趣味性，你还可以和朋友一起编程。</p></div></div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style type="text/css">.warp1{height: 80px;width: 100%;background-color: #14191e;/*在此补充代码*/}.warp1 h1{color: #fff;line-height: 80px;text-align: center;vertical-align: middle;font-size: 24px;}.warp2{height: 400px;width: 100%;border: 1px #14191e solid; line-height: 1.5em;font-size: 14px;margin: 0 auto;display: table;}.content{display: table-cell;text-align: center;vertical-align: middle;}.content p{width: 500px;font-family: "微软雅黑";margin: 0 auto;}</style>
</head>
<body><div class="warp1"><h1>欢迎来到慕课网</h1><div class="warp2"><div class="content"><p>慕课网，只学有用的！</p><p>慕课网（IMOOC）是IT技能学习平台。慕课网（IMOOC）提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。并且富有交互性及趣味性，你还可以和朋友一起编程。</p></div></div></div>
</body>
</html>2-4 文本样式其他属性
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style type="text/css">/*补充代码*/</style>
</head>
<body><div>HTML是超文本标记语言，是<span>HyperText Markup Language</span>的缩写，超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准。它通过标记符号来标记要显示的网页中的各部分。</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style type="text/css">div{color: red;line-height: 2em;text-indent: 2em;}span{font-weight: bold;color: green;text-transform: uppercase;word-spacing: 0.5em;text-decoration: underline;}</style>
</head>
<body><div>HTML是超文本标记语言，是<span>HyperText Markup Language</span>的缩写，超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准。它通过标记符号来标记要显示的网页中的各部分。</div>
</body>
</html>第3章 CSS文本样式应用
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style type="text/css">div{background: #eee;text-align: center;font-size: 2em;line-height: 5em;}.three{vertical-align: -10px;}.one{font-size: 2em;}.two{color: red;text-decoration: underline;vertical-align: 10px;}</style>
</head>
<body><div><span class="three"><img src="http://climg.mukewang.com/59c21bae000157fa01000059.jpg"></span><span class="one">CSS层叠样式表</span><span class="two">(Cascading Style Sheets)</span></div>
</body>
</html>【慕课网】前端零基础入门---步骤二：页面化妆师CSS---02-CSS文本样式相关推荐
- 慕课网python零基础入门教程_Python 3零基础完全入门与提高视频课程
<Python3面向对象编程>第一版中文译者之一,新浪知名Python博主"麦兜搞IT"带大家一起学Python3 大家好,欢迎大家学习Python3零基础完全入门课程 ...
- 慕课网python零基础入门教程_零基础Python爬虫入门学习一之综述
原标题:零基础Python爬虫入门学习一之综述 大家好哈,最近博主在学习Python,学习期间也遇到一些问题,获得了一些经验,在此将自己的学习系统地整理下来,如果大家有兴趣学习爬虫的话,可以将这些文章 ...
- 【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程 学习视频来源:哔哩哔哩弹幕网(https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from ...
- web前端零基础入门（一）
web前端零基础入门 01. 网页简介 02. 网页简史 03. HTML简介 04. 编写第一个网页 06. 安装notepad++ 07. 自结束标签和注释 07. 标签中的属性 08. 文档声明 ...
- Web前端零基础入门——HTML5
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通 html入门 index1 > <html><head><title>我是谁? ...
- 前端零基础入门（八）：background的妙用_css精灵
在前面我们已经了解到了网页当中背景的基本用法了,包括: 背景颜色,背景图片,背景图片是否重复,背景图片是否平铺等等基础样式. 今天要和大家讨论的是背景图的一个稍微高级一点的用法:图片精灵(也叫:雪碧图 ...
- Datawhale 零基础入门数据挖掘心跳信号分类学习反馈02
Detail 零基础入门数据挖掘 (心跳信号分类) 学习反馈TASK2 使用语言:python Tas1 – Task5 Task2_数据探索性分析 涉及函数:总览+判断数据缺失和异常+分布 data ...
- web前端零基础入门学习！前端真不难！
现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...
- 前端零基础入门_000_前言
适合人群 本课程适合下面人群: 1)在校学生,想学习前端开发.将来从事前端开发工作.教程详细系统的讲解了前端基础,还讲解了相关的原理. 2)在职人士,想转行前端.教程提供了大量的案例实践,方便快速上手 ...
最新文章
- 机器学习算法的优点和缺点总结
- 如果你是PM，想转PM，拿走
- 【DIY】木质音乐盒，聆听一下治愈之音。How To Make Music box out of nothing at all
- JUC原子类-引用类型(四)
- 多生产者_你是生产者还是消费者？这决定了你的层次。
- linux 日志管理、系统启动和备份恢复
- ubuntu18.04 ssh 远程系统拒绝连接 解决方法
- 2022edu教育邮箱哪个好？申请注册教育邮箱很难吗？
- LGP970刷机心得
- matlab引用csv文件,如何用MATLAB读取csv文件
- VMVare中Ubuntu报错：Drag and drop is not supported
- iOS集成Cordova开发教程遇到的问题
- Oracle 的SQL*LOADER中optionally enclosed的作用
- html制作简易计算机,用JavaScript制作一个简易计算器
- java基于微信小程序的校园二手闲置商品交易平台 uinapp 计算机毕业设计
- 未明学院：追剧一个月，我才发现《长安十二时辰》是一部大数据破案指南
- 微信抖音群控系统适合做什么项目？
- 【记录】Ubuntu使用笔记
- 冯军：月光宝盒，爱你一万年
- detectron2使用教程20200824_1