本文设计到常见对文档的处理样式，和块，行标签的特点。
没用什么重要内容，只是自己的一些知识点的回忆，对以前知识的一个梳理过程，望某懒虫加油！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式和块、行、内敛标签</title>
<style>
div{
color: red;
/*这是颜色，对于颜色的几种表示方式，大家都懂不用多说*/
/*text-align: left;
text-align: right;
text-align: center;*/
/*text-align: justify;*/
/*这是文本排列对其方式，对于justify的意思就是，在一个容器
里展开宽度的相等的。*/
/*text-decoration: overline;
text-decoration:line-through;*/
text-decoration: underline;
/*这是对文本进行划线装饰，比如商场的大甩卖在价格中间划一道
线*/
/*text-transform:uppercase;
text-transform:lowercase;*/
text-transform: capitalize;
/*这是文本的转换，全部转换成大写，或者小写，
对于capitalize,意思是将每一个单词的首字母转换成大写*/
/*text-indent:2em;*/
/*这是文本缩进，通常情况下，em承接父级字体px,2em就是刚好缩进2字符。
有时候用text-indent:-9999px;来偏移掉字体，偏离可见区域。*/
/*letter-spacing:10px;*/
/*设置字母间的间距*/
/*line-height: 30px;*/
/*这是文本的行高，通常与height搭配，使文字垂直居中*/
text-shadow: 5px 5px 10px yellow;
/*这是文字的阴影，第一个5px是水平方向，第二个5px是垂直方向,
注意10px是阴影的模糊范围。
和box-shadow类似*/
font-family: 微软雅黑;
font-style: italic;
word-spacing: 10px;
vertical-align: center;
white-space: nowrap;
/*当然还有不经常用到的这些，知道意思就行，用到的时候能想到，
W3CSchool，菜鸟教程必备的工具。对于文本样式还有很多简写的
方式，font,background,border,padding,margin,*/
/* 写到了这么多文本样式，突然想到经常遇到的一个问题，就是
要求你在一行文本中，文本超出宽度溢出显示省略号，
css解决方案如下：*/
width: 100px;
/*给出你显示文本的范围，当然如果用em来代替效果会更好，不会
出出现半截在外面的丑态*/
overflow: hidden;
/*让超出部分隐藏*/
/*white-space: nowrap;*/
/*前面刚提到，意思是强制不换行，这是对一行文本的操作，
对于多行文本，一般用js来写效果更好*/
text-overflow: ellipsis;
/*文本隐藏后添加省略号，通过这几句话就可以实现文本溢出显示省略号了*/
}
</style>
</head>
<body>
<div>
这是一行文字！
</div>
<!-- 这两天写着写着写烦了，就纳闷，这么简单的东西花时间写干什么，
写了8百遍的东西，写了也算是一种回顾，以后看到了，告诉自己学过这个啊（苦笑） -->
<!-- 接下来让我们闲扯一下常见标签有哪些，当然他们是有分类的
比如，块标签，内敛属性的标签以及内敛块。下面我们一一讲解他们的特点和区别 -->
<!-- 对于块标签来说，他们独一无二
1,独占一行
2，支持所有的css样式
3，宽度会继承父级100%（默认情况） -->
<div style="height:20px;padding:10px 10px;background-color: yellow;">
<div style="background-color: red;">宽度继承</div>
</div>
<!-- 常见的块标签有标题标签，列表标签等 -->
<!-- 对于行标签
1，内容撑开高度
2，不支持宽高，不支持上下的margin，padding
（对于设置相应的属性，没用效果）
3,同属性的标签排在同一排
4，代码换行被解析 -->
<!-- 行标签常见的有span,a,strong,em(斜体)等
写网页的时候经常会设置宽高没用效果，可能就是
行标签的作为，看情况转换成块或内敛快就行，有时候被定位
或者浮动了就不需要设置。 -->
<!-- 通常用a标签可以设置锚点 -->
<a href="#tips">访问到id名为tip的位置</a>
<a id="tips" href="javascripts;">我的名字叫tips</a>
<!-- 标签a有target属性，_self默认在当前页打开
_blank在新的窗口打开 -->
<!-- 对于内联块标签
1，内容撑开宽度
2,同属性的标签排在同一排
3，支持所有的css样式
4，代码换行被解析 -->
<!-- 常见的内联块标签有img标签，注意当页面加入img时，要指定它的宽高，这样
当页面加载，或者维护人员加入图片，保证图片不变形 -->
</body>
</html>
原文地址：https://www.cnblogs.com/LoveMarvin/p/8337919.html
时间： 2024-07-31 05:30:06