Tecnologías para el desarrollo de aplicaciones web

CASCADING STYLE SHEETS

UNIDAD III
 CSS

Lenguaje que usamos para diseñar un documento HTML

Describe cómo deben mostrarse los elementos

HTML

Facilita instrucciones para asignar estilos a los elementos

HTML (colores, tipos de letra, tamaños, etc.)
ESTILOS

 Con CSS se definen los estilos y luego se asignan a

los elementos hasta que logremos el diseño visual
que queremos para nuestra página.
 Un estilo se define declarando el nombre de la
propiedad y su valor separados por dos puntos (:)
y al final punto y coma (;).

Las hojas de estilo no son más que archivos de

texto con la lista de reglas CSS que queremos
asignar a los elementos del documento.
 REGLA
LA MAYORÍA DE LAS PROPIEDADES CSS PUEDEN
MODIFICAR UN SOLO ASPECTO DEL ELEMENTO (EL
COLOR DE FONDO EN ESTE CASO). SI QUEREMOS
CAMBIAR VARIOS ESTILOS AL MISMO TIEMPO,
TENEMOS QUE DECLARAR MÚLTIPLES
PROPIEDADES, ESTO LO LOGRAMOS CON UNA
REGLA.

VER ARCHIVO: ESTRUCTURACSS.HTML

 CSS en línea CSS interno CSS externo
Puede ser usado para aplicar un Se suele usar si una sola página Cada HTML deberá incluir una
estilo único a un elemento en HTML tiene un estilo único, referencia a la hoja de estilo
particular, éste se agrega en el éste es definido dentro del externa dentro del elemento
atributo style y puede contener elemento <style> <link> o bien, importada con
cualquier propiedad CSS la sentencia @import

FORMAS DE INSERTAR UNA HOJA DE ESTILO (CSS)

IMPORTACIÓN DE UNA HOJA DE ESTILO
 Una hoja de estilo puede ser importada con la
sentencia @import de CSS. Esta sentencia puede Note que otras reglas de CSS pueden aún estar
usarse en un archivo CSS o dentro del elemento incluidas en el elemento style, pero todas las
style: sentencias @import deben ocurrir al inicio de la hoja
de estilo. Cualquier regla especificada en la misma hoja
de estilo prevalecerá sobre reglas contradictorias en
<style type="text/css"> las hojas de estilo importadas. Por ejemplo, inclusive si
@import url(http://www.htmlhelp.com/estilo.css);
@import url(/hojasEstilo/estilo2.css); una de las hojas de estilo importadas contuviera ol{
ol{background-color: yellow; color: black;} background-color: brown}, las listas ordenadas aún
</style> tendrían un fondo amarillo.

Utilizando el elemento link quedaría así:

<link rel="stylesheet" href="miestilo.css">

 El orden en que las hojas estilos son importadas es importante para determinar cómo trabajan en
cascada. En el ejemplo de arriba, si la hoja de estilo importada estilo.css especifica que los
elementos strong se muestren en rojo y la hoja de estilo estilo2.css especifica que los
elementos strong se muestren en amarillo, la última regla prevalecería, y los
elementos strong serían amarillos.

 ¿Qué estilo se usará cuando haya más de un estilo especificado para un elemento
HTML?
Todos los estilos se encadenarán en una nueva hoja de estilo virtual, con la siguiente prioridad:
1. En línea
2. Hojas de estilo internas y externas
3. Las predeterminadas del navegador
Ver archivo: estructuraCSS2.html

PRIORIDAD DE LAS HOJAS DE ESTILO

ORDEN EN CASCADA

 Una característica importante del CSS es que los Por lo que, el texto del elemento p se mostrará
estilos se asignan en cascada. Los elementos en con un tamaño de 20 píxeles, debido a que es un
los niveles bajos de la jerarquía heredan los estilos elemento hijo del elemento section y, por lo tanto,
asignados a los elementos en los niveles altos. Por herede sus estilos.
ejemplo:

Comentarios en CSS

Son usados para explicar el código y pueden

facilitarte la edición posteriormente. Son ignorados
por los navegadores.

Comienzan con /* y terminan con */

ESTILOS

 Con CSS se definen los estilos y luego se asignan a

los elementos hasta que logremos el diseño visual
que queremos para nuestra página.
 Un estilo se define declarando el nombre de la
propiedad y su valor separados por dos puntos (:)
y al final punto y coma (;).

Las hojas de estilo no son más que archivos de

texto con la lista de reglas CSS que queremos
asignar a los elementos del documento.
SELECTORES SIMPLES

 Seleccionan elementos basados en el nombre, Si queremos asignar los mismos estilos a

id o clase. elementos con nombres diferentes, es decir,
diferentes selectores, los declaramos separados
por una coma (,). Por ejemplo:
Una regla declarada con el nombre del elemento como
selector afecta a todos los elementos de este tipo
encontrados en el documento. Por ejemplo: p,span{
font-size:15px;
}
h2{font-style: italic}
SELECTORES SIMPLES

Atributo id Atributo class

Este atributo es un nombre, un identificador Este atributo puede asignarse a varios elementos
exclusivo del elemento y, por lo tanto, lo podemos dentro del mismo documento. Para referenciarlo,
usar para encontrar un elemento en particular el selector debe incluir el nombre del
dentro del documento. Para referenciarlo, el atributo precedido por un punto (.).
selector debe incluir nombre del atributo .mitexto{
precedido por el carácter #. font-size:24px;
}
#mitexto{
font-size:24px; A un mismo elemento se le pueden asignar varias
} clases, para hacerlo solo hay que declarar los
nombres de las clases separadas por un espacio:
class="negrita italica"
 Existen otras combinaciones de selectores llamados selectores de descendencia o combinador porque afectan a
elementos dentro de otros elementos (listando los selectores separados por un espacio), sin importar el lugar que
ocupan en la jerarquía. Ver archivo selectoresDescen.html y estilo2.css
main p{
font-size:24px;
}
 CSS incluye sintaxis adicionales para realizar una selección más precisa. Entre ellas podemos usar el carácter > para
referenciar un elemento que es hijo directo de otro elemento.
section>p{
font-size:20px;
}
La regla modifica a los elementos p que son hijos de un elemento section.

SELECTORES COMBINADOR O DESCENDENCIA

 Con el carácter + referenciamos un elemento que esta precedido por otro elemento. Ambos
deben de compartir el mismo elemento padre.
h1+p{
font-size:24px;
}
La regla afecta a todos los elementos p que se ubican inmediatamente después de un elemento h1.
 Con el carácter ~ creamos un selector que afecta a todos los elementos que se ubican a
continuación de otro elemento.
p~p{
font-size:20px;
}

SELECTORES COMBINADOR O DESCENDENCIA

 Ver archivo: selectoresDescen.html

SELECTORES COMBINADOR O DESCENDENCIA

SELECTORES PSEUDO-CLASE Y PSEUDO-ELEMENTOS

Pseudo-clase Pseudo-elemento

Selecciona los elementos basados en un cierto Es usado para diseñar partes específicas de un
estado. elemento.

Ver archivo: selectoresPseudoClase.html Ver archivo: pseudoElementos.html

SELECTORES DE ATRIBUTO
Por ejemplo:
Selectores de atributo
ol[type]{
Para situaciones en las que los atributos id y class
no son suficientes para encontrar el elemento color:red;
exacto que queremos modificar, CSS nos permite }
referenciar un elemento por medio de cualquier
Esta regla modifica solo los elementos ol que tienen un
otro atributo que necesitemos. La sintaxis para
atributo llamado type.
definir esta clase de selectores incluye el nombre
del elemento seguido del nombre del atributo A éstos, también podemos agregarles el valor del atributo:
entre corchetes:

ol[type=“A”]{
font-size:20px;
}
 CSS nos permite combinar el carácter = con otros caracteres para realizar una selección más específica.
Los más utilizados son:

img[alt~=“la”]{ Referencia cualquier elemento img con un atributo alt, cuyo valor
incluye la palabra la (p.e.: “la mascota”)
transform:rotate(30deg);
}

img[alt^=“ma”]{ Referencia cualquier elemento img con un atributo alt, cuyo valor
transform:rotate(60deg); comienza en “ma” (p.e.: “mascota”, “mascota”)

SELECTORES ATRIBUTO
 img[alt$=“mi”]{
Referencia cualquier elemento img con un atributo alt, cuyo
transform:rotate(30deg);
valor termina en “mi” (p.e.: “sunami”)
}

img[title*=“mi”]{
Referencia cualquier elemento img con un atributo title, cuyo
font-size:20px; valor contiene la cadena de caracteres “mi” (p.e.:
} “textomicoche”)

Ver archivo: selectoresAtributo.html

SELECTORES ATRIBUTO
Colores CSS matiz se expresa en grados de 0 ha 360: entre 0 y
360 los rojos, cerca de 120 los verdes y cerca de
Los colores son especificados usando:
240 los azules.

✓ Nombres de color predefinidos

saturación se representa en porcentaje, desde 0%
✓ Su valor rgb (rojo, verde, azul desde 0 hasta 255) (escala de grises) hasta 100% (todo color o
✓ Su valor rgba (rojo, verde, azul, alfa), el componente totalmente saturado) y
adicional es para definir la opacidad y el valor se puede
declarar entre 0 (transparente) y 1 (opaco)
luminosidad es un valor en porcentaje, desde 0%
✓ Su valor HEX (hexadecimal) (completamente negro) a 100% (completamente
✓ HLS (matiz, saturación, luminosidad) blanco); un valor 50% representa una
luminosidad promedio.

COLORES
Ejemplos: Con transparencia al 50%:
rgba(255, 99, 71, 0.5)
Color de fondo: style=“background-color: DodgerBlue;”
Color de texto: style=“color: Tomato;” Regla para obtener un color gris claro:
Color de borde: color: hsl(0,0%,80%);
<h1 style=“border: 2px solid Tomato;”>Patty</h1>

Para encontrar los colores adecuados, pueden usar

Valor RGB y HEX de los colores: esta herramienta: https://htmlcolorcodes.com/
rgb(255, 99, 71) style=“background-color: rgb(255, 99, 71);”
#ff6347 style=“background-color: #ff6347;”

COLORES
MODELO DE CAJA

Este término es usado en CSS cuando se habla de Para obtener el ancho total de los elementos:
diseño y maquetación. El modelo de caja es una AnT = ancho + padding izq + padding der + border
caja que envuelve a cada elemento HTML y está izq + border der
compuesto por:

Para obtener el alto total de los elementos:

AlT = alto + padding sup + padding inf + border sup +
border inf

Ver archivo: boxModel.html

TAMAÑO

width – declara el ancho de un elemento. El valor

se puede especificar en píxeles, porcentaje o con la
Por defecto, el tamaño de la mayoría de los
elementos se determinan según el espacio palabra clave auto (por defecto). Cuando se
especifica por porcentaje, el ancho se calcula según
disponible en le contenedor. El ancho de un
elemento se define como 100%, lo cual significa el navegador a partir del ancho del contenedor y
que será tan ancho como su contenedor y tendrá cuando se declara con el valor auto, el elemento se
una altura predeterminada por su contenido. expande hasta ocupar todo el espacio horizontal
disponible dentro del contenedor.
CSS define las siguientes propiedades para declarar
height – declara la altura de un elemento. El valor
un tamaño personalizado:
se puede especificar en píxeles, porcentaje o con la
palabra clave auto (por defecto). Cuando se
especifica por porcentaje, el navegador calcula la
altura del contenedor, y cuando se declara con el
valor auto, el elemento adopta la altura de su
contenedor.
DISEÑO WEB ADAPTABLE (RESPONSIVE)

Este diseño nos permite que nuestra página web se

vea bien en todos los dispositivos diferentes:
computadoras de escritorio, tablets y teléfonos.
El diseño depende de los usuarios destino. El más
común, es a una columna o una combinación como
se muestra en la siguiente imagen:
Las páginas web no deben omitir información para
adaptarse a dispositivos más pequeños, sino
adaptar su contenido a cualquier dispositivo.
Se le llama diseño web adaptable 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.
 HTML5 introdujo un método para permitir que los
¿Qué es viewport? diseñadores web tuvieran el control de la ventana
gráfica, a través de la etiqueta <meta>, de la
siguiente forma: <meta name = "viewport"
La ventana gráfica es el área visible del usuario de una página web
content = "width = device-width, initial-scale
y varía según el dispositivo. Anteriormente, el diseño de las
= 1.0"> y así, el navegador sabe cómo controlar
páginas web era estático y con un tamaño fijo, cuando
las dimensiones y la escala de la página:
comenzamos a navegar por internet usando tablets y teléfonos
móviles, esas páginas fueron demasiado grandes para caber en la width = device-width establece el
ventana gráfica. ancho de la página para seguir el ancho
de la pantalla del dispositivo
La solución a ese problema fue que los navegadores de esos
dispositivos redujeron toda la página web para adaptarse a la initial-scale = 1.0 establece el nivel del
pantalla. zoom inicial cuando el navegador carga la
página por primera vez

DISEÑO WEB ADAPTABLE (RESPONSIVE)

¿Qué es una Media Query? A menos que use los operadores only o not, el
tipo de medio es opcional y el tipo all estará
implícito.
Es una técnica CSS introducida en CSS3. Los tipos de media son:
Hay que utilizar la regla @media para incluir un bloque de all.- Usado para todos los dispositivos de tipo
propiedades CSS solo si cierta condición es verdadera. multimedia
El resultado de la consulta es verdadero si el tipo de medio print.- Utilizado para impresoras
especificado coincide con el tipo de dispositivo en el que se
muestra el documento y todas las expresiones en la consulta de screen.- Se utiliza para pantallas de
medios son verdaderas. Cuando una consulta de medios es computadora, tabletas, teléfonos inteligentes,
verdadera, se aplican la hoja de estilo o las reglas de estilo etc.
correspondientes, siguiendo las reglas normales en cascada. speech.- Se utiliza para lectores de pantalla
que "leen" la página en voz alta
Ver archivo: mediaQ.html

DISEÑO WEB ADAPTABLE (RESPONSIVE)

Breakpoint Los valores disponibles son content-box y
Podemos agregar un punto de ruptura (breakpoint) donde border-box.
ciertas partes del diseño se comportarán de manera diferente en Si un elemento flotado es más alto que el
cada lado del punto de interrupción. elemento que lo contiene, éste será desbordado
Para comenzar a construir un diseño grid responsive, hay que fuera de su contenedor, para resolver este
asegurar que todos los elementos HTML tengan la propiedad problema, agregaremos una clase con la propiedad
box-sizing establecida en border-box. de overflow.
*{box-sizing: border-box;} .clear{overflow: auto;}
Dicha propiedad nos permite decidir cómo se calculará el Ahora bien, sino podemos mantener el control de
tamaño de un elemento y forzar a los navegadores a incluir el los márgenes y relleno (padding), se verán las
relleno y el borde en el tamaño declarado por la propiedad barras de desplazamiento, por lo que, debemos
width. usar el siguiente código:

DISEÑO WEB ADAPTABLE (RESPONSIVE)

.clear::after{
content: “”; /* se emplea para generar nuevo contenido de forma dinámica e
Una grid-view comúnmente tiene 12 columnas y
insertarlo en la página HTML, generalmente utilizada en los pseudoelementos :before y :after */ tiene un ancho total del 100% y se encogerá o
clear: both; /* Restaura el flujo normal del documento y no permite que el
expandirá a medida que cambie el tamaño del
elemento siga flotando hacia la izquierda, la derecha o ambos lados (none, left, right y both)*/ navegador.
display: table; Primero calculamos el porcentaje para cada
} columna 100% / 12 = 8.33%

Ver archivo: gridMedia.html Creamos una clase para cada una de las 12
columnas (class = “col-x”) y un número que define
Grid-View cuántas columnas debe abarcar la sección.
Muchas páginas web están basadas en una grid-view, lo cual Para ver su aplicación pueden consultar el ejercicio
significa que la página está dividida en columnas y esto es muy de la maqueta con media query trabajado en clase.
útil al diseñar las páginas web, ya que facilita la colocación de
elementos en la página. Ver archivo: grid-view.html

DISEÑO WEB ADAPTABLE (RESPONSIVE)

 BOOTSTRAP
ES UN FRAMEWORK DE DESARROLLO
FRONT-END DE CÓDIGO ABIERTO PARA LA
CREACIÓN DE SITIOS Y APLICACIONES WEB.

VER SITIO: HTTPS://GETBOOTSTRAP.COM/

 INDEX CSS JS
Debemos generar nuestro archivo Incluir la hoja de estilo de Incluir JS en el elemento
index.html e incluir el elemento Bootstrap, dentro de <head> <script> antes de cerrar el
<meta name=“viewport”>. para hacer uso de todo el elemento <body>.
diseño y la parte responsive.
Ver archivo: index.html

UTILIZAR BOOTSTRAP
 GRACIAS
PROFESORA: PATRICIA ESCAMILLA
MIRANDA