Scribd
Cargar
39 vistas18 páginas

01introducción A CSS. V1

Cargado por

javiperezperez265
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
39 vistas18 páginas

01introducción A CSS. V1

Cargado por

javiperezperez265
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 18

ÍNDICE

¿Qué es CSS?..............................................................................................................................................2
Incluir CSS...............................................................................................................................................2
Colores......................................................................................................................................................... 6
Unidades de medida................................................................................................................................... 7
Texto............................................................................................................................................................. 9
Enlaces.......................................................................................................................................................12
Listas.......................................................................................................................................................... 14
Tablas......................................................................................................................................................... 15
Webgrafía................................................................................................................................................... 17

1
¿Qué es CSS?
CSS, o Cascading Style Sheets, es un lenguaje de hojas de estilos diseñado para controlar la
presentación de documentos electrónicos creados con HTML y XHTML. Constituye una herramienta
esencial para la creación de páginas web complejas, ya que permite separar los contenidos de su
presentación. Esta separación trae numerosas ventajas, como la creación de documentos HTML/XHTML
bien definidos y semánticos, mejorando la accesibilidad, simplificando el mantenimiento y permitiendo
que el mismo documento se visualice adecuadamente en una amplia gama de dispositivos. En el
desarrollo de una página web, se utiliza HTML/XHTML para marcar los contenidos y asignar funciones a
cada elemento, como párrafos, titulares o listas. Luego, CSS se emplea para definir el aspecto visual de
estos elementos, incluyendo aspectos como color, tamaño de letra, espaciado y posicionamiento.
CSS fue diseñado para resolver estos problemas permitiendo a los diseñadores y desarrolladores web
separar el contenido (HTML) de la presentación visual (CSS). Esto no solo simplificó la creación y
mantenimiento de sitios web, sino que también mejoró la accesibilidad y permitió una mayor flexibilidad
en la presentación de contenido en diferentes dispositivos y navegadores. La adopción de CSS como
estándar por parte del W3C (World Wide Web Consortium) ayudó a establecer un conjunto común de
prácticas en el diseño web, llevando a una web más uniforme y accesible.

Incluir CSS
En línea
Una de las formas de incluir el CSS es ponerlo en línea, es decir, agregarlo dentro de la etiqueta
HTML. Un ejemplo de esto lo podremos ver a continuación:

2
Usando etiqueta style
CSS ofrece una solución más eficiente y organizada para el diseño web en comparación con el
uso directo de estilos en HTML. Veamos cómo se implementa esto en el ejemplo proporcionado:
Código

Salida

En este ejemplo, CSS se utiliza para separar la información de estilo del contenido HTML. Los estilos
para los elementos “h1” y “p” se definen dentro de una sección “<style>” en el “<head>” del documento.
Esto resulta en un HTML más limpio y semántico, ya que elimina la necesidad de estilos inline y etiquetas
obsoletas como <font>.
La regla CSS para “h1” aplica un color rojo, fuente Arial y un tamaño grande a todos los encabezados
“h1” de la página. Similarmente, la regla para p establece que todos los párrafos tendrán color gris, fuente
Verdana y tamaño mediano. Esto no sólo ahorra la repetición de código, sino que también facilita
cambios globales: modificando una sola regla CSS, se puede cambiar el estilo de todos los elementos
correspondientes en la página.
Sin embargo, este método tiene una limitación: los estilos definidos en una página no se aplican
automáticamente a otras páginas del sitio web. Si queremos que todas las páginas del sitio compartan el
mismo estilo, necesitaríamos copiar estas reglas CSS en cada página, lo cual no es práctico para sitios
grandes. La solución a este problema es utilizar hojas de estilo externas, donde se definen los estilos en
un archivo separado y se enlazan a todas las páginas HTML del sitio. Esto permite aplicar estilos
consistentes en todo el sitio web con un solo archivo CSS, facilitando enormemente la gestión y
mantenimiento de los estilos.

3
Usando fichero externo
Definir CSS en un archivo externo es un método muy eficiente y organizado para aplicar estilos en
páginas web, especialmente útil en proyectos más grandes. Un archivo CSS externo es simplemente un
archivo de texto que contiene todas las reglas de estilo CSS que quieres aplicar a tus páginas web. A
continuación, veremos algunas ventajas de utilizar este método:
● Consistencia: aplicas el mismo estilo a múltiples páginas web, lo que asegura una apariencia
uniforme en todo el sitio.
● Mantenimiento: actualizar o cambiar los estilos es más fácil, ya que solo necesitas modificar un
archivo en lugar de editar cada página HTML individualmente.
● Rendimiento: al separar el contenido (HTML) del diseño (CSS), las páginas web pueden cargar
más rápido.
A continuación, veremos cómo podremos crear y vincular un archivo css externo:
1. Creación del Archivo CSS:
a. Crea una carpeta denominada “css”.
b. Crea un archivo con extensión “.css”.
c. Introduce las reglas que quieres aplicar a tu página web.
2. En tu documento HTML, vincula el archivo CSS en la sección <head> usando la etiqueta <link>.
Esta etiqueta debe incluir:
a. rel="stylesheet": Indica que el archivo vinculado es una hoja de estilo.
b. type="text/css": Especifica el tipo de archivo (en este caso, CSS).
c. href: La ruta al archivo CSS. Puede ser una ruta relativa o absoluta.

Finalmente, tu código deberá de quedar de esta manera:

Estructura de Ficheros

Código

4
AC1.1
Vas a crear una página web que contenga los siguientes elementos HTML. h1, h3 y tres p. En los tres
párrafos añadiremos un Lorem Ipsum de 30. A continuación le añadiremos estilos siguiendos los estos
pasos:
● Paso 1. Crearemos los estilos en un fichero a parte y lo incluiremos en el HTML. Pondremos
todos los elementos de color azul. ¿Te funciona?, pues pasa al siguiente paso.
● Paso 2. Sin eliminar el paso anterior, crearemos los estilos en la cabecera del HTML, usando el
elemento style y pondremos todos los elementos de color verde. ¿Qué ha pasado? ¿Qué
explicación puede tener?
● Paso 3. Sin eliminar el paso anterior, crearemos los estilos en la misma etiqueta usando el
atributo style y pondremos los elementos de color rojo. ¿Qué ha pasado? ¿Qué explicación
puede tener?

Comentarios en CSS
Los comentarios en CSS son herramientas muy útiles para los diseñadores y desarrolladores, ya
que permiten añadir explicaciones o notas dentro del código de hojas de estilo sin afectar la funcionalidad
del mismo. Estos son ignorados por los navegadores, lo que los hace ideales para estructurar y aclarar
archivos CSS, especialmente aquellos que son complejos o extensos. A continuación veremos unos
ejemplos sobre el uso y funcionamiento de estos.
Ejemplo de un Comentario Simple:

Ejemplo de un Comentario de Varias Líneas:

5
Colores
En CSS, los colores pueden definirse de varias maneras, cada una con sus características y usos
específicos. Comenzando con las “palabras clave”, CSS define 17 colores básicos que pueden ser
referenciados directamente con nombres en inglés como "red", "blue", "green", entre otros. A pesar de
ser un método sumamente sencillo, su uso en el diseño web profesional es bastante limitado debido a la
restricción en la variedad de colores que ofrece.
Por otro lado, el modelo RGB (Red, Green, Blue) es un enfoque más versátil. Este es un modelo de
color aditivo donde los colores se crean combinando luz roja, verde y azul en diferentes intensidades. En
su forma decimal, los colores RGB se especifican en CSS utilizando la sintaxis rgb(rojo, verde, azul),
donde cada valor puede oscilar entre 0 y 255, permitiendo más de 16 millones de combinaciones de
colores. Un ejemplo sería rgb(71, 98, 176), que representa un tono de azul claro. Alternativamente, el
RGB también puede expresarse en porcentajes. En lugar de usar valores numéricos del 0 al 255, cada
componente se representa como un porcentaje del 0% al 100%, como en rgb(27%, 38%, 69%).
El método más comúnmente utilizado en la web para definir colores es el RGB hexadecimal. En este
sistema, cada componente del color se representa por dos dígitos hexadecimales que varían de 00 a FF.
Este método es muy preciso y es ampliamente utilizado debido a su capacidad para representar una
amplia gama de colores con gran exactitud. Por ejemplo, #4762B0 es la representación hexadecimal del
mismo azul claro mencionado anteriormente.
Los colores del sistema, aunque están disponibles en CSS, son raramente utilizados en el diseño web
actual. Hacen referencia a colores utilizados en la interfaz de usuario del sistema operativo y pueden
variar según la configuración del usuario, lo que puede llevar a inconsistencias en el diseño.
Finalmente, el concepto de “colores web safe” se remonta a la época en que los monitores sólo podían
mostrar 256 colores. Se seleccionó una paleta de 216 colores que se mostrarían de manera consistente
en diferentes dispositivos. Aunque su importancia ha disminuido con los avances tecnológicos en
pantallas y dispositivos, todavía pueden ser útiles para considerar en dispositivos con capacidades de
color limitadas.

Más información:
https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Values_and_units#color

6
Unidades de medida
En CSS, la elección entre unidades de medida absolutas y relativas es crucial para el diseño web,
ya que impacta en cómo se presentan los elementos en diferentes dispositivos y pantallas. La diferencia
principal entre ambas radica en su consistencia y adaptabilidad.
Por un lado, las “Unidades Absolutas” son fijas y no cambian independientemente del entorno en el
que se visualice el contenido. Son útiles para imprimir y cuando se necesitan medidas precisas que no
cambien. Algunas de sus implementaciones son las siguientes:
● Pulgadas (in): si específicas margin: 1in el margen siempre será de una pulgada
independientemente del dispositivo.
● Centímetros (cm) y Milímetros (mm): similar a las pulgadas, son unidades precisas para la
impresión. Por ejemplo, width: 2cm; asignará un ancho constante de 2 centímetros.
● Puntos (pt) y Picas (pc): Tradicionales en la impresión. Por ejemplo, font-size: 12pt; establece un
tamaño de fuente fijo que es común en documentos impresos.
Por otro lado, las “Unidades Relativas”, se ajustan según el entorno, como el tamaño de la fuente del
elemento padre o la resolución de la pantalla. Son preferibles para diseños responsivos (adaptados a
diferentes dispositivos como Tablets, móviles o pantallas de ordenador) y accesibles. Algunas de sus
implementaciones son las siguientes:
● Em: relativa al tamaño de fuente del elemento padre. Por ejemplo, si body { font-size: 16px; } y
dentro de él div { font-size: 1.25em; }, el div tendrá un tamaño de fuente de 20px (16 * 1.25).
● Ex: basada en la altura de la letra 'x' del tipo de letra actual. Si en el mismo body estableces div {
font-size: 2ex; }, el tamaño de fuente del div dependerá de la altura de la 'x' en la fuente del body.
● Rem: El tamaño se establece en base al tamaño de la letra del elemento raíz o sea <html>
● Píxel (px): aunque parezca absoluta, se adapta a la densidad de píxeles de la pantalla. Por
ejemplo, width: 100px; puede verse diferente en pantallas con diferentes resoluciones.
● Los porcentajes: es una unidad relativa a alguna medida del elemento padre. Por ejemplo, si un
div padre tiene width: 500px; y su hijo tiene width: 50%;, el hijo será 250px de ancho, que es la
mitad del padre.
● vw y vh: se utilizan para especificar tamaños de elementos en función del tamaño de la ventana
gráfica del navegador (viewport)
○ vh, significa "viewport height" (altura del viewport). 1 vh representa el 1% de la altura del
viewport. Por lo tanto, 50vh sería la mitad de la altura del viewport y 100vh sería igual a la
altura completa del viewport, independientemente de las dimensiones del dispositivo o del
tamaño de la ventana del navegador.
○ vw, significa "viewport width" (ancho del viewport) y tiene el mismo comportamiento que vh.
En el diseño web, es generalmente recomendable optar por unidades relativas como em y porcentajes,
lo cual es respaldado por las directrices del W3C, que sugieren el uso de em para el tamaño del texto y
otras medidas para mejorar la accesibilidad y la adaptabilidad del contenido en distintos dispositivos y
tamaños de pantalla.

7
IMPORTANTE: Mientras que las unidades relativas como em y rem son ideales para el tamaño de
texto, permitiendo ajustes basados en las preferencias del usuario y la escalabilidad del diseño, los
píxeles y porcentajes son más adecuados para definir el layout del documento, como la anchura de
las columnas y elementos, combinando precisión y flexibilidad. Este enfoque equilibrado en el uso de
unidades en CSS facilita la creación de diseños web fluidos (usando %), que luego son más fácil
hacerlos responsive y adaptarlos a una gran variedad de dispositivos y preferencias de visualización.

Em vs Rem
Son las dos longitudes relativas que es probable que encuentres con mayor frecuencia al cambiar el
tamaño de cualquier cosa, de cajas a texto.
La unidad em significa «el tamaño de letra de mi elemento padre» y la unidad rem significa «el tamaño
de letra del elemento raíz».
Veamos su diferencia con un ejemplo en codepen: https://codepen.io/CarlosGarcia/pen/YEXWEY

Más información en: https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Values_and_units

8
Texto
En CSS, las propiedades relacionadas con la tipografía son esenciales para definir la apariencia y el
estilo del texto en las páginas web. Aunque CSS no ofrece tantas opciones como los programas de
diseño gráfico específicos para la creación de documentos impresos, brinda una amplia gama de
posibilidades para aplicar estilos complejos y variados al texto.
La propiedad color es fundamental en CSS para determinar el color del texto.
Todos los elementos pueden heredar esta propiedad y su valor inicial
depende del navegador, aunque comúnmente es negro. Puedes usar
cualquiera de las formas de definir colores en CSS, como palabras clave,
valores RGB, o notación hexadecimal, para establecer el color del texto en
diferentes elementos. Por ejemplo:

La propiedad “font-family” permite especificar el tipo de letra. Puedes indicar el nombre de una familia
tipográfica específica o un nombre genérico como
serif, sans-serif, cursive, fantasy, o monospace.
Dado que no todos los usuarios tendrán las mismas
fuentes instaladas, es común proporcionar una lista
de fuentes alternativas. Por ejemplo:

El tamaño del texto se controla con font-size, que


puede tomar valores absolutos como palabras
clave (xx-small, x-small, small, etc.), medidas
(como px, em), o porcentajes. Por ejemplo:

Además de las explicadas, en CSS, el texto se realiza a través de muchas más propiedades específicas,
cada una destinada a controlar un aspecto diferente del texto para mejorar su presentación y legibilidad.
A continuación, veremos una breve explicación de algunas de las más usadas:
● font-weight: esta propiedad controla el grosor de la fuente. Los valores comunes incluyen normal
(equivalente a 400) para un grosor estándar y bold (equivalente a 700) para un texto en negrita.
También se pueden utilizar valores numéricos para un ajuste más fino.
● font-style: se usa para aplicar estilos como la cursiva. Los valores típicos son normal, italic y
oblique.
● font-variant: aunque se usa con menos frecuencia, esta propiedad permite aplicar estilos como
small-caps, que transforma el texto a mayúsculas pequeñas, manteniendo las iniciales de cada
palabra ligeramente más grandes que el resto.
● text-align: controla la alineación horizontal del texto. Los valores incluyen left, right, center y
justify.
● line-height: Determina el interlineado del texto. Puede ser un número, porcentaje o longitud
específica.

9
● text-indent: indenta la primera línea de un bloque de texto.
● letter-spacing y word-spacing: estas propiedades ajustan respectivamente el espacio entre
letras y palabras.
● text-decoration: ofrece decoraciones como underline (subrayado), overline (línea superior),
line-through (tachado) y none (sin decoración).
● text-transform: permite transformar el texto, por ejemplo, a uppercase para mayúsculas,
lowercase para minúsculas y capitalize para capitalizar la primera letra de cada palabra.
● white-space: controla cómo se manejan los espacios en blanco y los saltos de línea en un texto,
con opciones como normal, nowrap, pre, pre-wrap y pre-line.
● text-wrap: se refieren a cómo el texto debería fluir o ajustarse dentro de un contenedor..
○ “text-wrap: balance”: el texto se ajusta de la manera que mejor equilibra el número de caracteres
en cada línea, lo que mejora la calidad y la legibilidad del diseño.
○ “text-wrap: pretty”: da como resultado el mismo comportamiento que , excepto que el agente de
usuario usará un algoritmo más lento que favorece un mejor diseño sobre la velocidad.
● vertical-align: ajusta la alineación vertical de elementos en línea, como imágenes o texto en
línea, con valores como baseline, top, middle, bottom.

10
● first-line y first-letter: estos pseudo-elementos permiten aplicar estilos específicos a la primera
línea o la primera letra de un bloque de texto, respectivamente. Son útiles para crear efectos
como letras capitales o cambios en el estilo de la primera línea de un párrafo.

Ver el ejemplo en: https://codepen.io/CarlosGarcia/pen/dyrdGwL

AC 1.2 - Formateando texto


Realiza el ejercicio que se muestra en la imagen.

11
Enlaces
CSS ofrece una amplia gama de posibilidades para estilizar enlaces, desde aspectos básicos como el
tamaño, color y decoración del texto, hasta estilos más avanzados que involucran pseudo-clases y
efectos visuales personalizados. A continuación,. veremos un ejemplo de ellos:
● Estilos Básicos: las propiedades básicas para estilizar enlaces incluyen text-decoration para la
decoración del texto (como subrayados) y font-weight para el grosor del texto. Ejemplos comunes
son:

● Pseudo-Clases para Enlaces: CSS define estas pseudo-clases para aplicar estilos específicos a
los enlaces según su estado. Por ejemplo, puedes cambiar el estilo de un enlace cuando el
usuario pasa el ratón por encima (:hover) o cuando está activo (:active).

12
● Estilos Avanzados:
○ Decoración Personalizada con border-bottom: para personalizar el subrayado de un
enlace más allá de lo que permite text-decoration, puedes usar border-bottom. Esto te
permite controlar el color, grosor y estilo del subrayado. Por ejemplo:

○ Imágenes según el Tipo de Enlace: utiliza background o background-image para añadir


íconos o imágenes a los enlaces, dependiendo de su tipo (como archivos PDF o RSS).
Ejemplo:

○ Mostrar enlaces como Botones: puedes dar a los enlaces la apariencia de botones
utilizando propiedades como background, color, border y padding. Por ejemplo:

AC 1.3 - Retocando enlaces


Definir las reglas CSS que permiten mostrar los enlaces con los siguientes
estilos:
● En su estado normal, los enlaces se muestran de color rojo #CC0000.
● Cuando el usuario pasa su ratón sobre el enlace, se muestra con un
color de fondo rojo #CC0000 y la letra de color blanco #FFF.
● Los enlaces visitados se muestran en color gris claro #CCC.
El resultado final debe de ser algo similar a la siguiente imagen.

13
Listas
Las listas en CSS se refieren a la forma en que se pueden estilizar los elementos de lista en
HTML utilizando CSS. En HTML, las listas vienen principalmente en dos tipos: listas ordenadas (<ol>) y
listas desordenadas (<ul>). Cada elemento de la lista se marca con un elemento <li>. Con CSS, puedes
modificar varios aspectos de estas listas, incluyendo:

1. Tipo de marcadores (Bullet Points) o números: puedes cambiar el estilo predeterminado de los
marcadores en listas desordenadas o el tipo de numeración en listas ordenadas. Esto se hace
con la propiedad list-style-type. Por ejemplo, puedes tener discos, círculos, cuadrados, números
romanos, etc.

2. Posición de los marcadores: la propiedad list-style-position te permite controlar si los


marcadores aparecen dentro o fuera del flujo de contenido de la lista. Esto afecta a la indentación
y alineación del contenido de la lista.

3. Imágenes personalizadas como marcadores: en lugar de usar los marcadores


predeterminados, puedes usar cualquier imagen como marcador de una lista con la propiedad
list-style-image. Esto permite una personalización mucho más detallada de las listas.

4. Estilos de lista abreviados: la propiedad list-style es una propiedad abreviada que te permite
establecer list-style-type, list-style-position y list-style-image en una sola declaración.

A continuación, veremos un código de ejemplo que realiza todo lo que hemos visto en este apartado.

Ver el ejemplo en: https://codepen.io/CarlosGarcia/pen/BabYvWX

14
Tablas
Las tablas en HTML son una manera efectiva de organizar y mostrar datos en forma de filas y columnas.
Sin embargo, las tablas predeterminadas de HTML suelen ser muy básicas en cuanto a diseño. Por
suerte, con CSS, podemos mejorar significativamente la apariencia de estas tablas. Vamos a ver cómo
usar algunas propiedades CSS importantes para tablas:

● border-collapse: esta propiedad es usada para definir si los bordes de las celdas de la tabla
estarán separados o colapsados (fusionados). El valor collapse fusiona los bordes de las celdas
adyacentes en uno solo, dando a la tabla un aspecto más limpio y unificado.
● border-spacing: si decidimos no colapsar los bordes (usando border-collapse: separate;), esta
propiedad nos permite controlar el espacio entre las celdas de la tabla. Se especifica en píxeles o
en cualquier otra unidad de medida CSS.
● caption-side: las tablas pueden tener una leyenda o título (<caption>), y esta propiedad controla
si la leyenda se muestra en la parte superior o inferior de la tabla. Los valores comunes son top y
bottom.

A continuación, veremos un ejemplo de la utilización de estas propiedades en una tabla.

Código

15
Salida

Ver el ejemplo en: https://codepen.io/CarlosGarcia/pen/oNVEJEP

En este ejemplo:
● border-collapse: collapse asegura que los bordes de las celdas adyacentes se fusionan en uno
solo.
● border-spacing: 0 elimina el espacio entre las celdas (solo es efectivo cuando border-collapse
está establecido en separate).
● caption-side: bottom coloca la leyenda (<caption>) en la parte inferior de la tabla. Puede ser
cambiado a top para mover la leyenda a la parte superior.
Este es un ejemplo básico. Puedes personalizar aún más las propiedades y los estilos según las
necesidades de tu proyecto.

AC 1.4. Estilización de un sitio web de noticias


Descripción: los estudiantes deben crear un archivo HTML que represente un sitio web de noticias y
aplicar estilos utilizando CSS. El objetivo es practicar el uso de colores, unidades de medida, estilos de
texto, enlaces y listas.
Pasos:
● Paso 1: crea un archivo HTML llamado "noticias.html" con una estructura básica de página web
que incluya un encabezado, una sección de noticias y una sección para una lista de enlaces.
● Paso 2: agrega al menos tres noticias ficticias con títulos y contenido en la sección de noticias.
● Paso 3: estiliza la página web utilizando CSS de la siguiente manera:
○ Crea una lista de enlaces en la parte inferior de la página y estilízala a tu gusto.
○ Utiliza colores adecuados para el texto y los enlaces.
○ Ajusta el tamaño y el estilo de fuente del texto.
○ Asegúrate de que los enlaces cambien de color cuando se les hace hover y también
cuando fue visitado.
● Paso 4: Crea una tabla de una fila y varias columnas (cada una con un icono de una red social)
que te redirija a la red social de la empresa. Esta tabla no debe tener bordes ni pie de página.

16
Webgrafía
● Tutorial CSS de w3school → https://www.w3schools.com/css/
● Tutorial CSS MDN → https://developer.mozilla.org/es/docs/Learn/CSS
● Intro. CSS → https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/CSS_basics

17

También podría gustarte