Centro Educativo del Nivel Secundario
Madre Teresa de Calcuta
Salida Ciencia & Tecnología
Proyecto de Desarrollo Web Y Aplicaciones Móviles
6to. Grado
Año Escolar 2019-2020
Profesor: Adán Edison Ureña Almonte M.A.
CSS Funcionamiento Básico
Antes
de que se generalizara el uso de CSS, los diseñadores de páginas web utilizaban
etiquetas HTML especiales para modificar el aspecto de los elementos de la
página.
El siguiente ejemplo muestra una página HTML con estilos definidos sin
utilizar CSS:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Ejemplo de
estilos sin CSS</title>
</head>
<body>
<h1><font color="red" face="Arial" size="5">Titular de la página</font></h1>
<p><font color="gray" face="Verdana" size="2">Un párrafo de texto no muy largo.</font></p>
</body>
</html>
El ejemplo anterior utiliza la
etiqueta
<font> con
sus atributos color, face y size para
definir el color, el tipo y el tamaño de letra de cada elemento de la página.
El
problema de utilizar este método para definir el aspecto de los elementos se
puede ver claramente con el siguiente ejemplo: si la página tuviera 50
elementos diferentes, habría que insertar 50 etiquetas
<font>. Si el
sitio web entero se compone de 10.000 páginas diferentes, habría que definir
500.000 etiquetas <font>.
Como cada etiqueta <font> tiene
tres atributos, habría que definir 1.5 millones de atributos.
Como
el diseño de los sitios web está en constante evolución, es habitual modificar
cada cierto tiempo el aspecto de las páginas del sitio. Siguiendo con el
ejemplo anterior, cambiar el aspecto del sitio requeriría modificar 500.000
etiquetas y 1.5 millones de atributos.
La
solución que propone CSS es mucho mejor, como se puede ver en el siguiente
ejemplo:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de
estilos con CSS</title>
<style type="text/css">
h1 { color: red; font-family: Arial; font-size: large; }
p { color: gray; font-family: Verdana; font-size: medium; }
</style>
</head>
<body>
<h1>Titular de la
página</h1>
<p>Un párrafo de
texto no muy largo.</p>
</body>
</html>
CSS permite separar los contenidos de la página y la información sobre su
aspecto. En el ejemplo anterior, dentro de la propia página HTML se crea una
zona especial en la que se incluye toda la información relacionada con los
estilos de la página.
Utilizando
CSS, se pueden establecer los mismos estilos con menos esfuerzo y sin ensuciar el código HTML de los contenidos con
etiquetas
<font>.
Como se verá más adelante, la etiqueta <style> crea una zona especial
donde se incluyen todas las reglas CSS que se aplican en la página.
En
el ejemplo anterior, dentro de la zona de CSS se indica que todas las etiquetas
<h1> de
la página se deben ver de color rojo, con un tipo de letra Arial y con un
tamaño de letra grande. Además, las etiquetas <p> de la página se deben ver de
color gris, con un tipo de letra Verdana y con un tamaño de letra medio.
Definir
los estilos de esta forma ahorra miles de etiquetas y millones de atributos
respecto a la solución anterior, pero sigue sin ser una solución ideal. Como
los estilos CSS sólo se aplican en la página que los incluye, si queremos que
las 10.000 páginas diferentes del sitio tengan el mismo aspecto, se deberían
copiar 10.000 veces esas mismas reglas CSS. Más adelante se explica la solución
que propone CSS para evitar este problema.
Fuente Bibliográfica:
https://uniwebsidad.com/libros/css/capitulo-1
No hay comentarios.:
Publicar un comentario
Tu opinion es importante y la valoramos. Opina y Comparte con nosotros.