Conceptosbasicos CSS Diapositivas

CSS
Qu es CSS?
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentacin de los documentos electrnicos definidos con HTML y XHTML.
Cascading Style Sheets

Los estilos definen cmo desplegar la informacin (elementos HTML/XHTML/XML) Los archivos externos de estilo separan presentacin de informacin. Mayor flexibilidad, escalabilidad, y posibilidades en la presentacin de contenidos web Dinamismo (junto a javascript y DOM) Correctamente utilizado reduce el peso de las pginas Se usan archivos .css Permite el cambio de apariencia y presentacin con solo editar un archivo
Cascading Style Sheets
El concepto de piel (skin)

Diseo que se coloca por encima de la estructura (esqueleto).
Ejemplo: Telfonos
Estructura:
Modelo del telfono
Piel:
Carcasas de colores
Ventajas del uso de CSS

Estandarizar la presentacin de un sitio web completo. Haciendolo fcil de mantener. Diferentes usuarios pueden contar con diferentes estilos acordes a sus necesidades. Ejemplos:
Estilos para personas con dificultades visuales, Estilos para dispositivos mviles, Estilos para dispositivos monocromos, Estilos para impresin, Etc.
Los documentos HTML se reducen en tamao y complejidad.
Ejemplo http://www.csszengarden.com
Estilos CSS
Antes de la aparicin de los estilos, la presentacin se manejaba directamente dentro de los elementos HTML por medio de atributos. Por ejemplo:
<h2 align="center"> <font color=blue" size=3" face="Times New Roman, serif"> <i>Master inftel</i> </font>
</h2>
CSS permite separar el contenido de un documento de su presentacin.

En la hoja de estilos se define el formato de los encabezados h2: h2 { text-align: center; color: blue; font: italic large "Times New Roman", serif; }
En el documento HTML: <h2>Master inftel</h2>
Ejemplo CSS
Archivo HTML <html> <head> <link rel="stylesheet" type="text/css" href="ejemplo1.css" /> </head> <body> Archivo CSS <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body> </html> body {background-color: blue} h1 {font-size: 12pt} h2 {color: yellow} p {margin-left: 5px} Archivo CSS body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px}
Cmo incluir CSS en un documento

Incluir CSS en el mismo documento HTML Definir CSS en un archivo externo Incluir CSS en los elementos HTML
Incluir CSS en el mismo documento

Los estilos se definen en una zona especfica del propio documento HTML. Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (slo dentro de la seccin <head>).
Incluir CSS en el mismo documento

<html > <head> <title>Ejemplo de estilos CSS en el propio documento</title> <style type="text/css"> p { color: black; font-family: Verdana; } </style> </head> <body> <p>Un prrafo de texto.</p> </body> </html>
Definir CSS en un archivo externo

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las pginas HTML enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es ms que un archivo simple de texto cuya extensin es .css Se pueden crear todos los archivos CSS que sean necesarios y cada pgina HTML puede enlazar tantos archivos CSS como necesite.

<html > <head> <title>Ejemplo de estilos CSS en el propio documento</title> <link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" /> </head> <body> <p>Un prrafo de texto.</p> </body> </html>

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <?xml-stylesheet type="text/css" href="tutorials.css"?> <tutorials> <tutorial> <name>XML Tutorial</name> <url>http://www.mytutorial.com/xml/tutorial</url> </tutorial> <tutorial> <name>HTML Tutorial</name> <url>http://www. mytutorial.com/html/tutorial</url> </tutorial> </tutorials>
Incluir CSS en los elementos HTML
El ltimo mtodo para incluir estilos CSS en documentos HTML es el peor y el menos utilizado, ya que tiene los mismos problemas que la utilizacin de las etiquetas <font>. Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy especfico para un solo elemento concreto.
Incluir CSS en los elementos HTML

<html> <head> <title>Ejemplo de estilos CSS en el propio documento</title> </head> <body> <p style="color: black; font-family: Verdana;"> Un prrafo de texto. </p> </body> </html>
Tipos de dispositivos
<html> <head> <style> @media screen { p.test {font-family:verdana,sans-serif;font-size:14px} } @media print { p.test {font-family:times,serif;font-size:10px} } @media screen,print { p.test {font-weight:bold} } </style> </head> <body> .... </body> </html>
Tipos de dispositivos
Precedencia de valores
Valores por defecto del navegador Hoja de estilo externa Hoja de estilo interna (en la seccin de encabezado) Estilo en lnea (dentro de un elemento)
CSS
SELECTORES
86
Sintaxis
Tres partes:
Un selector Una propiedad Un valor
Sintaxis:
selector {property:value}
Sintaxis
Comentarios
/* Este es un comentario en CSS */
/* Este es un comentario CSS de varias lineas */
Sintaxis
Sintaxis
Uso:
body {color:black} p {font-family:"sans serif"} p {textalign:center;color:red}
Uso:
p { text-align:center; color:black; font-family:arial } h1,h2,h3,h4,h5,h6 { color:green }
Selectores
Selector Universal Selector de tipo o Etiqueta Selector Descendente Selector de Clase Selectores de ID
Selector Universal
Se utiliza para seleccionar todos los elementos de la pgina.
* { margin: 0; padding: 0; }
Selector de tipo o etiqueta
Selecciona todos los elementos de la pgina cuya etiqueta HTML coincide con el valor del selector.
p { ... }
Selector descendente
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.
p span { color: red; } <p> ... <span>texto1</span> ... <a href="">...<span>texto2</span></a> ... </p>
Selector de clase
<body> <p class="destacado"> Lorem ipsum dolor sit amet... </p> <p> Nunc sed lacus et <a href="#" class="destacado"> est adipiscing</a> accumsan... </p> <p> Class aptent taciti <em class="destacado"> sociosqu ad</em> litora... </p> </body>
Selectores de ID
El selector de ID permite seleccionar un elemento de la pgina a travs del valor de su atributo id. Este tipo de selectores slo seleccionan un elemento de la pgina porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma pgina.
#nav{ color: red; }
Resumen de Selectores
Elementos Elementos agrupados Clases para elementos
H1 {font-family: Arial, Helvetica, sans-serif; font size: 10pt; font-style: italic;}
H1, P, B {font-color: blue;}
P.enfatizada {font-weight: bold;}
Clases generales
Selectores ID
.enfatizada {font-weight: bold;}
#enfatizada {font-weight: bold;}
Selectores Pseudo-Classes

Clases predefinidas y se puede establecer efectos especiales 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>
Selectores Pseudo-elementos
:after Agrega contenido despus de un elemento :before Agrega contenido antes de un elemento :first-letter Establece el estilo para el primer carcter de un texto :first-line Establece el estilo para la primera lnea de un texto
Selectores Pseudo-elementos (:first-line)
Ejemplos:
p:first-line { color:#ff0000; font-variant:small-caps; }
Propiedades:
font properties color properties background properties word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear
Selectores Pseudo-elementos (:first-letter)
Ejemplos:
p:first-letter { color:#ff0000; font-size:xx-large; }
Propiedades:
font properties color properties background properties margin properties padding properties border properties text-decoration vertical-align (only if "float" is "none") text-transform line-height float clear
Selectores Pseudo-elementos
Ejemplos:
p.article:first-letter {color:#ff0000} <p class="article">A paragraph in an article</p> p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; } h1:after { content:url(smiley.gif); }
CSS 2
CSS
CAJAS
103
Modelo de cajas (box model)
Modelo de Formato Visual
Las pginas se construyen como una serie de bloques de arriba hacia abajo.
Cajas
Margin Padding
Vestibulum convallis dignissim diam. Sed et ligula. Proin ullamcorper odio eu mi. Aliquam erat volutpat. Nunc ac leo sed erat commodo ornare. Duis urna. Nunc ac justo a risus dictum scelerisque. Curabitur felis augue, rutrum eu, sollicitudin ac, auctor non, dolor.
Border
Margen
Margen vertical
El margen ms largo determinar la distancia entre elementos.
Relleno
CSS
PROPIEDADES
113
Background
Propiedades background

usadas
para
el
efecto
background-color background-image background-repeat background-attachment background-position
background-color
body {background-color:#b0c4de} h1 {background-color:#6495ed} p {background-color:#e0ffff} div {background-color:#ffffff}

Modos de referencia para el color:

nombre - "red, white, blue, etc RGB - un valor como "rgb(255,0,0)" Hex un valor como "#ff0000"
background-image

body {background-image:url(imagen.gif')} body {background-image:url('imagen.jpg')}
body { background-image:url(img/imagen.png'); }
background-repeat
body { background-image:url('gradient2.png'); background-repeat:repeat-x; } body { background-image:url('img_tree.png'); background-repeat:no-repeat; }
background-repeat backgroundposition
body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:top right; }
Versin resumida:
body {background:#ffffff url('img_tree.png') no-repeat top right} Se requiere un orden: background-color background-image background-repeat background-attachment background-position
background-attachment
body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed }
Propiedades de background
Texto
Color del texto

body {color:blue} h1 {color:#00ff00} h2 {color:rgb(255,0,0)}
Alineacin
h1 {text-align:center} p.date {text-align:right} p.main {text-align:justify}
Texto
Decoracin
h1 {text-decoration:overline} h2 {text-decoration:line-through} h3 {text-decoration:underline} h4 {text-decoration:blink} a {text-decoration:none}
Transformacin
p.uppercase {text-transform:uppercase} p.lowercase {text-transform:lowercase} p.capitalize {text-transform:capitalize}
Identacin
p {text-indent:50px}
Propiedades de texto
Font
p{font-family:"Times New Roman",Georgia,Serif}
Font
font-style
p.normal {font-style:normal} p.italic {font-style:italic} p.oblique {font-style:oblique}
Tres tipos:
normal El texto se muestra de manera normal italic El texto se muestra en itlica oblique El texto est inclinado (similar a itlica, pero es soportado menos)
Font
font-size -> default = (16px=1em)

h1 {font-size:40px} h2 {font-size:30px} p {font-size:14px} h1 {font-size:2.5em} /* 40px/16=2.5em */ h2 {font-size:1.875em} /* 30px/16=1.875em */ p {font-size:0.875em} /* 14px/16=0.875em */ body {font-size:100%} h1 {font-size:2.5em} h2 {font-size:1.875em} p {font-size:0.875em}
Propiedades de font
Border
p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }
p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; } border-style:dotted solid; border-style:dotted solid double dashed; border-style:dotted solid double; border-style:dotted solid; border-style:dotted;
Border (versin corta)

border:5px solid red; Orden de los valores de la propiedad border

border-width border-style border-color
Outlines
Mrgenes
margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;
p.ex1 {margin-top:2cm}
p.bottommargin {margin-bottom:25% En corto:
margin:100px 50px;
Mrgenes
Padding
La propiedad padding limpia una rea alrededor del contenido de un elemento (dentro del borde). Se encuentra afectado por el color de fondo del elemento.
padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px padding:25px 50px 75px 100px; padding:25px 50px 75px; padding:25px 50px; padding:25px;
Padding
list-style-type (listas no ordenadas)
Listas no ordenadas
ul.circle {list-style-type:circle} ul.square {list-style-type:square}
list-style-type (listas ordenadas)
Listas ordenadas
ol.upper-roman {list-style-type:upper-roman} ol.lower-alpha {list-style-type:lower-alpha}
list-style-type
ul.inside {list-style-position:inside} ul.outside {list-style-position:outside} ul { list-style-image:url('arrow.gif'); } ul { list-style-type:none; padding:0px; margin:0px; } li { background-image:url(arrow.gif); background-repeat:no-repeat; background-position:0px 5px; padding-left:14px; }
list-style-type
Tables
<html> <head> <style type="text/css"> table.ex1 {table-layout:auto} table.ex2 {table-layout:fixed} </style> </head> <body> <table class="ex1" border="1" width="100%"> <tr> <td width="5%">1000000000000000000000000000</td> <td width="95%">10000000</td> </tr> </table> <br /> <table class="ex2" border="1" width="100%"> <tr> <td width="5%">1000000000000000000000000000</td> <td width="95%">10000000</td> </tr> </table>
Tables
Dimensiones
<html> <head> <style type="text/css"> img.normal {height:auto} img.big {height:50%} img.small {height:10%} </style> </head> <body> <img class="normal" src="logocss.gif" width="95" height="84" /><br /> <img class="big" src="logocss.gif" width="95" height="84" /><br /> <img class="small" src="logocss.gif" width="95" height="84" /> </body> </html>
CSS
COMPOSICIN
143
Controlando el Layout
Los estilos pueden controlar el tamao y la ubicacin de los elementos Ejemplos:
#nav { width: 12em; float: left; } #news { width: 12em; float: right; } #main { margin: 1em 13em 1em 13em; }
Layout con DIVs

DIVs pueden son la alternativa a <table> DIVs son un contenedor como una celda de una tabla CSS puede posicionar a los DIV
<div id="article">xxx</div>
#article{ width:250px; padding:5px; float:right;}
Display
Hidden
h1.hidden {visibility:hidden} h1.hidden {display:none}
Block vs Inline Ejemplos de elementos bloque

<h1> <p> <div>
Ejemplos de elementos Inline

<span> <a>
Display (block vs inline)

li {display:inline} span {display:block}

<html> <head> <style type="text/css"> p {display: inline} </style> </head> <body> <p>A display property with a value of "inline" results in</p> <p>no distance between two elements.</p> </body> </html>
Display (block vs inline)

<head> <style type="text/css"> a { float:left; width:6em; text-decoration:none; color:white; background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; } a:hover {background-color:#ff3300} li {display:inline} ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } </style> </head>
Display
Posicionamiento
Fijo:
p.pos_fixed { position:fixed; top:30px; right:5px; }
Traslape:
img
{ position:absolute; left:0px; top:0px; z-index:-1 }
Relativo y absoluto:
h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; } h2 { position:absolute; left:100px; top:150px; }
Float
La propiedad float permite que un elemento flote horizontalmente. De manera que los otros elementos que le siguen se ajusten de acuerdo al valor del float. Ejemplo:
img { float:right;
Galera de imgenes:
.thumbnail { float:left; width:110px; height:90px; margin:5px;
Desactivar el flotado de los elementos (circundantes):

.text_line { clear:both;
Float
CSS
UNIDADES DE MEDIDA Y COLORES
Unidades Relativas
em, (no confundir con la etiqueta <em> de HTML) relativa respecto del tamao de letra empleado. Aunque no es una definicin exacta, el valor de 1em se puede aproximar por la anchura de la letra M ("eme mayscula") del tipo de letra que se est utilizando ex, relativa respecto de la altura de la letra x ("equis minscula") del tipo de letra que se est utilizando px, (pxel) relativa respecto de la pantalla del usuario
Unidades Absolutas
in, del ingls "inches", pulgadas (1 pulgada son 2.54cms.) cm, centmetros mm, milmetros pt, puntos (1 punto equivale a 1 pulgada/72, es decir, unos 0.35 mm) pc, picas (1 pica equivale a 12 puntos, es decir, unos 4.23 mm)
Porcentajes
Los porcentajes se pueden utilizar por ejemplo para establecer el valor del tamao de letra de los elementos:
body { font-size: 1em; } h1 { font-size: 200%; } h2 { font-size: 150%; }
Recomendaciones de medidas
En general, se recomienda el uso de unidades relativas siempre que sea posible, ya que mejora la accesibilidad de la pgina y permite que los documentos se adapten fcilmente a cualquier medio y dispositivo. El documento "Recomendaciones sobre tcnicas CSS para la mejora de la accesibilidad de los contenidos HTML" (http://www.w3.org/TR/WCAG10-CSS-TECHS/) elaborado por el organismo W3C, recomienda el uso de la unidad em para indicar el tamao del texto y para todas las medidas que sean posibles.
Recomendaciones de medidas
Normalmente se utilizan pxel y porcentajes para definir el layout del documento (bsicamente, la anchura de las columnas y elementos de las pginas) y em y porcentajes para el tamao de letra de los textos.
Colores

Palabras clave
red, green, blue
RGB Decimal
p { color: rgb(71, 98, 176); }
RGB Porcentual
p { color: rgb(27%, 38%, 69%); }
RGB Hexadecimal
p { color: #4762B0; }

Conceptosbasicos CSS Diapositivas

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Conceptosbasicos CSS Diapositivas

Enviado por

Direitos autorais:

Formatos disponíveis

CSS

Cascading Style Sheets

Cascading Style Sheets

El concepto de piel (skin)

Ventajas del uso de CSS

Los documentos HTML se reducen en tamao y complejidad.

CSS permite separar el contenido de un documento de su presentacin.

En el documento HTML: <h2>Master inftel</h2>

Cmo incluir CSS en un documento

Incluir CSS en el mismo documento

Incluir CSS en el mismo documento

Definir CSS en un archivo externo

Definir CSS en un archivo externo

Definir CSS en un archivo externo

Incluir CSS en los elementos HTML

Incluir CSS en los elementos HTML

/* Este es un comentario CSS de varias lineas */

Se utiliza para seleccionar todos los elementos de la pgina.

Selector de tipo o etiqueta

#nav{ color: red; }

Elementos Elementos agrupados Clases para elementos

H1 {font-family: Arial, Helvetica, sans-serif; font size: 10pt; font-style: italic;}

H1, P, B {font-color: blue;}

P.enfatizada {font-weight: bold;}

.enfatizada {font-weight: bold;}

#enfatizada {font-weight: bold;}

Selectores Pseudo-elementos (:first-line)

Selectores Pseudo-elementos (:first-letter)

Modelo de cajas (box model)

Modelo de Formato Visual

El margen ms largo determinar la distancia entre elementos.

background-color background-image background-repeat background-attachment background-position

Modos de referencia para el color:

body {background-image:url(imagen.gif')} body {background-image:url('imagen.jpg')}

body { background-image:url('gradient2.png'); background-repeat:repeat-x; } body { background-image:url('img_tree.png'); background-repeat:no-repeat; }

body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:top right; }

Color del texto

font-size -> default = (16px=1em)

Border (versin corta)

border:5px solid red; Orden de los valores de la propiedad border

margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;

list-style-type (listas no ordenadas)

ul.circle {list-style-type:circle} ul.square {list-style-type:square}

list-style-type (listas ordenadas)

ol.upper-roman {list-style-type:upper-roman} ol.lower-alpha {list-style-type:lower-alpha}

Layout con DIVs

#article{ width:250px; padding:5px; float:right;}

Block vs Inline Ejemplos de elementos bloque

Ejemplos de elementos Inline

Display (block vs inline)

li {display:inline} span {display:block}

Display (block vs inline)

{ position:absolute; left:0px; top:0px; z-index:-1 }

Desactivar el flotado de los elementos (circundantes):

UNIDADES DE MEDIDA Y COLORES

Você também pode gostar