INTRODUCCION
CSS es el lenguaje que usamos para diseñar una página web.
- CSS son las siglas de Cascading Style Sheets.
- CSS describe cómo se mostrarán los elementos HTML en la pantalla, el papel o en otros medios.
- CSS ahorra mucho trabajo. Puede controlar el diseño de varias páginas web a la vez.
- Las hojas de estilo externas se almacenan en archivos CSS.
¿Por qué utilizar 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 para diferentes dispositivos y tamaños de pantalla.
SINTAXIS
Una regla CSS consta de un selector y un bloque de declaración.
- El selector apunta al elemento HTML al que desea aplicar estilo.
- El bloque de declaración contiene una o más declaraciones separadas por punto y coma.
- Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.
- Varias declaraciones CSS se separan con punto y coma y los bloques de declaración están rodeados por llaves.
En este ejemplo, todos los elementos estarán alineados al centro, con un color de texto rojo:
p {
color: red;
text-align: center;
}
Ejemplo explicado:
- p es un selector en CSS (apunta al elemento HTML que desea aplicar estilo: p ).
- color es una propiedad y redes el valor de la propiedad.
- Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.
- text-alignes una propiedad y centeres el valor de la propiedad.
SELECTORES
Un selector de CSS selecciona los elementos HTML a los que desea aplicar estilo.
Podemos dividir los selectores de CSS en cinco categorías:
- Selectores simples (seleccione elementos según el nombre, la identificación, la clase).
- Selectores de combinador (seleccione elementos en función de una relación específica entre ellos).
- Selectores de pseudoclase (seleccionar elementos basados en un cierto estado).
- Selectores de pseudoelementos (seleccionar y aplicar estilo a una parte de un elemento).
- Selectores de atributos (seleccione elementos basados en un atributo o valor de atributo)
En este ejemplo, el selector de elementos selecciona elementos HTML según el nombre del elemento:
p {
color: red;
text-align: center;
}
FONDOS
Las propiedades de fondo de CSS se utilizan para agregar efectos de fondo a los elementos..
Podemos aplicar diferentes propiedades a un fondo en CSS:
- La propiedad background-color especifica el color de fondo de un elemento.
- La propiedad background-image especifica una imagen para usar como fondo de un elemento.
- De forma predeterminada, la propiedad background-image repite una imagen tanto horizontal como verticalmente.
- La propiedad background-attachment especifica si la imagen de fondo debe desplazarse o ser fija (no se desplazará con el resto de la página).
- Para acortar el código, también es posible especificar todas las propiedades de fondo en una sola propiedad. A esto se le llama propiedad taquigráfica.
En lugar de escribir:
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Puede utilizar la propiedad abreviada background:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
WEB RESPONSIVE
¿Qué es el diseño web adaptable?:
- El diseño web receptivo hace que su página web se vea bien en todos los dispositivos.
- El diseño web receptivo utiliza solo HTML y CSS.
- El diseño web receptivo no es un programa ni un JavaScript.
Diseñar para ofrecer la mejor experiencia a todos los usuarios:
Las páginas web se pueden ver utilizando muchos dispositivos diferentes: computadoras de escritorio, tabletas y teléfonos. Su página web debe verse bien y ser fácil de usar, independientemente del dispositivo. Las páginas web no deben omitir información para adaptarse a dispositivos más pequeños, sino adaptar su contenido para adaptarse a cualquier dispositivo:
Se denomina diseño web receptivo cuando usa CSS y HTML para cambiar el tamaño, ocultar, reducir, ampliar o mover el contenido para que se vea bien en cualquier pantalla.
Medias Queries
La consulta de medios es una técnica CSS introducida en CSS3. Utiliza la @mediaregla para incluir un bloque de propiedades CSS solo si una determinada condición es verdadera.
Ejemplo: Si la ventana del navegador tiene 600 píxeles o menos, el color de fondo será azul claro:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
REFERENCIAS
Toda la documentación de esta página ha sido tomada de CSS TUTORIAL