Scribd
Cargar
87 vistas

CSS y CSS3

CSS permite separar el contenido de una página web de su presentación mediante hojas de estilo. CSS3 añade nuevas funciones como animaciones, diseño adaptativo mediante consultas de medios, y layouts con múltiples columnas. CSS es una herramienta útil para dar estilo a páginas web de forma consistente en diferentes dispositivos.

Cargado por

Wilmer Pérez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
87 vistas

CSS y CSS3

CSS permite separar el contenido de una página web de su presentación mediante hojas de estilo. CSS3 añade nuevas funciones como animaciones, diseño adaptativo mediante consultas de medios, y layouts con múltiples columnas. CSS es una herramienta útil para dar estilo a páginas web de forma consistente en diferentes dispositivos.

Cargado por

Wilmer Pérez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

INSTITUTO UNIVERSITARIO DE TECNOLOGÍA

“JUAN PABLO PÉREZ ALFONZO”

IUTEPAL

EXTENSION SAN CRISTÓBAL – TÁCHIRA

CSS Y CSS3

Pérez Mora Wilmer José


INTRODUCCION

En las primeras versiones del HTML, el código fuente de una página web contenía
tanto la información (el contenido) como la presentación (el diseño o formato), pero ya en
1994 hubo propuestas para separar todo lo relacionado con el diseño en un documento
aparte llamado hoja de estilo, propuestas que fructificaron en 1996 con la aprobación de
la recomendación CSS 1. Así, la página web (el documento html) puede contener
únicamente información, mientras que la hoja de estilo define el formato.

A continuación, profundizaremos más en la definición de las hojas de estilo CSS y


CSS3, su constitución y como aplicarlo.
HOJA DE ESTILO CSS

Una hoja de estilo es un archivo de extensión *.CSS (CSS, Cascading Style


Sheets, en español Hojas de estilo) que contempla definiciones de formato (tipo de fuente,
tamaño, color de la fuente, color de fondo, párrafos, etc) de las distintas etiquetas que
forman una página *.HTML.

Su principal ventaja es definir un mismo aspecto para todas las páginas de un sitio
web. Se crea una hoja de estilo y se vinculan todas las páginas del sitio web a este
archivo. Cualquier cambio efectuado en la hoja de estilo afecta instantáneamente al
formato de todas las páginas vinculadas a la misma.

Cuando desde el editor HTML visual se asocia un formato a un fragmento de texto


o bien se convierte en un enlace lo que realmente se está haciendo es situar ese texto
entre etiquetas HTML para que el navegador lo interprete y visualice adecuadamente.

Algunas etiquetas HTML son:

 <body> … </body> . Contienen todos los caracteres que forman la página web.

 <h1> … </h1>, …, <h6> …</h6>. Permiten definir títulos de distintos tamaños.

 <p> … </p>. Contienen el texto de un párrafo.

 <a href=”http://...”>Texto del enlace</a>. Se utiliza para crear enlaces.

El funcionamiento de las hojas de estilo es el siguiente:


 En la página web (archivo .html) se escriben las etiquetas que definen categorías o
elementos.
 En la hoja de estilo (archivo .css) se escribe cómo queremos que sea el estilo de
presentación de las etiquetas (color, tamaño, fuente, bordes, márgenes, posición,
etc).
 En la página web se escribe qué hoja de estilo queremos utilizar.

Una hoja de estilo es un fichero de texto plano (sin formato) en el que se define el aspecto
de las etiquetas de una página web:
Una hoja de estilo está formada por una o varias sentencias:

Existen dos tipos de sentencias: las reglas-arroba y las reglas:

Cada declaración está formada por una o varias propiedades y


sus valores correspondientes. Las propiedades van separadas entre sí por puntos y
comas. El valor (o valores) van separados de las propiedades por dos puntos. En general,
si una propiedad necesita varios valores, los valores van separados por espacios en
blanco. En general, si una propiedad admite varios valores alternativos, los valores van
separados por comas.
Los enlaces a las hojas de estilo que se escriben en el atributo href pueden ser
caminos absolutos (http://... si están en otro servidor público o /... si están en el mismo
servidor), pero normalmente son caminos relativos, desde el directorio que contiene la
página web hasta el fichero CSS.

La imagen siguiente muestra cuatro ejemplos de enlaces a hojas de estilo,


dependiendo de la estructura de directorios del sitio web.

HOJA DE ESTILO CSS3

CSS3 sirve para cambiar el aspecto de un sitio web, desde las medidas para los
márgenes hasta las especificaciones para las imágenes y el texto. CSS3 funciona
mediante módulos, algunos de los más comunes son “colors”, “fonts”, “backgrounds”, etc.
Los módulos son sólo categorías en las que se pueden dividir las modificaciones que
hacemos al aspecto de nuestro sitio web. Existe una gran variedad de módulos, algunos
de los más útiles y que añaden mayor interactividad a un sitio:

Animaciones y transiciones: Probablemente una de los mayores logros de CSS3


es que ofrece la posibilidad de añadir animaciones y transiciones. Gracias a las
transiciones puedes cambiar la apariencia y el comportamiento de un elemento cada vez
que se da un cambio de estado. Por otro lado, las animaciones permiten que tanto la
apariencia como el comportamiento de un elemento se altere en base a fotogramas.

De esta manera, puedes añadir mayor interactividad a tu sitio sin recurrir a


JavaScript o Flash, sólo con el poder de CSS3.

Layout con columnas: Todas las páginas web trabajan con columnas. De hecho,
muchos diseños se hacen en base a una cuadrícula y como mínimo se emplean dos
columnas. En el caso de layout tipo revista, el número de columnas suele ser mayor. Sin
importar el número de columnas bajo el cual decidas organizar tu sitio, puedes crear un
layout con diversas columnas gracias a la propiedad “Multicolumn Layout” de CSS3. Esta
propiedad no sólo te permite especificar el número de columnas de tu layout, sino también
el ancho de cada columna.

CSS3 Y EL DISEÑO ADAPTATIVO

Una de las mayores características de CSS3 que permite maximizar la experiencia


de usuario en los dispositivos móviles es el uso de Media Queries. Las Media Queries o
consultas de medios en CSS te permiten añadir estilos o reglas específicas según el
tamaño de pantalla, la dirección del dispositivo o la densidad de pixeles.

Emplear los media queries te permite crear una experiencia mejorada según las
características de los dispositivos. Y es definitivamente algo que los usuarios de
dispositivos móviles esperan de los sitios web a los que accedan: que ofrezca la misma
experiencia que los ordenadores. CSS3 y sus Media Queries te ayudan a alcanzar este
objetivo.
CONCLUSIÓN

CSS es un sistema de reglas o definiciones con las cuales podemos configurar y darle
un estilo único a múltiples paginas HTML. Posteriormente con las nuevas versiones, como
CSS3, múltiples funciones han sido agregadas a estas reglas para avanzar al mismo paso
que lo hacen las tecnologías actuales, como la implementación de animaciones, cambios
en tiempo real, entre otras.

Este sistema es muy útil, y es utilizado en gran cantidad de páginas actualmente.


BIBLIOGRAFIA

  ÁLVAREZ, Miguel Ángel. CSS, hojas de estilos. 


http://www.desarrolloweb.com/manuales/2/
 BARCIA, Diego. ¿Qué es CCS?
 http://www.maestrosdelweb.com/editorial/introcss/
 Marco Bartolomé. Páginas web HTML y hojas de estilo CSS
https://www.mclibre.org/consultar/htmlcss/css/css-que-es.html

También podría gustarte