¡Descarga Introducción a CSS: Estilos y Formatos para Páginas Web - Prof. 20179 y más Apuntes en PDF de Computación aplicada solo en Docsity!
Lenguajes de programación HTML y CSS
Parte 2. Formato con CSS
Aplicación de CSS
Después de haber terminado la primera parte, exclusivamente en HTML, ahora nos encontramos con CSS. CSS no es más complicado que HTML, es el complemento para ayudarte a dar formato a tu página web.
En esta primera parte sobre CSS, veremos la teoría CSS: ¿qué es? ¿qué aspecto tiene? ¿cuándo se escribe el código CSS? Estos aspectos teóricos no son muy complicados, pero hay que entenderlos, porque es la base de CSS. Esto es lo único que se debe recordar de memoria en CSS.
Historia de CSS
Había informado previamente que aprenderemos dos lenguajes. Ya hemos empezado nuestro descubrimiento de HTML, aunque hay muchas más cosas que aprender (volveremos al HTML más adelante). Sin embargo, ahora es tiempo para ocuparnos de CSS.
CSS ( Cascading Style Sheets ), es otro lenguaje que complementa HTML. ¿Recordarás su papel? Consiste en gestionar el diseño de tu sitio.
¿Para qué sirve CSS?
● Permite elegir el color de tu texto. ● Permite seleccionar el tipo de letra utilizado en tu sitio. ● Establece el tamaño, bordes, fondo ...
Además, puede hacer el diseño de tu sitio. Se le puede decir: quiero que mi menú esté a la izquierda y ocupe una anchura tal que la cabecera de mi sitio siempre sea visible, etc.
CSS: comienzo difícil
Debes saber que al principio de la Web, CSS no existía. De hecho, solo había HTML.
El código HTML nació en 1991 y CSS en 1996. Por lo tanto, puedes pensar sin duda: ¿cómo se daba formato desde 1991 hasta 1996? Pues sólo en HTML. En efecto, hay etiquetas para dar
__
formato en HTML. Por ejemplo permite fijar el color del texto en HTML.
Sin embargo, las páginas HTML llegaron a ser muy complejas. Había más y más etiquetas y eran una mezcla anárquica de contenido y formato, lo que hizo la actualización de las páginas web un proceso más complejo Es por eso que se creó CSS. Sin embargo, CSS no fue inmediatamente adoptado por los diseñadores, ni mucho menos. Tenían que deshacerse de algunos malos hábitos y eso llevó tiempo. Incluso hoy en día, es frecuente encontrar sitios web con formato HTML, viejo y obsoleto, como el uso de la etiqueta .
CSS: soporte de los navegadores
Al igual que HTML, CSS ha evolucionado. Ha habido cuatro versiones principales de CSS:
CSS 1 CSS 2. CSS 2. CSS 3
Son los navegadores web los que hacen el trabajo más complejo, deben leer el código CSS y entender cómo mostrarlo en la página.
En la década del 2000, el navegador Internet Explorer (Microsoft Windows) era el más común, pero su gestión de CSS ha sido durante mucho tiempo mediocre (por no decir mala). Era el apogeo de la versión 6 (IE6), por desgracia, todavía se utiliza por una pequeña parte de los usuarios de Internet (por suerte, esta proporción tiende a disminuir).
Desde entonces, muchos navegadores se crearon y ”abuchearon” a Internet Explorer: Mozilla Firefox, por supuesto, pero también Google Chrome y Opera. Y no estoy hablando del éxito de Mac y el iPhone con el navegador Safari. Esto llevó a Microsoft a responder, publicó (después de un largo período de inactividad) IE 7 e IE 8 y el IE 9. Ya se habla de IE 11.
La lección de historia, tal vez sea muy bonita, pero ¿cómo me afecta hoy en día? ¿Qué podemos aprender de esto? Que los navegadores no saben todas las propiedades CSS que existen. Cuanto el navegador es más antiguo, menos sabe de las características de CSS.
Mostraré en esta documentación una serie de características de CSS que no funcionan necesariamente en los navegadores más antiguos. No puedo evitarlo, es así: no hay ningún navegador que lo sepa todo. En el peor de los casos, si el navegador no sabe una propiedad CSS, lo ignora y no da formato, pero no se cuelga la página: siempre será legible.
Recomiendo www.caniuse.com que ofrece tablas de características de compatibilidad de HTML y CSS en distintos navegadores (y sus diferentes versiones).
__
Mi supersitio
¡Bienvenidos!
Por el momento está casi vacío.¡Ten paciencia!
Te darás cuenta de los contenidos de la línea 5, , que indica que el archivo HTML está asociado con un archivo llamado estilo.css y es el responsable del formato.
Guardar este archivo como se desee (por ejemplo, pagina.html). Por ahora, nada especial, excepto para la nueva etiqueta que hemos añadido.
A continuación, crea un nuevo archivo vacío en tu editor de textos (por ejemplo, Aptana o Bluefish) y copia ese trozo de código CSS (no te preocupes, voy a decir lo que significa):
p { color: blue; }
Guarda el archivo asignándole un nombre que termine con .css, como por ejemplo estilo.css. Coloca este archivo .css en la misma carpeta de los .html.
Ahora abre tu página con el archivo .html en un navegador para probarlo como lo haces normalmente. Observa, los párrafos están escritos en azul, como se muestra seguidamente.
Mi supersitio
¡Bienvenidos! Por el momento está casi vacío .¡Ten paciencia!
Otra forma de asignar formato es en el encabezado del archivo HTML .
Hay otro método para el uso de CSS en archivos HTML: se trata de insertar el código CSS
Prueba de CSS
Mi supersitio
¡Bienvenidos!
Por el momento está casi vacío.¡Ten paciencia!
Y la tercera posibilidad es insertándolo directamente en las etiquetas (no recomendada).
Este último método, se ha de manejar con cuidado, puedes agregar un atributo de estilo a cualquier etiqueta. Inserta el código CSS directamente en este atributo:
Prueba de CSS
Mi supersitio
¡Bienvenidos!
Por el momento está casi vacío.¡Ten paciencia!
Esta vez, sólo el texto del párrafo (línea 10), cuya etiqueta contiene el CSS, será de color azul.
__
etiqueta { propriedad1: valor1; propriedad2: valor2; propriedad3: valor3; propriedad4: valor4; } etiqueta { propriedad1: valor1; }
En este fragmento de etiquetas se ven, los atributos y valores que acabo de mencionar. Como puedes ver, se escribe el nombre de la etiqueta (por ejemplo, h1) y llaves de apertura, en el interior, pones las propiedades y los valores que desees. Se pueden indicar tantas propiedades como se desee dentro de las llaves. Cada propiedad está seguida del símbolo de "dos puntos" (:) y el valor correspondiente. Por último, cada línea termina con un punto y coma (;).
Verás muchas propiedades en los capítulos siguientes. Por el momento, en los ejemplos, solo tendremos que cambiar el color.
El código CSS que hemos utilizado hasta ahora, es:
p { color: navy; }
esto significa: " Quiero que todos mis párrafos están escritos en azul marino ".
Prueba a cambiar el nombre de la etiqueta asignada por CSS. Por ejemplo, si escribo h1 en el título que se escribe en azul. Edita tu archivo estilo.css de esta manera:
h { color: navy; }
Ahora, vuelve a abrir la página HTML (recuerda, esta es la página HTML que se abre en el navegador, no el archivo con extensión css): debes ver el título, que aparece en azul como se muestra seguidamente.
__
Mi supersitio
¡Bienvenidos! Por el momento está casi vacío .¡Ten paciencia!
Aplicar un estilo a varias etiquetas
Tomemos el siguiente código CSS
h { color: navy; } em { color: navy; }
Significa que nuestros títulos y nuestros textos con las etiquetas y deben mostrarse de color azul marino. Por contra, es un poco repetitiva, ¿no?. Afortunadamente, hay una manera en CSS para ir más rápido si ambas etiquetas deben tener la misma presentación. Es suficiente con combinar las declaraciones separándolas con una coma,
h1, em
{ color: navy; }
El resultado es el siguiente
Mi supersitio
¡Bienvenidos! Por el momento está casi vacío .¡Ten paciencia!
Comentarios en CSS
Al igual que HTML, es posible poner comentarios. Los comentarios no se mostrarán, sólo sirven para especificar la información para ti, por ejemplo, en un archivo CSS muy largo.
Por otra parte, te darás cuenta, que en general, el archivo HTML es muy corto y el CSS
__
De hecho, debes escribir un nombre que identifica a la etiqueta. Lo que quieras, siempre y cuando el nombre empiece con una letra.
Por ejemplo, asociar la clase introducción a mi primer párrafo (línea 11):
Prueba de CSS
¡Mi supersitio!
¡Bienvenidos!
Por el momento está casi vacío.¡Ten paciencia!
Ahora lo que se ha hecho, es que el párrafo esté identificado. Tiene un nombre: introducción. Serás capaz de volver a utilizar el nombre en el archivo CSS para decir: "quiero que las etiquetas que tienen nombres como" introducción "se muestren en azul."
Para hacer esto en CSS, especifica el nombre de la clase, a partir de un punto (.), de la siguiente manera:
.introduccion { color: navy; }
Apareciendo al ejecutarlo
Mi supersitio
¡Bienvenidos! Por el momento está casi vacío .¡Ten paciencia!
__
¿Y entonces el atributo id?
Funciona exactamente de la misma manera que la clase, excepto por una cosa: que su denominación sólo puede utilizarse una vez en el código.
¿Qué interés? Hay poco para ser honesto, será útil si luego se usa JavaScript para reconocer ciertas etiquetas. Por otra parte, ya hemos visto el atributo id en el capítulo sobre los enlaces (para hacer los anclajes). En la práctica, vamos a poner ese Identificación en los elementos que son únicos dentro de la página, tales como el logotipo.
Si utilizas la Identificación, cuando se definen las propiedades en el archivo css, se precederá el nombre de la Identificación por el signo sostenido (#):
#logo { /* Indica las propiedades CSS aquí */ }
Etiquetas universales
Llegará el momento en que se necesite aplicar una clase (o id) a ciertas palabras que, originalmente, no están rodeadas por etiquetas.
En efecto, el problema de la clase es que es un atributo. Entonces no se puede poner en una etiqueta. Si, por ejemplo, quiero cambiar sólo "bienvenido" en el párrafo:
¡Buenos días y bienvenido a mi sitio!
.
Sería fácil de hacer si hay una etiqueta alrededor de "bienvenido", pero por desgracia no hay ninguna. Por suerte, existe la etiqueta que no sirve para nada.
De hecho, hemos inventado dos etiquetas de las llamadas universales, sin un significado especial (no indican que la palabra es importante, por ejemplo). Hay una diferencia mínima (pero importante) entre estas dos etiquetas:
**- ** : esta etiqueta es de línea, es decir que es una etiqueta se coloca dentro de un párrafo de texto, para seleccionar sólo algunas palabras. Las etiquetas y son de la misma familia. Esta etiqueta, por lo tanto, se utiliza en medio de un párrafo y así la vamos a utilizar para dar color a "bienvenida".
- ** ** : esta es una etiqueta del tipo bloque, en torno a un bloque de texto. Las
__
h1, em { }
que significa "Todos los títulos y todos los textos importantes". Hemos seleccionado dos etiquetas a la vez.
Y, por último, vimos cómo seleccionar etiquetas específicas a las que hemos dado un nombre con los atributos clase e id:
.class { } #id { }
Hay otras formas de poner etiquetas en CSS. No vamos a ver todas porque hay muchas y algunas son complejas, pero estas son las que puede ser más eficaces en CSS!
Selectores avanzados
*: selector universal
{ }
Selecciona todas las etiquetas sin excepción. Se le llama el selector universal.
A B: una etiqueta dentro de otra
h3 em { }
Selecciona todas las etiquetas ubicadas dentro de una etiqueta . Ten en cuenta que no hay una coma entre los nombres de las etiquetas.
Código HTML equivalente:
Título con texto importante
A + B : una etiqueta que sigue a otra
__
h3 + p { }
Selecciona la primera etiqueta
situada después de un título
.
Ejemplo de código HTML
Título
Párrafo
A [atributo]: una etiqueta que posee un atributo
a[titulo] { }
Selecciona todos los enlaces que poseen un atributo título.
Ejemplo de código HTML
A [atributo = "valor"]: una etiqueta, un atributo y un valor exacto.
a[titulo="Pulse aquí"] { }
Lo mismo, pero el atributo también debe tener exactamente el valor "Pulse aquí".
Ejemplo de código HTML
A[atributo* = "valor"]: una etiqueta, un atributo y un valor.
a[titulo*="aquí"] { }
__
Formato de texto
Llegamos ahora a un apartado que te interesará mucho. Simplemente significa que vamos a cambiar la apariencia del texto.
No es una sorpresa especial: todavía estamos en CSS y usamos lo que hemos aprendido en el capítulo anterior. Por lo tanto, vas a trabajar directamente en el archivo .css que hemos creado previamente.
Este capítulo será una oportunidad para descubrir muchas de las propiedades CSS: vamos a ver cómo cambiar el tamaño del texto, cambiar la fuente, alinear el texto …
Tamaño del texto
Para cambiar el tamaño del texto, utiliza la propiedad CSS font-size. Pero, ¿cómo especificar el tamaño de la fuente? Aquí es donde las cosas se ponen difíciles, porque hay muchas técnicas disponibles:
Indicar un tamaño absoluto: en píxeles, centímetros o milímetros. Este método es muy preciso, pero es aconsejable utilizarlo sólo si es absolutamente necesario, porque puede indicar un tamaño demasiado pequeño para algunos lectores.
Indicar un tamaño relativo en tanto por ciento, o , esta técnica tiene la ventaja de ser más flexible. lo que resulta más fácil a las preferencias de tamaño de los visitantes.
Tamaño absoluto. Para especificar un tamaño absoluto, se utilizan generalmente los píxeles. Para un texto de 16 píxeles de alto, escribe:
font-size: 16px;
He aquí un ejemplo de uso, puedes copiar el código en el fichero estilo.css:
p { font-size: 14px; /* Párrafo de 14 pixeles / } h { font-size: 40px; / Títulos de 40 pixeles */ }
__
SI lo deseas, los tamaños se pueden definir en cm o mm (Sistema Internacional de Unidades, SI), reemplazando px por cm o mm. Sin embargo aunque son obligatorias legalmente, estas unidades se adaptan peor a las pantallas.
Valor relativo
Es el método recomendado pues el texto se adapta más fácilmente a las preferencias de todos los visitantes. Hay varias formas de indicar un valor relativo, por ejemplo se puede indicar el tamaño con palabras en inglés como:
xx-small : minúscula ; x-small : muy pequeña; small : pequeña ; medium : media ; large : grande ; x-large : muy grande; xx-large : gigantesca;
Es fácil probar el código
p { font-size: small; } h { font-size: large; }
Esta técnica tiene un inconveniente: hay siete tamaños disponibles (porque solo hay siete nombres). Afortunadamente, hay otros, es habitual especificar el tamaño en "em". Si escribes 1em, el texto tiene un tamaño normal. Si deseas ampliar el texto, puede introducir un valor mayor que 1, como 1.3em. Si deseas reducir el texto, introduce un valor inferior a 1, como 0.8em.
Ten cuidado: para los números decimales, debes poner un punto y no una coma. Tendrás que escribir "1.4em" y no "1,4em"
Ejemplo de código CSS:
p
__
sólo se aplica si no se ha encontrado otra fuente). También hay otro tipo de letra por defecto llamado sans-serif. La diferencia entre los dos es la presencia de pequeñas lengüetas de conexión en la parte inferior de las letras, la fuente sans serif no tiene. Sí, es sutil.
Sí, pero ¿cuáles son las fuentes más comunes que tienes el "derecho" a utilizar
Arial ; Arial Black ; Comic Sans MS ; (no recomendada) Courier New ; Georgia ; Impact ; Times New Roman ; Trebuchet MS ; Verdana.
Así, si escribo el siguiente código CSS
p {font-family: Impact, "Arial Black", Arial, Verdana, sans-serif; }
significa: "pon la fuente impact si no es así, “Arial Black”, o si no Arial, o si no Verdana o si nada funciona, poner un tipo de letra estándar (sans-serif).
En general, se indica una selección de tres o cuatro fuentes (+ serif o sans-serif) para asegurarse de que al menos una de ellas ha sido encontrada en el ordenador del visitante de nuestra web.
Si el nombre de la fuente lleva espacios en blanco, entonces se ha de poner entre comillas, como por ejemplo “Arial Black”.
Uso de una fuente personalizada con @font-face
Si te parece la elección de fuentes demasiado pequeña. ¿Cómo puedo usar mi fuente favorita de mi sitio web? Durante mucho tiempo esto no era posible. Actualmente, con CSS3, hay afortunadamente una manera de utilizar cualquier fuente en tu web. Esto funciona bien con la mayoría de los navegadores. Pero cuidado, hay defectos (de lo contrario sería demasiado bueno):
- Será necesario que el navegador de los visitantes descargue automáticamente el archivo de la fuente, que puede “pesar” o exceder de 1MB.
__
- La mayoría de las fuentes están sujetas a derechos de autor, no es legal utilizarlas en tu sitio. Afortunadamente, hay sitios como dafont.com y fontsquirrel.com que ofrecen la posibilidad de descargar fuentes libres de derechos de autor. Recomendamos especialmente fontsquirrel.com, ya que permite que descargues los paquetes listos para CSS3.
- Hay varios formatos de archivos de fuentes y no funcionan en todos los navegadores, necesitas saber: . ttf: Font TrueType. Funciona en IE9 y los demás navegadores. . eot: Embedded OpenType. Sólo funciona en todas las versiones de Internet Explorer. Este formato es propietario, producido por Microsoft. . tfo: Font OpenType. No funciona en Internet Explorer. . svg: SVG Font. El único formato compatible con iPhones y iPads por ahora. . woff: Web Open Font Format. Nuevo formato diseñado para la web, que funciona en IE9 y las demás navegadores.
En CSS para definir un nuevo tipo de letra o fuente, debes declararlo así:
@font-face { font-family: 'MiFuenteEsceptica'; src: url('MifuenteEsceptica.eot'); }
El archivo de fuente (aquí MiFuenteEsceptica.eot) debe estar ubicado en la misma carpeta que el archivo CSS (o en una subcarpeta, si se utiliza una ruta relativa).
Sí, además EOT sólo funciona en Internet Explorer. Lo ideal es ofrecer múltiples formatos para las fuentes que el navegador descarga y que pueda leer. Se indican como varios formatos:
@font-face { font-family: 'MiFuenteEsceptica'; src: url('MiFuenteEsceptica.eot') format('eot'), url('MiFuenteEsceptica.woff') format('woff'), url('MiFuenteEsceptica.ttf') format('truetype'), url('MiFuenteEsceptica.svg') format('svg'); }
Para probar, sugiero descargar una fuente de Squirrel Font, por ejemplo, Learning Curve Pro. Haz clic en "@ font-face Kit" que permitirá descargar una lista para su uso con todos los formatos de la fuente.
El archivo CSS se verá al final como:
__
