PRIMEROS PASOS CON CSS

CSS (en inglés Cascading Style Sheets) es lo que se denomina lenguaje de hojas de estilo en
cascada y se usa para estilizar elementos escritos en un lenguaje de marcado como Html.
Formas de integrar estilos css en tus archivos html::
:
1. Utilizar estilos a nivel local:
Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para
una sola etiqueta en tu archivo html principal

2. Utilizar estilos a nivel documento

En un documento HTML o página, se puede definir la forma, en un pequeño trozo de
código en la cabecera, a toda la página,para lo cual utilizamos la etiqueta <style><style/>
en la cabecera del etiqueta(body) ,donde se puede escribir código css.
3. Utilizar estilos a nivel de sitio (link):
Los estilos pueden especificarse desde un archivo separado con extensión .css,para
poder vincular el archivo css con el html vamos a utilizar la etiqueta Link.donde tienes los
siguientes atributos:
● Atributo href. Especifica la dirección URL del archivo que se desea vincular. del
archivo css que se desea vincular.
● Atributo rel. Indica la naturaleza de relación entre el documento actual y el
archivo vinculado por la URL. Cuando el archivo vinculado contiene cascadas de
estilo, el valor es stylesheet.

● Atributo type. Especifica el tipo MIME del archivo vinculado, para las hojas de
estilo el valor es text/css.

4. Clases y el Identificador (class e id)

● Clases
Para seleccionar todos los elementos que tienen la misma clase
podemos utilizar como prefijo un punto ( . ) seguido por el nombre de
la clase que queremos selecciona
Ejm:Para poder dar estilos a todas las etiquetas que tengas una
determinada clase se realiza la sgte sentencia:
.blancas {
color:white;
background-color: green;
}

● Identificador:
 Para seleccionar un elemento que tiene un cierto identificador id
podemos utilizar el prefijo # seguido por el nombre del identificador
que queremos seleccionar
Ejm :Para poder dar estilo a una etiqueta que tenga un atributo id con
un nombre único se utiliza la sgte sentencia:
#elegante {
color:black;
background-color: yellow;
}

5. Estilos para manipular la apariencia de una Página

i) Estilos para manipular texto
● Propiedad Color :Especifica el color del texto.
Ejm:Color de texto para el contenido de la etiqueta párrafo
p{
color:red;
}
● .Propiedad letter-spacing. Incrementa o decrementa la distancia entre los
caracteres de un texto.
● Propiedad text-align. Especifica la alineación horizontal de un texto.
Ejm:A todas las etiquetas p les centra de forma horizontal
p{
text-align: center;
}

● Propiedad text-decoration. Indica la decoración de un texto. Los valores

más utilizados son none, underline, overline y line-through.

Ejm :Sacamos la la línea debajo que tiene la etiqueta de hipervínculo <a

><a/> utilizando css con la propiedad text-decoration:
➢ Etiqueta Inicial

➢ Aplicamos estilos
 a{
text-decoration: none;
}

Permite eliminar todo decoración que tiene una etiqueta en este

caso es la línea debajo

● Propiedad vertical-align. Especifica la alineación vertical de un texto.

ii) Estilos para manipular colores

● La propiedad color permite determinar el color del texto de una etiqueta
html.
● La propiedad background-color: permite define el color de fondo de un etiqueta
html
Por ejm estamos aplicando estilos a la etiqueta p

p{
color: #FF0000;
background-color: #FFAD00;
}
Color de texto:Rojo
Color de Fondo :Verde

iii) Estilos para manipular Bordes

● Propiedad border. Permite especificar todas las propiedades de un borde
en una sola declaración.
● Propiedad border-color. Especifica el color de un borde por sus cuatro
lados.
● Propiedad border-style. Especifica el estilo de un borde por sus cuatro
lados.
● Propiedad border-width. Especifica el grueso del borde por sus cuatro
lados.

6. Agrupación de elementos (span y div)

● Span
 Es lo que se denomina un elemento neutro que no provee ningún cambio
visual en sí, pero con CSS actúa como un gancho hacia cierto texto o
cierta parte de un documento. Cuando algo está enganchado con puede
aplicar estilos sobre eso o manipularlo con JavaScript.
ejemplo;
<blockquote
cite="http://www.proverbia.net/citasautor.asp?autor=327">
<span>Todos</span> somos muy <span>ignorantes</span>. Lo que ocurre
es que no todos ignoramos las <span>mismas cosas</span>.
</blockquote>

span {
color:red;
}

ii. div
Se usa para agrupar uno o más elementos, siendo el mismo <div>, el bloque que
envuelve a éstos.
<div id="letraA">
<ul>
<li>Akita</li>
</ul>
</div>

<div id="letraB">
<ul>
<li>Beagle</li>
<li>Black Cocker Spaniel</li>
<li>Bloodhound</li>
<li>Boston Terrier</li>
<li>Boxer</li>
</ul>
</div>
<div id="letraC">
<ul>
<li>Chihuahua</li>
<li>Chow Chow</li>
<li>Cocker Spaniel</li>
</ul>
</div>

en la parte de estilos pondremos:

#letraA {
background: blue;
}
#letraB {
background: red;
 }
#letraC {
background: green;
}

7.POSICIONAMIENTO DE ELEMENTOS HTML CON CSS

Permite lograr posicionar los elementos en el lugar correcto
● Propiedad Float
Recordemos que la propiedad float tiene tres posibles valores:
➢ float: left; Posiciona el elemento a la izquierda.
➢ float: right; Posiciona el elemento a la derecha.
➢ float: none; Anula el comportamiento de la propiedad, es el valor
por defecto.
Ejm:Aplicamos esta propiedad a una img
Para conseguir que la imagen flote a la izquierda y el texto se
ajuste a su alrededor, sólo hay que definir la propiedad “float” con
el valor “left” .

img{float:left
}

● Propiedad Clear:Se usa para controlar cómo se comportan los elemen-

tos que siguen a los elementos flotantes de un documento.
La propiedad “clear” puede tomar los valores como:
➢ Left
➢ Right,
➢ Both o none.

Ejm:
.p {
clear: both;
}
 ● Posicionamiento absoluto:
Permite posicionar un elemento de manera totalmente independiente
Para ellos
El mecanismo es simple, cada página es como un gran eje de coordenadas
donde la posición inicial es la esquina superior izquierda, de manera que se
utilizan tres simples propiedades de CSS:
Propiedad position. Especifica el tipo de posicionamiento a utilizar. En este
caso el valor será “absolute”.
Propiedad top. Para un posicionamiento absoluto determina la distancia
entre la parte superior de la página y la parte superior del elemento afectado.
Propiedad left. Para un posicionamiento absoluto determina la distancia
entre la parte izquierda de la página y la parte izquierda del elemento
afectado.

Ejm:
Tenemos dos etiquetas html una img y un párrafo

Ahora vamos a posicionar la imagen

En primer lugar, se posiciona de forma absoluta la imagen mediante la propiedad position y
se indica su nueva posición mediante las propiedades top(arriba) y left(izquierda):

div img {

position: absolute;

top: 50px;

left: 50px;

}
Al final quedaría nuestra imagen de la sgte manera:

● Posicionamiento relativo
El posicionamiento relativo permite desplazar una caja respecto de su posición
original establecida mediante el posicionamiento normal. El desplazamiento de la
caja se controla con las propiedades top, right, bottom y left.
siguiente manera:
Propiedad position. Especifica el tipo de posicionamiento a utilizar. En este caso el
valor será “relative”.
➢ Propiedad top. Para un posicionamiento relativo determina la distancia
entre la parte superior del elemento afectado en su posición original y la
parte superior del elemento afectado en su nueva posición.
➢ Propiedad left. Para un posicionamiento relativo determina la distancia
entre la parte izquierda del elemento afectado en su posición original y la
parte izquierda del elemento afectado en su nueva posición.

EJM

<img class="desplazada" src="imagenes/imagen.png" alt="Imagen

genérica" />
<img src="imagenes/imagen.png" alt="Imagen genérica" />

<img src="imagenes/imagen.png" alt="Imagen genérica" />

 (1) (2) (3)

Ahora vamos a posicionar de forma relativa el primer

elemento(1)

img.desplazada {
position: relative;
top: 8em;

Y al final el flujo quedaria asi

Grupo5: