Hojas de estilo CSS

 1  - 2 - 3
http://w3trv.blogspot.com.es/p/css-3.html
http://w3trv.blogspot.com.es/p/blog-page_60.html
www.google.es/activate
Introducción al desarrollo web:
HTML y CSS
Parte II


CSS: conceptos básicos


Gracias a vídeos anteriores ya sabrás escribir y leer el código HTML que se emplea para crear las páginas web. Recuerda que con HTML sólo definimos la estructura y el contenido de las páginas web.

Ahora queremos lograr que las páginas web tengan la presentación visual que nosotros queramos, es decir, que las páginas web se muestren con los colores, los tamaños y tipos de letra, los bordes y los fondos que nosotros deseamos. Para lograr que una página web, en vez de verse así, se vea de esta otra forma. O, que en vez de verse así, se vea con esta otra presentación, es necesario utilizar una tecnología adicional.

Esa tecnología es CSS, Cascading Style Sheets, las hojas de estilo en cascada. Existen diferentes versiones de CSS, que no se llaman versiones, sino niveles. Cada nivel de CSS se construye sobre el anterior, añadiendo funciones al nivel previo. Yo te aconsejo que te centres en aprender CSS 2.1, ya que es el que aceptan la mayoría de los navegadores actuales. CSS 3 incorpora novedades muy interesantes, pero en la actualidad está en desarrollo y no todos los navegadores lo aceptan. 



CSS es un lenguaje muy sencillo que se compone de reglas. Cada regla está formada por uno o más selectores y una declaración formada por un bloque de estilos que define los estilos a aplicar para los elementos del documento que cumplan con el selector. En este ejemplo, el selector es el elemento de HTML <h1>, por lo que esta regla se aplicará a todos los encabezados de nivel 1 de la página web. Cada declaración de estilos se define entre llaves, y está formada por parejas propiedad valor.

Desde que el lenguaje CSS se lanzó en el año 1996, el número de propiedades que posee ha ido aumentando y en la actualidad, en la versión CSS3, está formado por casi 200 propiedades.
Al igual que pasa con el lenguaje HTML, el lenguaje CSS también está desarrollado por el World Wide Web Consortium, el W3C, el organismo internacional que vela por el correcto desarrollo de la Web. En la página del W3C puedes encontrar mucha información sobre CSS, pero para empezar no te lo recomiendo, porque te puede abrumar y asustar, ya que es un sitio web dirigido a profesionales y expertos, no para principiantes. En el sitio web del W3C puedes consultar la especificación oficial de CSS, pero para empezar a aprender lo encontrarás muy difícil. Yo te aconsejo que utilices, como en otras ocasiones, el W3Schools.

Por un lado tienes el tutorial sobre CSS, y por otro lado tienes la guía de referencia, en la que encontrarás todas las propiedades de CSS agrupadas en diferentes grupos, como por ejemplo background, border and outline, color, font o margin.

Además, también te recomiendo que consultes el artículo dedicado al lenguaje CSS que puedes encontrar en la Wikipedia. Y también te recomiendo que leas el CSS Training, un curso de aprendizaje de CSS preparado por el W3C que organiza el aprendizaje en 4 semanas, empezando por los selectores en la semana 1 y acabando con temas avanzados en la semana 4.
 

 www.google.es/activate

https://youtu.be/znaYUautgnY


 Introducción al desarrollo web: 
HTML y CSS
Parte II


CSS: cómo se usa en HTML (parte 1)



CSS, Cascading Style Sheets, las hojas de estilo en cascada, es la tecnología que se emplea para definir la presentación visual de las páginas web. Antes de ver cómo se usa CSS en una página web, vamos a aprender un término muy importante en los sistemas informáticos, el acoplamiento, un factor que incide en la calidad de los sistemas informáticos.

Según la Wikipedia, “El acoplamiento informático indica el nivel de dependencia entre las unidades de software de un sistema informático, es decir, el grado en que una unidad puede funcionar sin recurrir a otras; dos funciones son absolutamente independientes entre sí (el nivel más bajo de acoplamiento) cuando una puede hacer su trabajo completamente sin recurrir a la otra. En este caso se dice que ambas están desacopladas”.

Evidentemente, lo mejor sería un desacoplamiento total, es decir que no hubiese ninguna dependencia entre las partes que constituyen un sistema informático. Pero esa situación es más bien imposible de lograr. Por lo tanto, al final lo que se intenta lograr es reducir el acoplamiento al mínimo posible: cuanto menos dependientes sean las partes que constituyen un sistema informático, mejor será el resultado final.




Cuando usamos CSS para definir la presentación de una página web escrita en HTML, se crea un acoplamiento entre HTML y CSS. Como acabamos de ver, debemos de intentar reducir este acoplamiento entre estas dos tecnologías. En HTML se puede indicar que queremos aplicar unas reglas CSS de tres formas: mediante el atributo style, mediante la etiqueta <style> y mediante la etiqueta <link>. En este vídeo vamos a ver el uso del atributo style, que es la peor opción ya que lleva aparejado un acoplamiento máximo entre HTML y CSS, como veremos a continuación con un ejemplo.

El atributo style es uno de los pocos atributos de HTML que se puede aplicar a casi cualquier elemento de HTML. En HTML 4.01 y XHTML 1.0, el atributo style se puede aplicar a casi todos los elementos o etiquetas excepto BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE y TITLE. Sin embargo, en HTML5 se ha cambiado y ahora se indica que todos los elementos pueden tener el atributo style.

A continuación te voy a mostrar cómo utilizar este atributo, pero antes vamos a ver las propiedades de CSS que voy a utilizar. Voy a utilizar:
•    color para definir el color del texto.
•    background-color para definir el color de fondo del texto.
•    font-family para definir el tipo de letra o fuente.
•    Y font-size para definir el tamaño del texto.

Esta es la página web que voy a usar como base para enseñarte a utilizar el atributo style. Vamos a ver primero cómo se visualiza esta página web en un navegador, en Google Chrome. Este es el aspecto que tiene la página cuando se visualiza sin CSS. Ahora voy a empezar a añadirle propiedades visuales con el atributo style.

En primer lugar me voy a la etiqueta body, ya que al cambiar el color del texto y el color del fondo de la etiqueta u elemento body voy a cambiar todo el color del fondo y todo el color de la página. Así que, le añado el atributo style y primero voy a cambiar el color del texto, le voy a indicar este color #333. Y a continuación voy a cambiar el color del fondo y le voy a poner el color #CCC.

La forma de indicar los colores la tienes explicada en otro video, donde se te explican las distintas formas que existen en CSS para indicar un color.Fíjate que estas dos propiedades de CSS, color y background-color, las he separado con un punto y coma y al final de la última propiedad también he puesto un punto y coma.

Este punto y coma no es obligatorio, pero es una buena costumbre ponerlo, ya que ahora, rápidamente podría añadir otra propiedad de CSS y no me tendría que preocupar en ver si tengo que poner o no poner el punto y coma. Si me acostumbro a ponerlo siempre, podré añadir una nueva propiedad rápidamente.

Bien, hemos cambiado el color del texto le hemos puesto #333, que es un gris muy oscuro cercano al negro. Y el color del fondo de la página le he puesto #CCC, que es un gris claro, no muy claro. Vamos a guardar la página y la visualizamos en Google Chrome. Y podemos ver el resultado, vemos cómo el color del texto ahora no es un negro completo, sino un negro un poco apagado porque es un gris oscuro, y el color del fondo ha cambiado a gris.

Vamos a añadir más propiedades, ahora voy a cambiar los encabezados etiqueta <h1> y <h2>.
Primero me voy a la etiqueta <h1>, le añado el atributo style y voy a cambiar lo siguiente. Primero voy a cambiar el tipo de letra o fuente y le voy a poner "Georgia". Y también le voy a cambiar el tamaño del texto y le voy a poner "3em", que indica que quiero que el <h1> tenga un tamaño del texto tres veces el tamaño base actual. Voy a copiar esta propiedad, esta propiedad style, porque en el h2 la voy a reutilizar. Voy a usar el mismo tipo de letra "Georgia", pero ahora voy a indicar un tamaño del texto "2em", el doble. Y ahora copio esta propiedad y la aplico al otro <h2>.

Lo guardo, lo ejecuto otra vez en Chrome y vemos el resultado. Vemos que ha aumentado el tamaño de los encabezados, del <h1>, del <h2>, y además ha cambiado su tipo de letra, su fuente. Si lo comparo con la visualización anterior, podemos ver que el cambio es evidente. Vuelvo al código HTML y ahora lo que voy a cambiar son los párrafos, y lo que voy a indicar es que en mis párrafos de texto quiero usar un tipo de letra "Arial".

Y, por si no está disponible en tipo de letra "Arial", indico un segundo tipo de letra, "Helvética. Y finalmente, un tipo de letra "sans-serif", que es un tipo de letra genérico, indica la familia de tipos de letra "sans-serif". Voy a copiar ahora este atributo style para aplicárselo 1a los otros párrafos de texto que hay en mi página web. Lo guardo, lo visualizo otra vez en Google Chrome y podemos ver el cambio, como ahora el tipo de letra de mis párrafos es "Arial". Si lo comparo con la versión anterior vemos que hay un cambio significativo.

Así de fácil es usar el atributo style para indicar las propiedades de un elemento o etiqueta de una página web. Pero vemos que hay un problema importante. El problema importante sobre todo lo hemos visto aquí en el párrafo que me ha tocado copiar, una, dos, tres, cuatro veces la misma propiedad style porque quería aplicar las mismas propiedades visuales a mis cuatro párrafos de texto. ¿Qué ocurre si ahora añado más párrafos de texto? Tendré que volver a copiar esta propiedad style a cada uno de los párrafos de texto. ¿Y qué ocurre si yo ahora quiero cambiar y, por ejemplo, ponerle un tipo de letra distinto? Pues tendría que ir párrafo a párrafo, cambiándolo. Vemos que hay un alto acoplamiento entre el CSS y el HTML. ¿Esto lo podemos resolver, podemos reducir el acoplamiento?

Sí, eso lo veremos en el siguiente vídeo, donde te explicaré cómo usar la etiqueta <style> para indicar los estilos de una página. No te confundas, aquí estamos viendo el uso de un atributo style y en el siguiente video te voy a explicar el uso de la etiqueta <style>. Atributo, etiqueta, son dos cosas distintas.


www.google.es/activate
https://youtu.be/LkmQ2J2fiWc


 Introducción al desarrollo web: 
HTML y CSS
Parte II


CSS: cómo se usa en HTML (parte 2)


 En el vídeo anterior vimos el uso del atributo style para definir los estilos de los elementos de una página web. En este vídeo vamos a ver el uso de la etiqueta <style>. Al usar la etiqueta <style> reducimos un poco el acoplamiento que existe entre HTML y CSS, es mucho mejor que usar el atributo style, pero no es la mejor solución, porque el código CSS sigue estando en el mismo fichero que el código HTML.

La etiqueta <style> la debemos escribir en el <head> de la página web. En las versiones antiguas de HTML era necesario incluir el atributo type en la etiqueta style para indicar el tipo de lenguaje de estilos que se usaba. La idea era permitir el uso de distintos lenguajes de estilo, pero al final sólo quedó uno, CSS. Por ello, en HTML5 se ha simplificado y podemos escribir la etiqueta style sin el atributo type, ya que tiene definido como valor por defecto CSS.

A continuación te voy a mostrar cómo utilizar este atributo, pero antes vamos a ver las propiedades de CSS que voy a utilizar. Voy a utilizar:

•    color para definir el color del texto.
•    background-color para definir el color de fondo del texto.
•    font-family para definir el tipo de letra o fuente.
•    Y font-size para definir el tamaño del texto.

Está la página web que voy a usar como base para mostrarte el uso de la etiqueta style. Vamos a ver primero cómo se visualiza en el navegador Google Chrome. Este es el aspecto que tiene esta página web. Ahora volvemos al código fuente, al código HTML y voy a añadir en el head de la página la etiqueta o elemento style.

Como estoy haciendo la página web con HTML5 no le pongo el atributo type, no es necesario aunque si quiero, se lo puedo indicar type “text/css”. Este es el tipo MIME que identifica los ficheros de tipo CSS. La etiqueta style la tengo que escribir en el head pero la podría haber puesto detrás del title, como la he puesto o la podría poner delante. Siempre que esté en el head, puede estar en cualquier parte

Y ahora voy a indicar mi primera regla de CSS. Mi primera regla es para modificar el color del fondo de la página y el color del texto, es decir, quiero modificar la etiqueta body. Así que tengo que indica body y entre llaves escribiré la regla de CSS, que voy a poner background-color, y voy a indicar este gris y el color del texto le pongo este otro gris que es un poco más oscuro. Grabo la página y la visualizo en Google Chrome y compruebo que efectivamente me aparece con el color del fondo gris y con el color del texto un gris muy oscuro cercano al negro.

Vuelvo al código fuente y voy a añadir otra regla de CSS. En este caso lo que voy a cambiar es el tipo de letra de mis encabezados de h1 y h2 y voy a usar esta sintaxis de CSS que me permite agrupar varios elementos y aplicarles la misma regla de CSS. Cuando escribo h1, h2 significa que la regla CSS que voy a escribir a continuación se la quiero aplicar a estos dos tipos de elementos o etiquetas. Y lo que voy a indicar es el tipo de letra, la fuente, font-family y le pongo “Georgia”.

A continuación voy a cambiar el tamaño del texto de h1 y le pongo font-size 3em, tres veces el tamaño base y h2 le pongo el tamaño font-size 2em, dos veces el tamaño base. Lo comprobamos en Google Chrome y podemos ver como efectivamente ha cambiado el tipo de letra de los encabezados, es distinto y efectivamente también ha aumentado el tamaño de los encabezados del h1 y del h2, ha cambiado su tamaño.

Vuelvo a código fuente de mi página web y voy a realizar el último cambio que es a los párrafos del texto le voy a aplicar otro tipo de letra font-family y le pongo una lista de tipos de letra: Arial, Helvética y por último el tipo genérico sans-serif. Lo guardo, lo ejecuto, lo visualizo en Google Chrome y comprobamos, si comparamos con la versión anterior, aquí el tipo de letra que se usa por defecto es “Times New Roman”, y aquí vemos que ahora el texto aparece con el tipo de letra Arial.

Como vemos, hemos separado ahora el código CSS,  lo hemos separado del código HTML. Antes con el atributo style, el código de CSS, las propiedades de CSS estaban escritas junto con el código HTML. Ahora,  aunque éste en el mismo fichero, lo hemos podido separar, hemos reducido el acoplamiento entre el código HTML y el código CSS. Y además, fijaos que hemos obtenido una ventaja adicional. Antes, para los distintos párrafos que tenía mi página web debería de de copiar el atributo style en cada una de ellas.

Ahora simplemente, escribo la regla una vez y ya se va a aplicar con este selector “p” se aplicará a todos los párrafos de mi página web. Si ahora quiero cambiar el tipo de letra y que afecte a todos mis párrafos, no tengo que ir uno a uno como ocurría antes con el atributo style. Ahora simplemente vengo aquí a esta regla de CSS y al cambiar aquí el valor del tipo de letra se cambiará en todos los párrafos de mi página web.

En el próximo vídeo veremos cómo podemos usar la etiqueta link para reducir aún más el acoplamiento entre el código HTML y el código CSS. La etiqueta link es la solución que debes usar en todos tus páginas web.

 

https://youtu.be/LkmQ2J2fiWc


Introducción al desarrollo web: 
HTML y CSS
Parte II


CSS: cómo se usa en HTML (parte 3)


En el vídeo anterior vimos el uso del atributo style y de la etiqueta <style> para definir los estilos de los elementos de una página web. En este vídeo vamos a ver el uso de la etiqueta <link>. Al usar la etiqueta <link> reducimos el acoplamiento que existe entre HTML y CSS al máximo, ya que el código HTML y CSS no se encuentran en el mismo fichero, sino que los almacenamos en ficheros distintos. Además, al estar el código CSS en un fichero separado, podemos hacer que diferentes páginas web, diferentes ficheros HTML, utilicen el mismo fichero CSS.

 La etiqueta <link> la debemos escribir en el <head> de la página web. En las versiones antiguas de HTML era necesario incluir el atributo type en la etiqueta <link> para indicar el tipo de lenguaje de estilos que se usaba. La idea era permitir el uso de distintos lenguajes de estilo, pero al final sólo quedó uno, CSS. Por ello, en HTML5 se ha simplificado y podemos escribir la etiqueta <link> sin el atributo type, ya que tiene definido como valor por defecto CSS.

 Además, la etiqueta <link> debe llevar el atributo href=“” en el que se indica la ruta al fichero que contiene la hoja de estilo y el atributo rel=“stylesheet” que indica que es una hoja de estilo. La etiqueta <link> también puede incluir otros atributos, como media o title, pero no los vamos a ver en este vídeo.

A continuación te voy a mostrar cómo utilizar esta etiqueta, pero antes vamos a ver las propiedades de CSS que voy a utilizar.
Voy a utilizar:

•    color para definir el color del texto.
•    background-color para definir el color de fondo del texto.
•    font-family para definir el tipo de letra, la fuente.
•    Y font-size para definir el tamaño del texto.

Partimos del ejemplo que hicimos en el vídeo anterior, en el que explicaba el uso de la etiqueta <style>. En ese ejemplo, teníamos esta página web sencilla, y en el código HTML añadíamos la etiqueta <style> para incluir la hoja de estilo en cascada, las propiedades para definir la presentación visual. Lo que vamos a hacer en este vídeo es transformar esto en un fichero externo, vamos a almacenar la hoja de estilo en un fichero aparte.

Así que, primero lo que hago es cortar este código, creo un fichero nuevo y pego el código CSS.
En el fichero CSS que vamos a almacenar de forma separada no necesito la etiqueta <style>, porque este fichero CSS va a ser exclusivo de CSS. Lo almaceno en el mismo directorio donde tengo almacenado el código HTML y, por ejemplo, lo voy a llamar “miestilo.css”. Fijaos como al almacenarlo con la extensión .css el editor Notepad++ me detecta la sintaxis del lenguaje y me lo colorea.

Ahora vuelvo al fichero HTML y donde antes tenía la etiqueta <style> añado la etiqueta <link>. Primero le pongo el atributo href, y pongo la ruta de acceso al fichero CSS. Como está en el mismo directorio, no hace falta que ponga una ruta, simplemente pongo el nombre del fichero “miestilo.css”. A continuación voy a poner el atributo rel=“stylesheet” y el atributo type que he indicado en el vídeo que si estamos trabajando en HTML5, como es en este ejemplo, no hace falta que lo pongamos, pero lo podemos poner si queremos, “text/css”, y cierro la etiqueta. Lo guardo, y ahora mismo tengo dos ficheros, el fichero HTML y el fichero CSS.

Con esta estrategia logro reducir el acoplamiento al máximo. Por supuesto, no podemos hacer que haya un total desacoplamiento, tiene que haber algún punto de conexión entre el código HTML y el código CSS y ese punto de conexión lo hemos reducido a la mínima expresión, a esta etiqueta <link>.

Vamos a probar esta página, me voy al menú “Ejecutar”, “Launch in Chrome”. Y vemos que efectivamente, aparece la página web con los estilos que habíamos definido previamente. Para convencernos de que realmente se está cargando esta hoja de estilos, vamos a hacer un cambio, por ejemplo, voy a cambiar el color de fondo y lo voy a poner a rojo, “#F00”. Almaceno el fichero CSS, me vuelvo al navegador y recargo la página, y efectivamente, ha cambiado el color al rojo. Por tanto, sí que esta página HTML está interpretando correctamente esta etiqueta <link>, y está cargando el CSS que tenemos en un fichero aparte.

Ahora yo podría hacer 5, 10, 50 o 1000 páginas y todas podrían usar el mismo CSS, lo único que tendría que hacer es en cada una de mis páginas poner la etiqueta <link> que cargue el mismo fichero CSS. Y si quiero hacer un cambio en todas las páginas de mi sitio web, lo único que tengo que hacer es cambiar, introducir ese cambio en este fichero, en un único fichero.

Y con esto termina la tercera parte de este vídeo. En estos tres vídeos hemos visto las tres formas que existen de usar un CSS en HTML y hemos visto que la mejor forma es utilizar la etiqueta <link>.

 
https://youtu.be/K8Zo9lO85g4


¿Quién es el padre de CSS?
 
Objetivos:
 
A estas alturas del curso debes tener claro que el padre de la Web y de HTML es Tim Berbers-Lee. ¿Y quién es el padre de CSS? El padre de CSS no es tan famoso como Tim Berners-Lee, pero eso no significa que su contribución no haya sido importante para el desarrollo de la Web.
En octubre de 1994, Håkon Wium Lie, mientras trabajaba en el CERN junto con Tim Berners-Lee, propuso un lenguaje de hojas de estilo para definir la presentación visual de las páginas web. Él no fue el único en proponer un lenguaje de hojas de estilo, pero su propuesta fue la que finalmente fue adoptada como el estándar CSS por el W3C.
Si quieres saber más cosas sobre Håkon Wium Lie y sus motivaciones para desarrollar CSS, te recomendamos que leas la entrevista CSS: It was twenty years ago today — an interview with Håkon Wium Lie que le realizaron en octubre de 2014 al cumplirse los 20 años de la publicación de su propuesta.
En la actualidad, Håkon Wium Lie ocupa el cargo de jefe de tecnología en la compañía Opera.




http://w3trv.blogspot.com.es/                          


 1  - 2 - 3

No hay comentarios:

Publicar un comentario