Tecnologías de la Información y la Comunicación
Curso 2014-2015

Reglas CSS, sintaxis

El lenguaje CSS dota a las páginas web de su aspecto final, por lo tanto, para crear cualquier diseño web es necesario conocer y dominar las reglas CSS. Como ya hemos visto, las reglas CSS tienen la siguiente forma:

regla css

Una regla de CSS está formada por una parte llamada "selector" y otra parte llamada "declaración" (puede haber una o varias dentro del mismo selector).

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.

Una misma regla puede aplicarse sobre varios selectores y un mismo selector se puede utilizar en varias reglas.

Incluir CSS en un documento HTML

Existen diferentes formas de utilizar reglas CSS en documentos HTML, aunque la más utilizada y eficaz es enlazar un archivo externo con extensión .css en la cabecera del documento HTML de esta manera:

enlace css

Comentarios en CSS

CSS permite incluir comentarios entre sus reglas y estilos. Los comentarios son contenidos de texto que el diseñador incluye en el archivo CSS para su propia información y utilidad. Los navegadores ignoran por completo cualquier comentario de los archivos CSS, por lo que es común utilizarlos para estructurar de forma clara los archivos CSS complejos.

El comienzo de un comentario se indica mediante los caracteres /* y el final del comentario se indica mediante */, tal y como se muestra en el siguiente ejemplo:

/* Este es un comentario en CSS */

Los comentarios pueden ocupar tantas líneas como sea necesario, pero no se puede incluir un comentario dentro de otro comentario:

/* Este es un
   comentario CSS de varias
   lineas */

Tipos de SELECTORES básicos

  • Selector Universal: identificado con el asterisco * se utiliza para seleccionar todos los elementos de la página
    * {
        margin: 0;
        padding: 0;
    }
  • Selectores de Etiqueta: selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector
    h1, h2, h3, h4, h5, h6 { font-family: verdana, arial; font-weight: 100; }
  • Selectores de Clase: son los más utilizados. La principal característica de este selector es que en una misma página HTML varios elementos diferentes pueden utilizar el mismo valor en el atributo class
    .centro { text-align: center; }
  • Selector de ID: El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id.
    #main { margin: 0 auto; padding: 0;}
  • Selector descendente: 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.
    a img { border: none;}

Las declaraciones se puenden agrupar en la misma regla, separándolas por un punto y coma ;

Los selectores se puenden agrupar separándolos mediante una coma , 

Una de las características principales de CSS es la herencia de los estilos definidos para los elementos. Cuando se establece el valor de una propiedad CSS en un elemento, sus elementos descendientes heredan de forma automática el valor de esa propiedad.

En Línea...

Hay 26 invitados y ningún miembro en línea

Prácticas...

aulav

Visitas...

Hoy14
Ayer43
Mes542
TOTAL51074

Miércoles, 13 Diciembre 2017