Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Chompy129 en 18 de Septiembre 2016, 00:29
-
CSS text-align, color, text-decoration, text-indent, white-space nowrap, pre, pre-wrap, pre-line (CU01040D)
Aquí esta el ejercicio:
Código HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Atributos para los textos</title>
<link rel="stylesheet" type="text/css" href="textos.css">
</head>
<body>
<div id="div1">Sublime Text is a sophisticated text editor for code, markup and prose. <span class="sub">You'll love the slick user interface</span>, extraordinary features and <span class="sub">amazing performance.</span></div>
<div id="div2">Make ten changes at the same time, not one change ten times. <span class="sub-up">Multiple selections allow you to interactively</span> change many lines at once, rename variables with ease, and manipulate files faster than ever.
<span class="sub-up">Try pressing Ctrl+Shift+L to split the selection into lines and Ctrl+D to select the next occurrence of the selected word.</span>
To make multiple selections with the mouse, take a look at the Column Selection documentation.</div>
<div id="div3">Key Bindings, Menus, Snippets, Macros, Completions and mo<span class="sub"> </span>and more - <span class="del">just about everything in</span> Sublime Text is customizable with <span class="del">simple</span> JSON files. This system gives you flexibility as settings can be specified on a <span class="del">per-file type and per-project basis.</span></div>
</body>
</html>
Código CSS
/*DATOS GENERALES*/
*{font-family: arial;}
/*Los div*/
div{margin: 20px; padding: 10px; width: 200px; height: 400px; border: 4px solid #000; float: left; background-color: #DDD;}
/*Clases para texto*/
.sub{text-decoration: underline;} /*Subrayado*/
.sub-up{text-decoration: overline;} /*Subrayado-arriba*/
.del{text-decoration: line-through;} /*Tachado*/
/*Div por id*/
#div1{text-align: center; color: #FF6347; text-indent: 10%;}
#div2{text-align: right; color: #008080; text-indent: 50px; white-space: pre-line;}
#div3{text-align: justify; color: #8B4513; text-indent: 20%; white-space: pre-wrap;}
Siendo sincero las especificaciones sobre el white-space me confundieron un poco, pero espero que sean correctas.
-
Hola Chompy129.
Todo bien.
Saludos. ;D