Scribd
Cargar
38 vistas21 páginas

Selectores CSS para Desarrollo Web

Este documento describe los diferentes tipos de selectores en CSS que definen a qué elementos se les aplicarán los estilos. Incluye selectores de tipo, clase, ID, atributo y universal, así como combinadores como descendiente, hijo, hermanos adyacentes y hermanos generales. El documento proporciona ejemplos de cada selector y explica brevemente su función.

Cargado por

Liset Mahecha
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
38 vistas21 páginas

Selectores CSS para Desarrollo Web

Este documento describe los diferentes tipos de selectores en CSS que definen a qué elementos se les aplicarán los estilos. Incluye selectores de tipo, clase, ID, atributo y universal, así como combinadores como descendiente, hijo, hermanos adyacentes y hermanos generales. El documento proporciona ejemplos de cada selector y explica brevemente su función.

Cargado por

Liset Mahecha
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd

Desarrollo de Software WEB

Jhon Alcides Campo Urriaga


[email protected]
Cel. 3114450922
Contenido
1. MODELO DE CAJA
2. Fin
Apariencia CSS

RUTA(S)
Apariencia CSS
SELECTORES

Definen a qué elementos se les aplicará los estilos


que hayamos establecidos el selector cambiara a
todos los elementos que coincidan con dicho
selector
Apariencia CSS
SELECTORES

SELECTORES BÁSICOS
SELECTOR DE TIPO
SELECTOR ATRIBUTO

SELECTOR DE CLASE SELECTOR DE ID SELECTOR UNIVERSAL


Apariencia CSS
SELECTORES
SELECTOR DE TIPO
Selecciona todos los elementos que coinciden con el
nombre del elemento especificado
HTML CSS
Apariencia CSS
SELECTOR DE CLASE

SELECTOR DE CLASE
Selecciona todos los elementos que tienen el atributo de
class especificado

.nombreclase{

propiedad: valor;

}
Apariencia CSS
SELECTOR DE CLASE

SELECTOR DE ID

Selecciona un elemento basándose en el valor de su atributo id. Solo


puede haber un elemento con un determinado ID dentro de un documen
#id{

propiedad: valor;

}
Apariencia CSS
SELECTOR DE ATRIBUTTO

SELECTOR UNIVERSAL
Selecciona todos los elementos.
Opcionalmente, puede estar restringido a un
espacio de nombre específico o a todos los
*{ espacios de nombres.

propiedad: valor;

}
Apariencia CSS
SELECTOR DE ATRIBUTTO

SELECTOR DE ATRIBUTO

Selecciona elementos basándose en el valor de


un determinado atributo.
Corchetes
[ ]{

propiedad: valor;

}
Apariencia CSS
SELECTOR DE ATRIBUTTO

SELECTOR DE ATRIBUTO

^ =
$=
Apariencia CSS
SELECTOR DE ATRIBUTTO
SELECTOR DE ATRIBUTO
[href^=“htpps” ]{ [href*=“alex” ]{
propiedad: valor; propiedad: valor;
} }
[href$=“org” ]{

propiedad: valor;

}
Apariencia CSS
SELECTORES

COMBINADORES
Combinador de hermanos adyacentes Combinador de hijo

Combinador general de hermanos Combinador de descendientes


Apariencia CSS
SELECTOR DE ATRIBUTTO

Combinador de descendientes
El combinador (espacio) selecciona los
elementos que son descendientes del primer
elemento.
.contenedor p{

propiedad: valor;

}
Apariencia CSS
SELECTOR DE ATRIBUTTO

Combinador de hijo
El combinador > selecciona los elementos que son hijos directos del
primer elemento.
.contenedor>p{

propiedad: valor;

}
Apariencia CSS
SELECTOR DE ATRIBUTTO

Combinador de hermanos adyacentes


El combinador + selecciona hermanos adyacentes. Esto quiere
decir que el segundo elemento sigue directamente al primero
y ambos comparten el mismo elemento padre
h2+p{

propiedad: valor;

}
Apariencia CSS
SELECTOR DE ATRIBUTTO

Combinador general de hermanos


El combinador ~ selecciona hermanos. Esto quiere decir que el
segundo elemento sigue al primero (no necesariamente de
forma inmediata) y ambos comparten el mismo elemento
padre. H2~p{

propiedad: valor;

}
Apariencia CSS
SELECTOR DE ATRIBUTTO
Apariencia CSS
SELECTOR DE ATRIBUTTO
Apariencia CSS
SELECTOR DE ATRIBUTTO
VIGILADA MINEDUCACIÓN

Av. Calle 32 No. 17 - 30


Pbx: 555 82 10
ucompensar.edu.co ucompensar
Bogotá, D.C. - Colombia

También podría gustarte