CAPITULO III

CONSTRUYE PAGINAS WEB

HOJAS DE ESTILO EN CASCADA (CSS)

CSS
Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la
presentación de documentos HTML o XML. CSS describe como debe ser renderizado el elemento
estructurado en pantalla.

SINTAXIS DE CSS
Selector
{
Propiedad1: valor;
Propiedad2: valor;
PropiedadN: valor;
}
• Selector: A quién se aplicará el formato
• { }: Contienen los atributos y valores que serán modificados
• Dos puntos: separan a la propiedad del valor asignado
• Punto y coma: Separa a cada propiedad modificada

Todos los selectores simples de CSS

Selector Example Example description

#id #firstname Selects the element with id="firstname"
.class .intro Selects all elements with class="intro"
element.class p.intro Selects only <p> elements with class="intro"
* * Selects all elements
element p Selects all <p> elements
element,element,.. div, p Selects all <div> elements and all <p> elements

INSERTAR CSS
• En línea
• Interna
• Externa

UNIDADES DE MEDIDA
• Absoluta
o Px Pixeles
o Cm Centímetros
• Relativa
Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 1|P á gin a
Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

o % Porcentaje
o Em

Colores CSS

CSS Backgrounds
Las propiedades de fondo de CSS se utilizan para agregar efectos de fondo a los elementos.

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background(propiedad abreviada)

Opacidad / Transparencia

La propiedad opacity especifica la opacidad/transparencia de un elemento. Puede tomar un valor

de 0.0 - 1.0. Cuanto menor sea el valor, más transparente:
div {
background-color: green;
opacity: 0.3;
}

body {
background-image: url("img_tree.png");
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 2|P á gin a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

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):
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed; *background-attachment: scroll;
}

Listas HTML y propiedades de listas CSS

En HTML, hay dos tipos principales de listas:

• listas desordenadas (<ul>) - los elementos de la lista están marcados con viñetas
• listas ordenadas (<ol>) - los elementos de la lista están marcados con números o letras
Las propiedades de la lista CSS le permiten:
• Establecer diferentes marcadores de elementos de lista para listas ordenadas
• Establezca diferentes marcadores de elementos de lista para listas desordenadas
• Establecer una imagen como marcador de elemento de lista
• Agregar colores de fondo a listas y elementos de lista

Marcadores de elementos de lista diferentes

La list-style-type propiedad especifica el tipo de marcador de elemento de lista.
El siguiente ejemplo muestra algunos de los marcadores de elementos de lista disponibles:
Ejemplo
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
Una imagen como marcador de elemento de lista
La list-style-imagepropiedad especifica una imagen como marcador de elemento de lista:
Ejemplo

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 3|P á gin a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

ul {
list-style-image: url('sqpurple.gif');
}

Coloque los marcadores de elementos de la lista

La list-style-positionpropiedad especifica la posición de los marcadores de elementos de lista
(viñetas).
"posición de estilo de lista: fuera;" significa que las viñetas estarán fuera del elemento de la lista.
El inicio de cada línea de un elemento de la lista se alineará verticalmente. Esto es
predeterminado:

"posición-estilo-lista: dentro;" significa que las viñetas estarán dentro del elemento de la lista.
Como es parte del elemento de la lista, será parte del texto y empujará el texto al principio:

Ejemplo
ul.a {
list-style-position: outside;
}

ul.b {
list-style-position: inside;
}

Eliminar configuración predeterminada

La list-style-type:nonepropiedad también se puede utilizar para eliminar los marcadores/viñetas.
Tenga en cuenta que la lista también tiene margen y relleno predeterminados. Para eliminar esto,
agregue margin:0y padding:0a <ul> o <ol>:
Ejemplo
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 4|P á gin a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

Lista - Propiedad abreviada

La list-stylepropiedad es una propiedad abreviada. Se utiliza para establecer todas las propiedades
de la lista en una declaración:
Ejemplo
ul {
list-style: square inside url("sqpurple.gif");
}
Cuando se usa la propiedad abreviada, el orden de los valores de propiedad es:
• list-style-type(si se especifica una imagen de estilo de lista, el valor de esta propiedad se
mostrará si la imagen por algún motivo no se puede mostrar)
• list-style-position(especifica si los marcadores de elementos de lista deben aparecer
dentro o fuera del flujo de contenido)
• list-style-image(especifica una imagen como marcador de elemento de lista)
Si falta uno de los valores de propiedad anteriores, se insertará el valor predeterminado para la
propiedad faltante, si corresponde.

Lista de estilos con colores

También podemos diseñar listas con colores, para que se vean un poco más interesantes.
Todo lo que se agregue a la etiqueta <ol> o <ul> afecta a toda la lista, mientras que las
propiedades agregadas a la etiqueta <li> afectarán a los elementos individuales de la lista:
Ejemplo
ol {
background: #ff9999;
padding: 20px;
}

ul {
background: #3399ff;
padding: 20px;
}

ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}

ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;

Tablas CSS
Bordes de la tabla

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 5|P á gin a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

Para especificar los bordes de la tabla en CSS, use la borderpropiedad.

El siguiente ejemplo especifica un borde sólido para los elementos <table>, <th> y <td>:

Mesa de ancho completo

La tabla anterior puede parecer pequeña en algunos casos. Si necesita una tabla que abarque toda
la pantalla (ancho completo), agréguela width: 100%al elemento <table>:

Contraer bordes de tabla

La border-collapsepropiedad establece si los bordes de la tabla deben contraerse en un solo
borde:
Ancho y alto de la tabla
El ancho y el alto de una tabla están definidos por las propiedades widthy height.

Alineación horizontal
La text-alignpropiedad establece la alineación horizontal (como izquierda, derecha o centro) del
contenido en <th> o <td>.
De forma predeterminada, el contenido de los elementos <th> está alineado al centro y el
contenido de los elementos <td> está alineado a la izquierda.
Para alinear al centro el contenido de los elementos <td> también, use text-align: center:
Para alinear el contenido a la izquierda, fuerce la alineación de los elementos <th> para que se
alineen a la izquierda, con la text-align: leftpropiedad:

Alineamiento vertical (top, bottom, midle)

La vertical-align propiedad establece la alineación vertical (como superior, inferior o central) del
contenido en <th> o <td>.
De forma predeterminada, la alineación vertical del contenido de una tabla es media (para los
elementos <th> y <td>).
El siguiente ejemplo establece la alineación vertical del texto hacia abajo para los elementos <td>:

Bordes CSS
Las propiedades de borde de CSS le permiten especificar el estilo, el ancho y el color del borde de
un elemento.

La border-style propiedad especifica qué tipo de borde mostrar.

Se permiten los siguientes valores:
• dotted- Define un borde punteado
• dashed- Define un borde discontinuo
• solid- Define un borde sólido
• double- Define un borde doble
• groove- Define un borde ranurado 3D. El efecto depende del valor del color del borde.
• ridge- Define un borde estriado 3D. El efecto depende del valor del color del borde.
• inset- Define un borde de inserción 3D. El efecto depende del valor del color del borde.
• outset- Define un borde inicial 3D. El efecto depende del valor del color del borde.
• none- No define ningún borde
• hidden- Define un borde oculto
La border-stylepropiedad puede tener de uno a cuatro valores (para el borde superior, el borde
derecho, el borde inferior y el borde izquierdo).

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 6|P á gin a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

border-width propiedad especifica el ancho de los cuatro bordes.

border-color property is used to set the color of the four borders.
border-radius propiedad se usa para agregar bordes redondeados a un elemento.
p{
border-style: solid;
border-width: 25px 10px 4px 35px;
border-color: #ff0000;
}
En CSS, también hay propiedades para especificar cada uno de los bordes (superior, derecho,
inferior e izquierdo):
P {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
p.four {
border-style: dotted solid double dashed;
}
p{
border-bottom: 6px solid red;
}

Contorno CSS

Un contorno es una línea dibujada fuera del borde del elemento.

Un contorno es una línea que se dibuja alrededor de los elementos, FUERA de los bordes, para que
el elemento "resalte".

CSS tiene las siguientes propiedades de esquema:

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

Nota: ¡El contorno difiere de los bordes! A diferencia del borde, el contorno se dibuja fuera del
borde del elemento y puede superponerse a otro contenido. Además, el contorno NO forma parte
de las dimensiones del elemento; el ancho y la altura totales del elemento no se ven afectados por
el ancho del contorno.

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 7|P á gin a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

Márgenes CSS
Las propiedades CSS margin se utilizan para crear espacio alrededor de los elementos, fuera de los
bordes definidos.

Con CSS, tienes control total sobre los márgenes. Hay propiedades para establecer el margen de
cada lado de un elemento (superior, derecho, inferior e izquierdo).

Margen - Lados individuales

CSS tiene propiedades para especificar el margen de cada lado de un elemento:

• margin-top
• margin-right
• margin-bottom
• margin-left
• inherit herede del elemento principal
p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
p{
margin: 25px 50px 75px 100px;
}
Relleno o Padding CSS
Las propiedades CSS padding se utilizan para generar espacio alrededor del contenido de un
elemento, dentro de los bordes definidos.

Con CSS, tienes control total sobre el relleno. Hay propiedades para establecer el relleno para cada
lado de un elemento (superior, derecho, inferior e izquierdo).

Acolchado - Lados individuales

CSS tiene propiedades para especificar el relleno para cada lado de un elemento:

• padding-top
• padding-right
• padding-bottom

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 8|P á gin a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

• 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 % del ancho del elemento contenedor

inherit: especifica que el relleno se debe heredar del elemento principal

Nota: No se permiten valores negativos.

CSS Configuración de alto y ancho

Las propiedades width y height se utilizan para establecer la altura y el ancho de un elemento.

Las propiedades de alto y ancho no incluyen relleno, bordes ni márgenes. Establece el alto/ancho
del área dentro del relleno, el borde y el margen del elemento.

Valores de alto y ancho de CSS

Las propiedades width y height pueden tener los siguientes valores:

• auto- Esto es predeterminado. El navegador calcula la altura y la anchura.

• length- Define el alto/ancho en px, cm, etc.
• %- Define el alto/ancho en porcentaje del bloque contenedor
• initial- Establece el alto/ancho a su valor predeterminado
• inherit- El alto/ancho se heredará de su valor principal

El modelo de caja CSS

En CSS, el término "modelo de caja" se usa cuando se habla de diseño y diseño.

El modelo de caja CSS es esencialmente una caja que envuelve cada elemento HTML. Consiste en:
márgenes, bordes, relleno y el contenido real. La siguiente imagen ilustra el modelo de caja:

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 9|P á gin a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (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 relleno es transparente.
• Borde : un borde que rodea el relleno y el contenido.
• Margen : borra un área fuera del borde. El margen es transparente.
El modelo de caja nos permite agregar un borde alrededor de los elementos y definir el espacio
entre los elementos.

TEXTO
Color de texto

La propiedad color se utiliza para establecer el color del texto. El color se especifica por:

• un nombre de color - como "rojo"

• un valor HEX - como "#ff0000"
• un valor RGB - como "rgb(255,0,0)"

Alineación del texto

La text-align propiedad se utiliza para establecer la alineación horizontal de un texto.

Un texto puede estar alineado a la izquierda o a la derecha, centrado o justificado.

El siguiente ejemplo muestra texto alineado al centro y alineado a la izquierda y a la derecha (la
alineación a la izquierda es la predeterminada si la dirección del texto es de izquierda a derecha, y
la alineación a la derecha es la predeterminada si la dirección del texto es de derecha a izquierda):

Ejemplo
h1 {
text-align: center;
}

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 10 | P á g i n a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

h2 {
text-align: left;
}

h3 {
text-align: right;
}
Cuando la text-alignpropiedad se establece en "justificar", cada línea se estira para que cada línea
tenga el mismo ancho, y los márgenes izquierdo y derecho son rectos (como en revistas y
periódicos):

Ejemplo
div {
text-align: justify;
}

Alineamiento vertical

La vertical-alignpropiedad establece la alineación vertical de un elemento.

Ejemplo

Establecer la alineación vertical de una imagen en un texto:

img.a {
vertical-align: baseline;
}

img.b {
vertical-align: text-top;
}

img.c {
vertical-align: text-bottom;
}

img.d {
vertical-align: sub;
}

img.e {
vertical-align: super;
}

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 11 | P á g i n a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

Decoración de texto CSS

Se refiere al subrayado inferior, medio y superior:

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-decoration

Todos los enlaces en HTML están subrayados por defecto. A veces ves que los enlaces tienen un
estilo sin subrayar. text-decoration: none;se utiliza para eliminar el subrayado de los enlaces, como
este :

Ejemplo
a{
text-decoration: none;
}

Sangría de texto

La text-indent propiedad se utiliza para especificar la sangría de la primera línea de un texto:

Ejemplo

p{
text-indent: 50px;
}

Espaciado de letras

La letter-spacing propiedad se utiliza para especificar el espacio entre los caracteres de un texto.

El siguiente ejemplo demuestra cómo aumentar o disminuir el espacio entre caracteres:

Ejemplo

h1 {
letter-spacing: 5px;
}

h2 {
letter-spacing: -2px;
}

Altura de la línea

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 12 | P á g i n a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

La line-height propiedad se utiliza para especificar el espacio entre líneas:

Ejemplo

p.small {
line-height: 0.8;
}

p.big {
line-height: 1.8;
}

Espaciado entre palabras

La word-spacing propiedad se utiliza para especificar el espacio entre las palabras en un texto.

El siguiente ejemplo demuestra cómo aumentar o disminuir el espacio entre palabras:

Ejemplo

p.one {
word-spacing: 10px;
}

p.two {
word-spacing: -2px;
}

espacio en blanco

La white-space propiedad especifica cómo se maneja el espacio en blanco dentro de un elemento.

Este ejemplo demuestra cómo deshabilitar el ajuste de texto dentro de un elemento:

Ejemplo

p{
white-space: nowrap;
}

Estilo de fuente

La font-stylepropiedad se utiliza principalmente para especificar texto en cursiva.

Esta propiedad tiene tres valores:

• normal - El texto se muestra normalmente

• cursiva - El texto se muestra en cursiva

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 13 | P á g i n a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

• oblicua: el texto está "inclinado" (la oblicua es muy similar a la cursiva, pero menos
compatible)

• negrita – grosor del texto

Ejemplo
p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}
p.italic {
font-weight: bold;
}

Variante de fuente

La font-variant propiedad especifica si un texto debe mostrarse o no en letra minúscula.

En una fuente de versalitas, todas las letras minúsculas se convierten en letras mayúsculas. Sin
embargo, las letras mayúsculas convertidas aparecen en un tamaño de fuente más pequeño que
las letras mayúsculas originales en el texto.

Ejemplo
p.normal {
font-variant: normal;
}

p.small {
font-variant: small-caps;
}
Establecer tamaño de fuente con píxeles,em y vw

Ajustar el tamaño del texto con píxeles le da un control total sobre el tamaño del texto:

Ejemplo

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 14 | P á g i n a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

h1 {
font-size: 40px;
}

h2 {
font-size: 2em;
}

p{
font-size:10vw;

Fuentes CSS

Algunos ejemplos de fuentes

Generic Font Family Examples of Font Names

Times New Roman
Serif Georgia
Garamond
Arial
Sans-serif Verdana
Helvetica
Courier New
Monospace Lucida Console
Monaco
Brush Script MT
Cursive
Lucida Handwriting
Copperplate
Fantasy
Papyrus

¿Qué son las fuentes seguras para la web?

Las fuentes web seguras son fuentes que se instalan universalmente en todos los navegadores y
dispositivos.

Las mejores fuentes web seguras para HTML y CSS

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 15 | P á g i n a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

La siguiente lista son las mejores fuentes web seguras para HTML y CSS:

• Arial (sans-serif)
• Verdana (sans-serif)
• Helvética (sans-serif)
• Tahoma (sans serif)
• Trebuchet MS (sans serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monoespaciado)
• Brush Script MT (cursiva)

Fuentes de Google
Si no desea utilizar ninguna de las fuentes estándar en HTML, puede utilizar Google Fonts.

Google Fonts es de uso gratuito y tiene más de 1000 fuentes para elegir.

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>

<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 16 | P á g i n a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

Estilo de enlaces
Los enlaces se pueden diseñar con cualquier propiedad CSS (por ejemplo color, font-family,
background, etc.).

Además, los enlaces pueden tener un estilo diferente según el estado en el que se encuentren.

Los cuatro estados de enlace son:

• a:link- un enlace normal, no visitado

• a:visited- un enlace que el usuario ha visitado

• a:hover- un enlace cuando el usuario pasa el mouse sobre él

• a:active- un enlace en el momento en que se hace clic

Al establecer el estilo para varios estados de enlace, existen algunas reglas de orden:

• a:hover DEBE venir después de a:link y a:visited

• a:active DEBE venir después de a:hover

Decoración de texto

La text-decorationpropiedad se usa principalmente para eliminar los subrayados de los

enlaces

Color de fondo

La background-colorpropiedad se puede utilizar para especificar un color de fondo para los enlaces

Botones de enlace

Este ejemplo muestra un ejemplo más avanzado en el que combinamos varias propiedades de CSS
para mostrar enlaces como cuadros/botones:

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 17 | P á g i n a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

a:hover, a:active {
background-color: green;
color: white;
}
</style>
</head>
<body>

<h2>Link Button</h2>

<a href="default.asp" target="_blank">This is a link</a>

</body>
</html>

DISPLAY (propiedad de visualización)

La propiedad display especifica si/cómo se muestra un elemento.

Cada elemento HTML tiene un valor de visualización predeterminado según el tipo de elemento
que sea. El valor de visualización predeterminado para la mayoría de los elementos es block o
inline.

Elementos a nivel de bloque

Un elemento a nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho
disponible (se extiende hacia la izquierda y hacia la derecha tanto como sea posible).

Ejemplos de elementos a nivel de bloque:

• <div>
• <h1> - <h6>
• <p>
• <formulario>
• <encabezado>
• <pie de página>
• <sección>

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 18 | P á g i n a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

Elementos en línea

Un elemento en línea no comienza en una nueva línea y solo ocupa el ancho necesario.

Este es un elemento <span> en línea dentro de un párrafo.

Ejemplos de elementos en línea:

• <span>
• <a>
• <img>

display: none

Se usa comúnmente con JavaScript para ocultar y mostrar elementos sin eliminarlos y
volver a crearlos.

Anular el valor de visualización predeterminado

Como se mencionó, cada elemento tiene un valor de visualización predeterminado. Sin

embargo, puede anular esto.

Cambiar un elemento en línea a un elemento de bloque, o viceversa, puede ser útil para
hacer que la página se vea de una manera específica y seguir los estándares web.

Un ejemplo común es crear <li>elementos en línea para menús horizontales:

<script>elemento utiliza display: none; por defecto.

li {
display: inline;
}

span {
display: block;
}
Para ocultar:

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 19 | P á g i n a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

h1.hidden {
display: none;
}

Desbordamiento
La propiedad CSS overflow controla lo que sucede con el contenido que es demasiado grande para
caber en un área.

Desbordamiento de CSS

La overflow propiedad especifica si recortar el contenido o agregar barras de desplazamiento

cuando el contenido de un elemento es demasiado grande para caber en el área especificada.

La overflow propiedad tiene los siguientes valores:

• visible- Por defecto. El desbordamiento no se recorta. El contenido se muestra fuera de la

caja del elemento.

• hidden- El desbordamiento se recorta y el resto del contenido será invisible

• scroll- El desbordamiento se recorta y se agrega una barra de desplazamiento para ver el

resto del contenido

• auto- Similar a scroll, pero agrega barras de desplazamiento solo cuando es necesario

Diseño CSS : float y clear

La propiedad CSS float especifica cómo debe flotar un elemento.

La propiedad CSS clear especifica qué elementos pueden flotar junto al elemento borrado y de qué
lado.

La propiedad flotante

La float 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.

La float propiedad puede tener uno de los siguientes valores:

• left- El elemento flota a la izquierda de su contenedor

• right- El elemento flota a la derecha de su contenedor

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 20 | P á g i n a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

• none- El elemento no flota (se mostrará justo donde aparece en el texto). esto es por
defecto

• inherit- El elemento hereda el valor flotante de su padre

En su uso más simple, la floatpropiedad se puede usar para envolver texto alrededor de imágenes.

La propiedad Clear

Cuando usamos la float propiedad, y queremos el siguiente elemento debajo (no a la derecha ni a
la izquierda), tendremos que usar la clear propiedad.

La clearpropiedad especifica lo que debería suceder con el elemento que está al lado de un
elemento flotante.

La clearpropiedad puede tener uno de los siguientes valores:

• none- El elemento no se empuja debajo de los elementos flotantes izquierdo o derecho.

esto es por defecto

• left- El elemento se empuja debajo de los elementos flotantes izquierdos

• right- El elemento se empuja debajo de los elementos flotantes a la derecha

• both- El elemento se empuja debajo de los elementos flotantes izquierdo y derecho

• inherit- El elemento hereda el valor claro de su padre

<!DOCTYPE html>
<html>
<head>
<style>
*{
box-sizing: border-box;
}

.box {
float: left;
width: 33.33%;
padding: 50px;
}

.clearfix::after {
content: "";
clear: both;
display: table;
}

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 21 | P á g i n a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

</style>
</head>
<body>

<h2>Grid of Boxes</h2>
<p>Float boxes side by side:</p>

<div class="clearfix">
<div class="box" style="background-color:#bbb">
<p>Some text inside the box.</p>
</div>
<div class="box" style="background-color:#ccc">
<p>Some text inside the box.</p>
</div>
<div class="box" style="background-color:#ddd">
<p>Some text inside the box.</p>
</div>
</div>

<p><strong>Note:</strong> Here, we use the clearfix hack to take care of the

layout flow.
We also use the box-sizing property to make sure that the box doesn't break due
to extra padding. Try to remove this code to see the effect.</p>

</body>
</html>

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 22 | P á g i n a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

Display: valor de bloque en línea

En comparación con display: inline, la principal diferencia es que display: inline-blockpermite

establecer un ancho y alto en el elemento.

Además, con display: inline-block, se respetan los márgenes/rellenos superior e inferior, pero con
display: inlineno.

En comparación con display: block, la principal diferencia es que display: inline-blockno agrega un
salto de línea después del elemento, por lo que el elemento puede ubicarse junto a otros
elementos.

El siguiente ejemplo muestra el diferente comportamiento de display: inline, display: inline-block y

display: block:

<!DOCTYPE html>
<html>
<head>
<style>
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}

.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
</style>
</head>
<body>

<h1>Horizontal Navigation Links</h1>

<p>By default, list items are displayed vertically. In this example we use display: inline-
block to display them horizontally (side by side).</p>
<p>Note: If you resize the browser window, the links will automatically break when it
becomes too crowded.</p>

<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#clients">Our Clients</a></li>

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 23 | P á g i n a

Nombre Completo
 CAPITULO III
CONSTRUYE PAGINAS WEB
HOJAS DE ESTILO EN CASCADA (CSS)

<li><a href="#contact">Contact Us</a></li>

</ul>

</body>
</html>

Centro de Bachillerato Tecnológico Industrial y de Servicios No. 82 24 | P á g i n a

Nombre Completo