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

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

时间：2021-11-19 00:30:34

第五章文本属性

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><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> <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><p>人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。</p><p>人工智能从诞生以来，理论和技术日益成熟，应用领域也不断扩大，可以设想，未来人工智能带来的科技产品，将会是人类智慧的“容器”。人工智能可以对人的意识、思维的信息过程的模拟。人工智能不是人的智能，但能像人那样思考、也可能超过人的智能。人工智能是一门极富挑战性的科学，从事这项工作的人必须懂得计算机知识，心理学和哲学。</p><p>人工智能是包括十分广泛的科学，它由不同的领域组成，如机器学习，计算机视觉等等，总的说来，人工智能研究的一个主要目标是使机器能够胜任一些通常需要人类智能才能完成的复杂工作。但不同的时代、不同的人对这种“复杂工作”的理解是不同的。[1] 12月，人工智能入选“度中国媒体十大流行语”。</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><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><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> <a href="#">我要自学网2</a><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><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><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;}

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。