Scribd
Cargar
20 vistas37 páginas

CSS

CSS (Cascading Style Sheets) es un estándar para el estilado de páginas web que gestiona la apariencia de los elementos mediante propiedades como colores, fuentes y márgenes. Existen tres formas de aplicar CSS a un documento HTML y varios tipos de selectores que permiten aplicar estilos a elementos específicos. El modelo de la caja es un concepto fundamental en CSS que describe cómo se estructuran los elementos en términos de contenido, relleno, bordes y márgenes.

Cargado por

Marcelo Caballero
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 PDF, TXT o lee en línea desde Scribd
20 vistas37 páginas

CSS

CSS (Cascading Style Sheets) es un estándar para el estilado de páginas web que gestiona la apariencia de los elementos mediante propiedades como colores, fuentes y márgenes. Existen tres formas de aplicar CSS a un documento HTML y varios tipos de selectores que permiten aplicar estilos a elementos específicos. El modelo de la caja es un concepto fundamental en CSS que describe cómo se estructuran los elementos en términos de contenido, relleno, bordes y márgenes.

Cargado por

Marcelo Caballero
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 PDF, TXT o lee en línea desde Scribd

CSS

Cascading Style Sheets

Estándar para el estilado de


¿Que es CSS? páginas web

Colección de propiedades que le


indican al navegador el estilo de
los elementos
¿CSS es un lenguaje
de programación?

¿Si? ¿No? ¿Qué


creen¨?
¿Como se relacionan?

HTML JavaScript CSS


Sintaxis de CSS
Gestiona la apariencia de los elementos en una
página web

Colores, fuentes, márgenes, espaciado, tamaños,


disposición
Las 3 formas de usar CSS
Para aplicar estilos css a un documento html
hay 3 formas

1. Con la etiqueta Style dentro del


documento HTML
2. Con el atributo Style dentro de la
etiqueta HTML
3. Creando un documento .css y
asociandolo con la etiqueta Link
Selectores CSS
Permiten seleccionar y aplicar estilos a uno o varios elementos en HTML.

Existen varios tipos de selectores que se usan para dirigirse a elementos en


función de su:
clase
ID
estado
relación con otros elementos
1. Selector de tipo

Permite aplicarle estilos a todos los elementos


HTML del mismo tipo
2. Selector de clase

Permite aplicarle estilos a todos los elementos


HTML con la misma clase
3. Selector de ID

Permite aplicarle estilos a un elemento HTML


con el ID
4. Selector universal

Permite aplicarle estilos a todos los elementos


HTML
5. Pseudo clases

Permite aplicarle estilos a elementos HTML en


un cambio de estado

Mas pseudo clases


6. Selector de Descendiente

Permite aplicarle estilos a un elemento HTML


dentro de otro elementos HTML
7. Selector de hermano adyacente
Permite aplicarle estilos a un elemento HTML
que sigue a otro elementos HTML
8. Selector de atributo
Permite aplicarle estilos a un elemento HTML
con un atributo especifico
9. Selector de pseudo elemento
Permite aplicarle estilos a una parte de un
elemento HTML

Mas pseudo elementos


10. Selector de hermano general
Permite aplicarle estilos a un elemento HTML que este al
mismo nivel que otro (no necesariamente adjacente)
11. Selector de hijo directo
Permite aplicarle estilos a un elemento HTML
que esta dentro de otro
Comentarios CSS
Los comentarios permiten dejar mensajes que no se van a interpretar, se
pueden utilizar para documentar partes complejas o dividir secciones
El Modelo de la caja
"box model" o el modelo de la caja son una serie de capas que envuelve a todos
los elementos HTML. Esta compuesto por: contenido, padding/relleno,
borders/bordes y margins/margenes.
¿Preguntas?
Break 15 min
Propiedades basicas CSS
Propiedades de fondo
Propiedades de Texto
y Fuentes
Google Fonts
Colores
Unidades
Propiedades de Display
Block vs Inline
Inline-block??
¿Como centrar un div?
¿Como centrar un div?
Especificidad
Id > Class > Etiqueta
!important
Propiedades de Position
Propiedades de
Transition
Mas CSS

Mas unidades

Mas propiedades
Practico
Estilar una pagina HTML con algunos
de los selectores y propiedades vistas
hasta ahora

También podría gustarte