Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

CSS

No description
by

Cleopatra De la Torre

on 28 September 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of CSS

CSS
Como funcionan las hojas de estilo
1.- Iniciar con un documento que ha sido marcado en HTML.
2.- Escribir reglas de estilo de como te gustaría que ciertos elementos se visualizaran.
3.- Adjuntar las reglas de estilo al documento. Cuando el buscador muestra el documento está siguiendo tus reglas.

Ya hemos visto en los ejercicios anteriores, pequeños ejemplos de las hojas de estilo, en donde el h1 y p son elementos que son usados como selectores.
Las propiedades definidas para cada uno se van aplicar para cada elemento h1 y p dentro del documento.


selector { propiedad: valor; } ------- declaración

selector {
propiedad1: valor1;
propiedad2: valor2;
propiedad3: valor3; -------declaración en bloque
}
Selectores
La declaración se compone de una propiedad/par de valores. Pueden haber más de una declaración en una sola regla; por ejemplo la regla para el elemento p tiene dos, el font-size y font-family que son llamadas propiedades. Cada declaración DEBE terminar con el punto y coma, para mantenerlo separada de la siguiente declaración, si se omite el punto y coma, la declaración y la siguiente serán ignoradas.
Los corchetes rizados } { y las declaraciones son comunmente llamadas declaración en bloque.
Declarción
Ya hemos conocido la manera de aplicar la hoja de estilo al documento HTML con el elemento de estylo , pero ese es solo una de las tres maneras que la información puede ser aplicada a un documento HTML.
Conoceremos los otros métodos y sus terminologías
Adjuntar estilos al documento
Una hoja de estilo externa es separada, solamente el texto en documento que contiene un número de reglas de estilo. DEBE de ser nombrada con la extensión .css.
Entonces el documento .css es vinculado o importado dentro de uno o más documentos HTML, de esta manera todos los archivos dentro del sitio web deben compartir la misma hoja de estilo.
Esta es el más poderoso y preferido método para adjuntar hojas de estilo al contenido.
Hojas de estilo externas
Esta es la hoja de estilo que hemos estado trabajando anteriormemte, es colocada en el documento usando el elemento
style
y sus reglas aplicadas solamente en ese documento.
El elemento
style
debe ser colocado en la cabecera del documento y debe contener el atributo
type
.
Hojas de estilo incrustada
Se pueden aplicar propiedades y valores a un solo elemento usando el atributo de
style
en el elemento por si solo , ejemplo:
<h1
style="color: red"
>Introducción</h1>


Para agregarle múltiples propiedades, solamente separarlas con puntos y comas como esto:

<h1
style="color: red; margin-top: 2em"
>Introducción</h1>
Estilos en línea
Es necesario aveces dejar comentarios en las hojas de estilo, las cuales tienen su propia sintaxis como el ejemplo:

/* aquí va el comentario */

Y el comentario que está dentro del asterisco y la diagonal será ignorado.
Comentarios en hojas de estilo
El mejor método es creando un link al documento .css usando el elemento link en
head
del documento como es mostrado a continuación:

<head>
<link rel="stylesheet" href="index/receta.css" type="text/css"/>
<title>Untitled Document</title>

</head>

Es necesario incluir tres atributos en el elemento
link
:
rel="stylesheet"
href="url"
type="text/css"

Se pueden incluir múltiples elementos
link
a diferentes hojas de estilo y todas se aplicaran .
Usando el elemento link
Como su nombre lo indica, en los elementos de HTML se transmiten ciertas propiedades de estilo a los elementos que los contienen, es decir,
cuando se establece el valor de una propiedad CSS en un elemento, sus elementos descendientes heredan de forma automática el valor de esa propiedad.
Herencia
Esto se refiere a la relación entre elementos. Todos los elementos que están dentro de un elemento, son conocidos como sus descendientes, por ejemplo los elementos
h1, h2, p, em, img
, de este documento son descendientes del elemento
body
.
Padres e hijos
Veremos los elementos aproximadamente de la manera en como lo ve el buscador, agregando a las reglas de estilo bordes al rededor de cada elemento contenido en un artículo.
Hacer ejercicio:
h1 {
border: 1px solid blue;
}
h2 {
border: 1px solid blue;
}
p {
border: 1px solid blue;
}
em {
border: 1px solid blue;
}
img {
border: 1px solid red;
}
El modelo de caja
body { font-family: Arial; }
Propiedades de la fuente
Tamaño de la fuente
h1 { font-size: 1.5em; }
h1 { font-size: 150%; }
h1 { font-size: x-large; }
h1 { font-size: xx-small; }
body { font-size: 16px; }
Peso de la fuente (boldness)
h1 { font-weight: normal; }
h1 { font-weight: bold; }
h1 { font-weight: lighter; }
h1 { font-weight: 100; }
h1 { font-weight: 200; }
h1 { font-weight: 300; }
font-style: normal | italic | oblique | inherit
Estilo de la fuente (italics)
font-style, es una propiedad que afecta la postura de el texto, si la forma de las letras son verticals (normal) o inclinado (
italic
&
oblique
)
font-variant: normal | small caps | inherit
Font variant (small caps)
Color de texto
h1
{ color: gray; }
h1
{ color: #666666; }
h1
{ color: #666; }
Ya conocemos esta manera de agregar cambios de diseño a estos nombres de selectores que usamos como selectores:

elemento selector p { color: navy; }
grupo de selectores p, ul, p, td, th { color: nay; }

La desventaja de esto es que tenemos que hacerle el cambio de color a todos los párrafos del documento y en determinados casos queremos aplicar la regla a un elemento en específico, a continuación veremos como:
Más tipos de selectores
Selectores descendentes
Un selector descendente es aquel que se encuentra dentro de otro elemento, ejemplo:
li em
{ color: olive; }
li em {propiedad: valor; }
Ya aprendimos acerca del atributo id que da al elemento un único nombre de identificación.
Los selectores ID te permiten llegar a los elementos por los valores de id, el símbolo que identifica a los selectores ID es
#
.
Ejemplo:
li#arte
{ color:red;}
#libros
{ color:red;}
Selectores ID
Selectores de clase/ class
Ya aprendimos acerca del atributo id que da al elemento un único nombre de identificación.
Los selectores ID te permiten llegar a los elementos por los valores de id, el símbolo que identifica a los selectores ID es
#
.
Ejemplo:
li#arte
{ color:red;}
#libros
{ color:red;}
El identificador de clase es usado para clasificar elementos dentro de un grupo conceptual, la diferencia del del selector ID es que múltiples elementos pueden compartir el nombre de una clase.
Son indicados en CSS con un punto (
.
) en el sector.
Ejemplo:
p.especial { color: orange;}
.especial { color; orange;}
Selector universal:
* { color: gray }
hace todo el documento del color
gris.

Line height es una propiedad que define la mínima distancia de la base a la base del texto.
p { line-height: 2; }
p { line-height: 2em; }
p { line-height: 200%; }
Indents
El texto con guión es una propiedad la cual se se aplica en la primer línea. Hacer práctica
p#ejemplouno {
text-indent: 2em;
}
p#ejemplodos {
text-indent: 25%;
}
p#ejemplotres {
text-indent: -35px;
}
Alineamiento horizontal
Funciona para alinear el texto.
text-align: left
text-align: right
text-align: center
text-align: justify
p#ejemplouno {
text-indent: 2em;
text-align:justify;
Es el espaciado entre letras
letter-spacing
o palabras
word-spacing
.

p#ejemplouno {
text-indent: 2em;
text-align:justify;
letter-spacing: 8px;



p#ejemplodos {
text-indent: 25%;
letter-spacing: 1.5em;
}
Espaciado
A continuación aplicaremos el color a un elemento
blockquote
, aplicandole la propiedad de
color
al elemento de bloque.

blockquote {
border: 4px dashed;
color
: black;
}
Color
Color de fondo
Con la propiedad:
background-color
se le puede agregar un color de fondo a cualquier elemento.

blockquote {
border: 4px dashed;
color: black;
background-color
: gray;
}
body {
background-image
: url(lasvegas.gif);
}
blockquote {
background-image:
url(dot.gig);
}
Imagen de fondo
background-repeat
: repeat | repeat-x | repeat-y | no repeat
background-position
: left | center | right | top | bottom
width
height
Ejemplo:
p#a {
width
: 400px;
height
: 130px; background: green;
font-family:Arial, Helvetica, sans-serif;
color: white;
}
Ajustar las dimensiones del contenido
Ajustar las dimensiones del contenido
Overflow
Cuando un elemento se establece de un tamaño que es muy pequeño para su contenido es posible especificar que hacer con ese contenido que no queda.

Ejemplo:
p#a { width: 400px; height: 130px; background: green;
font-family:Arial, Helvetica, sans-serif;
color: white;
overflow
: visible | hidden | scroll | auto | -----
elegir solo uno para la práctica
}
Es el espacio entre el área del contenido y el borde en bloques de texto o líneas.


blockquote {
padding-top
: 1em;

padding-right
: 3em;

padding-bottom
: 1em; ----------también se utiliza con px.

padding-left
: 3em;

background-color
: green;
}
También se puede utilizar de una manera corta:
blockquote {
padding
: 1em 3em 1em 3em;
background-color: green;
}

Hacer el ejercicio en un documento cualquiera.
Padding
En html colocamos el siguiente código:
<ul id="menu">
<li><a href="link">Inicio</a></li>
<li><a href="link">Receta</a></li>
<li><a href="link">Comidas</a></li>
<li><a href="link">Desayunos</a></li>
<li><a href="link">Promociones</a></li>
</ul>
Menu de navegación
en CSS lo modificamos

ul#menu {
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul#menu li {
display: inline;
}
ul#menu li a {
padding: 5px 20px;
margin: 0px 2px;
border: 1px solid orange;
background-color: yellow;
text-decoration: none;
text-align: center;
color: black;
font-family:Arial, Helvetica, sans-serif;
}
Es una simple línea dibujada al rededor del área del contenido.
border-style

border-top-style
border-right-style
border-bottom-style
border-left-style
Ejemplo:
div#silly {
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: double;
border-left-style: dotted;
width: 300px;
height: 100px;
}
Border
border-top-width
border-right-width
border-bottom-width
border-left-width
Tipos de border
con ancho/width
Border color
border-top-color
border-right-color
border-bottom-color
border-left-color
Esta propiedad mueve a un elemento lo más lejos ya sea a la derecha o a la izquierda, permitiendo que el contenido lo enuelva.
Ejemplo html:
<p><img src="imagen.gif" alt=""/>Un texto cualquiera aqui por favor, </p>
en la hoja de estilo ponemos lo siguiente:
img{
float: right;
}
p {
padding: 15px;
background-color: green;
border: 2px solid red;
}
Pero también le podemos agregar la propiedad margin a la imagen, que se coloca al rededor de la imagen.
img{
float: right;
margin: 10px;
}
Floating
El marcado en html:
<p><span class="desa">El desarrollo: en esta parte, se ordenan lógicamente las ideas, de acuerdo al tipo de organización expositiva que escojas. Se establece un análisis objetivo de los hechos proporcionando datos, ejemplos, distintos puntos de vista sobre el tema, etc.</span>La conclusión: es una breve síntesis de lo expuesto. En ella se recapitula lo más relevante del tema tratado y se entrega una conclusión derivada de lo anterior que puede plantearse como una opinión personal.</p>

En la hoja de estilo:
span.desa {
float: right;
margin: 10px;
width: 200px;
color: black;
background-color: pink;
padding: 4px;
}
p {
padding: 15px;
background-color: gray;
border: spx solid black;
}
Otro ejemplo Floating
El marcado en html:
<p> Hace muchos años atrás las personas pensaban....</p>
<p id="float"> Los mundos de Coraline presenta un caso especial si lo abordamos desde una perspectiva postfeminista en relación con las narrativas de animación occidental.</p>
En la hoja de estilo:

p#float {
float: left;
width: 200px;
margin-top: #black;
background: gray;
}
p {
border: 1px solid red;
}
Floating elementos de bloque
Veremos que pasa cuando una serie de secuencias de párrafos son floated al mismo lado.
El marcado en html:
<p>P1</p>
<p class="float">P2</p>
<p class="float">P3</p>
<p class="float">P4</p>
<p class="float">P5</p>
<p>P6</p>
<p>P7</p>
<p>P8</p>
<p>P9</p>
<p>P10</p>
En la hoja de estilo:
p.float {
float:left;
width: 200px;
height: 400px;
margin: 0px;
background: pink;
}
p {
border: 1px solid red;
}
esta alineación es usada de manera estratégica en CSS basada en web design para crear diseños de multicolumnas y barras de navegación horizontal.
Floating múltiples elementos
Aplicando la propiedad clear a un elemento, previene de que aparezca enseguida de un elemento flotante.
Estilo css code:
img {
float: right;
margin-right: 10px;
}
h2 {
clear: right;
margin-top: 2em;
}
Si queremos establecer cierto espacio entre la imagen flotante y el siguiente texto, debemos aplicar un margin-bottom al elemento flotante, que en este caso es la imagen.
Clearing floated
Tipos de posicionamiento:
La propiedad
position
indica el posicionamiento normal de los elementos de una página.
position: static
Este es el posicionamiento normal del esquema en el cual los elementos son posicionados como ocurren en el flujo de html.

position: relative
Este tipo de colocación se considera relativa porque se toma como referencia el lugar que le correspondería al elemento al que se aplica el estilo si este se conservara en el flujo normal del texto.

position: absolute
Las elementos que tienen una posición absoluta no forman parte del flujo natural de los otros elementos del documento HTML, sino que su posición está asignada independientemente de la posición de los otros elementos. La posición de los elementos con “position:absolute” se fija mediante unas coordenadas, que vienen dadas por los atributos top y left. El punto inicial de estas coordenadas es la esquina superior izquierda de la caja que contiene los elementos.

position: fixed
el elemento se está en una posición de la ventana aunque el documento se desplace.
Conceptos básicos del posicionamiento
Una vez que se ha establecido el método de posicionamiento, la actual posición se especifica con cuatro propiedades:

top, right, bottom, left
Ejemplo del posicionamiento relativo con código en html:
<p>Aunque la representación femenina presenta una variación por géneros cinematográficos –<em>la mujer en el cine de aventuras</em> sería más activa que en un melodrama, por ejemplo – y presenta una gran problemática al ser aplicada, siendo ampliamente discutida entre teóricos del cine por lo </p>

Con la hoja de estilo:
em {
position: relative;
top: 30px;
left: 60px;
background-color: fuchsia;
}

Hacer ejemplo
Especificando la posición
em {
position:
absolute
;
top: 30px;
left: 60px;
background-color: fuchsia;
}

Y después le agregamos un cambio de estilo al párrafo para que el elemento
em
esté dentro de un contenedor:

p {
position: relative;
padding: 15px;
background-color: #DBFDBA;
border: 2px solid #6C4788;
}
Como podemos ver el elemento
em
es ahora posicionado 30px abajo y 60 px de la esquina de arriba de la caja del párrafo y no de la ventana del buscador

ahora le agregamos lo siguiente al elemento
em
em{
width: 200px;
margin: 25px;
Ejemplo del posicionamiento absoluto:
Código html:
<body>
<div id="prefacio"><h1>Coraline</h1>
<p>Aunque hay que reconocerle a la</p><p> cambio en el rol pasivo de las princesas a uno más activo y decidido desde finales de</p> <p>Ron Clements, John Musker, 1989), también es cierto que estas princesas no se han desechado de lo anticuado</p> <p>del este rol porque continúan careciendo de figura maternal y necesita</p><p>por ej Bella en La bella y la bestia </p>
</div>
<div id="contenido">
<h2>Los contenidos</h2>
<ul>
<li>El estilo nuevo</li>
<li id="especial">El estilo viejo</li>
<li>Lo que sigue igual</li>
<li>Lo que nunca cambia</li>
<li>Y lo que sigue</li>
</ul>
</div>
</body>
Hacer la siguiente práctica:
body{
background-color: #F9FEB0;
}
div#contenido {
width: 200px;
position: absolute;
top: 0;
left: 0;
background-color: #AFD479;
padding: 10px;
}
li#especial {
position: absolute;
top: 0;
right: 0;
background-color: fuchsia;
}
div#prefacio {
margin-left: 305px;
}
y el Código CSS:
El valor de la propiedad z-index es un número (positivo o negativo). El número más alto es el elemento más alto que va aparecer en donde se va apilar. Ejemplo:
html código: -------Hay que bajar las imágenes primero
<body>
<p id="A"><img src="1.gif" alt="A"/></p>
<p id="B"><img src="2.gif" alt="B"/></p>
<p id="C"><img src="3.gif" alt="C"/></p>
</body>
Z-index
#A {
z-index: 10;
position: absolute;
top: 200px;
left: 200px;
}
#B {
z-index: 5;
position: absolute;
top: 225px;
left: 175px;
}
#C{
z-index: 1;
position: absolute;
top: 250px;
left: 225px;
}
Estilo CSS
Full transcript