Algo sobre CSS

Tema en 'Webmasters' iniciado por lRay, 22 Dic 2009.

  1. lRa

    lRay
    Expand Collapse
    Teniente Coronel

    Mensajes:
    1.094
    Me Gusta recibidos:
    6
    Bueno primero..

    ¿Que es CSS?


    CSS (Cascading Style Sheets, u Hojas de Estilo en Cascada)
    Esta es una tecnología que nos permite crear páginas web de una manera más exacta. Gracias a las CSS somos mucho más dueños de los resultados finales de la página, pudiendo hacer muchas cosas que no se podía hacer utilizando solamente HTML, como incluir márgenes, tipos de letra, fondos, colores..

    Las Hojas de Estilo en Cascada se escriben dentro del código HTML de la página web, solo en casos avanzados se pueden escribir en un archivo a parte y enlazar la página con ese archivo..

    Ahora les mostraré propiedades de algunas fuentes para CSS.. solo las más basicas:

    Propiedad: font-family
    Valor: Fuente específica (Arial, Times, Verdana)
    Descripcion: Define uno o más nombres de fuentes o familias de fuentes. Si se definen múltiples fuentes, se utilizará la primera que se encuentre en el sistema del usuario


    Propiedad: Line-height
    Valor: Line-height: 12pt;
    Descripcion: Define el espacio entre las líneas


    Propiedad: Text-align
    Valor: Left, center, right o justify
    Descripcion: Define la alineación del texto


    Propiedad: Width
    Valor: En puntos (pts), pulgadas ("), centímetros, píxeles (px) o en %
    Descripcion: Define el ancho de un texto o una imagen


    Propiedad: height
    Valor: En puntos (pts), pulgadas ("), centímetros, píxeles (px) o en %
    Descripcion: Define la altura de un texto o una imagen


    Propiedad: Background-color
    Valor/ejemplo: "#RRGGBB" (color hexadecimal)
    Descripcion: Define el color de fondo


    Propiedad: Background-repeat
    Valor: Repeat, repeat-x, repeat-y, no-repeat
    Descripcion: Define cómo se repite la imagen de fondo


    Propiedad: Background-attachment
    Valor: Scroll, fixed
    Descripcion: Especifica si la imagen de fondo se quedará en su lugar cuando la pantalla se desplace


    Propiedad: List-style-image
    Valor: List-style-image: url(image.png);
    Descripcion: Personaliza las viñetas con una imagen


    Bueno ahora pasemos a unos ejemplos:


    Código:
    <p style="color:green;font-weight:bold">El párrafo saldrá 
    con color verde y en negrita</p>
    Dentro del atributo style se deben indicar los atributos de estilos CSS separados por punto y coma ( ; ). Durante este artículo vamos a conocer muchos atributos de CSS, los dos primeros que hemos visto aquí son:

    Color: Indica el color del contenido la etiqueta donde estemos utilizándolo, generalmente indica el color del texto.

    Font-weight:
    Indica el grosor del texto. Bold sirve para poner en negrita

    Color en los enlaces:

    Con HTML definimos el color de los enlaces en la etiqueta, con lo atributos link, vlink y alink. Esto nos permite cambiar el color de los enlaces para todo el documento, pero ¿Y si queremos cambiar el color de un enlace en concreto, para que tenga otro color que el definido en la etiqueta?

    Para hacer esto utilizaremos el atributo style dentro del enlace:


    Código:
    <a href="mienlace.html" style="color:red"> 
    Así saldrá el enlace en color rojo, independientemente de lo definido para todo el documento..
    espero sea entendible hasta el momento..

    _______________________________________________________________

    Ahora pasemos a algo de CSS Avanzado:

    Esto es solo como complemento a lo anterior
    para llevarlo mejor controlado lo dividiré en capítulos:

    Capítulo 1:

    Una ves visto la definicion de CSS, algunos atributos y ejemplos del mismo veremos lo siguienthe:

    Empesemos con algunas sintaxis (procedimiento para poder formar un codigo CSS en pocas palabras)

    Buno para empesar primero se coloca el selector, luego se abre una llave "{" y se empiezan a colocar los atributos, seguidos de dos puntos ":" y luego el valor seguido de punto y coma ";", al final de todo se cierra el estilo para el selector con el cierre de llave "}".
    En CSS se deben escribir los atributos y valores con minusculas y los comentarios se encierran con "/*" para abrir y "*/" para cerrar, lo veremos en el siguiente ejemplo:


    Código:
    /*CSS sobre selector de etiquetas*/
    body {
           font-family: century gothic;
           font-size: 16px;
           color: black;
           background-color: #cccccc;
    }
    En este caso se lo aplicamos a la etiqueta con solo colocarle el identificador, como en esthe ejemplo:

    Código:
    <div id="header">contenido</div>
    Bueno tambien existen tres formas de aplicar estilos CSS a una pagina, la que recomiendo en primer lugar, haciendo un archivo de texto plano guardado como archivo.css, separado del archivo HTML, y vinculando la hoja HTML a el. Esto se hace colocando en la sección head de la página:

    Código:
    <link href="archivo.css" rel="stylesheet" type="text/css">
    Esta forma seria la mas recomendable porque asi se puede vincular el archivo.css a todas las páginas del sitio, es mucho mas liviano al ver la pagina..


    Por otro lado se puede hacer aplicando los estilos directamente en la sección < head > del documento HTML..

    ejemplo:


    Código:
    <head><title>Pagina</title><style type="text/css">
         <!--
           body {
              font-family: Geneva, Arial, Helvetica, sans-serif;
              font-size: 12px;
              color:#333333;
           }
           -->
    </style></head>
    Como puede verse en algunos casos, los atributos pueden ser compuestos, como el atributo "font-family" o "background-color", puede llevar adicionalmente caracteristicas mas especificas, que van separadas por un guion "-" como vimos en los ejemplos.
    Los valores tambien pueden ser de diferentes tipos, en los de medida, se pueden usar pixeles "px" centimetros "cm" o relativos como "em", en los colores se puede usar la notacion hexadecimal (#FF3300) o directamente el nombre del color en ingles.. (estos atributos son explicados en el post anterior..)

    De esta forma podemos aplicar estilos a todos y cada uno de los elementos HTML que constituyen una página web, y poco a poco ir separando el contenido de la presentación,
    ademas de lograr en un documento completamente válido cosas que solo el lenguaje CSS puede lograr, como cambiar completamente la apariencia de una página sin tocar el archivo HTML.

    El punto ideal sera cuando logremos separar completamente el diseño del contenido, dominando las técnicas de posicionamiento con CSS, y eliminando el uso de tablas para diagramar el contenido.

    Despues existen muchas mas formas de codificar esto..

    Capítulo 2:

    Bueno ahora pasaremos para la utilidad de algunos selectores:

    Antes cabe aclarar q una regla basica de CSS es que está formada por una parte llamada "selector" y otra parte llamada "declaración"..
    La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacérselo". Por lo tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una página o diseño..

    Existen 5 selectores basicos

    SELECTOR UNIVERSAL

    El selector universal, escrito "*", se corresponde con el nombre de cualquier tipo de elemento..


    Código:
    * {declaracion}
    SELECTORES DESCENDENTES

    Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro
    elemento.

    El selector del siguiente ejemplo selecciona todos los elementos de la página que se encuentren dentro de un elemento


    Código:
    p span { declaracion}
    SELECTOR DE TIPO O ETIQUETA

    Un selector de tipo se corresponde con el nombre de un thipo de elemento en el lenguaje del documento. Un selector de tipo equivale con cada instancia del tipo de elemento en la estructura del documentho..

    Para esto se usan los siguientes:

    - p : Selecciona todos los parrafos de la pagina


    Código:
    p {declaracion}
    -h1 : Titulares de una pagina

    Código:
     h1 {declaracion}
      h1,h2,h3{declaracion}
      h2{declaracion}


    SELECTOR DE ID (para mí uno importante dentro del CSS)



    El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma página.

    La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la regla CSS..

    ejemplo:


    Código:
    #destacado { color: red; }
    <p>Primer párrafo</p>
    <p id="destacado">Segundo párrafo</p>
    <p>Tercer párrafo</p>
    En este ejemplo el selector #destacado solamente selecciona el segundo párrafo (cuyo atributo id es igual a un destacado)

    De esta forma, la recomendación general es la de utilizar el selector de ID cuando se quiere
    aplicar un estilo a un solo elemento específico de la página y utilizar el selector de clase cuando se quiere aplicar un estilo a varios elementos diferentes de la página HTML..


    SELECTORES DE CLASE


    Para este selecctor utilizaré un ejemplo para aclarar algunas cosas:

    Si se considera el siguiente código HTM:


    Código:
    <body>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Nunc sed lacus et est adipiscing accumsan...</p>
    <p>Class aptent taciti sociosqu ad litora...</p>
    </body>
    para aplicar el codigo anterior en CSS (solo para el primer parrafo) se aria de esta manera:

    El selector universal (*) no se puede utilizar porque selecciona todos los elementos de la página. El selector de tipo o etiqueta (p) tampoco se puede utilizar porque seleccionaría todos los párrafos. Por último, el selector descendente (body p) tampoco se puede utilizar porque todos los párrafos se encuentran en el mismo sitio..

    Ahora una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página consiste en utilizar el atributo class de HTML sobre ese elemento para indicar directamente la regla CSS que se le debe aplicar:

    Código:
    <body>
    <p class="destacado">Lorem ipsum dolor sit amet...</p>
    <p>Nunc sed lacus et est adipiscing accumsan...</p>
    <p>Class aptent taciti sociosqu ad litora...</p>
    </body>
    de esta manera lograremos codificar todo lo necesario para CSS..

    Capítulo 3:

    Prosigamos con otro tipo de propiedades.. esta ves las llamadas "shorthand"

    Cabe decir que estas son especiales y escenciales en CSS ya que permiten establecer el valor de varias propiedades diferentes..
    La gran ventaja de las propiedades shorthand es que permiten crear hojas de estilos mucho más
    concisas y por tanto, mucho más fáciles de leer..

    ahora presentaré las 6 referencias, su consepto formal y su tipografía de "Las Propiedades Shorthand" disponibles en el CSS 2.1


    1.- Fond (Tipografía):

    Sus valores son:


    Código:
    "<font-style>"  "<font-variant>"  "<font-weight>" 
    "<font-size>"  "<line-height>"  "<font-family>"
    estas se aplican a todos los elementhos y permiten indicar de forma directa todas las propiedades de la tipografía de un texto..

    2.- Margin (Margen):

    Sus valores son:


    Código:
    "<medida>"  "<porcentaje>"   "{1, 4}" 
    estas se aplican a todos los elemnetos salvo algunos casos especiales de elementos mostrados como tablas y establece de forma directa todos los márgenes de un elemento..

    3.- Padding (Relleno):

    Sus valores son:


    Código:
    "<font-style>"  "<font-variant>"  "<font-weight>" 
    "<font-size>"  "<line-height>"  "<font-family>"
    estas se aplican a todos los elementos y permite indicar de forma directa todas las propiedades de la tipografía de un texto..


    4.- Border (Estilo completo de todos los bordes):

    Sus valores son:


    Código:
    "<border-width>"  "<border-color>"  "<border-style>" 
    estas se aplican a todos los elementos y establece el estilo completo de todos los bordes de los mismos..

    5.- Background (Fondo de un Elemento):

    Sus valores son:

    Código:
    "<background-color>"  "<background-image>" 
    "<background-repeat>"  "<background-attachment>" 
    "<background-position>"
    estas se aplican a todas las propiedades y establece todas las propiedades del fondo de un elemento..

    6.- List-style (Estilo de vida):

    Sus valores son:


    Código:
    "<list-style-type>"  "<list-style-position>" 
    "<list-style-image>"
    estas se aplican a todos los elementos de una lista y son propiedad que permite establecer de forma simultanea todas las opciones de una lista..

    bueno estas son todas..

    Ahora quiero que observane el siguiente ejemplo para dar un mejor entendimiento.. lo aplicaremoe con la siguiente hoja de estilo:


    Código:
    {
    font-style: normal;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 1.5em;
    line-height: 1.5;
    font-family: Arial, sans-serif;
    }
    div {
    margin-top: 6px;
    margin-right: 16px;
    margin-bottom: 6px;
    margin-left: 16px;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 10px;
    padding-left: 7px;
    }
    h1 {
    background-color: #6F5000;
    background-image: url("imagenes/icono.png");
    background-repeat: no-repeat;
    background-position: 10px 5px;
    }
    con este ejemplo solo daré a conocer que utilizando las propiedades "shorthand" es posible reducir las 24 líneas que contiene nuestra anterior hoja de estilo en solo 10 manteniendo los mismos estilos..

    esto quedaria de la siguiente manera:


    Código:
    {
    font: normal small-caps bold 1.5em/1.5 Arial, sans-serif;
    }
    div {
    margin: 5px 10px;
    padding: 3px 5px 10px 7px;
    }
    h1 {
    background: #FFF url("imagenes/icono.png") no-repeat 10px 5px;
    }
    como pueden darse cuenta el uso de estos estilos nos ayuda bastante para reducir las grandes hojas de estilo y convertirlas en una mas pequeña.
    Con esto termina el tercer capítulo.

    Bueno con esto damos por terminado el tutorial.. espero les sea de ayuda a todos aquellos que esten interesados en el ambito de programación con lenguajes de diseño..

    saludos cordiales.
     
  2. Por

    PorruMan
    Expand Collapse
    Cabo

    Mensajes:
    126
    Me Gusta recibidos:
    0
    Muchas GraciaS! Voy a ver si me sirve de algo ahi van las gracias
     
  3. vyn

    vynka
    Expand Collapse
    Recluta

    Mensajes:
    2
    Me Gusta recibidos:
    0
    Supongo que aunque sea una escasa información de algo podría servir. Al menos para darse una idea de que trata.
     
  4. F e n i x

    F e n i x
    Expand Collapse
    Comandante
    Usuario destacado

    Mensajes:
    2.510
    Me Gusta recibidos:
    84
    Muy buena informaciòn esto sirve mucho.

    Saludos.
     
  5. Enk

    Enkh
    Expand Collapse
    Teniente Coronel

    Mensajes:
    1.474
    Me Gusta recibidos:
    66
    genial man me gusta tu pots espero que sigas haci saludos :D
     
  6. nie

    nielsen17
    Expand Collapse
    Recluta

    Mensajes:
    41
    Me Gusta recibidos:
    3
    en q programa me recomienda aplicar... ????
     
  7. lRa

    lRay
    Expand Collapse
    Teniente Coronel

    Mensajes:
    1.094
    Me Gusta recibidos:
    6
    El editor de HTML mas conocido y comercial es Dreamweaver ya que trabaja con una excelente interfaz, y ademas es muy fácil de usar.

    Por otro lado, también puedes probar algunos editores tales como:
    • Notepad++, gratuito y de código libre
    • Home Site, es buena herramienta, aunque Adobe hace años que no lo actualiza
    • Arachnophilia, este funciona en todos los sistemas operativos
    Ademas con alguno de estos puedes trabajar no solo en HTML, si no también en lenguajes como Java, Php, ASPs, JSPs, entre otros.
     
  8. jom

    jomapak
    Expand Collapse
    Recluta

    Mensajes:
    7
    Me Gusta recibidos:
    2
    Que programas son buenos para esto
     

Compartir esta página