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

José Pol Lezcano

on 31 March 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of CSS

CSS
¿Qué es CSS?
CSS son las iniciales de Cascading Style Sheet
Emplearemos CSS para definir los ESTILOS. Utilizaremos HTML solamente para los contenidos y definiremos la forma en que aparecerán los contenidos con CSS. (En HTML el qué, en CSS el cómo)
Utilizar hojas externas de CSS nos ahorrarán un montón de trabajo. Porque podremos utilizar la misma hoja de estilo para todos los documentos HTML que las llamen.
Para ello, usaremos archivos con la extensión .css y escritos en CSS.
Sintaxis de CSS
La sintaxis del CSS siempre es la misma y funciona de la siguiente manera:
El
selector
se utiliza para designar a quién se le atribuyen los estilos.
La
propiedad
indica sobre que característica se va a actuar.
A cada propiedad le atribuiremos un
valor
.
Todas las propiedades van agrupadas entre llaves, { }, se les indica el valor con dos puntos, : , y se separa una propiedad de otra con punto y coma, ; .
Los espacios y cambios de líneas no son relevantes. Utilizalos para mejorar el aspecto del código.
h1
{
color
:
#ff12a4
;
font-size
:
40px
;}
Comentarios en el código para CSS
Para comentar en CSS hay que incluir el texto entre los signos
/*
para abrir el comentario y
*/
para cerrar el comentario.

Ojo, los comentarios no se anidan.

No se puede comentar por línea como hacen otros lenguajes con la expresión
//
.
/* Esto es un comentario */
Los selectores id y class
El selector id
El selector id es usado para referenciar a un ÚNICO ELEMENTO.
Con
#valorid
se selecciona al elemento de HTML que tenga como atributo
id="valorid"
.
En el ejemplo de la derecha se asignan valores de stilo a un elemento con
id="valorid"
.
#valorid
{
text-align:center;
color:red;
}
El selector class
El selector id es usado para referenciar a un VARIOS ELEMENTOS.
Con
.nomclass
se selecciona a todos los elemento de HTML que tenga como atributo
id="nomclass"
.
En el ejemplo de la derecha se asignan valores de stilo a los elementos con
class="nomclass"
.
.nomclas
{
text-align:center;
color:red;
}
LOS NOMBRES DE CLASS Y DE ID NO PUEDEN EMPEZAR POR UN NÚMERO
¿Cómo llamar al CSS?
Primero de todo, <div> y <span>
Antes de empezar con CSS debemos conocer los elementos <div> y <span> que nos permitirán utilizar el concepto de capas

<div> es un contenedor (una caja) de tipo block.
<span> es un contenedor de tipo inline.

Un contenedor tipo block ocupa todo el ancho de la pantalla (como hacen los elementos p, o h1.
Un contenedor tipo inline se ajusta al contenido y se apila en la misma línea con otros elementos del mismo tipo, como hacen los elementos b.
Hay tres maneras de insertar CSS:
Mediante un fichero externo
En nuestro documento HTML, en el <head>
En nuestro documento HTML, en línea en cada elemento
Mediante un archivo externo
<head>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
En el <head> y con el elemento <link> indicamos:
la dirección del archivo .css con
href="estilos.css"
la relación con nuestro documento con
rel="stylesheet"
el tipo de documento con
type="text/css"
En el <head> de nuestro documento
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Mediante la etiqueta <style></style>, dentro de la cual escribiremos en CSS
Directamente en el elemento a dar formato
En cada elemento que queramos modificar con el atributo style=""
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Estas tres maneras actuan en cascada, predomina la proximidad:
en línea>en head>en archivo externo.
Dando formato con CSS
CSS Background
background-color
body {background-color:#b0c4de;}
Define un color de fondo. Lo podemos definir...
un valor HEX - #ff0000
un valor RGB - rgb(255,0,0)
un nombre de color en inglés - "red"
background-image
body {background-image:url('imagenes/fondo.jpg');}
Define una imagen en el fondo del elemento.
Por defecto la imagen se repite rellenándolo todo.
(Usad los fondos con prudencia, ojo a las horteradas)
background-repeat
body
{
background-image:url('imagenes/fondo2.gif');
background-repeat:repeat-x;
}
Controla la repetición de las imagenes.
Los posibles valores son: repeat, no-repeat, repeat-x, repeat-y, inherit.
background-position
body
{
background-image:url('imagenes/fondo2.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
Fija la posición de inicio del fondo.
En ocasiones hay que acompañarlo con attachment y fixed para que funcione
Los valores posibles son:
top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right
XXpx YYpx (y otras unidades de CSS)
XX% YY%
background-attachment
Permite fijar el fondo al hacer un scroll.
Los valores son: scroll (por defecto), fixed, local.
Es posible acortar el código utilizando la propiedad background con los valores encadenados. De todos modos cabe priorizar la claridad del código a su longitud.
body {background: #a44 url('imagenes/fondo2.gif') no-repeat fixed center;}
CSS Textos
color
Define el color del texto
h1 {color:#00ff00;}
text-align
Alinea los textos, sus posibles valores son:
left, right, center, justify, inherit
h1 {text-align:center}
text-decoration
Controla la "decoración" del texto (lineas). Su uso más frecuente es para desactivar el subrayado de los enlaces. Sus valores son:
none, underline, overline, line-through, inherit.
a {text-decoration:none;}

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
text-transform
controla la capitalización del texto.
none, uppercase, lowercase, capitalize, inherit.
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
text-indent
Establece una sangría (sin sangre, tranquilos) de primera línea.
p {text-indent: 50px;}
otros formatos
direction
: ltr, rtl; establece la dirección del texto.
letter-spacing
: [-] XXpx; espacio entre letras, incluso negativos.
line-height
: num, XXpx, %; espacio entre líneas.
text-shadow
:XXpx YYpx [NNpx] color; aplica sombras.
vertical-align
: px, %, baseline (por defecto), sub, super, top, text-top, middle, bottom, text-bottom; alinea respecto al padre.
white-space
: normal, nowrap, pre, pre-line, pre-wrap; especifica que el texto en una línea no cambie automáticamente (nowrap).
word-spacing
: normal, px (incluso negativos); define el espacio entre palabras.
CSS Fuentes
tipos de fuentes
Las fuentes se agrupan en tres grandes grupos:
Sans-Serif: Sin decoraciones
Serif: Con decoraciones
Monospace: todos los caracteres ocupan el mismo espacio.
font-family
Con font-family designamos el tipo de letra. Pero con esta propiedad llamamos a las fuentes cargadas en el ordenador. Nos arriesgamos a que el ordenador del usuario no tenga la fuente designada. Por eso acudiremos a "fuentes seguras".
p {font-family:"Times New Roman", Times, serif;}
font-style
Para designar el estilo cursiva. Los valores son: normal, italic y oblique, aunque no se aprecia la diferencia entre ambas.
p {font-style:italic}
font-size
Para designar el tamaño de texto. Tenemos unidades por px, em y %.
em es un estilo que fija el porcentaje respecto al padre del elemento. Puede ser muy útil.
otros valores son: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, inherit.
p {font-size:2em}
otros formatos
font
: aplica todas las características en una sola declaración.
font-variant
(normal, small-caps, inherit): aplica las "mini-mayúsculas".
font-weight
Define el grueso de la fuente (negrita). Los valores son:
normal, bold, bolder, lighter,100,200,300,400,..., inherit.
CSS Enlaces
a:link {color:#FF0000;text-decoration:none;} /* unvisited link */
a:visited {color:#00FF00;text-decoration:none;} /* visited link */
a:hover {color:#FF00FF;text-decoration:none;} /* mouse over link */
a:active {color:#0000FF;text-decoration:none;} /* selected link */
Un texto parecido a este es el que utilizarás en tus páginas para controlar la apariencia de los enlaces;
a:link formatea el enlace no visitado
a:visited formatea el enlace visitado
a:hover formatea el enlace cuando pasamos el cursor por encima de él
a:active formatea el enlace cuando hacemos click y mantenemos el botón pulsado
Hay algunas reglas importantes de orden!!!
1-. El hover ha de ir detrás del link y del visited
2-. El active ha de ir detrás del hover.
3-. Y la mejor regla. NO PENSAR: colócalos siempre en el orden link, visited, hover, active, uno detrás de otro en tu CSS sin mezclarlo con otro código.
Estilos de listas
list-style-type
: Define el estilo de la lista y los valores són:
decimal, decimal-leading-zero, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman
circle, disc, square, none
armenian, cjk-ideographic, georgian, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha
list-style-image
: Permite usar una imagen como marcador
ul {list-style-image:url('sqpurple.gif');}
list-style-position
: Posiciona el marcador dentro o fuera del elemento con los valores
inside
y
outside
.
CSS Tablas
Para editar una tabla haremos referencia en el CSS con los selecores
table
,
td
,
th
,
tr
.
Obviamente también podemos usar selectores de clase y de id que nos permitirán mejorar el acceso a cada celda, fila o tabla.
Utilizaremos cualquier propiedad CSS,
widht
,
height
,
padding
, las propiedades de
background
, fuentes, textos, etc.
la propiedad y el valor
border-collapse: collapse;
elimina el espacio intermedio que se aplica por defecto entre celdas (los valores son:
collapse
,
separate
,
inherit
).
la propiedad
border-spacing:
X
px;
define la separación entre celdas, donde X es el valor en píxeles (
margin
no funciona)
Pongo aquí un ejemplo de una tabla con su resultado:
CSS Modelo de caja
Una caja tiene cuatro elementos que se situan uno alrededor del otro:
El contenido (content): Es donde se situan los textos o imágenes dentro de un elemento.
El padding: Se situa entre el contenido y el borde. Es un margen interior.
El borde (border): Rodea el contenido con el padding.
El margen (margin): Esta fuera del borde y es transparente. Es el márgen exterior
El modelo de caja
Con las propiedades
widht
y
height
definimos el ancho y el alto DEL CONTENIDO. Para tener la medida total del elemento sumaremos las medidas del contenido, del padding, del border y del margin.
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
CSS border
Propiedades de border:
border-style
: none, dotted, dashed, solid, double, groove, ridge, inset, outset
border-widht
: define el ancho del borde.
border-color
: define el color del borde.
Cada una de estas propiedades se pueden determinar individualmente para cada lado del borde con, por ejemplo con style:
border-top-style, border-right-style, border-left-style, border bottom-style
.
También se pueden definir así con, por ejemplo, border-widht:
border-widht: 5px 0px 5px 0px;
Dando valores para arriba-derecha-abajo-izquierda.
Estas propiedades se pueden agrupar en una sola propiedad llamada
border
:
border: 2px solid black;
O así:
border-top: 2px solid black;
CSS outline
La propiedad
outline
es un borde por fuera del borde. Tiene las mismas opciones de formato que el
border
(
outline-color, outline-style, outline-widht
) pero no se puede discriminar por lados.
CSS margin y padding
Con
margin
definiremos los márgenes de un elemento. Además de poder definir las medidas con unidades o porcentaje tenemos el valor
auto
. Con auto el navegador asignará un margen de manera automática.

Además tenemos las propiedades
margin-top
(
bottom
,
right
y
left
).
También podemos individualizar los márgenes al igual que los bordes con el código:
margin: 20px 23px 40px 23px;
padding funciona exáctamente igual que
Dimensionar y colocar elementos
1-. Propiedades de tamaño:
height, widht
max-height, max-width
min-height, min-width
Todas las propiedades se definen con unidades (normalemnte px) o tanto porciento,
2-. Visibilidad y posición:
visibility
: visible, hidden (collapse)
display
: none, block, inline,... (hay muchas más opciones, pero de momento nos quedaremos con estas)
position:absolute, relative, fixed
left:, right:, top:, bottom; z-index.
float
: left, right y
clear
:both
CSS Selectores
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
Agrupando selectores
h1,h2,p
{
color:green;
}
=
Podemos agrupar los selectores que den características iguales enumerándolos con comas.
Seleccionar elementos anidados
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
<body>
<p>Este es un párrafo con el texto azul y centrado.</p>
<div class="marcado">
<p>Este es un párrafo que no tiene el texto azul.</p>
</div>
<p>Los elementos p dentro de la clase "marcado" mantienen el alineamiento de la clase pero no el color.</p>
</body>
Podemos asignar características diferentes a elementos que estén anidados dentro de otros elementos
Pseudo-clases
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
a.red:visited {color:#FF0000;}

<a class="red" href="css_syntax.asp">CSS Syntax</a>
Podemos asignar efectos diferentes con pseudo-clases, como ya habíamos visto en su momento con los enlaces.
Pero también lo podemos aplicar a otros selectores.
El listado de pseudo-clases
:link
:visited
:active
:hover
:focus
:first-line
:first-leter
:first-child
:nth-child(1)
:before
:after
:lang(es)
<!DOCTYPE html>
<html>
<head>
<style>
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>

<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>
¿Os da pereza jugar con ese código?
Lo comprendo, w3schools, tiene esta página donde podréis probar con él fácilmente:
http://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy
Full transcript