Scribd Logo
Upload

Welcome to Scribd!

  • CSS Conceptos

    Uploaded by

    Karen LiiseTh
    31 views29 pages

    Original Title

    CSS Programacion

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    31 views29 pages

    CSS Conceptos

    Uploaded by

    Karen LiiseTh

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 29

    CSS

    Conceptos Bsicos

    CSS son las siglas de "Cascade StyleSheet". Se trata


    de una especificacin sobre los estilos fsicos
    aplicables a un documento HTML, y trata de dar la
    separacin definitiva de la lgica (estructura) y el
    fsico (presentacin) del documento.
    La finalidad de las hojas de estilo es crear unos estilos
    fsicos, separados de las etiquetas HTML (en lugar de
    como parmetros de las etiquetas), y aplicarlos en los
    bloques de texto en los que se quieran aplicar. Lo cual
    conlleva a una apariencia agradable y propicia la
    interactividad

    CSS

    Aplicacin directa en etiquetas

    Tenemos varias posibilidades para definir un estilo,


    una de estas es especificarlo directamente en la
    etiqueta en la que queremos usarlo:
    <etiqueta
    STYLE="propiedad1:valor;...;propiedadN:valor"> ...
    </etiqueta>

    CSS

    Aplicacin directa en etiquetas

    STYLE es el parmetro que indica que vamos a aplicar


    el estilo definido a continuacin a la etiqueta en la que
    se encuentra. La definicin del estilo son pares:
    propiedad : valor
    separados por punto y coma.
    Propiedad ser la caracterstica de la etiqueta que
    queramos modificar (el color, el tamao de la fuente, el
    tipo de letra, ...) y valor es el valor que queremos darle
    (color negro, 8 puntos de tamao de letra, ...).

    CSS

    Ejemplo de aplicacin directa

    Por ejemplo, si tenemos un texto en negrita y


    queremos que salga con un tamao de letra 14 y en
    color rojo, haremos:

    La negrita que vemos <B STYLE="font-size:14pt;


    color:red">es ms grande y est en rojo</B>.

    CSS

    CSS

    Redefinicin de Etiquetas

    Para esto definiremos estilos globales por medio de la


    etiqueta <STYLE> ... </STYLE> como sigue:
    <STYLE TYPE="text/css">
    <!-Etiqueta1, Etiqueta2 : {propiedad1:valor}
    Etiqueta3 : {propiedad1:valor;...;propiedadS:valor}
    Etiqueta4 : {propiedad1:valor;...;propiedadT:valor}
    .Clase1 : {propiedad1:valor;...;propiedadT:valor}
    //-->
    </STYLE>
    Su aplicacin ser entre <HEAD> ... </HEAD>
    Ver ejemplo

    CSS

    Separar HTML de CSS

    Ya sabemos definir estilos globales, ahora:


    Qu pasara si queremos dotar a todas las pginas de
    los mismos estilos?
    Solucin: definir los estilos en un fichero distinto al
    documento HTML, y despus referenciarlo desde el
    propio documento HTML (esto lo haremos con la
    siguiente etiqueta, dentro de la cabecera del
    documento (entre <HEAD> ... </HEAD>): )
    <LINK REL="stylesheet" TYPE="text/css"
    HREF="URL_Hoja.css">
    Ver ejemplo

    CSS

    Herencia de Estilos

    En el conjunto de las etiquetas HTML podemos


    establecer una jerarqua de etiquetas que contienen a
    otras, para darnos una relacin de herencia
    Padre <BODY> ... </BODY>, referencia a todo el documento
    Hijas (<P>...</P>, <DIV>...</DIV>, cabeceras, ...)
    Hijas de la anterior elementos insertados en lnea
    (<B>...</B>, <I>...</I>, <SPAN>...</SPAN>, ...).

    CSS

    Herencia de Estilos

    Importante:
    * Un estilo heredable se hereda a no ser que
    especifiquemos lo contrario.
    * Se heredarn aquellas caractersticas que no
    pongamos, y se aplicarn aquellas que definamos
    para la etiqueta que no tenga la etiqueta "padre".

    Ver ejemplo

    CSS

    Estilos en funcin del contexto


    Otro tema a comentar aqu es la posibilidad de
    definir, en lugar de un estilo para una etiqueta, sin
    ms, es definir un estilo en funcin del contexto.
    Por ejemplo, es posible que solamente queramos
    que el texto en negrita sea de color verde cuando se
    encuentre en una celda de una tabla, o que sea de
    color prpura cuando forme parte de una lista.

    Ver ejemplo

    CSS

    Clases

    Una clase es una definicin de un estilo que en principio


    no est asociado a alguna etiqueta HTML, pero que
    podemos asociar, en el documento, a etiquetas
    concretas.
    Para ello, en primer lugar definimos la clase (en el bloque
    de estilos o en la hoja externa) como un estilo ms, de
    esta forma:
    .Nombre_de_la_Clase {propiedad1:valor;...;propiedadN:valor}

    CSS

    Clases

    Ahora, para aplicar el estilo de una clase a una etiqueta


    concreta, utilizaremos el parmetro CLASS como sigue:

    <etiqueta CLASS="Nombre_de_la_Clase"> ... </etiqueta>

    Ver ejemplo

    CSS

    Etiquetas

    Vamos ahora a estudiar el atributo ID de una


    etiqueta HTML en relacin a la definicin de estilos.

    <etiqueta ID="NombreReferencia"> ... </etiqueta>

    Este "NombreReferencia" debe ser nico en el


    documento HTML

    CSS

    Etiquetas
    Para definir un estilo mediante un ID, usaremos la
    siguiente notacin (en un bloque de estilo o en la
    hoja externa):

    #Nombre_del_ID {propiedad1:valor;...;propiedadN:valor}
    Podremos definir todos los ID que queramos, pero
    cada ID slo debe ser asociado a una nica etiqueta
    concreta de la siguiente forma:
    <etiqueta ID="Nombre_del_ID"> ... </etiqueta>

    CSS

    JavaScript

    Maneja el elemento
    del documento

    ID

    CSS

    Pseudoclases

    Hay ocasiones en las que HTML da a algunas


    etiquetas un estilo propio: por ejemplo, los enlaces
    aparecen por defecto de otro color y subrayados.
    Estos elementos son las pseudoclases. Por ahora,
    slo estn definidas para la etiqueta <A>.
    Definicin de estilo para una pseudoclase:
    etiqueta:pseudoclase {propiedad1:valor;...;propiedadN:valor}

    CSS

    Pseudoclases

    Las pseudoclases de que disponemos son:


    Link Nos dice el estilo de un enlace que no ha sido
    visitado.
    Visited Nos dice el estilo de un enlace que ha sido
    visitado.
    Active Nos dice el estilo de un enlace que est siendo
    pulsado.
    Hover Nos dice el estilo de un enlace sobre el que est
    pasando el ratn.

    CSS

    Pseudoclases

    Por ejemplo, si deseamos que apareciesen todos los


    enlaces sin subrayar, definiramos los siguientes
    estilos:
    A:link,A:visited,A:active {text-decoration:none}
    Las pseudoclases pueden usarse de forma conjunta
    con las clases, para aplicar ese estilo slo en casos
    concretos, siguiendo la notacin:
    A.NombreClase:pseudoclase
    y tambin se pueden usar en funcin del contexto.

    CSS
    Estilo con la etiqueta DIV

    <STYLE TYPE=TEXT/CSS>
    DIV.INTRO {COLOR: RED}
    </STYLE>
    <DIV CLASS=INTRO> Contenido del Bloque </DIV>

    CSS

    Propiedades
    Bloque

    CSS

    Propiedades
    Fuentes

    CSS

    Propiedades
    Textos

    CSS

    Propiedades
    Color y Fondo

    CSS

    Propiedades
    Listas

    Plantilla

    Regin
    Editable

    Diseo utilizando capas


    Las capas vienen a darnos la solucin al problema
    de poner elementos justo en la posicin que
    queramos, evitndonos tener que hacer artificios
    para obtener el resultado buscado.
    Una capa ser una parte ms del documento que
    puede ser situada en cualquier posicin del mismo,
    consiguiendo que se solape sobre algunos
    elementos si es lo que necesitamos, adecuando sus
    mrgenes y otras propiedades a lo que queramos
    hacer...

    Diseo utilizando capas


    No recomendable, debido a la inestabilidad a la hora
    de interpretar su posicin por la navegadores
    actuales.
    Recomiendo el uso de los estilos con Div.

    FIN

    You might also like