编程笔记 html5&css&js 046 CSS文本

发布时间:2024年01月19日

文本格式已经在HTML中讲到,CSS负责网页样式,所以这里重新整理一下CSS有关文件本样子的内容。

一、文本颜色和背景色

背景色:background-color 属性。
前景色:color 属性。

body {
  background-color: lightgrey;
  color: blue;
}
h1 {
  background-color: black;
  color: white;
}

二、文本对齐

text-align 属性用于设置文本的水平对齐方式。
文本可以左对齐或右对齐,或居中对齐。
下例展示了居中对齐以及左右对齐的文本(如果文本方向是从左到右,则默认为左对齐;如果文本方向是从右到左,则默认是右对齐):

h1 {
  text-align: center;
}
h2 {
  text-align: left;
}
h3 {
  text-align: right;
}

当 text-align 属性设置为 “justify” 后,将拉伸每一行,以使每一行具有相等的宽度,并且左右边距是直的(就像在杂志和报纸中):

div {
  text-align: justify;
}

三、文本修饰

text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线:

a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

四、文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母,或每个单词的首字母大写。

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

五、文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

p {text-indent:50px;}

六、所有CSS文本属性。

属性	描述
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写 
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

css3:

hanging-punctuation	规定标点字符是否位于线框之外。	
punctuation-trim	规定是否对标点字符进行修剪。	
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。	
text-justify	规定当 text-align 设置为 "justify" 时所使用的对齐方法。	3
text-outline	规定文本的轮廓。	3
text-overflow	规定当文本溢出包含元素时发生的事情。	
text-shadow	向文本添加阴影。	
text-wrap	规定文本的换行规则。	
word-break	规定非中日韩文本的换行规则。	
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。	

七、练习

<!DOCTYPE html>
<html lang="zh-cn">
   <title>CSS显示 编程笔记 html5&css&js</title>
   <meta charset="utf-8" />
   <style>
      .color {
         background-color: black;
         color: white;
         text-align: center;
      }
      .justify {
         background-color: black;
         color: white;
         text-align: justify;
         text-indent: 50px;
      }
      p {
         font-size: 48px;
      }
      p.uppercase {
         text-transform: uppercase;
      }
      p.lowercase {
         text-transform: lowercase;
      }
      p.capitalize {
         text-transform: capitalize;
      }
   </style>
   <body>
      <h1 class="color">'background-color: black;color: white;' 黑底白字</h1>
      <h1 class="color">水平居中</h1>
      <h1 class="justify">
         《青少年成长管理》本人原创系列文章。成长工程、成长要素、成长目标、成长资源、专业选择、成长导师、时间管理、学习方法、常见问题、成长计划、项目计划、任务计划、计划执行、考核评价、调整改进、走进社会、改变世界、成就人生。
      </h1>
      <h1 class="justify">改变浏览器窗口,以观察上述段落变化。</h1>
      <p class="uppercase">{text-transform:uppercase;} 大小写转换 abcdefg</p>
      <p class="lowercase">{text-transform:lowercase;} 大小写转换 abcdefg</p>
      <p class="capitalize">{text-transform:capitalize;} 大小写转换 abcdefg</p>
   </body>
</html>

八、css3如何设置段间距和行间距?

在CSS3中设置段落间距(即段与段之间的距离)和行间距(即文本行之间的距离),可以分别通过以下属性实现:

行间距:

使用 line-height 属性来调整行间距。它可以接受相对值(如数字,表示相对于当前字体大小的倍数)、绝对单位(如像素、em、rem等)或百分比。

p {
  line-height: 1.5; /* 设置为1.5倍行高 */
  /* 或者 */
  line-height: 24px; /* 设置为固定的24像素行高 */
}

段间距:

如果要调整段落间的垂直间距,通常可以通过 margin 属性来实现:

p {
  margin-bottom: 20px; /* 设置每个段落下方20像素的间距 */
  margin-top: 20px; /* 设置每个段落上方20像素的间距 */
}

另外,如果希望所有段落间有统一的间距,可以直接针对段落元素 (

标签) 设置 margin 的上下值。
注意:在实际应用中,padding 也可以用于增加段落内容区域与边界的内部间距,但这不直接改变段落间的外部间距。例如:

p {
  padding: 10px 0; /* 上下10像素内间距,左右无变化 */
}

总结来说,在CSS3中,调整行间距主要依靠line-height属性,而调整段间距则多采用margin属性。

小结

根据实际需要进行广泛全面的测试。

文章来源:https://blog.csdn.net/qq_40071585/article/details/135688962
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。