css层叠样式表基础学习笔记--第五章文本属性

第五章文本属性

5-01 字间距
5-02 行高
5-03 首行缩进
5-04 水平排列方式
5-05 垂直对齐方式
5-06 文本修饰
5-07 文本阴影
5-08 文本属性重置

5-01 字间距

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>字间距</title><style type="text/css">div{/*letter-spacing: 10px;*/letter-spacing: -4px;letter-spacing: normal;}</style></head><body><!--字间距：--><!--letter-spacing: 合法的尺寸单位;--><!--可以设置负值，当设置成负值时，字间距会比正常间距小--><!--normal:表示正常的字间距--><!--用的不多，了解就行--><div>我要自学网</div></body>
</html>

5-02 行高

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>行高</title><style type="text/css">div{font-size: 20px;line-height: 40px;line-height: 2;line-height: 200%;}p{width: 300px;height: 100px;background: #00AEFF;line-height: 100px;}</style></head><body><!--行高：行高可以控制行与行之间的间距，但不是行间距。是一行的高度。--><!--line-height: 值;-->         <!--1.合理的行高      normal    默认值--><!--2.尺寸单位   固定的行高--><!--3.数字    当前字体尺寸的倍数来设置行高（比如，font-size是20px，则line-height=2的话，行高为20px*2=40px）--><!--4.百分比    当前字体尺寸的百分比来设置行高--><!--行高经常用来使单行文本垂直居中--><div>我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网我要自学网</div><p>我要自学网</p></body>
</html>

5-03 首行缩进

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>首行缩进</title><style type="text/css">p{/*font-size: 20px;*//*text-indent: 40px;*/text-indent: 2em;text-indent: -2em;text-indent: 50%;}</style></head><body><!--首行缩进--><!--text-indent: 尺寸单位;--><!--1.默认值：0--><!--2.使用首行缩进时，要用em作为单位，1em表示一个汉字长度缩进--><!--3.允许使用负值，这时首行会缩进到左边--><!--4.使用百分比时，是基于父元素宽度的百分比进行缩进，不建议使用--><p>人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、
方法、技术及应用系统的一门新的技术科学。人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人
类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。</p><p>人工智能从诞生以来，理论和技术日益成熟，应用领域也不断扩大，可以设想，未来人工智能带来的科技产品，将会是人类智慧的“容器”。人工智能可以对人的意识、思维的信息过程的模拟。人工智能不是人的智能，但能像人那样思考、也可能超过人的智能。
人工智能是一门极富挑战性的科学，从事这项工作的人必须懂得计算机知识，心理学和哲学。</p><p>人工智能是包括十分广泛的科学，它由不同的领域组成，如机器学习，计算机视觉等等，
总的说来，人工智能研究的一个主要目标是使机器能够胜任一些通常需要人类智能才能完成的复杂工作。但不同的时代、不同的人对这种“复杂工作”的理解是不同的。
[1]  2017年12月，人工智能入选“2017年度中国媒体十大流行语”。</p></body>
</html>

5-04 水平排列方式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>水平排列方式</title><style type="text/css">div{width: 300px;height: 40px;line-height: 40px;background: khaki;margin:100px auto;text-align: left;text-align: right;text-align: center;text-align: justify;}</style></head><body><!--水平排列方式:--><!--text-align: left|right|center;--><!--1.left   默认值     表示文本排列到左边--><!--2.right  表示文本排列到右边--><!--3.center 表示文本排列到中间--><!--4.justify  表示文本两端对齐，对单行文本无效。不建议使用--><!--<div>我要自学网</div>--><div>我要自学网<p style="display: inline-block;width: 100%;"></p></div></body>
</html>

5-05 垂直对齐方式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>垂直对齐方式</title><style type="text/css">.a{font-size: 40px;background: red;vertical-align: middle;}.b{background: green;font-size: 20px;/*vertical-align: baseline;*//*vertical-align: sub;*//*vertical-align: super;*//*vertical-align: top;*//*vertical-align: bottom;*/vertical-align: middle;}</style></head><body><!--垂直对齐方式: 对行块元素，行内块级元素，表格元素有效--><!--vertical-align: 值;--><!--1.baseline   默认值，对齐父元素基线--><!--主要记住这四个：--><!--2.sub     对齐下标--><!--3.super   对齐上标--><!--4.top     顶部对齐--><!--5.bottom   底部对齐--><!--6.middle   垂直居中，需要在相邻的元素中也加上middle属性--><!--7.text-top--><!--8.text-bottom--><!--<p>19.9  <sub>元</sub>  </p>   上标--><!--<p>19.9  <sup>元</sup>  </p>   下标--><div><span class="a">19.9</span><span class="b">元</span></div></body>
</html>

5-06 文本修饰

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>文本修饰</title><style type="text/css">p{/*text-decoration: underline;*//*text-decoration: overline;*//*text-decoration: line-through;*/text-decoration: blink;}a{text-decoration: none;}</style></head><body><!--文本修饰：--><!--text-decoration: 值;--><!--1.underline     定义下划线--><!--2.overline      定义上划线--><!--3.line-through  定义删除线--><!--4.blink         闪烁的文字效果   当前所有的浏览器都不支持，低版本的火狐浏览器支持。不建议使用--> <!--重要！！    默认值     none   表示没有--><a href="#">我要自学网2</a><!--标签定义法--><!--<ins>我要自学网</ins>   下划线<del>我要自学网</del>   删除线--><p>我要自学网1</p></body>
</html>

5-07 文本阴影

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>文本阴影</title><style type="text/css">p{/*color: red;*/font-size: 30px;font-weight: 700;/*text-shadow: -2px -3px 2px black;*/text-shadow: 0px 0px 2px red;   }</style></head><body><!--文本阴影：--><!--text-shadow: 值1 值2 值3 值4;--><!--值1:水平阴影位置   必须的值。设置成正值时，阴影在右；负值时，阴影在左--><!--值2:垂直阴影位置   必须的值。设置成正值时，阴影在下；负值时，阴影在上--><!--值3:阴影模糊距离，可选值 --><!--值4:阴影颜色   合法颜色值。可选，默认和文字颜色相同--><p>我要自学网</p></body>
</html>

5-08 文本属性重置

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>文本属性重置</title><link rel="stylesheet" type="text/css" href="reset.css"/><style type="text/css">            p{font-size: 80px;}span{font-size: 40px;text-indent: 20px;text-align: center;vertical-align: top;text-decoration: underline;font-weight: 600;text-shadow: -2px -3px red;}div{text-indent: 100px;}</style></head><body><!--文本不等同于文字，可以简单理解成包含行级元素，行内块级元素 的元素--><!--作业：使用其他文本属性来设置行级元素，行内块级元素--><p>我要自学网<span>1</span></p><!--<div ><img src="生活照1.jpg"/></div>--><a href="#">我要自学网</a></body>
</html>

样式css

body{font-size: 16px;font-family: "微软雅黑";color: #333333;}
b{font-weight: normal;}
i{font-style: normal;}a,a:hover,a:active{text-decoration: none;color: #000000;}

css层叠样式表基础学习笔记--第五章文本属性相关推荐

css层叠样式表基础学习笔记--第一章 css简介及引入
第一章 css简介及引入 1-01 css简介 1-02 css优缺点 1-03 css书写格式 1-04 css引入格式行内样式内部样式外部样式导入样式 1-05 css注释 1-01 cs ...
HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）
内容概览模拟淘宝首页(静态) 一.项目重难点二.效果图及源码模拟淘宝首页(静态) 一.项目重难点样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...
css层叠样式表基础学习笔记--第十二章我要自学网首页实战
第十二章我要自学网首页实战 12-01 页面分析 12-02 工作准备 12-03 搜索区块页面结构 12-04 导航条布局 12-05 幻灯片布局 12-06 公告栏布局 12-07 远程培训班布 ...
Programming Entity Framework-dbContext 学习笔记第五章
### Programming Entity Framework-dbContext 学习笔记第五章将图表添加到Context中的方式及容易出现的错误方法结果警告 Add Root 图标中的 ...
《Go语言圣经》学习笔记第五章函数
<Go语言圣经>学习笔记第五章函数目录函数声明递归多返回值匿名函数可变参数 Deferred函数 Panic异常 Recover捕获异常注:学习<Go语言圣经> ...
2022 最新 Android 基础教程，从开发入门到项目实战【b站动脑学院】学习笔记——第五章：中级控件
第 5 章中级控件本章介绍App开发常见的几类中级控件的用法,主要包括:如何定制几种简单的图形.如何使用几种选择按钮.如何高效地输入文本.如何利用对话框获取交互信息等,然后结合本章所学的知识,演示 ...
（Java零基础学习笔记）第二章 Java中的基本语法
前言: 大家好! 我是BA unravel .如果你想和我一起学习JAVA,欢迎大家一起来学习这个世界上最好的语言! 学习目标: 一周掌握 Java 入门知识学习内容: 1. 搭建 Java 开发环 ...
javascript高级程序设计学习笔记第五章上
第五章引用类型的值(对象)是引用类型的一个实例.在 ECMAScript 中,引用类型是一种数据结构, 用于将数据和功能组织在一起.它也常被称为类,但这种称呼并不妥当.尽管 ECMAScri ...
《Android深度探究HAL与驱动开发》学习笔记----第五章
第五章搭建S3C6410开发板的测试环境开发板是开发和学习嵌入式技术的主要硬件设备. 主要学习了搭建S3C6410开发板的测试环境.首先要了解到S3C6410是一款低功耗.高性价比的RISC处理器 ...

css层叠样式表基础学习笔记--第五章文本属性

第五章文本属性

5-01 字间距

5-02 行高

5-03 首行缩进

5-04 水平排列方式

5-05 垂直对齐方式

5-06 文本修饰

5-07 文本阴影

5-08 文本属性重置

css层叠样式表基础学习笔记--第五章文本属性相关推荐

最新文章

热门文章

css层叠样式表基础学习笔记--第五章 文本属性

第五章 文本属性

5-01 字间距

5-02 行高

5-03 首行缩进

5-04 水平排列方式

5-05 垂直对齐方式

5-06 文本修饰

5-07 文本阴影

5-08 文本属性重置

css层叠样式表基础学习笔记--第五章 文本属性相关推荐

最新文章

热门文章

css层叠样式表基础学习笔记--第五章文本属性

第五章文本属性

css层叠样式表基础学习笔记--第五章文本属性相关推荐