CSS3

INSTITUTO SUPERIOR TECNOLÓGICO JUAN DE VELASCO

GRUPO 1 CSS3

Diseño y Mantenimiento de Redes

Integrantes:Cajilema Quijosaca Edwin Wladimir Gualancañay Nono Wilmer Lenin Guaman Velata Milanddy Estefania Vallejo Gaona Nataly Estefanía

CSS3

Es una tecnología que ha tenido una evolución en el tiempo, como su propio nombre indica. CSS ha ido evolucionando desde hace 25 años a la versión actual, que es CSS3, pero su función es la misma, sirve para dar estilos visuales a las páginas web.

Fundamentos

Cuando desde un navegador, por ejemplo, Chrome, solicitamos una página a través de una dirección, por ejemplo, http://..../index.html, esta petición va a un servidor web, que nos devuelve la página que se ha solicitado. Para aplicar estilos en las páginas HTML, se utiliza un fichero aparte, una hoja de estilos con la extensión .CSS, por lo que cuando estos dos documentos llegan al navegador, va a leer el documento HTML, le aplica los estilos CSS y lo muestra.

Relación entre HTML y CSS

Lo principal que hay que saber es que estos dos lenguajes son la base de cualquier página web. HTML es un lenguaje de marcado de hipertexto que se escribe con elementos, estos pueden ser etiquetas, contenido o atributos. Es lo que le da instrucciones al navegador sobre cómo estructurar y mostrar el contenido. Por otro lado, el CSS da instrucciones sobre los detalles de diseño de todo el sitio web. El HTML y el CSS son herramientas complementarias e indispensables para el diseño web adaptable.

JAVASCRIPT

Ni HTML ni CSS son lenguajes de programación. Para conseguir que un sitio o página web muestre contenido actualizado en el momento, animaciones 2D o 3D, o permita interactuar con mapas hace falta dar instrucciones con un lenguaje de programación como es JavaScript. Es el lenguaje que permite realizar acciones complejas dentro de una página web. Este esquema sirve para entender qué aporta cada lenguaje en la construcción de una página web:

Qué es un selector y tipos

Un selector es el nombre que tiene un determinado elemento dentro del código web. Conociendo el nombre del selector puedes modificar ese determinado elemento a tu antojo. Hay dos tipos de selectores: identificadores y clases.• Un identificador es el nombre de un elemento concreto que no se repite más que una vez en toda la web. Es un nombre único, y aplicándole una modificación vas a modificar únicamente este elemento. Los identificadores se definen en la hoja de estilos CSS con # (almohadilla), y dentro del HTML aparecen escritos así: id=»nombre del identificador». • Una clase es el nombre de una regla que se repite en varios sitios de tu web. Por ejemplo, puedes tener una clase llamada negro que puedes aplicar tanto a textos como a botones para que se pongan de este color. Es decir, defines un estilo genérico que puedes aplicar a cualquier elemento cuantas veces quieras. Las clases se definen en CSS con un . (punto) y dentro del código HTML se aplican así: class=»nombre de la clase».

Qué es una propiedad

Una propiedad es la modificación o modificaciones concretas que aplicas en la hoja de estilos CSS a un elemento de tu web mediante un selector. Por ejemplo, al selector llamado #boton (que da estilo a un tipo concreto de botón dentro de mi sitio) le puedo aplicar las siguientes propiedades de color, ancho, relleno y borde:• background-color: #ccc; (color de fondo gris especificado en código hexadecimal) • color: #fff; (color del texto dentro de la caja en blanco) • width: 100px; (ancho de 100 píxeles) • padding: 20px; (relleno o margen interior de 20 píxeles por cada lado) • border: 1px solid #000; (borde de color negro continuo de 1 píxel de grosor) • border-radius: 5px; (redondeado de un ángulo de 5 píxeles en todas las esquinas de la caja)

Códigos CSS más usados

Las propiedades y sus atributos más comunes para modificar la apariencia de tus textos web son las siguientes:

• font-family
• font-style:
• font-variant
• font-weight
• font-size
• text-indent

• text-align
• text-decoration
• letter-spacing
• text-transform
• line-height
• vertical-align

El procedimiento de ambos ejemplos de CSS fue realizado con la investigación que se hizo, y con los temas que se vio en clases. Son ejemplos sencillos, pero demuestra el trabajo realizado en CSS3.

Conclusiones

Recomendamos tener una planificación previa, ya que eso nos ayuda a facilitar el trabajo.

Concluimos que al momento de diseñar una pagina web, es fundamental tener en cuenta las etiquetas necesarias para dicho trabajo, ya que no solo será el archivo index.html, sino que tambien se tendrá que crear otros archivos como, style.css y script.js.

Tener un buen orden de los archivos que formaran parte de la página.

• Una buena estructura de códigos para que sea mejor la visualización al edita el HTML.

¡Muchas gracias!