Lenguaje CSS

Lenguaje CSS

Introducción

• HTML (Lenguaje de Marcas de Hipertexto), no es suficiente para poder crear sitios web con un diseño profesional
• CSS (Hojas de Estilo en Cascada), define el aspecto visual de los documentos web. Nos permite separar el contenido de la presentación
• JavaScript añade programación a un sitio web

• HTML → Contenido
• CSS → Presentación
• JavaScript → Funcionalidad

Definición de estilos: formato

Definición de estilos: formas

• Parte de una página (menos recomendable) - atributo style
• Dentro de cualquier elemento del body y sólo afecta a ese elemento

• Toda la página (no recomendable) - etiqueta
• Un sitio web (ideal para separar contenido y presentación) - archivo .css
• pagina.html (Dentro del head. Habría que ponerlo en todas las páginas del sitio web)
• type=”text/css” href=”estilos.css”>
• estilos.css (se suele poner en otra carpeta, llamada css)
• h1 {color:red}

Tipos de selectores

• Universal
• Se identifica por *
• Se aplica a todos los elementos de la página
• No se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página
• * {color:red}
• De etiqueta
• El selector es el nombre de una etiqueta
• Se aplica a todas las etiquetas con ese nombre
• p {color: red}

Tipos de selectores

• De clase
• Se define con un punto antes del nombre y se aplica con class=”nombre” sin el punto
• Creamos nuestros propios estilos (clases) para utilizar con cualquier etiqueta
• .importante {color: red}
• NOTA: Se pueden aplicar varios estilos a la vez
• separados por en el atributo class ej.
• En caso de conflictos se aplican las propiedades de la última clase
• De identificador (id)
• Se define con # antes del nombre y se aplica con id=”nombre” sin el #
• Es un estilo para un único elemento. No se puede repetir (en teoría)
• Sobrescribe los estilos de la clase, si los hubiese
• #principal {color: red}

Combinación de selectores

• Múltiple
• elemento1, elemento2
• Se aplica a varios elementos. Se agrupan los elementos que compartan las mismas reglas
• Nos ahorra el trabajo de repetir estilos para cada selector.
• Se pueden agrupar las propiedades comunes a varios selectores y el resto no común ponerlas para cada uno por separado. Después para cada selector se unen y se aplican las comunes y las no comunes
• Los selectores pueden ser cualquier tipo: etiqueta, clase o id
• div, p {color: red}
• Por etiqueta y clase
• Se define la etiqueta y la clase separadas por punto
• Restringe a las etiquetas que tengan una determinada clase
• p.importante {color: red}
• Se podría hacer igual con etiqueta e Id

Combinación de selectores

• Descendiente
• elemento1 elemento2
• Se aplica a los elemento2 contenidos en elemento1
• div p {color: red}
• Descendiente directo (hijo)
• elemento1 > elemento2
• Se aplica a los hijos directos elemento2 del elemento1
• div > p {color: red}
• Hermano adyacente
• elemento1 + elemento2
• Se aplica a los elemento2 que está directamente después del elemento1
• div + p {color: red}

Combinación de selectores

• Hermano posterior
• elemento1 ~ elemento2
• Se aplica a los elemento2 que están después del elemento1
• No importan los elementos que hayan entre ellos
• div ~ p {color: red}

Combinación de selectores

• Por atributo
• Se define el atributo, con o sin valor, entre corchetes
• Restringe a todas las etiquetas que tengan ese atributo o ese atributo con ese valor
• [target=’blank’] {color:red}
• Por etiqueta y atributo
• Se define la etiqueta y el atributo entre corchetes (con o sin valor)
• Restringe a las etiquetas que tengan ese atributo o ese atributo con ese valor
• a[target=’_blank’] {color: red}
• Lista completa de tipos de selectores:
• CSS Selectors Reference (w3schools.com)

Herencia de estilos y aplicación en cascada

• Cuando un elemento está dentro de otro, el elemento hijo (interior) se ve afectado por los estilos del padre (exterior) → HERENCIA
• Un elemento se puede ver afectado por varios estilos y se aplicarán todos si no hay conflicto → MODELO DE CASCADA
• En caso de haber conflictos, se aplican según esta PRIORIDAD
• atributo style
• etiqueta

Pseudo-clases

• Son estilos dinámicos que se aplican cuando se cumplen ciertas condiciones
• Se definen con el nombre del selector, : y el nombre de la pseudoclase
• selector:pseudoclase {propiedad: valor}
• De enlaces
• :link - enlace que no se han visitado todavía
• :visited - enlace ya visitado
• De ratón
• :hover - cuando pasa el ratón por encima
• :active - cuando pulsamos sobre el elemento

Pseudo-clases

De interacción

• :focus - cuando tiene el foco
• :checked - cuando la casilla está seleccionada
• Ver ejemplos: CSS Pseudo-classes (w3schools.com) (nos indica el orden cuando utilizamos varias)

Modelo de caja

• El margen (margin), en naranja, es la parte exterior del elemento, por fuera del borde
• El borde (border), en negro, es el límite que separa el interior del exterior del elemento..
• El relleno (padding), en verde, es la parte interior del elemento, entre el contenido y el borde.
• El contenido (content), en azul, es la parte interior del elemento, excluyendo el relleno.

Posicionamiento de caja (propiedad position)

1. Estático (static)
2. Es el que se utiliza por defecto
3. Relativo (relative)
1. Se posiciona usando las propiedades top, bottom, left y right. Tomando como referencia la posición que ocuparían de forma “natural”. Se indica el valor que queremos desplazar.
2. Todas las propiedades pueden tener valores negativos. Tiene prioridad top y left.
4. Absoluto (absolute)
1. Se posiciona usando las propiedades top, bottom, left y right. Tomando como referencia la posición con respecto del navegador
2. Se puede posicionar dentro de otro contenedor (para ello ese contenedor no debe ser static)
3. El espacio “natural” ocupado por la caja desaparece.
4. No se utiliza mucho, porque hay que controlar todo por coordenadas

Posicionamiento de caja (propiedad position)

1. Fijo (fixed)
1. Igual que el absoluto, pero se queda fijo en pantalla aunque nos desplacemos por la página
2. No se suele utilizar mucho. Quizá para dejar algún mensaje fijo o algún fondo.
2. Flotante (float)
1. Es el más utilizado, porque permite el diseño con varias columnas y proporciona resultados profesionales
2. Se utiliza la propiedad float, con los valores left o right
3. Las cajas se colocan automáticamente, flotando a la izquierda o a la derecha (y salen de su posición natural)
4. Se puede utilizar la propiedad clear para romper el float

Diseño adaptable (responsive)

El diseño web adaptable, es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visitarlas. Para implementarlo utilizaremos la técnica de media queries, que aplica unos determinados estilos cuando se cumple. Ejemplo para aplicar diferentes estilos según tamaño: hasta 600px, entre 601px y 1200px y mayores de 1200px

• @media (max-width: 600px) { estilos1 }
• @media (min-width: 601px) and (max-width: 1200px) { estilos2 }
• @media (min-width: 1201px) { estilos3 }

Dispositivos móviles

Aunque se trata de una etiqueta HTML, se utiliza para optimizar la presentación de los documentos HTML en dispositivos móviles: Adapta el texto e imágenes para que se ajuste al tamaño de la pantalla Sería como una “hoja de estilo” automática

Enlaces de interés

• Propiedades CSS agrupadas por categorías:
• https://uniwebsidad.com/libros/referencia-css2
• Vídeos sobre HTML y CSS (Cursos actívate de Google)
• http://desarrolloweb.dlsi.ua.es/libros/html-css/videos
• Cursos CSS desde cero
• https://www.youtube.com/watch?v=yBx2EKrb_ag&list=PLROIqh_5RZeAoysDfEpB_asxV0cItZOL_
• https://www.youtube.com/watch?v=24gNhTcy6pw&list=PLhSj3UTs2_yU0fGoS1bjpHqky4kCEmTbR
• Validador de CSS
• https://jigsaw.w3.org/css-validator/