Curso De Css

Curso de CSS Por Martí Planellas

¿Qué es el CSS? Cascading Style Sheets . Separa presentación de contenido. Permite cambiar totalmente el aspecto de la web sin tocar el código fuente de la misma. Es compatible, en gran parte, con todos los navegadores existentes. Es estándar.

CSS y HTML Linking <link rel="stylesheet" type="text/css" href=“ url” > Embedding <style type="text/css">… </style> Inline <p style="color:red;font-size:20px">…</p>

Sintaxis Tipos de selectores HTML: p{ color: #000; font-weight: bold; } ID: #titulo{ font-size: 20pt; } Class: .rojo{ color:red; } Pseudoclase Link: A:link{ color: blue; } A:visited{ color: red; } A:active{ color: black; } A:hover{ text-decoration: underline; } Pseudoelemento: p:first-letter{}, p:first-line{}, :before, :after Agrupación: H1,H2,H3,H4{ font-size: 20pt; }

Sintaxis URLs url ("http://www.salle.url.edu/") url (http://ecampus.salle.url.edu/) url ('imagenes/fondo.jpg') url (../botones/adelante.gif) Longitudes Unidades relativas: em (font-size), ex (x-height) Unidades absolutas: px, pt, in, cm, mm. Colores Palabras clave: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white i yellow. RGB: rgb(255,0,0), #ff0000 (RRGGBB) , #ff0 (RGB)

Herencia Todos los elementos heredan las propiedades de sus padres. Selectores contextuales: #titulo .rojo{ color: red; } A .negro{ color: black; } .rojo .negro{ color: red; } !important A .negro{ color: black !important; }

El CSS Box Model Bordes Border: 1px #000 solid; Border-left: 1px #FFF dashed; Border-style: dotted, solid, dashed, double; Márgenes/Paddings Margin: 25px; Margin: 20px, 25px, 10px, 0; Margin: 10px, auto; Margin-top: 20px;

Problemática con IE Internet Explorer Width: 100px; Padding: 0, 20px; Mozilla Firefox (y otros) Width: 100px; Padding: 0, 20px; 100px 100px 140px 20px 20px 100px 20px 20px 100px 60px

Solución Condicional, CSS sólo para IE  <!--[if IE 5]> <!--[if IE 5.0]> <!--[if IE 5.5]> <!--[if IE 6]> <!--[if IE 7]> <!--[if gte IE 5]> <!--[if lt IE 6]> <!--[if lte IE 5.5]> <!--[if gt IE 6]>

Posicionamiento Definir siempre un ancho (width) !! Flujo normal Position: static; Posicionamiento Absoluto Position: absolute; Posicionamiento Relativo Position: relative;

Flujo Normal Sigue el flujo que seguiría el texto en una pagina HTML. No sirve para posicionar elementos. Es el que hay por defecto. Puede tener dos tipos de contexto Formato de bloque: Las cajas se sitúan una debajo de otra ocupando todo el ancho disponible. Formato inline : Las cajas se sitúan una al lado de otra y su anchura se ajusta al contenido.

Posicionamiento Absoluto Un elemento posicionado absoluto se saca del flujo normal e ignora (y es ignorado por) todos sus vecinos, está sólo limitado por su bloque contenedor. Control: left, right, top, bottom, Recomendado para contenido estático.

Posicionamiento Relativo Se comporta de acuerdo al flujo normal. Control flotante: float: left; float: right; #cont{ width: 100%; padding: 10px; } #left{ position: relative; float: left; width: 40%; } #right{ position: relative; float: right; width: 40%; } #center{ position:relative; float:left; width: 20%; margin-left: 10px; } #left #right #cont #center

Visualización Visibility Visible Hidden Overflow Hidden Scroll (scroll-x, scroll-y) Auto Display None Block Inline

“ Truquitos” Margenes negativos. Pseudoclasse :hover en divs. Centrado multinavegador: body{ text-lign: center; } #wrap{ width: 800px; margin: 0 auto; text-align:left; }

Páginas útiles W3C: http://www.w3schools.com/css/ Validador http://jigsaw.w3.org/css-validator/ WebDeveloper Toolbar https://addons.mozilla.org/en-US/firefox/addon/60 Galerias de CSS: http://www.google.es/search?q=css+gallery

Gracias por venir!  http://www.radleb.net/cursos

Curso De Css

Más contenido relacionado

Similar a Curso De Css

Curso De Css