CSS

LOGRO DE LA SESIÓN

Al finalizar la sesión los estudiantes construyen archivos CSS que aplican a sus documentos HTML asignando diversas propiedades a sus elementos.

¿Qué es CSS?

El código CSS permite definir las propiedades, comportamientos y demás atribuciones de diseño de los elementos de un documento HTML, estas propiedades pueden ser almacenadas en archivos .css y de esta forma reutilizar en diferentes documentos HTML

Estructura básica

Se coloca primero el nombre del elemento HTML (etiqueta), nombre de la clase (class) o identificador (id), luego entre llaves irán las propiedades, dos puntos y sus valores.

[nombre del elemento] {

propiedad1: valor1;

propiedad2: valor2;

propiedad3: valor3;

propiedad4: valor4;

propiedad5: valor5;

}

}

table {

border: 1px solid black;

width: 200px;

padding: 2px 10px;

}

}

Atributos y valores

Los atributos en CSS3 Incluyen: color de letra, fondo, tipografía, tamaño de texto, bordes, dimensiones, animaciones, etc.

div{

width: 100px;

height: 100px;

background-color: #FEE;

margin: 10px;

border: 1px solid red;

color: brown;

font-family: "calibri";

font-size: 20px;

text-align: center;

}}

Comentarios

Los comentarios son todos de bloque y se delimitan mediante /* y */

[nombre del elemento] {

propiedad1: valor1;

propiedad2: valor2;

/* Comentario en linea*/

propiedad3: valor3;

/* Comentario en bloque

propiedad4: valor4;

propiedad5: valor5;

*/

}}

table {

border: 1px solid black;

width: 200px;

/*Arriba_abajo y lados*/

padding: 2px 10px;

/*

Agregar más propiedades

*/

}}

Selectores

Los selectores básicos son:

• De tipo
• De clase
• De ID
• Universales
• De atributo

Nota: Una clase se asigna en HTML mediante la propiedad "class"; un ID con "id", el atributo depende de las propiedades del elemento.

/*De tipo*/

div {propiedad: valor;}

/*De clase*/

.fondo {propiedad: valor;}

/*De ID*/

#cuadro {propiedad: valor;}

/*Universales*/

* {propiedad: valor;}

/*De atributo*/

input [type=submit] {propiedad: valor;}

Agrupación de selectores

/*Combinación simple*/

div, header, footer {propiedad: valor;}

/*Selector descendente*/

main div h1 {propiedad: valor;}

/*Etiqueta de clase/

p.texto {propiedad: valor;}

/*Selectores de hijos*/

ul > li {propiedad: valor;}

/*Selectores adyacentes/

label + input {propiedad: valor;}

/*De atributo/

a:hover {propiedad: valor;}

Permite aplicar una serie de propiedades a varios elementos que pueden cumplir diferentes condiciones, la más usual es la de ser un elemento "hijo" de otro, tenemos:

• Combinación de selectores
• Selector descendente
• Selector de etiqueta de clase
• Selector de hijos
• Selectores adyacentes
• Pseudoclases

RESPONSIVE DESIGN

El diseño responsivo es una tendencia en la programación web donde los diferentes documentos HTML deben adaptarse a los distintos tamaños de pantallas tanto de ordenadores de escritorio como de dispositivos móviles sin la necesidad de crear un nuevo documento HTML, para ello se hace uso de las propiedades de CSS, reglas AT y en algunos casos de JavaScript

Reglas AT

Su estructura básica es: @[ identificador ]... ;

Tenemos entre las más comunes:

• @charset — Define el conjunto de caracteres para el archivo CSS (Usar UTF-8).
• @import — Permite incluir un archivo CSS externo en el archivo CSS.

Una de las más importantes es:

@media, esta permite definir atributos y valores cuando el dispositivo donde se despliega el documento HTML que tiene estas reglas de CSS cumple con determinadas condiciones, la más común es el tamaño de pantalla y esto nos permite tener control sobre los elementos HTML de acuerdo con el tamaño de la pantalla.

Aplicación del @media

Del siguiente código:

@media only screen and (max-width: 500px) {

body {

background-color: peru;

}

}

El motor de CSS indica que cuando la pantalla sea como máximo de 500 px el color de fondo del elemento body será color "peru"

Nota: se recomiendo diseñar primero para móviles. Por ello, usar min-width en las condiciones anidadas @media

Media Types (Tipos de medio)

Los tipos de medio hacen referencia a impresiones o pantalla, el caso de screen se aplica cuando se muestra el documento HTML en la pantalla del dispositivo, mientras el caso de print, cuando se realiza una impresión de la página web.

Ejemplos

@media print {

body { background-color: peru;}

}

@media screen {

body { background-color: peru; }

}

@media screen, print {

body { background-color: peru; }

}

Incluir CSS3 en HTML5

Existen tres formas, y cada una de ellas tiene más preponderancia que la anterior:

Primera: Incluir un archivo CSS en el documento HTML con la etiqueta ♠<link> en la sección <head> del HTML. Ejemplo: <link rel="stylesheet" href="file.css"/>

Segunda: Incluir un código CSS en el documento HTML con la etiqueta ♠<style> en la sección <head> del HTML. Ejemplo: <style>/*propiedades*/</style>

Tercera: Incluir un código CSS dentro de un elemento HTML con la propiedad "style". Ejemplo: <div style="color: black;"/>

CSS es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en HTML.

Permite reutilizar y sobrescribir los atributos y sus valores, dándole flexibilidad y escalabilidad a las páginas Web.