3.2 KiB
3.2 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d781c367417b2b2512ac0 | Use the text-transform Property to Make Text Uppercase | 0 | Utilice la propiedad de transformación de texto para hacer mayúsculas de texto |
Description
text-transform
en CSS se usa para cambiar la apariencia del texto. Es una forma conveniente de asegurarse de que el texto de una página web se muestre de forma coherente, sin tener que cambiar el contenido de texto de los elementos HTML reales. La siguiente tabla muestra cómo los diferentes valores de text-transform
cambian el texto de ejemplo "Transformarme". Valor | Resultado |
---|---|
lowercase | "transformame" |
uppercase | "Transfórmame" |
capitalize | "Transformame" |
initial | Usa el valor por defecto |
inherit | Use el valor de text-transform del elemento padre |
none | Predeterminado: usar el texto original |
Instructions
h4
para que esté en mayúsculas utilizando la propiedad de text-transform
. Tests
tests:
- text: El texto <code>h4</code> debe estar en mayúsculas.
testString: 'assert($("h4").css("text-transform") === "uppercase", "The <code>h4</code> text should be uppercase.");'
- text: El texto original del h4 no debe ser cambiado.
testString: 'assert(($("h4").text() !== $("h4").text().toUpperCase()), "The original text of the h4 should not be changed.");'
Challenge Seed
<style>
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
opacity: 0.7;
}
#thumbnail {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard" id="thumbnail">
<div class="cardContent">
<div class="cardText">
<h4>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
Solution
// solution required