文本格式已经在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;}
属性 描述
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中设置段落间距(即段与段之间的距离)和行间距(即文本行之间的距离),可以分别通过以下属性实现:
使用 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属性。
根据实际需要进行广泛全面的测试。