Scribd
Cargar
117 vistas11 páginas

CSS y Bootstrap

CSS es un lenguaje de hojas de estilo usado para controlar la presentación de documentos HTML. Permite separar el contenido de la presentación y mejora la accesibilidad y mantenimiento de páginas web. Bootstrap es un framework CSS y JavaScript que permite crear interfaces responsivas y limpias fácilmente. Usa una estructura de 12 columnas y soporte para diferentes tamaños de pantalla.

Cargado por

Liliana Ponce
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 PPSX, PDF, TXT o lee en línea desde Scribd
117 vistas11 páginas

CSS y Bootstrap

CSS es un lenguaje de hojas de estilo usado para controlar la presentación de documentos HTML. Permite separar el contenido de la presentación y mejora la accesibilidad y mantenimiento de páginas web. Bootstrap es un framework CSS y JavaScript que permite crear interfaces responsivas y limpias fácilmente. Usa una estructura de 12 columnas y soporte para diferentes tamaños de pantalla.

Cargado por

Liliana Ponce
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 PPSX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 11

CSS

BOOTSTRAP
CSS
LENGUAJE DE HOJAS DE ESTILOS
 CSS es un lenguaje de hojas de estilos creado para controlar el aspecto
o presentación de los documentos electrónicos definidos con HTML y
XHTML. CSS es la mejor forma de separar los contenidos y su
presentación y es imprescindible para crear páginas web complejas.
 Separar la definición de los contenidos y la definición de su aspecto
presenta numerosas ventajas, ya que obliga a crear documentos
HTML/XHTML bien definidos y con significado completo (también
llamados "documentos semánticos"). Además, mejora la accesibilidad
del documento, reduce la complejidad de su mantenimiento y permite
visualizar el mismo documento en infinidad de dispositivos diferentes.

¿QUÉ ES CSS?
 Al crear una página web, se utiliza en primer lugar el lenguaje
HTML/XHTML para marcar los contenidos, es decir, para designar la
función de cada elemento dentro de la página: párrafo, titular, texto
destacado, tabla, lista de elementos, etc.
 Una vez creados los contenidos, se utiliza el lenguaje CSS para
definir el aspecto de cada elemento: color, tamaño y tipo de letra del
texto, separación horizontal y vertical entre elementos, posición de
cada elemento dentro de la página, etc.

¿QUÉ ES CSS?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ejemplo de estilos con CSS</title>

<style type="text/css">

h1 { color: red; font-family: Arial; font-size: large; }

p { color: gray; font-family: Verdana; font-size: medium; }


CSS permite separar los contenidos de la página y la
</style>
información sobre su aspecto.
</head>

Utilizando CSS, se pueden establecer los mismos estilos <body>


con menos esfuerzo y sin ensuciar el código HTML de <h1>Titular de la página</h1>
los contenidos con etiquetas <font>. la etiqueta <style>
<p>Un párrafo de texto no muy largo.</p>
crea una zona especial donde se incluyen todas las
reglas CSS que se aplican en la página. </body>

</html>

FUNCIONAMIENTO BÁSICO DE CSS


Ejemplo:
Una de las principales <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
características de CSS es su
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
flexibilidad y las diferentes
<html xmlns="http://www.w3.org/1999/xhtml">
opciones que ofrece para realizar
<head>
una misma tarea. De hecho, existen
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
tres opciones para incluir CSS
en`un documento HTML.
<title>Ejemplo de estilos CSS en el propio documento</title>

<style type="text/css">

p { color: black; font-family: Verdana; }


Los estilos se definen en una zona </style>
específica del propio documento </head>
HTML. Se emplea la etiqueta <body>
<style> de HTML y solamente se <p>Un párrafo de texto.</p>
pueden incluir en la cabecera del
</body>
documento (sólo dentro de la
</html>
sección <head>).

INCLUIR CSS EN EL MISMO DOCUMENTO HTML


En este caso, todos los estilos CSS se incluyen en un archivo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
de tipo CSS que las páginas HTML enlazan mediante la
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
etiqueta <link>. Un archivo de tipo CSS no es más que un
archivo simple de texto cuya extensión es .css Se pueden <html xmlns="http://www.w3.org/1999/xhtml">
crear todos los archivos CSS que sean necesarios y cada <head>
página HTML puede enlazar tantos archivos CSS como
necesite. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ejemplo de estilos CSS en un archivo externo</title>


Si se quieren incluir los estilos del ejemplo anterior en un <link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />
archivo CSS externo, se deben seguir los siguientes
</head>
pasos:
<body>

1) Se crea un archivo de texto y se le añade solamente el <p>Un párrafo de texto.</p>


siguiente contenido: </body>
p { color: black; font-family: Verdana; }
</html>
2) Se guarda el archivo de texto con el nombre estilos.css Se
debe poner especial atención a que el archivo tenga
extensión .css y no .txt
3) En la página HTML se enlaza el archivo CSS externo
mediante la etiqueta <link>:

DEFINIR CSS EN UN ARCHIVO EXTERNO


BOOTSTRAP
FRAMEWORK CSS Y JAVASCRIPT
Es un framework CSS y Javascript diseñado para la creación de interfaces limpias
y con un diseño responsivo. Además, ofrece un amplio abanico de herramientas y
funciones, de manera que los usuarios pueden crear prácticamente cualquier tipo
de sitio web haciendo uso de los mismos.

Actualmente, Bootstrap es una de las alternativas más populares a la hora de


desarrollar tanto sitios webs como aplicaciones. Una de las principales ventajas
que ofrece es que permite la creación de sitios y App 100% adaptables a cualquier
tipo de dispositivo. Una cuestión de suma importancia teniendo en cuenta que al
día de hoy son cada vez más los usuarios que acceden a Internet a través de sus
teléfonos y tabletas.

¿QUÉ ES BOOTSTRAP?
 Entender el funcionamiento de Bootstrap es relativamente
sencillo. En líneas generales, se basa en una estructura dividida
en un total de 12 columnas que los desarrolladores pueden
gestionar en función de sus necesidades y preferencias, en
función de cuatro tamaños de dispositivo.

¿CÓMO FUNCIONA?
 Soporte
Esta es una de las principales señas de identidad de Bootstrap, y también una de sus
grandes ventajas. Ofrece un soporte extraordinario con HTML5 y CC3. Así, los usuarios
pueden hacer uso de él con una gran flexibilidad, y obteniendo unos resultados excelentes.

 Sencillo de manejar
Gracias a un sistema GRID que permite realizar un diseño haciendo uso de 12 columnas
para insertar el contenido, los usuarios pueden crear sitios web responsivo de una manera
mucho más sencilla e intuitiva.

 Imágenes
A la hora de crear contenido adaptado para dispositivos móviles, el contenido en formato
texto es muy importante, pero las imágenes también. Así, Bootstrap permite insertar
imágenes responsive de una forma muy fácil. Basta con añadir la etiqueta “img-responsive”;
de esta manera, las imágenes se adaptan de manera automática a la pantalla del dispositivo.

CARACTERÍSTICAS DE BOOTSTRAP

También podría gustarte