UNIVERSIDAD MARIANO GALVEZ DE GUATEMALA

SEDE HUEHUETENANGO

INGENIERIA EN SISTEMAS DE INFORMACIÓN Y CIENCIAS DE LA

COMPUTACIÓN

ING. KELVIN ALEJANDRO CASTILLO RAMIREZ

DESARROLLO WEB
TEMA: CSS

ESTUDIANTES CARNET
HILKER DANIEL CIFUENTES RIVAS 0904-16-14995
ELMER BRAYTON SAMAYOA CAMPOSECO 0904-16-2182
JORGE MARIO HERRERA ALFARO 0904-16-4265
MAYCOL ALEXANDER MENDOZA PUENTES 0904-16-1481
NOE MARCO ANTONIO VILLATORO AGUSTIN 0904-16-7968

VIII CICLO

SECCIÓN “A”

2019
 INDICE
QUE ES CSS...................................................................................................................................1
COMO FUNCIONA CSS................................................................................................................2
COMO APLICAR CSS EN HTML................................................................................................3
CSS PARA APLICAR A DUN DISEÑO RESPONSIVO..............................................................5
SINTAXIS.......................................................................................................................................6
EJEMPLOS DE CSS.......................................................................................................................8
CSS FRAMEWORKS...................................................................................................................10

1
QUE ES CSS

Las siglas CSS Cascading Style Sheets significan, Hojas de estilo en cascada y parten de
un concepto simple pero muy potente: aplicar estilos, colores, formas, márgenes a uno o
varios documentos generalmente documentos HTML, páginas webs de forma masiva.
Se le denomina estilos en cascada porque se aplican de arriba a abajo (siguiendo un
patrón denominado herencia que trataremos más adelante) y en el caso de existir
ambigüedad, se siguen una serie de normas para resolverla.

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.

De esta forma, se puede unificar todo lo relativo al diseño visual en un solo documento
CSS, y con ello, varias ventajas:
Si necesitamos hacer modificaciones visuales lo hacemos en un sólo lugar y no tenemos
que 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.

2
COMO FUNCIONA CSS

Cuando un navegador muestra un documento, debe combinar el contenido del documento

con la información de su estilo. Se procesa el documento en dos etapas:
El navegador convierte el lenguaje de marcado markup y el CSS en el DOM Document
Object Model. El DOM representa el documento en la memoria del ordenador. Combina
el contenido del documento con su estilo.
El navegador muestra el contenido de la DOM.
Un lenguaje de marcado utiliza elementos para definir la estructura del documento. Usted
marca un elemento utilizando etiquetas, que son cadenas que comienzan con '<' y termina
con '>'. La mayoría de los elementos tienen un par de etiquetas, una etiqueta de inicio y
una etiqueta de cierre. Para la etiqueta de inicio, coloque el nombre del elemento entre '<'
y '>'. Para la etiqueta final, coloque un '/' después de '<' y antes del nombre del elemento.
Dependiendo del lenguaje de marcado, algunos elementos tienen sólo una etiqueta de
inicio, o una sola etiqueta donde el '/' viene después del nombre del elemento. Un
elemento también puede ser un contenedor e incluir otros elementos entre su etiqueta de
inicio y la etiqueta de cierre. Sólo recuerda cerrar siempre las etiquetas dentro del
contenedor.
Un DOM tiene una estructura en forma de árbol. Cada elemento, atributo y extensión de
texto en el lenguaje de marcado se convierte en un nodo de la estructura de árbol. Los
nodos se definen por su relación con otros nodos DOM. Algunos elementos son los
padres de los nodos secundarios, y los nodos secundarios tienen hermanos.
Comprender el DOM le ayuda a diseñar, depurar y mantener su CSS, porque el DOM es
donde su CSS y el contenido del documento se reúnen.
Ejemplo
En el documento de ejemplo, las etiqueta <p> y su etiqueta de cierre </ p> crean un
contenedor:
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>

3
El uso del Inspector DOM
Para analizar un DOM, se necesita un software especial. Usted puede usar el
complemento de  Mozilla DOM Inspector (DOMi) para analizar un DOM. Usted sólo
tendrá que instalar el complemento (ver más detalles abajo).
Utilice el navegador Mozilla para abrir el documento en versión HTML.
Desde la barra de menú de su navegador, selecciona Herramientas> Inspector DOM, o
Herramientas> Desarrollo Web> Inspector DOM.

COMO APLICAR CSS EN HTML

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

4
Este método se emplea 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, es necesario modificar todas las páginas que incluyen el estilo que se va a
modificar.
Los ejemplos mostrados en este libro utilizan este método para aplicar CSS al contenido
HTML de las páginas. De esta forma el código de los ejemplos es más conciso y se
aprovecha mejor el espacio.
Incluir CSS en los elementos HTML
El último método para incluir estilos CSS en documentos HTML es el peor y el menos
utilizado, ya que tiene los mismos problemas que la utilización de las etiquetas <font>.

Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en
determinadas situaciones en las que se debe incluir un estilo muy específico para un solo
elemento concreto.
Antes que nada, debemos ser conscientes de la diferencias entre los navegadores,
principalmente haciendo alusión a las versiones antiguas de Internet Explorer.
Para evitar que cada navegador interprete un modelo de caja diferente, deberemos indicar
con el atributo box-sizing cómo debe de comportarse. Por esta razón, si no lo definimos
en todo el sitio, las páginas podrían verse de forma diferente en cada uno de los
navegadores.

5
CSS PARA APLICAR A DUN DISEÑO RESPONSIVO

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas
HTML enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un
archivo simple de texto cuya extensión es .css Se pueden crear todos los archivos CSS
que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como
necesite.
Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se deben
seguir los siguientes pasos:

Se crea un archivo de texto y se le añade solamente el siguiente contenido:

p { color: black; font-family: Verdana; }
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
En la página HTML se enlaza el archivo CSS externo mediante la etiqueta <link>:

Cuando el navegador carga la página HTML anterior, antes de mostrar sus contenidos
también descarga los archivos CSS externos enlazados mediante la etiqueta <link> y
aplica los estilos a los contenidos de la página.
Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un archivo CSS:
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
type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los
archivos CSS su valor siempre es text/css
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.
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.
De todas las formas de incluir CSS en las páginas HTML, esta es la más utilizada con
mucha diferencia. La principal ventaja es que se puede incluir un mismo archivo CSS en
multitud de páginas HTML, por lo que se garantiza la aplicación homogénea de los
mismos estilos a todas las páginas que forman un sitio web.

6
Con este método, el mantenimiento del sitio web se simplifica al máximo, ya que un solo
cambio en un solo archivo CSS permite variar de forma instantánea los estilos de todas
las páginas HTML que enlazan ese archivo.
En este caso, para incluir en la página HTML los estilos definidos en archivos CSS
externos se utiliza una regla especial de tipo @import. Las reglas de tipo @import
siempre preceden a cualquier otra regla CSS (con la única excepción de la regla
@charset).
La URL del archivo CSS externo se indica mediante una cadena de texto encerrada con
comillas simples o dobles o mediante la palabra reservada url(). De esta forma, las
siguientes reglas @import son equivalentes:
@import '/css/estilos.css';
@import "/css/estilos.css";
@import url('/css/estilos.css');
@import url("/css/estilos.css");

SINTAXIS

En el lenguaje CSS se define casi todo el aspecto visual de un sitio. Se escribe en un

único archivo usualmente llamado styles.css y todos los archivos HTML tienen un
vínculo hacia él.
Sintaxis de una regla CSS
Todo el código CSS se compone de reglas. Una regla es el conjunto de propiedades que
se van a aplicar a un elemento determinado.
Una regla CSS siempre tiene un selector el elemento al que quiero modificar y una
declaración las características que le quiero agregar o cambiar. La declaración va
encerrada entre llaves { } y dentro de ella se escriben todas las propiedades con sus
valores, que modificarán al selector. Cuando hay más de una propiedad, se separan con
punto y coma.

7
La sintaxis se ve de esta manera: 

Un archivo CSS puede tener un número ilimitado de reglas CSS y dentro de cada regla
podemos escribir tantas propiedades como necesitemos. Una misma regla se puede
utilizar sobre varias etiquetas del HTML

Tipos de Selectores
El selector es la parte de la regla que asocia un elemento HTML con su diseño.
Básicamente los selectores se pueden clasificar en 4 grupos: de etiqueta, de clase,
de id y compuestos.
Al primero al que recurrimos es al selector de etiqueta, porque aprovechamos las
etiquetas que ya están escritas en el html. Por ejemplo: si en el HTML tenemos la
etiqueta <body>, para crear una regla en CSS simplemente escribo el nombre de la
etiqueta y coloco las propiedades entre las llaves: body {}.
Pero cuando tenemos varias etiquetas iguales y sólo queremos darle diseño a una de ellas,
entonces necesitamos identificarla de alguna manera y tenemos dos opciones: a esa
etiqueta en el HTML le podemos agregar el atributo class="" por ejemplo:<article
class="destacado"> y en ese caso en el CSS el selector comienza con un
punto: .destacado {} o el atributo id="" por ejemplo: <article id="destacado"> entonces el
selector comienza con numeral: #destacado {}
La diferencia entre un estilo de clase y uno de id es que en un archivo HTML puede haber
varias etiquetas con el mismo class, en cambio no puede haber dos etiquetas con el
mismo id.
Muchas veces el selector simple no nos alcanza para identificar un elemento en particular.
Por ejemplo si queremos definir un diseño para la etiqueta <a> del menú principal pero

8
no queremos que afecte el diseño de las otras etiquetas <a>del sitio. Entonces usamos un
selector compuesto. En este caso el selector descendente, por ejemplo: nav a {}.
Con este selector estamos diciendo que la regla se aplica a todas las etiquetas <a> que se
encuentren dentro de una etiqueta <nav>. Entonces esa regla no afecta al resto de los
enlaces del sitio.

EJEMPLOS DE CSS

Selectores
selectores CSS se utilizan para "encontrar" los elementos HTML que desea estilo.
Ejemplo
Aquí, todos los <p> elementos de la página serán centro alineado, con un color rojo
texto: 
p {
  text-align: center;
  color: red;
}
Color de fondo CSS
Puede establecer el color de fondo de los elementos HTML:
Ejemplo

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Lorem ipsum...</p>

Color de texto CSS

Puede establecer el color del texto:
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

CSS background-color

9
La background-colorpropiedad especifica el color de fondo de un elemento.
Ejemplo
El color de fondo de una página se establece así:
body {
  background-color: lightblue;
}

Margen - Lados individuales

CSS tiene propiedades para especificar el margen para cada lado de un elemento:
Ejemplo
Establecer diferentes márgenes de los cuatro lados de un elemento <p>:
p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Relleno - Lados individuales

CSS tiene propiedades para especificar el relleno para cada lado de un elemento:
padding-top
padding-right
padding-bottom
padding-left
Ejemplo
Establecer diferentes relleno para los cuatro lados de un elemento <div>:  
div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;

10
  padding-left: 80px;
}

El modelo de caja CSS

Todos los elementos HTML pueden ser considerados como cajas. En CSS, el término
"modelo de caja" se usa cuando se habla de diseño y el diseño.
El modelo de caja CSS es esencialmente una caja que envuelve cada elemento HTML. Se
compone de: márgenes, bordes, el relleno y el contenido real. La imagen de abajo ilustra
el modelo de caja:
Ejemplo
Demostración del modelo de caja:
div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Elementos centro Alinear

Para centrar horizontalmente un elemento de bloque (como <div>), el uso margin: auto;
Ejemplo
.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

CSS FRAMEWORKS

Bootstrap

11
Una iniciativa de Twitter, Bootstrap se atribuye el mérito de introducir un diseño
receptivo a gran escala. Fue el primer marco para promover la filosofía de "móvil
primero". Ya no se diseñaba para pantallas más pequeñas un proyecto separado en sí
mismo; todo lo que tenía que hacer era incluir las clases de Bootstrap relevantes, y el
diseño se ajustaría automáticamente para diferentes tamaños de pantalla (bueno, casi).

Foundation
Si las tecnologías fueran religiones, los chicos de Foundation y Bootstrap estarían
dispuestos a la sangre del otro. Ninguna discusión sobre marcos CSS modernos está
completa sin mencionar Foundation, así que aquí vamos.

Sin embargo, los partidarios del marco de la Fundación saben que hay al menos algo de
verdad en eso. Foundation fue desarrollada para ir naturalmente con el marco de Rails, y
varios de los principios rectores "similares al zen" de Rails se pueden ver en el trabajo.

Si bien Foundation es mucho menos popular que Bootstrap, es un secreto comercial para
muchos desarrolladores expertos de front-end.

12
Bulma
Bulma es un participante relativamente nuevo en el campo de batalla de los frameworks
CSS y se ha hecho un nombre en poco tiempo. Su atractivo radica en un enfoque estricto,
solo CSS no hay componentes de JavaScript y valores predeterminados elegantes, que es
algo con lo que muchos desarrolladores con buen ojo para el diseño tienen problemas
cuando trabajan con Bootstrap.

Gran parte del impulso de Bulma proviene de las altas tasas de adopción con la
comunidad Laravel un marco web PHP, en caso de que no lo supiera), que estoy seguro
es más o menos lo que ayudó a Vue.js a alcanzar la cima de la popularidad entre los
marcos de JavaScript.

UIkit
Lo que viene a la mente al pensar en UIkit es el minimalismo. Minimalismo no en
características (de hecho, ofrece quizás la mayoría de las características de todos los
marcos), sino en diseño. Si lo tuyo son los diseños súper limpios, elegantes y que no son
tímidos, UIkit te tiene cubierto.

13
Semantic UI
Otro competidor en la carrera es la interfaz de usuario semántica, que trata de distinguirse
con muchos temas y personalizaciones. Hay más de 3000 variables de temática, lo que
resulta en una amplitud masiva. O eso dicen los documentos.

Bootstrap 4 cubre todo esto y también es totalmente personalizable, pero una ventaja de
la interfaz de usuario semántica es que da como resultado diseños bonitos por defecto.
Aún así, no es el mejor aspecto de la caja, por eso lo puse más adelante en mi lista.

14