CSS básico. Introducción, Unidades y Selectores LMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red
[1] introducción a CSS LMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red
Ejemplo de mal HTML, etiqueta font <font face= Arial color= red >Texto</font>
Funcionamiento más apropiado HTML Descripción de elementos CSS Cómo se deben presentar esos elementos en pantalla
Versiones CSS CSS1 (1996) Formatos de texto, párrafo, caja, lista, tamaños de imágenes,- CSS2 (1998) y CSS 2.1 Posicionamiento, tipos de medio CSS3 (actual) http://www.w3.org/style/css/current-work 30 módulos en trabajo, estándar vivo (parte de HTML5)
Compatibilidad http://caniuse.com (uso de CSS3 en los navegadores) http://css3test.com (compatibilidad de mi navegador) Las nuevas propiedades (sin compatibilidad) a veces usan prefijos: -moz- Mozilla -webkit- Motor de Safari, Chrome y (ahora) Opera -ms- Microsoft -o- Versiones anteriores de Opera
[2] sintaxis básica LMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red
funcionamiento selector{ propiedad1:valor1; propiedad2:valor2;. }
comentarios /* comentario */
añadir código CSS Dentro de la propia etiqueta <p style= color:red >Nuevo párrafo</p>
añadir código CSS En la cabecera <head> <style> p{ color:red; } </style>
añadir código CSS En archivo separado (externo), estilos.css p{ color:red; } Se incrusta el código con <head> <link rel= stylesheet href= estilos.css type= text/css >
[3] Selectores CSS LMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red
Seleccionar elemento nombreelemento (ejemplo: p) p,h1,h2 Selecciona todos los elementos con ese nombre
Seleccionar clase <p class= clase1 > Aplicación de una clase a un elemento <p class= clase1 clase2 > Aplicación de dos clases p.clase1 Seleciona párrafos con esa clase aplicada.clase1 Elementos (del tipo que sea) con esa clase.clase1.clase2 Elementos con esas dos clases
Seleccionar identificador <p id= id1 > Aplicación de un identificador #id1 Selecciona el elemento con ese identificador Los identificadores no se pueden repetir!
Seleccionar de limitación p strong Selector de negritas dentro de un párrafo p strong em Selecciona los elementos de cursiva (énfasis) que están dentro de elementos resaltados (strong) que, a su vez, están dentro de párrafos h1.rojo Elementos de clase rojo que están dentro de elementos titulares de nivel 1 (h1).
Selector universal * Todos los elementos ul * Cualquier elemento dentro de ul
Selector por atributos p[lang] Párrafos que usan el atributo lang p[lang= en ] Párrafos marcados con idioma inglés [atributo=valor] Elementos con ese atributo valiendo lo que indica el valor. [atributo$=valor] Atributo cuyo final coincida con el valor [atributo^=valor] Atributo cuyo inicio coincida con el valor [atributo =valor] Atributo cuyo inicio coincida con el valor y el valor es una palabra [atributo*=valor] Atributo que contiene el valor
Selectores jerárquicos section p P es descendiente de p section>p P es hija de section p+p Selecciona el primer hermano de un párrafo (selecciona el segunda párrafo) p~p Selecciona todos los hermanos de alguien. p:empty Párrafo vacío
Selectores jerárquicos p:first-child El párrafo si es el primer hijo p:last-child El párrafo si es el último hijo p:nth-child(5) El párrafo si es el quinto hijo p:nth-child(even) Los párrafos hijos pares p:nth-child(odd) Los párrafos hijos impares p:nth-child(3n) Párrafos hijos múltiplos de 3 p:only-child Párrafos que son únicos hijos
Selectores jerárquicos p:first-of-type El párrafo si es el primer hijo de ese tipo p:last-of-type p:nth-of-type(5) p:nth-of-type (even) p:nth-of-type (odd) p:nth-of-type (3n) p:only-of-type