Scribd Logo
Importer

Bienvenue sur Scribd !

  • Css

    Transféré par

    mark_07
    288 vues14 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    288 vues14 pages

    Css

    Transféré par

    mark_07

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 14

    Qu es CSS?

    2. Lo que es CSS CSS (cuyas siglas significan Cascading StyleSheets, u Hojas de Estilo en Cascada) es un lenguaje usado para describir la apariencia y el formato de tu HTML. Una hoja de estilo es un archivo que describe como debera verse un archivo HTML. Eso es! Decimos que estas hojas de estilo estn en cascada porque las hojas pueden aplicar el formato cuando corresponde ms de un estilo. Por ejemplo, si indicas que todos los prrafos deben tener una fuente de color azul, pero sealas que un prrafo especfico debe tener fuente de color rojo, CSS lo puede hacer! (Hablaremos ms sobre la cascada en la seccin cuatro.) Observa la pestaa stylesheet.css . Colocamos el CSS para que el texto del prrafo tenga color rojo, pero t debes aadir el CSS que har que el texto entre las etiquetas <span></span> sea de color azul. Compltalo y haz clic en Ejecutar! Ejemplo: <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Fuentes elegantes</title> </head> <body> <p>Soy un prrafo escrito en fuente de color rojo, pero una de mis palabras es de color <span>azul</span>!</p> </body> </html>

    CSS: p{ color: red; } span { color:blue } Resultado:


    Soy un prrafo escrito en fuente de color rojo, pero una de mis palabras es de color azul!

    3. Por qu separar forma de funcin?


    Buen trabajo! Mrate: ya ests escribiendo CSS. Existen dos razones principales para separar tu forma/formato (CSS) de tu contenido/estructura funcional (HTML): 1. Puedes aplicarle el mismo formato a diversos elementos de HTML sin reescribir el cdigo ( p.ej., style="color:red": ) una y otra vez 2. Puedes aplicarle una apariencia y un formato similares a varias pginas de HTML desde un solo archivo CSS Observa el HTML en index.html . Esas son muchas etiquetas <span></span> ! Todas esas palabras tienen una fuente normal, pero queremos que se vean sper elegantes. Ve a la pestaa stylesheet.css y dile al selector span que quieres que font-family sea cursive . Si necesitas ayuda revisa la Sugerencia!

    Veamos... para que algo tuviera color rojo tuvimos que escribir span { color: red; } As que si colocamos font-family:cursive; en vez de color: red; , eso debera volver ms elegante nuestra fuente!

    Ejemplo: HTML <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Fuentes an ms elegantes</title> </head> <body> <p>Mucho de este texto es normal, pero algo de l es <span>elegante</span>! Podemos usar nuestra <span>fuente recientemente elegante</span> para agregarle algo de <span>gracia</span> a nuestro sitio web. Sera una <span>verdadera molestia</span> hacer <span>elegante</span> cada una de estas etiquetas span de forma separada, pero es pan comido con <span>CSS</span>!</p> </body> </html>

    CSS: span { font-family: cursive; color:red; } Resultado:


    Mucho de este texto es normal, pero algo de l es elegante! Podemos usar nuestra fuente recientemente elegante para agregarle algo de gracia a nuestro sitio web. Sera unaverdadera molestia hacer elegante cada una de estas etiquetas span de forma separada, pero es pan comido con CSS!

    5. Enlzalo!
    Pero hay una forma an mejor. Ya sabes que deberas escribir tu CSS en un archivo completamente aparte. Pero, cmo te aseguras de que tu archivo de HTML pueda ver esa informacin de CSS? Lo puedes hacer colocando una etiqueta <link> (tal como viste en el primer ejercicio de este curso) entre las etiquetas <head></head> de tu pgina HTML. Tu etiqueta <link> necesita tres atributos: 1. 2. 3. Un atributo type que siempre debe ser igual a "text/css" Un atributo rel que siempre debe ser igual a "stylesheet" Un atributo href que debe apuntar a la direccin web de tu archivo CSS

    En el editor de la derecha vers dos archivos: index.html y stylesheet.css . Inserta una etiqueta <link> hacia stylesheet.css en index.html . Si necesitas ayuda revisa la Sugerencia!

    La sintaxis completa debe verse as: <link type="text/css" rel="stylesheet" href="stylesheet.css"/>

    Ejemplo: HTML: <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Resultado</title> </head> <body> <p>Quiero ser una fuente de TAMAO 44!</p> </body> </html> CSS: p{ font-size: 44px; } Resultado:

    Quiero ser una fuente de TAMAO 44!

    1. Sintaxis La sintaxis de CSS es distinta de la de HTML a la que ests acostumbrado, pero no te preocupes: es fcil de aprender! El formato general se ve as: selector { propiedad: valor; } Un selector puede ser cualquier elemento de HTML, como <p> , <img> , o <table> . Simplemente obvias los <> ! Para hacer que el texto de un prrafo tenga color rojo con CSS, escribiras: p{ color: red; } Una propiedad es un aspecto de un selector. Por ejemplo, puedes cambiar font-family , color , y font-size del texto en tus pginas web (adems de muchos ms). Un valor es una posible configuracin de una propiedad. color puede ser roja, azul, negra, o casi de cualquier color; font-family puede ser un montn de fuentes diferentes; y as sucesivamente. Debes finalizar cada propiedad-valor con un punto y coma ( ; ). As es como CSS sabe que ya terminaste de trabajar en un par y que ests listo para trabajar en el siguiente. Muy bien! Es hora de que escribas un poco de CSS por tu cuenta. En la pestaa stylesheet.css , haz que el color de la fuente del selector p sea verde . (Si necesitas ayuda revisa la Sugerencia.)
    Recuerda la sintaxis general para CSS: selector { propiedad: valor; }

    HTML <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Resultado</title> </head> <body> <p>Ests a punto de darle estilo a este prrafo con CSS por tu cuenta!</p> </body> </html> CSS: p{ color: gree; } Resultado:

    Ests a punto de darle estilo a este prrafo con CSS por tu cuenta!
    2. Un selector, muchas propiedades Buen trabajo! Otra ventaja genial de CSS es que puedes hacer que un selector tenga muchas propiedades. Por ejemplo, si quieres establecer la fuente, el color de fuente y el tamao de fuente de un prrafo, sencillamente puedes escribir: p{ font-family: Arial; color: blue; font-size: 24px; } Recuerda: finaliza cada par propiedad-valor con un punto y coma! Ten en cuenta: Si has ajustado el nivel de zoom de tu navegador, los ejercicios que incluyen font-size y height no funcionarn correctamente. Para solucionarlo, presiona Comando+0 o Ctrl+0 para restaurar tu vista. Debajo de tu par propiedad-valor color:green (pero antes del } final!), haz que font-family sea Garamond y que fontsize sea 24px .

    HTML: <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Resultado</title> </head> <body> <p>Ests a punto de darle estilo a este prrafo con CSS por tu cuenta!</p> </body> </html>

    CSS: p{ color: green; font-family:Garamond; font-size:24px; } Resultado:

    Ests a punto de darle estilo a este prrafo con CSS por tu cuenta!
    Por otro lado, los comentarios de CSS lucen as:
    /*Soy un comentario!*/

    Revisa bien antes de que te estrelles Has aprendido mucho en solo unas lecciones cortas. Estamos impresionados! Vamos a hacer un repaso rpidamente, para asegurarnos de que sabes del tema. 1. Agrega una etiqueta <link> a index.html en medio de tus etiquetas <head></head> . 2. Cambia la fuente del encabezado <h1> a Verdana. 3. Cambia la fuente del encabezado <h3> a Courier. 4. Haz que el texto del prrafo tenga color prpura. 5. Agrega un comentario a la pestaa CSS! Puede decir lo que quieras. (Recuerda: los comentarios de HTML y los comentarios de CSS de escriben de forma diferente.)

    3. Pxeles y em Buen trabajo! Haremos ms cosas con los colores a medida que aprendas ms CSS. Cuando te pedimos que ajustaras el tamao de la fuente, especificamos que la unidad que debas usar era px (de "pxeles"), as: p { font-size: 10px; } Un pxel es un punto en la pantalla de tu computador. Especificar los tamaos de la fuente en pxeles es genial cuando quieres que el usuario vea en su pantalla exactamente lo que diseaste en la tuya, pero hacerlo asume que las ambas pantallas tienen el mismo tamao. Pero, qu tal si el usuario est usando una pantalla muy diferente en tamao a la tuya (como la pantalla de un smartphone)? Presentamos los em. (No los confundas con las etiquetas <em></em> que usamos para darnfasis!) La unidad de font-size em es una medidarelativa: un em es igual al tamao de fuente predeterminado en cualquier pantalla que el usuario est usando. Esto las convierte en algo genial para las pantallas de los smartphones, ya que no tratan de decirle al smartphone exactamente qu tan grande debe ser una fuente: sencillamente le indican, "Oye; 1em es el tamao de fuente que usas normalmente, as que 2em es el doble de grande, y 0.5em es la mitad de ese tamao!" Observa: hemos colocado tres prrafos diferentes con font-size 1em , 0.5em , y 2em . Por ahora, usa la unidad ( px o em ) con la que te sientas ms cmodo; nosotros simplemente queramos mostrarte em ahora, de modo que no te sorprendas cuando la veas ms adelante. Ejemplo: <!DOCTYPE html> <html> <head> <title>Resultado</title> </head> <body> <p style="font-size: 1em">Un em!</p> <p style="font-size: 0.5em">Medio em!</p> <p style="font-size: 2em">DOS EM!</p> </body> </html>

    4. Una fuente de conocimiento Tambin te hemos pedido que cambiaras la propiedad font-family de ciertos elementos usando CSS. Nos has visto usar las fuentes Verdana, Courier y Garamond. Pero cuntas fuentes conoce CSS? La respuesta es: depende. La mayora de los computadores entendern las fuentes populares como Verdana, Courier, y Garamond, pero cada computador tiene instaladas diferentes fuentes. La buena noticia es que CSS tiene algunas fuentes predeterminadas incorporadas, con el objetivo de que tus usuarios vean lo que te propones. Ellas son: serif: una fuente con pequeos remates decorativos en los finales de los trazos que componen las letras. Busca "serif" para ver a qu nos referimos. sans-serif: una fuente sin adornos, como esta. No tiene las cositas de los extremos de las letras de una fuente serif. cursive: Es una fuente que parece a mano alzada! Luce como escritura cursiva. Te mostraremos cmo importar tus propias fuentes en un curso posterior! Esto te ayudar a asegurarte de que la persona que est viendo tu pgina tiene todas las fuentes que quieres que tenga. Haz que font-family del encabezado <h1> sea serif , la de <h2> sea sans-serif y la de <h3> sea cursive . Ejemplo: <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Resultado</title> </head> <body> <h1>Cuando sea grande voy a ser una fuente serif!</h1> <h2>Yo voy a ser una fuente sans-serif.</h2> <h3>Yo voy a ser cursive!</h3> </body> </html> CSS: h1{ font-family:serif; } h2{ font-family:sans-serif; } h3{ font-family:cursive; }

    Seleccin de elementos de HTML


    1. Background color, height, y width Recuerdas a nuestra amiga <div> , y cmo la usamos para hacer esos bloques multicolores? Es hora de que construyas tus propios bloques! (Bueno, bloque. Todava no nos adelantemos.) Hay tres propiedades para las cuales debers determinar los valores: 1. 2. 3. background-color , la cual determinas con un color o valor hex height , la cual determinas con un valor en pxeles width , la cual tambin se mide en pxeles

    Estos ejercicios te mostrarn un breve resumen de los diferentes elementos de HTML que puedes seleccionar y cules son algunos de sus pares propiedad-valor (como los nuevos pares que mencionamos arriba). Veremos ms sobre la seleccin de elementos de HTML en el siguiente curso! En la pestaa stylesheet.css : 1. 2. 3. Haz que background-color tenga como valor #cc0000 , as: background-color:#cc0000; Haz que height tenga como valor 100px , as: height: 100px; Haz que width tambin tenga como valor 100px .

    Ejemplo:

    <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Resultado</title> </head> <body> <div> </div> </body> </html> CSS: div{ background-color:#cc0000; height:100px; width:100px; }

    Resultado:

    2. Al borde de la locura Muchos elementos de HTML admiten la propiedad border . Esta puede ser especialmente til con las tablas. La propiedad border a su vez admite varios valores. Por ejemplo, para hacer un borde de 2 pxeles de ancho, slido, y de color rojo, debes escribir selector { border: 2px solid red; } Los bordes: algo bastante elaborado. En la pestaa stylesheet.css : 1. 2. 3. Haz que tus selectores td (celdas de datos de tabla) tengan height de 50px , de manera que podamos verlos mejor cuando agreguemos nuestro borde. Dale a tus td una propiedad border de 1px dashed blue . Dale a tu table una propiedad border de 1px solid black .

    Ejemplo: <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title></title> </head> <body> <table> <thead> <th colspan="3">Nueve bloques!</th> </thead> <tbody> <tr> <td></td> <td></td> <td></td>

    </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> </body> </html> CSS: td{ height:50px; border:1px dashed blue; } table{ border:1px solid black; } Resultado:

    3. Enlaces y text-decoration Los enlaces tienen muchas de las mismas propiedades del texto normal: puedes cambiarle la fuente, el color, el tamao, y as sucesivamente. Pero los enlaces tambin tienen una propiedad, text-decoration , que puedes modificar para darles un toque un poco ms personalizado. Probablemente ests acostumbrado a ver enlaces que son de color azul y estn subrayados, verdad? Pues bien, no tiene que ser de esa manera! En la pestaa stylesheet.css , dale a tu selector a las propiedades color de #cc0000 y textdecoration de none . Observa cmo cambia el enlace en la pestaa Resultado!

    Ejemplo: <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Resultado</title> </head> <body> <p>El siguiente enlace lleva hacia Google!</p> <a href="http://www.google.com/">Google</a> </body> </html> CSS: a{ color:#CC0000; text-decoration: none; } Resultado:

    El siguiente enlace lleva hacia Google! Google

    Recuerdas la sintaxis para los valores de respaldo?


    selector { propiedad: mejorValor, siguienteMejorValor }

    Ejemplo: <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Resultado</title> </head> <body> <h1>Codigo</h1> <h1>Code</h1> <p>Programacion</p> <p>Salinas</p> </body> </html> CSS: h1{ font-family:Verdana,sans-serif; color:#576D94; } p{ color:#4A4943; font-size:18px; font-family:Garamond,serif; } Resultado:

    Codigo Code
    Programacion Salinas

    Vous aimerez peut-être aussi