tema 4 css3 - freddymelgar65.files.wordpress.coma la hora de realizar el desarrollo de una página o...

Tema 4 – CSS3 Asignatura:IAT-700

Nivel: 7mo. Semestre

1. Introducción a CSS3

A la hora de realizar el desarrollo de una página o sitio web, el lenguaje de programación HTML está

limitada a la hora de aplicarle Rich Media (Anuncios con funciones avanzadas como vídeo, sonido u

otros elementos que atraigan a los usuarios.), videos y animaciones al documento o diseño de la

página.

Para solucionar el problema de limitación que tienen HTML/HTML5, nace el lenguaje CSS (no es un

lenguaje de programación en sí). CSS es la abreviatura por sus siglas en inglés (Cascading Style Sheet)

y que significa Hojas de Estilo en Cascada.

Uno de los temas actuales en el mundo del desarrollo de páginas web y la programación es el

desarrollo, empleo e implementación del HTML5 y el CSS3, es decir, la quinta revisión del lenguaje

básico de la Web y la tercera de las Hojas de Estilo en Cascada, que es el lenguaje utilizado para

diseñar la presentación de un documento estructurado en HTML o XHTML.

CSS funciona en base a reglas, declaraciones sobre estilos de uno o más elementos, por ende, las

hojas de estilo están compuestas por una o más de esas reglas, aplicadas a un archivo o documento

HTML, permitiendo controlar aspectos como colores, tipografías, bordes, entre otras cosas.

Para tener una mejor perspectiva, interpretemos la siguiente imagen:

La realidad es que se está frente a una evolución radical de los lenguajes principales de la web que

aportarán grandes mejoras, y que al mismo tiempo implicará un periodo de adaptación y

aprendizaje por parte de programadores y diseñadores.



Lo más importante que trae CSS3 es la incorporación de mecanismos que permiten controlar mejor

los estilos con los que se muestra el contenido en las páginas. Siendo más sencillo crear diseños con

múltiples columnas sin etiquetas adicionales. Dar la posibilidad que agregar reglas con cuadrículas

invisibles para maquetar páginas con un aspecto como libro o revista y jugar con el tamaño y las

propiedades de los objetos para hacer que los elementos “floten” entre las posiciones.

La novedad más importante que aporta CSS3, consiste en la incorporación de nuevos mecanismos

para mantener un mayor control sobre el estilo con el que se muestran los elementos de las páginas,

sin tener que recurrir a trucos o hacks, que a menudo complicaban el código de las webs.

1.1. Historia

CSS se introdujo en la WEB en 1.996, con la versión de HTML 4.0, para ayudar a resolver algunos

problemas que los desarrolladores WEB de ese momento estaban teniendo con la versión 3.2 de

HTML, con las etiquetas y su estructura, y esto sucede porque HTML nunca fue confeccionado para

ser un lenguaje de presentación y estilos, o para dar formatos a las páginas, por ende, era poco

práctico para crear sitios WEB.

Como consecuencias de estos inconvenientes, se pensó en crear un lenguaje de estilos que separara

el diseño de la estructura como tal y de ahí que surge CSS.

CSS, hace que el desarrollo y el mantenimiento de sitios WEB sea más eficiente, ya que los estilos se

escriben en un solo archivo CSS y se puede compartir a través múltiples páginas en un sitio como

tal.

¿Qué es CSS3?

CSS3 es la última evolución de CSS, y simplemente extiende las características y poderío de CSS 2.1.

Se ha introducido nuevas características como, ángulos redondeados, sombras, degradados, etc.,

etc., haciendolo más poderoso que su antecesor.

W3C, que escribe y mantiene los estandartes de CSS, decidió dividir CSS3, en módulos de

características individuales que suben de nivel de forma independiente, que tienen sus propias

especificaciones (módulos).

De esta forma, los módulos pueden crecer en forma independiente sin tener en cuenta la evolución

de los otros módulos.

2. Conceptos básicos, sintaxis básica y formas de aplicar CSS

2.1. Conceptos básicos

CSS3 no es mas que una serie de reglas incluídas en un fichero.

Y una regla se compone de un selector y una/s declaración/es.



La declaración es un conjunto de líneas separadas por ; (punto y coma) y cada línea (aunque pueden

estar todas seguidas) se compone de una propiedad y un valor de forma que especificamos qué

modificación visual queremos realizar (propiedad) y en qué medida (valor).

Se creará una página web standard “index.html”, desde la cual se vincularán los archivos de estilos

o CSS, además se creará un archivo llamado “estilos.css” que contendrá los estilos de la página.

<!DOCTYPE HTML> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximun-scale=1.0, minimum-scale=1.0"> <title>Aprender21 - Unidad 6 CSS3</title> <link rel="stylesheet" href="css/estilos.css"> </head> <body> <div id="contenido"> <h1 style="color: blue; margin-left: 20px">Aprender 21 - <a href="www.aprender21.com">CBTech</a></h1> <nav> <ul id="lista"> <li>Inicio</li> <li>Nosotros</li> <li>Clientes</li> <li>Contactos</li> </ul> </nav> <p class="parrafo">Somos una <span>Institución dedicada a la enseñanza </span>a través de Internet</p> <h2>Mayor seguridad, confianza y oportunidades laborales</h2> <p>El Instituto de Formación Profesional <a href="www.aprender21.com">CBTech </a>es líder en formación a distancia en el mundo hispanohablante.</p> <h2>Contáctanos</h2> <form action="#" method="post"> <div class="division"> <label for="name">Nombre</label> <input type="text" name="nombre" value="Ingrese su nombre" tabindex="1"/> </div> <div> <label for="textarea">Comentario</label> <textarea cols="40" rows="8" name?"textarea" id="textarea"></textarea> </div> <div> <input type="submit" value="Aceptar"/> </div> </form> </div> </body> </html>



@import url('normalize.css'); h2 { /*Con este formato se pueden hacer comentarios dentro de la hoja de estilo*/ background: #d0fff3; font-size: 30px; text-align: center; } .parrafo { background-color: pink; color: blue; margin: 20px; } .division { background-color: gray; color: red; margin: 20px; } #contenido { margin: 0 auto; width: 900px; } #lista { color: violet; list-style-type: none; } #contenido .parrafo span { color: green; text-decoration: underline; } div > h1 > a { color: red; font-weight: bold; } div > p > a { color: orange; font-weight: bold; } h2 + p { color: brown; font-weight: bold; } li + li { text-decoration: underline; } p ~ h2 { font-size: 40px; text-decoration: underline; }

Una página web básicamente se compone de HTML y CSS, el propósito básico de CSS es, es definir

las declaraciones de estilos a los elementos que seleccionamos del documento HTML por medio de

selectores.

Veremos los conceptos básicos de este lenguaje, veremos cómo incluir en los estilos a nuestros sitios

web y veremos cómo se compone su sintaxis básica.

2.1.1. Estilos

Primero hay que decir que hay tres formas de incluir estilos a nuestras páginas web:

1) Estilos en línea: son los estilos inline, aplicamos estilos en línea cuando agregamos los estilos CSS

dentro de una etiqueta HTML.



Por ejemplo, que estamos agregando a la etiqueta párrafo un estilo por medio del atributo “style”

y con un margen de 20 px a su izquierda (margin-left:20px).

<h1 style=”color: blue; margin-left: 20px”>Prueba CSS3</h1>

Se selecciona la etiqueta h1, y se escribe el atributo “style” y dentro de comillas se escribe el color

azul “color:blue”, se le dá un espaciado de margen izquierdo de 20px “margin-left:20px”.

Cuando se utiliza los estilos en línea (inline), se está de alguna manera mezclando contenido HTML

con CSS y los estilos que se aplican, solamente se aplicarán a la etiqueta padre que se haya

seleccionado.

Esta opción se la puede utilizar en ocasiones especiales o de emergencia, ya que, sólo se aplica a

una sola etiqueta y puede cargar mucho el documento HTML.

2) Estilos Internos: es una hoja de estilo que está incrustada dentro de un documento HTML.

Va a la derecha dentro del elemento <head>.

De esta manera se obtiene el beneficio de separar la información del estilo, del código HTML

propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una página a otra,

(esta posibilidad es difícil de ejecutar si se desea para guardar las copias sincronizadas, por lo tanto,

también es poco recomendable).

En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar

alguna característica a una página Web en específico, o en un simple fichero, por ejemplo, si se está

enviando algo a la página web.

En conclusión, los estilos internos, sólo afectarán el documento donde se está aplicando, estos

estilos los definimos cuando el documento va a tener estilos únicos y solamente se van a aplicar en

él.

Podemos definir estilos internos de esta manera, incluyendo la etiqueta “style” antes del cierre de

la etiqueta “</head>” en la cabecera del documento HTML. Solo afecta a los tags de la página que

están definidos o incrustados.

<head>

…

…

<style>

p {margin-left:20px;}

</style>

</head>



3) Estilos Externos: Se realiza por medio de la etiqueta “<link>”. Una hoja de estilo externa, es una

hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código

HTML de la página Web, yes invocada por la etiqueta “<link>”.

Esta es la manera de programar más potente, porque separa completamente las reglas de formateo

para la página HTML de la estructura básica de la página.

Este tercer método es mucho más efectivo y recomendado ya que se puede aplicar una hoja de

estilos, a múltiples documentos en el mismo sitio u otro servidor, y solamente se tiene que vincular

la hoja de estilos al documento dentro de su cabecera y utilizando la etiqueta “<link>”.



2.2. Sintaxis básica

La sintaxis básica de CSS se compone de lo que observamos a continuación:

h2 {background: #d0fff3;}

Se compone de un selector, que normalmente es un elemento HTML que se vaya a seleccionar o a

necesitar h2 , se tiene las llaves de apertura { y de cierre }, y dentro se tiene lo que es la declaración

como tal background: #d0fff3.

Esta declaración está formada también por 2 propiedades o elementos, es decir, por la propiedad

background y por el valor #d0fff3.

Cada declaración de CSS cierra con un “;” ; y después del “;”, se puede agregar más de una

declaración.



Ejemplo: agregar un tamaño de fuente con font-size: de 30px y al texto con text-align centrado

center, cerrando con punto y coma “;” , guardar y ejecutar.

Para realizar comentarios dentro del archivo de estilos CSS, se emplea como apertura /* y como

cierre */

3. Normalizar Estilos

El concepto de normalizar estilos, significa hacer que todos los navegadores interpreten los estilos

por defecto, los cuales serán implementados en muestra página web.

Para ello, se creará una librería que se denomina normalize.css y a su vez se descargará el script para

cumplir con el objetivo.

¿Porque normalizar? Y es porque los estilos que se realizan como diseñador se aplican de último,

los primeros estilos que se aplican son las del navegador y suelen ya, de por sí, tener diferencias

entre los mismos navegadores como Google Chrome, Firefox, Microsoft Edge, Opera, etc., etc., y

entre medio, están los que el propio usuario implementa sus estilos, por lo general suelen ser

tipografías (fuentes, tipos de letra, etc.) y puede ser que la página diseñada no se vea como se desea,

o debe ser.

No obstante, lo que siempre prevalece son los estilos de diseñador.

En la página que se abre para la descarga, hacer clic en Download, y el archivo que se abre, hacer

clic derecho y guardarlo como, dejar por defecto el nombre con que viene.



En el archivo index.HTML, en la parte del body, se tienen escrito párrafos, etiquetas h1, h2.

Se ejecutarán los diferentes navegadores, para ver sus diferentes aspectos.

Luego se codifica la nueva hoja de estilo, se la incluye en el head, y debe ir de primero para que

influya en el resto del diseño de la página web.

<link rel=”stylesheet” href=”css/normalize.css”>

Se vuelve a ejecutar el código en los mismos navegadores para poder diferencias los cambios que

se producen, el antes y después de la normalización.



Se puede diferenciar en este ejemplo, que los márgenes después de aplicar el “normalize.css” se

ajustan al borde derecho e izquierdo.

4. Buenas prácticas y desarrollo ordenado

La primera buena práctica, es incluir la etiqueta meta, con el atributo “charset=”UTF-8” ”, <meta

charset-“UTF-8”> que permitirá leer caracteres especiales, como son las letras ñ y las tildes,

puesto que se está empleando el idioma español, es necesario incluirlo.

Otra buena práctica recomendable, es incluir otra etiqueta meta, que sería el poder ver el área

visible del navegador (“viewport”) que se está utilizando, para que la aplicación o página web sea

más compatible en dispositivos móviles, o sea responsiva.

<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-

scale=1.0, maximun-scale=1.0, minimum-scale=1.0”>

También, es aconsejable, no tener muchas librerías css, por lo tanto, la última librería incorporada

“normalize.css” se la incluirá dentro de “estilos.css”, para ello primero se eliminará el link del

archivo HTML, denominado index.HTML, y segundo se la incorporará al archivo “estilos.css”.

Abrir la hoja de estilos principal “estilos.css” y escribir al principio del archivo el siguiente código

para incluir los estilos de “normalize.css”.

@import url(‘normalize.css’);

Como el script “normalize.css”, está alojada en la misma carpeta css que “estilos.css”, cuando se

escribe, en este caso, la url, no hay que desarrollar la ruta, para ubicar el script ya que se encuentra

en el mismo directorio.

Para validar o hacer un cotejamiento/consulta, de que alguna propiedad css, o elemento HTML, es

soportada por los navegadores, Se llama a la página “caniuse.com”.



Otra buena práctica es la tabulación o indentación, con la cual se distinguirá los elementos, padres,

hijos y hermanos.

Por ejemplo, tomando el archivo index.HTML se puede observar lo siguiente:

5. Selectores

Los selectores de clases “class” y los identificadores “id”, permiten que apuntemos específicamente

a un elemento en el documento HTML basado en sus atributos ya sea “id” o “class”.

La principal diferencia entre una “class” y una “id”, es que los id son únicos en la página y solamente

los utilizados para identificar un elemento único del documento HTML mientras que las clases se

pueden dirigir a más de un elemento en el documento HTML.

5.1. Selectores de clases (class)

Los electores de clases se dirigen a los elementos del documento HTML que se basan en su atributo

“class”.

.Nombre {

Propiedad: valor;

}

Seguido del punto(.), es como se selecciona el nombre el atributo “class”, se coloca el nombre que

está en el atributo del archivo HTML, luego se coloca entre llaves la propiedad y a continuación el

valor que se le da a esa propiedad.

Ejemplo: siguiendo con el archivo index.HTML, se modificará párrafos y etiquetas div, como se

muestra a continuación



5.2. Selectores de identificación (id)

Los selectores de identificación o “id” para su empleo solo se debe colocar el símbolo “#”

(almohadilla, numeral, gato, etc.) seguido del nombre de la identificación y entre las llaves, la

propiedad y el valor.

#Nombre {

propiedad: valor;

}

Ejemplo: dentro del cuerpo “body”, se definirá un div, que lo abarque, y se definirá una

identificación que se llamará contenido y que será único en toda la página web.

En la hoja de estilo, se pondrá un margen 0 y auto, para que centre todo el contenido de la página

web, y un ancho (width) de 900px.

El resultado sería como se ve en la imagen siguiente: el contenido de 900 pixeles y centrado. El

selector de “id”, solamente selecciona a un solo elemento en la misma página, no se puede hacer

lo mismo que se hace con los selectores de clase que se pueden aplicar a varios elementos con esos

atributos.



Otro ejemplo: a la lista se le cambiará el color por violeta y se eliminará los puntos que los identifican

como ítems.

tema 4 css3 - freddymelgar65.files.wordpress.coma la hora de realizar el desarrollo de una página o...

Documents