Scribd Logo
Carica

Benvenuto in Scribd!

  • Css

    Caricato da

    Carlos
    101 visualizzazioni36 pagine
    Css hoja de estilo en cascada basico, formateo de la capa de presentacion

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    Css hoja de estilo en cascada basico, formateo de la capa de presentacion

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    101 visualizzazioni36 pagine

    Css

    Caricato da

    Carlos
    Css hoja de estilo en cascada basico, formateo de la capa de presentacion

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 36

    14-7-2012

    CHALOO

    TUTORIAL DE CSS

    CSS BASICO | Carlos

    Ao de la Integracin Nacional y el Reconocimiento de Nuestra Diversidad

    Trabajo de investigacin: TUTORIAL DE HOJAS DE ESTILO (CSS)

    Autor: CHATA YAURI, CARLOS

    La sintaxis de CSS
    Comenzamos con la sintaxis bsica de CSS y como agregar un comentario.

    Cmo se estructura CSS?


    CSS funciona a base de reglas. Cada regla est compuesta por un selector y la declaracin. La declaracin a su vez est compuesta por una propiedad y su valor.

    Veamos un ejemplo donde el selector p indica que todos los elementos p del documento HTML sern afectados por la declaracin cuya propiedad es color y su valor es blue (azul).

    Si el valor tiene mltiples palabras, agrguelo entre comillas.

    Si desea especificar ms de una propiedad, deber separarlas con un punto y coma (;).

    Para definir los estilos de forma ms clara y fcil de leer, puede describir cada propiedad en diferentes lneas.

    Si desea definir una misma propiedad para varios selectores, solo debe agruparlos separndolos con una coma (,).

    El selector class
    Con el selector class se pueden definir diferentes estilos para un mismo elemento HTML. Por ejemplo el elemento <p> puede ser de color azul o de color rojo.

    Y as se vera en el documento HTML:

    El selector ID

    HTML introduce el atributo id, el cual tiene un valor nico en todo el documento. Hacemos referencia a l anteponiendo el smbolo "#".

    Y en HTML se vera asi:

    Comentarios en CSS
    Para agregar un comentario que ayude a ser ms legible el documento utilizamos "/* comentario */".

    TABLA DE ATRIBUTO DE CSS

    Cmo se usan los estilos?


    Donde debemos utilizar CSS y cmo funciona en cada lugar.

    Dnde se ubican los estilos?


    Cuando un navegador lee una hoja de estilos, este formatea el documento de acuerdo a la misma. Hay 3 formas de insertar una hoja de estilos:

    1. Entre lneas
    Definimos el estilo directamente dentro del cdigo HTML. Debemos usar esta forma cuando un nico estilo es aplicado a un solo elemento. Su uso est dado por el atributo style.

    2. Hojas de estilo interna


    Las hojas de estilo interna deben usarse cuando una pgina tiene un estilo nico. Las definimos con la etiqueta <style> en la cabecera del documento entre las etiquetas <head> y </head>

    10

    En este ejemplo se muestra que la etiqueta <style> con su atributo type define una hoja de estilo. Entre las etiquetas style definimos al selector body con un color de fondo azul y al selector p de color blanco.

    3. Hojas de estilo externas


    Esta es la forma ideal para cuando una misma hoja de estilos es aplicada a varias pginas. Con realizar los cambios en un solo archivo, podemos cambiar el aspecto de todo el sitio web. Las hojas de estilo deben llevar la terminacin .css. As se vera por ejemplo, un archivo CSS externo que llamaremos "fuentes.css":

    Nota: el cdigo, en los archivos de hojas de estilos externos, comienzan directamente con el selector. Cada pgina del sitio debe vincularse con la hoja de estilos usando la etiqueta <link> ubicada en la cabecera del documento.

    11

    rel="stylesheet" nos indica que la relacin es una hoja de estilo. type="text/css" nos dice que el tipo es texto y css. href="fuentes.css" es el nombre del documento que contiene el cdigo css.

    CSS Background Fondo


    Decora el fondo de pantalla de tu sitio con colores o imgenes.

    12

    El fondo con CSS


    Las propiedades de fondo (en ingls background) en CSS, nos permiten controlar el color de fondo de un elemento. Colocar una imagen de fondo, la ubicacin de la misma dentro del fondo (centrada, a la izquierda, en alguna coordenada de x,y, etc.) y la cantidad de veces que se va a repetir. Por ejemplo, si quisiramos un fondo de color rojo:

    En caso que optemos por una imagen como fondo de nuestra pgina esta sera una solucin:

    13

    Qu pasa si la imagen es ms pequea que el tamao del fondo?


    Si la imagen que elegimos de fondo es ms chica que este, esta se repetir tantas veces como sea necesario hasta cubrir todo el fondo. Por ejemplo para una imagen como esta este sera el resultado:

    Propiedades del fondo

    14

    CSS Textos
    Transforma, decora y alinea los textos de tu sitio para hacerlos ms claros para la lectura.

    15

    Los textos con CSS


    Las propiedades de los textos nos permiten controlar la apariencia de los mismos. Podemos cambiar el color, alinearlo, decorarlo, controlar los espacios entre palabras y mucho ms.

    Texto en color
    En este ejemplo se define que el elemento "p" sea de color azul y que tenga una separacin entre palabras de 10 pxeles.

    Sangra
    La propiedad "text-indent" nos permite dejar sangra dentro del texto.

    16

    Enlace sin subrayar


    La propiedad "text-decoration" nos permite, entre otras cosas, eliminar el subrayado en un enlace como podemos observar en este ejemplo.

    Texto centrado
    La propiedad "text-align" nos permite ubicar el texto a la derecha, izquierda o en el centro. En este ejemplo, vamos a utilizar tambin la propiedad "letter-spacing" que define el espacio que dejar entre letras.

    17

    Propiedades de los textos

    18

    Bordes CSS
    Dale color, estilo y espesor a los bordes de las tablas.

    Bordes con CSS


    Los bordes nos sirven para decorar algunos elementos con lneas de diferentes espesores, colores y formas.

    19

    Un ejemplo de bordes, podra ser esta tabla a la cual le aplicamos diferentes propiedades para hacerla ms atractiva.

    Tabla de las propiedades de los bordes

    20

    21

    CSS Contornos
    Agrgale un contorno a los textos para resaltarlos.

    22

    Contornos con CSS


    Los contornos son lneas que se encuentran alrededor del elemento, por afuera del borde, con el fn de hacerlo resaltar. Podemos especificar el estilo, el ancho y el color de los contornos con la propiedad "outline".

    Un ejemplo de estilos

    Nota: los contornos no funcionan en el navegador Internet Explorer.

    Un ejemplo de ancho y color

    23

    Nota: para que se visualice el ancho (outline-width) es necesario definir el estilo solido (outline-style: solid) de lo contrario no se visualizar.

    Tabla de las propiedades de las lneas exteriores

    CSS Mrgenes
    Mantn distancia entre elementos utilizando mrgenes alrededor de los mismos.

    Mrgenes con CSS


    El margen es un espacio invisible alrededor del elemento, que le permite al mismo mantener distancia de otros elementos.

    24

    Modelo de cajas
    Las propiedades de los mrgenes(margin en ingls) nos permiten definir el ancho de los mismos.

    Tabla de las propiedades de los mrgenes

    25

    CSS Relleno
    Deja un espacio entre el elemento y el borde del mismo.

    Relleno con CSS


    El relleno se comporta exactamente igual que los mrgenes con la excepcin que deja el espacio blanco entre el elemento y los bordes, o en caso que no posea bordes, con el margen.

    26

    Modelo de cajas
    Las propiedades del relleno (padding en ingls) nos permiten definir el ancho de los mismos.

    Tabla de las propiedades de padding (relleno)

    27

    CSS Listas
    Define que aspecto le quieres dar a las listas de tu sitio: numerado, con letras, nmeros romanos, un pequeo grfico, etc.

    28

    Listas con CSS


    Las propiedades de las listas nos permiten establecer el estilo de las mismas, la imagen, nmero o letra de los diferentes Items y la posicin de la misma.

    Listas ordenadas

    Listas desordenadas

    29

    Uso de una imagen

    Tambin podemos incluir un pequeo smbolo de nuestra creacin en lugar de los smbolos estndar del lenguaje.

    Tabla de las propiedades de las listas

    30

    Tablas CSS
    Aprenda como definir el tamao de las tablas, espacio entre celdas, o la ubicacin del ttulo con CSS.

    Tablas con CSS


    Las propiedades de las tablas nos permiten definir los distintos elementos que componen una tabla: La ubicacin del ttulo con respecto a la tabla. Celdas de tamao fijo o ajustable. Espaciado entre celdas.

    31

    Ubicacin del ttulo

    La propiedad "caption-side" nos permite ubicar el ttulo de la tabla por encima o por debajo de la misma.

    Formato de las celdas


    La propiedad "table-layout" define si las celdas, filas o columnas, van a tener el tamao fijo que estipulemos (fixed) o se adecuarn al contenido sin importar la medida que hayamos establecido (auto).

    32

    Espacio entre celdas


    La propiedad "border-spacing" nos permite dejar espacio libre entre celdas.

    33

    Propiedades de las tablas

    34

    Ejemplos prcticos ilustrados:

    35

    Potrebbero piacerti anche