Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Presentación

    Hochgeladen von

    Reynaldo A. Membreño
    15 Ansichten68 Seiten
    El documento presenta las políticas de uso de una presentación de CSS3 básico. Se debe mencionar la fuente principal ScriptBC y su creador. Queda prohibido eliminar los vínculos a ScriptBC.com. Se puede descargar y modificar el contenido sin alterar la fuente.

    Originalbeschreibung:

    Originaltitel

    Presentación.pptx

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PPTX, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    El documento presenta las políticas de uso de una presentación de CSS3 básico. Se debe mencionar la fuente principal ScriptBC y su creador. Queda prohibido eliminar los vínculos a ScriptBC.com. Se puede descargar y modificar el contenido sin alterar la fuente.

    Copyright:

    © All Rights Reserved
    Als PPTX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    15 Ansichten68 Seiten

    Presentación

    Hochgeladen von

    Reynaldo A. Membreño
    El documento presenta las políticas de uso de una presentación de CSS3 básico. Se debe mencionar la fuente principal ScriptBC y su creador. Queda prohibido eliminar los vínculos a ScriptBC.com. Se puede descargar y modificar el contenido sin alterar la fuente.

    Copyright:

    © All Rights Reserved
    Als PPTX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 68

    Polticas de Uso

    Recuerda que el uso de esta presentacin es libre,


    siempre y cuando no olvides mencionar a la fuente
    principal ScriptBC y su DirectorHomeroRalVargas
    Cruz.
    Queda estrictamente prohibido
    eliminar los vnculos de enlace a ScriptBC.com.
    Si lo deseas puedes descargar y modificar el
    contenido sin las alteraciones previamente
    establecidas.
    POR TU HONRADEZ, EL EQUIPO DE SCRIPT BC Y LA
    COMUNIDAD WEB TE AGRADECE.
    ScriptBC.com

    CSS3 Bsico

    Por:
    Homero Ral Vargas Cruz

    Visita ScriptBC.com
    HTML5 - CSS3 - JavaScript
    Cada tecnologa tiene su uso.

    Ahora es el momento de
    analizar CSS3

    Visita ScriptBC.com
    HTML5 y CSS3
    Primero

    HTML5
    Son dos tecnologas
    diferentes, que se
    complementan.
    CSS3 no forma parte
    de las
    especificaciones de
    HTML5

    CSS3

    Visita ScriptBC.com
    Tambin estudiaremos

    Id

    Clases

    Pseudo-clases
    Visita ScriptBC.com
    Definicin Bsica
    Conceptos bsicos: CSS es un lenguaje que
    trabaja junto con HTML para proveer estilos
    visuales a los elementos del documento, como
    tamao, color, fondo, bordes, etc

    Importante(quesesto?)
    moz-o webkit

    Visita ScriptBC.com
    Estructura en Bloque
    Cuando hablamos de estructura, nos
    referimos a la manera en la que un sitio web
    est dispuesto.
    Cada navegador implementa una estructura
    por defecto.
    Elementosblock
    Elementosinline-block

    Visita ScriptBC.com
    Block
    Son posicionados uno sobre otro hacia abajo en la
    pgina. (por defecto en los navegadores)

    Bloque 1 (header,
    Bloque
    nav, 2div, footer, etc )

    Visita ScriptBC.com
    Inline-block
    Son posicionados lado a lado, uno al lado del otro en
    la misma lnea, sin ningn salto de lnea a menos que
    ya no haya ms espacio horizontal para ubicarlos.

    Bloque 1
    2

    Visita ScriptBC.com
    Suponga el siguiente cdigo

    Visita ScriptBC.com
    Lo que veremos en el navegador ser

    Visita ScriptBC.com
    Modelo de caja
    Todas las reglas
    <HEADER>
    que especifican la
    disposicin en la <ASIDE>
    <SECTION>
    que ser <SECTION>

    organizada una
    pgina web, se le
    denomina <FOOTER>
    Modelo ce Caja

    Visita ScriptBC.com
    PERO antes de aplicar estilos
    Te parece si vemos algunos conceptos?

    CSS3
    Sobre-escribelosestilosbsicosdelnavegador.
    Puedecrearnuevosestilos.
    Sepuedencombinarlosestilosparahacercosas
    GENIALES.

    Visita ScriptBC.com
    Estilosenlnea
    Forma
    Simple.
    Rudimentaria.
    Poco prctica.

    Pero lo podemos ocupara para una vista rpida de un estilo


    que deseemos implementar.
    Visita ScriptBC.com
    Estilosembebidos
    Una mejor alternativa es insertar los estilos en la
    cabecera del documento y luego usar referencias
    para afectar los elementos HTML correspondientes:

    Colocado
    entre las Ahora todas
    etiquetas las
    etiquetas
    <head> y <p></p> se
    </head> vern
    afectadas

    Visita ScriptBC.com
    Archivos Externos
    Este tiene mas ventajas que el mtodo de estilos
    embebidos

    Para facilitar la actualizacin de los estilos est el


    mtodo de archivos externos

    Se implementa mediante el uso de la etiqueta <link>

    Suponga que.

    Visita ScriptBC.com
    Mas Mas
    Mas
    Pginas Pginas
    Pginas
    Pgina 2

    Mas Mas Mas


    Pginas Pginas Pginas

    Pgina 1 Pgina 3
    Elmtodode Mas
    estilosembebidos Mas Pginas Mas Mas
    podrafuncionar Pginas Pginas
    Mas Pginas
    Pginas

    Mas Mas
    Pginas Mas Mas Pginas
    Pginas Pginas
    Mas
    Mas
    Pginas
    Pginas
    Mas Mas
    Pginas Pginas
    Visita ScriptBC.com
    Mas Mas
    Mas
    Pginas Pginas
    Pginas
    Pgina 2

    Mas Mas Mas


    Pginas Pginas Pginas

    Pgina 1 Pgina 3
    Elmtodode Mas
    estilosembebidos Mas Pginas Mas Mas
    podrafuncionar Pginas Pginas
    Mas Pginas
    Pginas

    Mas Mas
    Pginas Mas Mas Pginas
    Pginas Pginas
    Mas
    Mas
    Pginas
    Pginas
    Mas Mas
    Pginas Pginas
    Visita ScriptBC.com
    Veamos el siguiente script

    <link>
    Doc.
    CSS3
    Doc. HTML

    Visita ScriptBC.com
    Referencias

    Doc.
    CSS3

    Visita ScriptBC.com
    Selector Universal
    Este selector representa cada uno de los
    elementos en el cuerpo del documento, y es
    til cuando necesitamos establecer ciertas
    reglas bsicas.

    Visita ScriptBC.com
    Referencia por etiqueta
    Referencia por la palabra clave del elemento

    Visita ScriptBC.com
    Referencia por id
    Problema
    Suponga que desea implementar dos estilos
    diferentes a una misma etiqueta.
    La respuesta mas simpe, es hacer uso de un id

    Visita ScriptBC.com
    Referencia por id

    Visita ScriptBC.com
    Referencia por id
    Para referenciar un elemento en particular usando el
    atributo iddesde nuestro archivo CSS la regla debe
    ser declarada con el smbolo #al frente del valor que
    usamos para identificar el elemento:

    Visita ScriptBC.com
    Notas para las referencias en id
    Es una referencia sumamente especfica.
    Ya que no debe haber mas de un elemento con el
    nombre del id
    Normalmente se emplean los id para
    elementos estructurales
    Suele emplearse mas en JavaScript
    CSS3 nos proporciona referencias mas
    flexibles.

    Visita ScriptBC.com
    Referencias con el atributo class
    Este atributo es ms flexible
    Puede ser asignado a cada elemento HTML en
    el documento que comparte un diseo similar.

    Visita ScriptBC.com
    Referencias con el atributo class
    Se emplea de forma similar que el id solo que:
    En HTML, en vez de colocar id se coloca class

    En CSS3, en vez de colocar #, se coloca un punto


    (.)

    Visita ScriptBC.com
    Un dato
    Por qu colocar un punto antes de la
    referencia?
    La razn es que con las clases podemos construir
    referencias mas complejas

    De esta manera, solo las


    etiquetas <p>, se vern
    afectadas por esta clase.

    Visita ScriptBC.com
    Referenciando por cualquier otro atributo

    Las nuevas especificaciones de CSS3, nos


    permite referenciar por cualquier otro
    atributo:

    El CSS3 sera:

    Visita ScriptBC.com
    Referencias locas
    (^): Ser asignada a todo elemento
    <p>que contiene un atributo
    namecon un valor comenzado en
    mi

    ($): Ser asignada a todo elemento


    <p>que contiene un atributo
    namecon un valor finalizado en
    mi

    (*): Ser asignada a todo elemento


    <p>que contiene un atributo
    namecon un valor que incluye el
    texto mi

    Visita ScriptBC.com
    Referenciandoconpseudoclases
    Consideremos el siguiente cdigo.

    Elementos Elementos
    padres hermanos

    Visita ScriptBC.com
    Referenciandoconpseudoclases
    Las pseudo clases, nos permiten hacer referencias,
    considerando la estructura del documento.
    Especificamos Lareferencianth-
    elelemento child(),nospermite
    clave. encontrarunhijo
    especfico

    Indicaaque
    elemento
    hermanonos
    Colocamos los estilos referimos
    como ya lo hemos
    hecho
    Visita ScriptBC.com
    Lo que veremos en el navegador ser

    Visita ScriptBC.com
    Si queremos hacer algo como esto:

    Visita ScriptBC.com
    Odd - even
    Haciendo uso de odd y even, se facilita
    muchsimo esta tarea

    Afectaloselementoshijos
    queposeenunnmero
    impar.

    Afectaloselementoshijos
    queposeenunnmero
    par.

    Visita ScriptBC.com
    Otras pseudo clases
    Existen otras importantes pseudo clases
    relacionadas con esta ltima, como:
    firstchild
    last-child
    only-child

    Visita ScriptBC.com
    Otras pseudo clases
    La pseudo clase first-childreferencia solo el
    primer hijo

    Visita ScriptBC.com
    Pseudo clase not()
    Se emplea para realizar una negacin
    Tiene el mismo alcance que un selector universal.

    Dentro de los parntesis podemos colocar la


    referencia que deseemos.

    Visita ScriptBC.com
    Nuevos selectores
    Estos selectores usan los smbolos >, +y ~para
    especificar la relacin entre elementos.

    VEAMOS ALGUNOS EJEMPLOS

    Visita ScriptBC.com
    Pseudo-clase >

    Elementopadre Elementohijo

    Esteesel
    elementoque
    sever
    afectado

    Visita ScriptBC.com
    Pseudo-clase +

    Elelemento<p>,
    inmediatamente
    inferioralelemento
    pconlaclase
    (mitexto),sever
    afectadoporlos
    estilos

    Visita ScriptBC.com
    Pseudo-clase ~
    El estilo ser aplicado a todos los elementos <p>que
    son hermanos y se encuentran luego del elemento
    <p>identificado con el valor mitexto2en su atributo
    class.

    Visita ScriptBC.com
    Algo de Prctica
    Primero veamos la plantilla HTML5 que
    ocuparemos.

    Visita ScriptBC.com
    Lo que ver ser
    Comencemos con CSS3
    Selector Universal

    Visita ScriptBC.com
    Definicin de elementos estructurales

    Esto con la finalidad de que el navegador


    maneje todas las estructuras de igual manera.

    Visita ScriptBC.com
    Estilos para las etiquetas H

    Visita ScriptBC.com
    Diferentes estilos para las fuentes
    font-style

    font-variant

    font-weight
    font-size

    font-family

    Visita ScriptBC.com
    El cuerpo <body>

    Visita ScriptBC.com
    Sigamos con:

    Visita ScriptBC.com
    Comentarios

    Visita ScriptBC.com
    Continuemos con los elementos
    estructurales

    Visita ScriptBC.com
    Header

    Visita ScriptBC.com
    Lo que veremos ser:

    Visita ScriptBC.com
    Nav

    Visita ScriptBC.com
    Lo que veremos ser

    Visita ScriptBC.com
    Como est funcionando el padding

    <li></li> <li></li> <li></li>

    Visita ScriptBC.com
    Section y Aside

    Visita ScriptBC.com
    Los estilos

    header
    nav

    section

    aside

    Footer (aun sin estilos)

    Visita ScriptBC.com
    Footer

    Restaura el flujo normal del


    documento con la propiedad clear.
    header
    nav

    section aside

    Footer

    Visita ScriptBC.com
    Al aplicar clear

    La propiedad clear,
    tambin empuja los
    header
    elementos verticalmente,
    nav
    haciendo que las cajas
    flotantes ocupen un rea
    real en la pantalla. Sin
    section aside
    esta propiedad, el
    navegador presenta el
    documento en pantalla
    Footer
    como si los elementos
    flotantes no existieran y
    las cajas se superponen.
    Visita ScriptBC.com
    Sin la propiedad clear

    Visita ScriptBC.com
    Con la propiedad Clear

    Visita ScriptBC.com
    Algunos otros estilos

    Visita ScriptBC.com
    Resultado Final

    Visita ScriptBC.com
    Muchas Gracias

    http://www.facebook.com/scriptbc

    http://www.youtube.com/scriptbc

    @h_raulvc

    http://www.linkedin.com/in/desarrollobc

    http://www.scriptbc.com/
    Polticas de Uso
    Recuerda que el uso de esta presentacin es libre,
    siempre y cuando no olvides mencionar a la fuente
    principal ScriptBC y su DirectorHomeroRalVargas
    Cruz.
    Queda estrictamente prohibido
    eliminar los vnculos de enlace a ScriptBC.com.
    Si lo deseas puedes descargar y modificar el
    contenido sin las alteraciones previamente
    establecidas.
    POR TU HONRADEZ, EL EQUIPO DE SCRIPT BC Y LA
    COMUNIDAD WEB TE AGRADECE.

    Das könnte Ihnen auch gefallen