Autor Tema: CSS selector nth-of-type font-family tipografía font-variant. Ejercicio CU01045D  (Leído 2624 veces)

JurreNawijn

  • Sin experiencia
  • *
  • Mensajes: 32
    • Ver Perfil
Dejo el correspondiente código al ejercicio CU01045D del curso de CSS.

HTML:
Código: [Seleccionar]
<!DOCTYPE html>
    <html>
        <head>
            <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
            <style type="text/css">
            /*  El CSS se encuentra en la pestaña de abajo*/
</style>
        </head>
        <body>
            <div id="caja1"> <!-- Primera caja -->
                <p>HTML nació públicamente en un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. En esta publicación se describen 22 etiquetas que mostraban un diseño inicial y relativamente simple de HTML. Varios de estos elementos se conservan en la actualidad. Otros se han dejado de usar, y muchos otros se han ido añadiendo con el paso de los años. De esta manera, podemos hablar de que han existido distintas versiones de HTML a lo largo de la historia de internet. Nosotros vamos a trabajar con el HTML estándar actual, que es el utilizado por los navegadores y páginas web de hoy en día. Sin embargo, no vamos a prestarle atención a las versiones y especificidades de cada versión, ya que el objetivo de este curso es aprender los fundamentos de HTML y entender cómo funciona, no conocer la sintaxis o especificidades de una versión concreta. ¿Por qué no le damos importancia a la versión? Porque una persona que cuenta con los fundamentos y comprensión básica sobre el lenguaje es capaz de adaptarse a las características particulares de una versión sin problema. En cambio, centrarse en los detalles de una versión sin conocer los fundamentos hará que no tengamos capacidad para comprender lo que hacemos ni para adaptarnos a los continuos cambios que tienen lugar en el ámbito de los desarrollos web.</p>
                <p>¿Qué ocurriría si una etiqueta que abramos no tiene su correspondiente cierre? Digamos que se trataría de un código HTML mal construido, y los navegadores esto lo pueden interpretar de distintas maneras. Quizás nos muestren la página tal y como esperábamos sin aparente error. Quizás nos muestren una página de error o se quede en blanco el navegador. Nuestro objetivo ha de ser siempre construir páginas HTML bien estructuradas y sin ambiguedades, es decir, hacer un correcto uso del lenguaje para que los navegadores puedan saber exactamente qué es lo que pretendemos mostrar.</p>
            </div>
            <div id="caja2">
                <p>CSS es un lenguaje utilizado en la presentación de documentos HTML. Un documento HTML viene siendo coloquialmente “una página web”. Entonces podemos decir que el lenguaje CSS sirve para organizar la presentación y aspecto de una página web. Este lenguaje es principalmente utilizado por parte de los navegadores web de internet y por los programadores web informáticos para elegir multitud de opciones de presentación como colores, tipos y tamaños de letra, etc.</p>
                <p>La filosofía de CSS se basa en intentar separar lo que es la estructura del documento HTML de su presentación. Por decirlo de alguna manera: la página web sería lo que hay debajo (el contenido) y CSS sería un cristal de color que hace que el contenido se vea de una forma u otra. Usando esta filosofía, resulta muy fácil cambiarle el aspecto a una página web: basta con cambiar “el cristal” que tiene delante. Piensa por ejemplo qué ocurre si tienes un libro de papel y lo miras a través de un cristal de color azul: que ves el libro azul. En cambio, si lo miras a través de un cristal amarillo, verás el libro amarillo. El libro (el contenido) es el mismo, pero lo puedes ver de distintas maneras.</p>
                <p>Algunas opciones básicas del lenguaje CSS por ejemplo pueden ser el poder cambiar el color de algunas típicas etiquetas HTML como  (h1 es una etiqueta en el lenguaje HTML destinada a mostrar un texto como encabezado, en tamaño grande). Pero también hay funciones algo más complejas, como introducir espaciado entre elementos (div es una etiqueta HTML para identificar una determinada región o división de contenido dentro de una página web) o establecer imágenes de fondo.</p>
            </div>
            <div id="caja3">
                <p>
                    La respiración humana, como la de todos los animales terrestres, está basada en la absorción del aire atmosférico que está formada por una mezcla de oxigeno, nitrógeno y dióxido de carbono,  así como otros elementos (algunos contaminantes) en diversa proporción. Sin embargo, esta no es la única mezcla respirable por el hombre. De hecho, son harto conocidos los sketches televisivos en que se inhala helio o hexafluoruro de azufre, que si bien son inocuos, producen el efecto secundario de una voz aguda y grave respectivamente.  Ahora bien... una cosa es respirar una mezcla diferente de aire y otra muy diferente respirar un líquido como si se tratase de un pez. Pues, aunque le parezca mentira, si se llena sus pulmones de perfluorocarbono puede respirar como si estuviera en la superficie.
                </p>
                <p>
                    El ahogamiento, en todos los animales exclusivamente terrestres, se produce cuando los pulmones se llenan de agua y estos no pueden obtener el oxigeno del liquido que los rellena. En este caso, los pulmones no están diseñados para poder extraer el oxígeno de un líquido, de tal forma que bajo el agua dejan de estar operativos y el organismo acaba por morir más temprano que tarde.  No obstante, los científicos descubrieron que un compuesto líquido, el perfluorocarbono, tenía la capacidad de ser respirable como si fuera el aire.
                </p>
               
            </div>
        </body>
</html>
CSS:

Código: [Seleccionar]
   *{margin:0; padding:0;}
                div{margin:33px;padding:25px; border: 5px solid red; width: 100%;}
               
                #caja1 {font:18px serif;} /*    Ahora si tiene sentido   */
                #caja1 p:nth-of-type(2) {text-variant: small-caps; text-transform: uppercase; font-variant: small-caps; }
               
                #caja2 {font: 14px sans-serif; color:#B22222;}
               
                #caja3 {font: 36px fantasy;}
« Última modificación: 27 de Enero 2016, 08:17 por Ogramar »
¿Por qué programo? Me gusta programar porqué me hace sentir que tengo el control de la situación. Así me siento cuando programo. JurreNawijn

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Buenas JurreNawijn lo veo todo bien. En el apartado c) cuando dice tamaño de fuente 2 veces lo normal entiendo que lo normal es 1em, por tanto para indicar dos veces lo normal deberíamos escribir 2em ó 200%, así queda en unidades relativas. Tú has indicado 36px como tamaño de fuente. Aunque puede llevar al mismo resultado esto podría variar según el dispositivo por eso cuando se indica algo como "el doble de lo normal" siempre veo preferible expresarlo como te he indicado.

Salu2

JurreNawijn

  • Sin experiencia
  • *
  • Mensajes: 32
    • Ver Perfil
Muchas gracias por la respuesta, no comprendía muy bien lo de dos veces lo normal
¿Por qué programo? Me gusta programar porqué me hace sentir que tengo el control de la situación. Así me siento cuando programo. JurreNawijn

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".