PAW

Lic. en Sistemas de Información

PAW

Lic. en Sistemas de Información

Speaker:

A.S. Pablo Cesar CHALE

pcchale@gmail.com

CSS

Selectores

Índice:

  1. Introducción
  2. Selectores
  3. Formato de Texto
  4. El modelo de caja
  5. Layouts
  6. Media Querys
  7. Animaciones

Indican que caracteristicas deben cumplir los elementos
a los que se les apliquen los estilos

Tipos de Selectores

Simples

Tipo de elemento

nombreTag { declaraciones }


		
Listado

		
    
			
  •  Item 1
    • 
			
  •  Item 2
    • 
			
  • Item 3
    • 
			
  • Item 4
    •

Listado

  • Item 1
  • Item 2
  • Item 3
  • Item 4
Peso : 1

Simples

Nombre de clase

.clase { declaraciones }


		
Listado

		
    
			
  •  Item 1
    • 
			
  •  Item 2
    • 
			
  • Item 3
    • 
			
  • Item 4
    •

Listado

  • Item 1
  • Item 2
  • Item 3
  • Item 4
Peso : 10

Simples

Identificador

#identificador { declaraciones }


		
Listado

		
    
			
  •  Item 1
    • 
			
  •  Item 2
    • 
			
  • Item 3
    • 
			
  • Item 4
    •

Listado

  • Item 1
  • Item 2
  • Item 3
  • Item 4
Peso : 100

Simples

Universal

* { declaraciones }


		
Listado

		
    
			
  •  Item 1
    • 
			
  •  Item 2
    • 
			
  • Item 3
    • 
			
  • Item 4
    •

Listado

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Combinaciones

Descendientes

selector1 selector2 { declaraciones }


		
Listado

		
    
			
  •  Item 1
    • 
			
  •  Item 2
    • 
			
  • Item 3
    • 
			
  • Item 4
    •

Listado

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Combinaciones

Contexto

selector1 selector2 { declaraciones }


		
Listado

		
    
			
  •  Item 1
    • 
			
  •  Item 2
    • 
			
  • Item 3
    • 
			
  • Item 4
    •

Listado

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Combinaciones

Contexto

selector1 > selector2 { declaraciones }


		
Listado

		
    
			
  •  Item 1
    • 
			
  •  Item 2
    • 
			
  • Item 3
    • 
			
  • Item 4
    •

Listado

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Combinaciones

Hermanos posteriores

selector1 ~ selector2 { declaraciones }


		
Listado

		
    
			
  •  Item 1
    • 
			
  •  Item 2
    • 
			
  • Item 3
    • 
			
  • Item 4
    •

Listado

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Combinaciones

Hermano Adyacente

selector1 + selector2 { declaraciones }


		
Listado

		
    
			
  •  Item 1
    • 
			
  •  Item 2
    • 
			
  • Item 3
    • 
			
  • Item 4
    •

Listado

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Multiples

selector1, selector2 { declaraciones }


		
Listado

		
    
			
  •  Item 1
    • 
			
  •  Item 2
    • 
			
  • Item 3
    • 
			
  • Item 4
    •

Listado

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Selectores por Atributo

[attr]

[attr="valor"]

[attr comparacion "valor"]

Pseudoclases

:pseudoselector

Depende de ciertas características variantes de los elementos

Pseudoclases

links

acciones de usuario

UI (formularios)

estructuras

pseudoclases


		
Listado

		
    
			
  •  Item 1
    • 
			
  •  Item 2
    • 
			
  • Item 3
    • 
			
  • Item 4
    •

Listado

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Pseudoelementos

::pseudoselector

::after

::before

::first-letter

::first-line

::selection

pseudoelementos


		
Listado

		
    
			
  •  Item 1
    • 
			
  •  Item 2
    • 
			
  • Item 3
    • 
			
  • Item 4
    •

Listado

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Conclusión