<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 文本样式综合设计 */
.highlight {
color: chocolate;
background-color: black;
text-transform: uppercase; /* 文本大写 */
text-indent: 20px;
}
.highlight:hover {
color: white;
background-color: dimgray;
}
/* 文本排版设计 */
.article p {
background-color: dimgray;
font-size: 16px;
line-height: 1.5;
text-indent: 1em;
}
.article p:first-letter {
font-weight: bold;
font-size: 24px;
}
/* 文本对齐和装饰 */
.poem {
text-align: justify; /* 文本对齐方式为两端对齐 */
color: blue;
text-transform: capitalize; /* 每个单词的首字母大写 */
}
.poem::first-line {
color: brown;
}
/* 文本对齐和装饰 */
@media screen and(max-width:600px){
.news {
font-size: 14px;
line-height: 1.2;
}
}
@media screen and(min-width: 600px) and (max-width: 900px) {
.news {
font-size: 16px;
line-height: 1.4;
}
}
@media screen and (min-width: 900px) {
.news {
font-size: 18px; /* 文本大小为 18px */
line-height: 1.6; /* 行高为 1.6 */
}
}
/* 文本样式与伪类结合 */
.quote {
color: slategrey;
font-style: italic; /* 字体样式设置为斜体 */
text-indent: 20px; /* 文本向右缩进 */
}
.quote::before {
content: " “ ";
}
.quote::after {
content: " ” ";
}
/* 文本样式与动画 */
@keyframes flash {
0%, 100% {
color: red; /* 开始和结束颜色为红色 */
}
50% {
color: yellow; /* 中间颜色为黄色 */
}
}
.flashing {
animation: flash 2s infinite; /* 动画名称，持续时间，循环方式 */
}
</style>
</head>
<body>
<!-- 文本样式综合设计 -->
<p class="highlight">这是一段需要高亮显示的文本。</p>
<!-- 文本排版设计 -->
<article class="article">
<p>这是文章的第一段。</p>
<p>这是文章的第二段。</p>
</article>
<!-- 文本对齐和装饰 -->
<div class="poem">
这是一首诗。每个字都充满了情感，每个词都蕴含着深意。
</div>
<!-- 文本对齐和装饰 -->
<div class="news">
这是一条新闻。请根据屏幕宽度调整文本样式。
</div>
<!-- 文本样式与伪类结合 -->
<blockquote class="quote">
这是一个引用文本。它应该看起来像是从某本书中摘录的。
</blockquote>
<!-- 文本样式与动画 -->
<p class="flashing">这段文本将闪烁。</p>
</body>
</html>
扫一扫
735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
