Programació n II

ING. ROBERTO ELIAS

HTML- CSS
• CSS es el lenguaje que utilizamos para dar estilo a un
documento HTML.
• CSS describe cómo se deben mostrar los elementos HTML.
• ¿Qué es CSS?
• CSS son las siglas de Cascading Style Sheets (Hojas de estilo en
cascada)
• CSS describe cómo se deben mostrar 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é 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 para diferentes dispositivos y tamaños de
pantalla.
SINTAXIS - CSS

• Una regla CSS consta de un selector y un bloque de

declaración.
SITAXIS - CSS
• El selector apunta al elemento HTML 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 de llaves.
EJEMPLO
Selectores CSS

• Los selectores CSS se utilizan para "encontrar" (o seleccionar)

los elementos HTML que desea aplicar estilo.
• Podemos dividir los selectores CSS en cinco categorías:
• Selectores simples (seleccione elementos en función del
nombre, id, clase)
• Selectores de combinadores (seleccionar elementos en
función de una relación específica entre ellos)
• Selectores de pseudoclase (seleccionar elementos en función
de un determinado estado)
• Selectores de pseudoelementos (seleccionar y aplicar estilo a
una parte de un elemento)
• Selectores de atributos (seleccionar elementos en función de
un atributo o valor de atributo)
El selector de identificadores CSS

• El selector de id utiliza el atributo id de un elemento HTML para

seleccionar un elemento específico.
• El identificador de un elemento es único dentro de una página, por lo
que el selector de identificador se utiliza para seleccionar un
elemento único.
• Para seleccionar un elemento con un identificador específico, escriba
un carácter hash (#), seguido del identificador del elemento.
El selector de clases CSS
• El selector de clases selecciona elementos HTML con un atributo de
clase específico.
• Para seleccionar elementos con una clase específica, escriba un
carácter de punto (.), seguido del nombre de la clase.
El selector universal CSS

• El selector universal (*) selecciona todos los elementos HTML

de la página.
El selector de agrupación CSS
• El selector de agrupación selecciona todos los elementos HTML
con las mismas definiciones de estilo.
• Mire el siguiente código CSS (los elementos h1, h2 y p tienen las
mismas definiciones de estilo):
El selector de agrupació n CSS
• Será mejor agrupar los selectores, para minimizar el código.
• Para agrupar selectores, separe cada selector con una coma.
Cómo agregar CSS

• Cuando un navegador lee una hoja de estilos, dará formato al

documento HTML de acuerdo con la información de la hoja de
estilos.
• Hay tres formas de insertar una hoja de estilos:
• CSS externo
• CSS interno
• CSS en línea
CSS externo
• Con una hoja de estilos externa, puede cambiar el aspecto de un
sitio web completo cambiando solo un archivo!
• Cada página HTML debe incluir una referencia al archivo de hoja de
estilos externo dentro del elemento <link>, dentro de la sección de
encabezado.
CSS EXTERNO
• Una hoja de estilos externa se puede escribir en cualquier editor de
texto y debe guardarse con una extensión .css.
• El archivo de .css externo no debe contener ninguna etiqueta HTML.
• Así es como se ve el archivo "style.css":
CSS interno
• Se puede utilizar una hoja de estilos interna si una sola página
HTML tiene un estilo único.
• El estilo interno se define dentro del elemento <style>, dentro de la
sección principal.
CSS en línea

• Se puede utilizar un estilo en línea para aplicar un estilo único

para un solo elemento.
• Para usar estilos en línea, agregue el atributo style al elemento
correspondiente. El atributo style puede contener cualquier
propiedad CSS.
Comentarios CSS

• Los comentarios se utilizan para explicar el código y pueden

ayudar cuando edite el código fuente en una fecha posterior.
• Los comentarios son ignorados por los navegadores.
• Un comentario CSS se coloca dentro del elemento, y comienza
con y termina con :
• /* */
Colores en CSS
• Los colores se especifican utilizando nombres de color
predefinidos o valores RGB, HEX, HSL, RGBA, HSLA.
Nombres de color CSS

En CSS, se puede especificar un color mediante un nombre de

color predefinido:
Valores de color CSS

• En CSS, los colores también se pueden especificar utilizando

valores RGB, valores HEX, valores HSL, valores RGBA y valores
HSLA:
• Igual que el nombre del color "Tomate":
Colores CSS RGB
• En CSS, se puede especificar un color como un valor RGB, utilizando esta
fórmula:
• rgb (rojo, verde, azul)
• Cada parámetro (rojo, verde y azul) define la intensidad del color entre 0 y 255.
• Por ejemplo, rgb(255, 0, 0) se muestra como rojo, porque el rojo se establece en
su valor más alto (255) y los demás se establecen en 0.
• Para mostrar el negro, establezca todos los parámetros de color en 0, de la
siguiente manera: rgb(0, 0, 0).
• Para mostrar blanco, establezca todos los parámetros de color en 255, de la
siguiente manera: rgb(255, 255, 255).
• Experimente mezclando los siguientes valores RGB:
Valor RGBA
• Los valores de color RGBA son una extensión de los valores de
color RGB con un canal alfa, que especifica la opacidad de un
color.
• Se especifica un valor de color RGBA con:
• rgba (rojo, verde, azul, alfa)
• El parámetro alfa es un número entre 0.0 (totalmente
transparente) y 1.0 (no transparente en absoluto):
• Experimente mezclando los valores RGBA a continuación:
Colores CSS HEX

• Un color hexadecimal se especifica con: #RRGGBB, donde los enteros hexadecimales

RR (rojo), GG (verde) y BB (azul) especifican los componentes del color.
• En CSS, se puede especificar un color utilizando un valor hexadecimal en el formulario:
• #rrggbb
• Donde rr (rojo), gg (verde) y bb (azul) son valores hexadecimales entre 00 y ff (igual
que el decimal 0-255).
• Por ejemplo, #ff0000 se muestra como rojo, porque el rojo se establece en su valor
más alto (ff) y los demás se establecen en el valor más bajo (00).
• Para mostrar el negro, establezca todos los valores en 00, así: #000000.
• Para mostrar blanco, establezca todos los valores en ff, así: #ffffff.
• Experimente mezclando los valores HEX a continuación:
Ejemplo de Colores
Colores CSS HSL

• En CSS, se puede especificar un color utilizando el tono, la saturación y la luminosidad

(HSL) en el formulario:
• hsl (tono, saturación, ligereza)
• El tono es un grado en la rueda de color de 0 a 360. 0 es rojo, 120 es verde y 240 es azul.
• La saturación es un valor porcentual. 0% significa un tono de gris, y 100% es el color
completo.
• La ligereza también es un porcentaje. 0% es negro, 50% no es ni claro ni oscuro, 100% es
blanco
• Experimente mezclando los valores de HSL a continuación:
 Estilo de borde CSS
• La propiedad especifica qué tipo de borde se va a mostrar.border-style
• Se permiten los siguientes valores:
• dotted - Define un borde punteado
• dashed - Define un borde discontinuo
• solid - Define un borde sólido
• double - Define un doble borde
• groove - Define un borde ranurado en 3D. El efecto depende del valor de color
de borde
• ridge - Define un borde estriado en 3D. El efecto depende del valor de color de
borde
• inset - Define un borde insertado 3D. El efecto depende del valor de color de
borde
• outset - Define un borde de inicio 3D. El efecto depende del valor de color de
borde
• none - No define ningún borde
• hidden - Define un borde oculto
 Ancho de borde CSS
• La propiedad especifica el ancho de los cuatro bordes.border-
width
• El ancho se puede establecer como un tamaño específico o
utilizando uno de los tres valores predefinidos: delgado, medio
o grueso:
• Ejemplo
 Márgenes CSS
• Las propiedades CSS se utilizan para crear espacio alrededor de los elementos,
fuera de los bordes definidos.margin
• Con CSS, usted tiene control total sobre los márgenes. Existen propiedades para
establecer el margen para cada lado de un elemento (superior, derecha, inferior e
izquierda).
• Margen - Lados individuales
• CSS tiene propiedades para especificar el margen para cada lado de un elemento:
• margin-top
• margin-right
• margin-bottom
• margin-left
• Todas las propiedades de margen pueden tener los siguientes valores:
• auto - el navegador calcula el margen
• longitud: especifica un margen en px, pt, cm, etc.
• % - especifica un margen en % de la anchura del elemento que contiene
• heredar: especifica que el margen debe heredarse del elemento primario
 Relleno CSS
• Las propiedades CSS se utilizan para generar espacio alrededor del
contenido de un elemento, dentro de cualquier borde definido.padding
• Con CSS, tiene control total sobre el relleno. Existen propiedades para
establecer el relleno para cada lado de un elemento (superior, derecha,
inferior e izquierda).
• CSS tiene propiedades para especificar el relleno para cada lado de un
elemento:
• padding-top
• padding-right
• padding-bottom
• padding-left
• Todas las propiedades de relleno pueden tener los siguientes valores:
• longitud: especifica un relleno en px, pt, cm, etc.
• % - especifica un relleno en % de la anchura del elemento que lo contiene
• heredar: especifica que el relleno debe heredarse del elemento primario
CSS Alto, ancho y ancho máximo

• El CSS y las propiedades se utilizan para establecer el alto y el

ancho de un elemento.heightwidth
• La propiedad CSS se utiliza para establecer el ancho máximo
de un elemento.max-width
• Las propiedades de altura y anchura no incluyen relleno,
bordes ni márgenes. Establece la altura / anchura del área
dentro del relleno, el borde y el margen del elemento.
Valores de altura y anchura de CSS
• Las propiedades y pueden tener los siguientes valores: height
width
• auto - Esto es por defecto. El navegador calcula la altura y la
anchura
• length - Define la altura/anchura en px, cm, etc.
• % - Define la altura/anchura en porcentaje del bloque que
contiene
• initial - Establece la altura/anchura a su valor predeterminado
• inherit - La altura/anchura se heredará de su valor padre
 Modelo de caja CSS
• En CSS, el término "modelo de caja" se utiliza cuando se habla
de diseño y maquetación.
• El modelo de caja CSS es esencialmente una caja que se
envuelve alrededor de cada elemento HTML. Consiste en:
márgenes, bordes, relleno y el contenido real. La siguiente
imagen ilustra el modelo de caja:
 Modelo de caja CSS
• Explicación de las diferentes partes:
• Contenido: el contenido del cuadro, donde aparecen el texto y
las imágenes.
• Relleno: borra un área alrededor del contenido. El acolchado
es transparente
• Borde - Un borde que rodea el relleno y el contenido
• Margen: borra un área fuera de la frontera. El margen es
transparente
 Diseñ o CSS: flotante y claro
• La propiedad float
• La propiedad se utiliza para posicionar y dar formato al
contenido, por ejemplo, dejar que una imagen flote a la
izquierda del texto en un contenedor.float
• La propiedad puede tener uno de los siguientes valores:float
• left - El elemento flota a la izquierda de su contenedor
• right - El elemento flota a la derecha de su contenedor
• none - El elemento no flota (se mostrará justo donde ocurre
en el texto). Esto es predeterminado
• inherit - El elemento hereda el valor float de su padre
• En su uso más simple, la propiedad se puede usar para ajustar
texto alrededor de las imágenes.float
 Diseñ o CSS - clear y clearfix
• La propiedad clara
• Cuando usemos la propiedad, y queramos el siguiente elemento a continuación
(no a la derecha o a la izquierda), tendremos que usar la propiedad.floatclear
• La propiedad especifica lo que debe suceder con el elemento que está junto a
un elemento flotante.clear
• La propiedad puede tener uno de los siguientes valores:clear
• none - El elemento no se empuja por debajo de los elementos flotados a la
izquierda o a la derecha. Esto es predeterminado
• left - El elemento se empuja por debajo de los elementos flotados a la izquierda
• right - El elemento se empuja por debajo de los elementos flotados a la derecha
• both - El elemento se empuja por debajo de los elementos flotados a la
izquierda y a la derecha
• inherit - El elemento hereda el valor claro de su padre
• Al despejar flotadores, debe hacer coincidir el claro con el flotador: si un
elemento flota a la izquierda, entonces debe despejar a la izquierda. El
elemento flotante seguirá flotando, pero el elemento borrado aparecerá debajo
de él en la página web.
 El clearfix Hack
• Si un elemento flotado es más alto que el elemento que lo
contiene, se "desbordará" fuera de su contenedor. Luego
podemos agregar un truco clearfix para resolver este
problema:
Diseñ o CSS - Ejemplos
flotantes
• ¿Qué es el tamaño de la caja?
• Puede crear fácilmente tres cajas flotantes una al lado de la
otra. Sin embargo, cuando agrega algo que amplía el ancho de
cada caja (por ejemplo, relleno o bordes), la caja se romperá.
La propiedad nos permite incluir el acolchado y el borde en el
ancho total (y alto) de la caja, asegurándonos de que el
acolchado permanezca dentro de la caja y que no se
rompa.box-sizing
Ejemplo en có digo
Barras de navegació n
• Tener una navegación fácil de usar es importante para
cualquier sitio web.
• Con CSS puede transformar aburridos menús HTML en
atractivas barras de navegación.
• Una barra de navegación necesita HTML estándar como base.
• En nuestros ejemplos construiremos la barra de navegación a
partir de una lista HTML estándar.
• Una barra de navegación es básicamente una lista de enlaces,
por lo que usar los elementos <ul> y <li>
Barra de navegació n horizontal CSS
• Hay dos formas de crear una barra de navegación horizontal. Uso
de elementos de lista en línea o flotantes.
•
Elementos de lista en línea:
• Una forma de construir una barra de navegación horizontal es
especificar los elementos <li> como en línea, además del código
"estándar" de la página anterior:
• Ejemplo
• li {
  display: inline;
}
• display: inline; - Por defecto, los elementos <li> son elementos de
bloque. Aquí, eliminamos los saltos de línea antes y después de
cada elemento de la lista, para mostrarlos en una línea
 Elementos de lista flotante
• Otra forma de crear una barra de navegación horizontal es
hacer flotar los elementos <li> y especificar un diseño para los
enlaces de navegación:
• li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}
Elementos de lista flotante
• float: left; - Usa float para conseguir que los elementos de
bloque floten uno al lado del otro
• display: block; - Nos permite especificar el relleno (y altura,
anchura, márgenes, etc. si lo desea)
• padding: 8px; - Especifique un poco de relleno entre cada
elemento <a>, para que se vean bien
• background-color: #dddddd; - Agregue un color de fondo gris
a cada elemento <a>