SubNiveles del lenguaje

CSS  Introducción. El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de Internet y el crecimiento exponencial del lenguaje HTML para la creación de documentos web. La dificultad de no existir un estándar para la definición de estilos que se ajusten a las carácterísticas de los navegadores, imposibilitaba la creación de documentos con la misma apariencia a visualizarse sobre éstos.  Integración con CSS y HTML Una página
WEB es un documento de texto, escrito por ejemplo en lenguaje HTML. Por otro lado existe el Lenguaje o código CSS, que unido al código HTML permite darle forma, color, posición; en resumen darle estilo y otras carácterísticas a una página.  CSS: Cascading Style Sheets (Hojas de Estilo en Cascada) Es un lenguaje que describe el estilo de un documento HTML. Es decir, describe como se deben mostrar los elementos HTML, en la pantalla, en papel u otros medios. Estas hojas de estilo pueden crearse de forma externa en archivos con extensión .Css . En resumen, aplicar estilos (colores, formas, márgenes, etc...) a uno o varios documentos (generalmente documentos HTML, páginas webs) de forma masiva. La idea de CSS es la de utilizar el concepto de separación de presentación y contenido, intentando que los documentos HTML incluyan sólo información y datos, relativos al significado de la información a transmitir (el contenido), y todos los aspectos relacionados con el estilo (diseño, colores, formas, etc...) se encuentren en un documento CSS independiente. Esto proporciona ventajas como:  Las modificaciones visuales se hacen en un sólo lugar, sin necesidad de editar todos los documentos HTML en cuestión por separado.  Se reduce la duplicación de estilos en diferentes lugares, por lo que es más fácil de organizar y hacer cambios. Además, al final la información a transmitir es considerablemente menor (las páginas se descargan más rápido).  Es más fácil crear versiones diferentes de presentación para otros tipos de dispositivos: tablets, smartphones o dispositivos móviles, etc...  ¿CSS Cómo? Una vez que el navegador lea una hoja de estilo, formateará el documento HTML según la información colocada en la hoja de estilo. Hay tres formas de insertar una hoja de estilo: 1. Hoja de estilo Interno 2. Hoja de estilo Externo 3. Estilo en línea  Hoja de estilo interno Una de las formas para incluir el código CSS, es directamente en la cabecera del documento HTML. Es útil cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web. El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, ya que para ello es necesario modificar todas las páginas que incluyen el estilo que se va a modificar.  Hoja de estilo externa Con el uso de una hoja de estilo externa, se puede cambiar el aspecto de un sitio web completo cambiando solo un archivo.
En esta modalidad, todos los estilos CSS deben ser incluidos en un archivo de tipo CSS (Extensión .Css), y que las páginas HTML enlazan mediante la etiqueta . Este archivo .Css no es más que un archivo simple de texto. Se pueden crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite. Sentencia para integrar un archivo .Css con el archivo html:
Al cargar la página HTML en el navegador, éste descarga los archivos .Css externos y que están enlazados al documento HTML mediante la Etiqueta y procede a aplicar los estilos a los diferentes contenidos de la página. La etiqueta incluye cuatro atributos cuando enlaza un archivo CSS: 1. Rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet 2. Type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css 3. Href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web. 4. Media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Más adelante se explican en detalle los medios CSS y su funcionamiento.  Hoja de estilo en línea En este tipo se aplican los estilos directamente en las propias etiquetas, a través del atributo style.

Hola! Amigo lector

En nuestro caso, estudiaremos el lenguaje de hoja de estilo con el uso de archivos externos. (Tendremos un archivo .Html y un archivo .Css)  Estructura CSS. Se basa en un conjunto de Reglas, que constan del siguiente formato.  Selector: es el elemento
HTML que se va a seleccionar del documento para aplicarle un estilo concreto.  Propiedad: es una de las diferentes carácterísticas que brinda el lenguaje CSS.  Valor: Cada propiedad CSS tiene una serie de valores concretos, con los que tendrá uno u otro comportamiento. Una buena práctica es organizar el código mediante espacios, con una propiedad por cada línea. Ejemplo: Selector Regla h1 { color: blue; Font-size: 12 px ; } Propiedad Valor El último ; no es obligatorio por lo que se puede omitir. En este caso, los Encabezados h1 serán de color azul (blue) y de tamaño 12px. El selector apunta al elemento HTML que se desea estilizar. El bloque de declaración contiene una o más declaraciones separadas por punto y coma. Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos. Una declaración CSS siempre termina con un punto y coma, y los bloques de declaración están rodeados por llaves  Tipos de Selectores. Selector de Elemento. El selector de elementos selecciona elementos en función del nombre del elemento. P { color: red; text-align:

Center

} En este caso, selecciona todos los elementos

y los alinea centrados y de color rojo. Selector de id. Utiliza el atributo id de un elemento HTML, para seleccionar un elemento especifico. El ID de un elemento debe ser único dentro de una página, por lo que el selector de ID se utiliza para seleccionar un elemento único. Para seleccionar un elemento con un ID específico, se debe escribir un carácter de hash (#), seguido del ID del elemento. #para1 { text-align: center; color: red; } Selector de clase El selector de clase selecciona elementos con un atributo de clase específico. Para seleccionar elementos con una clase específica, se debe escribir un carácter de punto (.) Seguido del nombre de la clase. .Center { text-align: center; color: red; } Por ejemplo: p.Center { text-align: center; color: red; } En el ejemplo anterior, solo los elementos

con clase = "center" se alinearán en el centro.

Este párrafo es de prueba.

Selector de Agrupación: Si se tienen elementos (Por ejemplo : h1,h2,h3,h4,h5,h6) con las mismas definiciones de estilo, se pueden agrupar estos selectores para minimizar el código. Así, h1,h2,p{ text-align: center; color: red; } Comentarios CSS. Los comentarios se utilizan para explicar el código, y pueden ser útiles cuando edite el código fuente en una fecha posterior. Los comentarios son ignorados por los navegadores. Un comentario de CSS comienza con / * y termina con * /. Los comentarios también pueden abarcar múltiples líneas. Ejemplo: p { color: red; /* This is a single-line comment */ text-align: center; } /* This is a multi-line comment */