Métodos y Herramientas de Ingeniería

de Software
ACTIVIDAD 1
CCS 3
24 DE MAYO 2017

Profesor:
GUERRA LÓPEZ IVÁN ISAÍ.

José de Jesús Jimenez Servín

UPQ ING. EN COMPUTACIONALES | S132-6
1. Crea una investigación de lo que solicita:
¿Qué es CSS ?
CSS significa Cascade Style Sheets, también llamado Hojas de Estilo en Cascada.
CSS es un lenguaje de marcado que se emplea para dar formato a un sitio web. Es decir, funciona
en conjunto con los archivos HTML. Por esta razón, para crear un sitio web como HTML y CSS 3.

Se puede aplicar en la misma hoja en la que estás desarrollando un documento HTML, pero por
motivos de productividad se suele realizar en un documento aparte con la extensión .css.

Este documento se puede vincular a cada página HTML que conforme el sitio web, es por ello que
es más útil realizar los estilos por separado.Es la tecnología desarrollada por el World Wide Web
Consortium (W3C) con el fin de separar la estructura de la presentación.

- Para qué sirve ?

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 módulos, pero mencionaremos algunos de los más útiles y que
añaden mayor interactividad a un sitio:
Animaciones y transiciones en CSS.

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.

José de Jesús Jimenez Servín

UPQ ING. EN COMPUTACIONALES | S132-6
Gradientes

CSS3 no sólo te permite modificar el color de los elementos que conforman tu

página, sino que también te permite crear gradientes.

Puedes crear gradientes lineales especificando la dirección o añadiendo un

ángulo bajo el cuál se creará la gradiente.

Rotación de elementos

La propiedad “Transform” de CSS3 no sólo te permite rotar elementos, sino

también cambiar su tamaño y moverlos. Esta transformación puede ser aplicada
a imágenes, botones y cualquier otro elemento 2D.

Uso de fuentes

Probablemente una de las más grandes adiciones de CSS es el poder para

poder añadir fuentes desde librerías como Google Fonts. En esta librería tienes
a tu disposición un gran número de fuentes gratuitas que puedes colocar en tu
archivo CSS sin mayores problemas.

-Elementos de CSS
Los elementos en línea definidos por HTML
son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kb
d, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.

Los elementos de bloque definidos por HTML

son: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, is
index, menu, noframes, noscript, ol, p, pre, table, ul.

Los siguientes elementos también se considera que son de

bloque: dd, dt, frameset, li, tbody, td, tfoot, th, thead, tr.

Los siguientes elementos pueden ser en línea y de bloque según las

circunstancias: button, del, iframe, ins, map, object, script.

José de Jesús Jimenez Servín

UPQ ING. EN COMPUTACIONALES | S132-6
 Selectores
1. *
*{
margin: 0;
padding: 0;
}
Comencemos con los más obvios, para los principiantes, antes de continuar con selectores
más avanzados.
El asterisco se centrará en cada uno de los elementos en la página. Muchos desarrolladores
usarán éste truco para poner a cero el margin y padding. . Mientras que esto está
ciertamente bien para pruebas rápidas, yo te recomendaría que nunca uses esto en tu
código final. Esto añade mucho pesoen el navegador y es innecesario.

2. #X
#container {
width: 960px;
margin: auto;
}
Prefijar el símbolo numérico a un selector nos permite seleccionar por id. T. Éste es
fácilmente el uso más común, sin embargo te cuidado cuando uses selectores id .
Pregúntate a ti mismo: ¿necesito absolutamente aplicar un id a este elemento para
afectarlo?
Los selectores id son rígidos y no pueden ser re-utilizados. De ser posible, primero trata de
usar un tag name, uno de los nuevos elementos en HTML5, incluso una pseudo-clase.
3. .X
.error {
color: red;
}
Éste es un selector de clase class La diferencia entre ids y class es que, con el último, puedes
seleccionar varios elementos. Usa classes cuando quieras que un estilo aplique a un grupo
de elementos. De manera alternativa, usa ids para encontrar una aguja en un pajar y
estilizar sólo ése elemento en específico.

4. X Y
li a {
text-decoration: none;
}
El siguiente selector más común es el selector descendiente. Cuando necesites ser más
específico con tus selectores, usas éstos. Por ejemplo, ¿que tal sí, en lugar de
seleccionar todas las etiquetas anchor, sólo necesitas los anchors que están dentro de una
unordered list?. Aquí es cuando usarías específicamente un selector descendiente.

José de Jesús Jimenez Servín

UPQ ING. EN COMPUTACIONALES | S132-6
Pro-tip - Si tu selector luce como X Y Z A B.error, you're doing it wrong. lo estás haciendo
mal. Siempre pregúntate si es absolutamente necesario aplicar todo ese peso.

5. X
a { color: red; }
ul { margin-left: 0; }
¿Qué pasa si quieres seleccionar todos los elementos en una página, de acuerdo a su tipo
( type), en vez de un nombre de id o clase. Mantenlo simple, y usa un selector de tipo. Si
necesitas seleccionar todas las unordered lists, usa ul {}.

6. X:visited and X:link

a:link { color: red; }
a:visted { color: purple; }
Usamos la pseudo clase :link para seleccionar todas las etiquetas anchor a las que aún no se
les ha dado click.
De manera alternativa, también tenemos la pseudo-clase :visited, la cual, tal como
esperabas, nos permite aplicar un estilo específico sólo a las etiquetas anchor en la página a
las que se les ha dado click, o han sido visitadas.

7. X + Y
ul + p {
color: red;
}
Este se conoce como un selector adyacente. Seleccionará solamente el elemento que es
inmediatamente precedido por el primer elemento. En éste caso, solo el primer párrafo
después de cada ul tendrá texto rojo.

8. X > Y
div#container > ul {
border: 1px solid black;
}
La diferencia entre el estándar X Y y X > Y es que el último sólo seleccionará hijos directos.
Por ejemplo, considera el siguiente código.
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>

José de Jesús Jimenez Servín

UPQ ING. EN COMPUTACIONALES | S132-6
Un selector de #container > ul solo afectará los uls que sean hijos directos
del div con id de container. No afectará, por ejemplo, el ul que sea hijo del primer li.
Por ésta razón, hay beneficios de desempeño por usar el elemento de hijo. De hecho, es
recomendable particularmente cuando se trabaja con motores de selectores CSS basados
en JavaScript.

9. X ~ Y
ul ~ p {
color: red;
}
Este elemento “hermano” es similar a X + Y, sin embargo, es menos estricto. Mientras que
un selector adyacente (ul + p) sólo selecciona el primer elemento que
es inmediatamente precedido por el primer selector, éste es más generalizado.
Seleccionará, refiriéndonos al ejemplo de arriba, cualquier elemento p, siempre y cuando
estén después de un ul.

10. X[title]
1 a[title] {
2 color: green;
3 }
Denominado como un selector de atributos, en nuestro ejemplo de arriba, esto sólo
seleccionará las etiquetas anchor que tengan un atributo title. Las etiquetas anchor que no
lo tengan no recibirán éste estilo en particular. Pero,¿ y qué si necesitas ser más específico?
Bueno…

 Atributos

José de Jesús Jimenez Servín

UPQ ING. EN COMPUTACIONALES | S132-6
  Valores

- Sintaxis
Sintaxis de css 3 como ejemplo.

José de Jesús Jimenez Servín

UPQ ING. EN COMPUTACIONALES | S132-6
- Ejemplos

José de Jesús Jimenez Servín

UPQ ING. EN COMPUTACIONALES | S132-6
b. Crea un Esquema de llaves con las ideas principales de la
investigación.

Ccs 3

Selectores Atributos Valores

h1 {color: #
backgroound codes, urls
90000}

José de Jesús Jimenez Servín

UPQ ING. EN COMPUTACIONALES | S132-6