Sei sulla pagina 1di 30

CSS

Introducción
CSS es un lenguaje que describe el estilo de un documento HTML.

CSS describe cómo deben mostrarse los elementos HTML.

Este tutorial le enseñará CSS desde básico hasta avanzado.


Ejemplo de CSS
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p{
font-family: verdana;
font-size: 20px;
}
Que es CSS?
CSS (Cascading Style Sheets, u Hojas de Estilo en Cascada)
es la tecnología desarrollada por el World Wide Web Consortium (W3C)
con el fin de separar la estructura de la presentación.

¿Por qué usar CSS?


CSS se utiliza para definir estilos para sus páginas web, incluido
el diseño, el diseño y las variaciones en la visualización de
diferentes dispositivos y tamaños de pantalla.
CSS resolvió un gran problema

¡HTML NUNCA pretendía contener etiquetas para formatear una página web!
HTML fue creado para describir el contenido de una página web, como:
<h1> Este es un encabezado </ h1>
<p> Este es un párrafo. </ p>
Cuando las etiquetas como <font> y los atributos de color se agregaron a la
especificación HTML 3.2, comenzó una pesadilla para los desarrolladores web. El
desarrollo de sitios web grandes, donde se agregaron fuentes e información de color
a cada página, se convirtió en un proceso largo y costoso.
Para resolver este problema, el World Wide Web Consortium (W3C) creó CSS.
¡CSS eliminó el formato de estilo de la página HTML!
Sintaxis y selectores de CSS
NOTA: ESTA FORMA ES LA MENOS RECOMENDADA, YA QUE NO EXPLOTA LA FUNCIÓN DE UNA HOJA DE ESTILOS
Fondos de CSS
Las propiedades de fondo de CSS se usan para definir los efectos de
fondo para los elementos.
Propiedades de fondo de CSS: CSS background properties:
• color de fondo background-color
• imagen de fondo background-image
background-repeat
• fondo-repetir
background-attachment
• archivo adjunto background-position
• posición de fondo
Con CSS, un color generalmente se
especifica por:
•un nombre de color válido, como “red"
•un valor HEX - como "# ff0000"
•un valor RGB, como "rgb (255,0,0)"
Sugerencia: para
repetir una imagen
verticalmente, configure
background-repeat:
repeat-y;
Bordes CSS
Márgenes de CSS

Potrebbero piacerti anche