CSS básico. Introducción, Unidades y Selectores

Tamaño: px

Comenzar la demostración a partir de la página:

Download "CSS básico. Introducción, Unidades y Selectores"

Blanca Palma Fernández
hace 6 años
Vistas:

1 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

2 [1] introducción a CSS LMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red

3 Ejemplo de mal HTML, etiqueta font <font face= Arial color= red >Texto</font>

4 Funcionamiento más apropiado HTML Descripción de elementos CSS Cómo se deben presentar esos elementos en pantalla

5 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) 30 módulos en trabajo, estándar vivo (parte de HTML5)

6 Compatibilidad (uso de CSS3 en los navegadores) (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

7 [2] sintaxis básica LMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red

8 funcionamiento selector{ propiedad1:valor1; propiedad2:valor2;. }

9 comentarios /* comentario */

10 añadir código CSS Dentro de la propia etiqueta <p style= color:red >Nuevo párrafo</p>

11 añadir código CSS En la cabecera <head> <style> p{ color:red; } </style>

12 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 >

13 [3] Selectores CSS LMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red

14 Seleccionar elemento nombreelemento (ejemplo: p) p,h1,h2 Selecciona todos los elementos con ese nombre

15 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

16 Seleccionar identificador <p id= id1 > Aplicación de un identificador #id1 Selecciona el elemento con ese identificador Los identificadores no se pueden repetir!

17 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).

18 Selector universal * Todos los elementos ul * Cualquier elemento dentro de ul

19 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

20 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

21 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

22 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

Documentos relacionados

Curso de Diseño web. Juan Carlos Hernández Pérez juancarhdezperez@gmail.com

Curso de Diseño web. Juan Carlos Hernández Pérez juancarhdezperez@gmail.com Curso de Diseño web Juan Carlos Hernández Pérez juancarhdezperez@gmail.com 1 Tema 1 Introducción al lenguaje HTML 2 Introducción a HTML (I/II) HTML es un lenguaje para publicar textos en Web HTML te permite