Creación de Páginas de Web M.C. Luis Zarza. CSS: Hoja de estilos en cascada Fue desarrollado por...
17
Creación de Páginas de Web M.C. Luis Zarza
-
Upload
adora-toral -
Category
Documents
-
view
214 -
download
0
Transcript of Creación de Páginas de Web M.C. Luis Zarza. CSS: Hoja de estilos en cascada Fue desarrollado por...
Creación de Páginas de Web
M.C. Luis Zarza
CSS: Hoja de estilos en cascada
Fue desarrollado por el W3 Consortium para permitir la separación entre documentos de contenido y documentos de estilo.
CSS: Marca referencial
<head><title>Mi pagina</title>
<link rel=“….<link
rel="stylesheet"href="estilo.css"type="text/css“
media=“projection”></head>
Descriptores de medios
ScreenttyProjectionTvHandheldPrintBrailleAuralAll
CSS: Definición interna
La definición de estilos puede estar en la misma página en HTML:<STYLE type="text/css">
<!--
H1 { color: red }
P { color: blue}
-->
</STYLE>
CSS: Ejemplo
body { background: #3333aa; font-size: 10pt; color: #99ff00; font-family: verdana,arial,geneva,sans-serif }p { color: #99ff00; font-size: 12pt; font-family: Verdana,Arial,Helvetica }a { color: #ffffff }h1 { font-size: 18pt; color:#cc3333 }h2 { font-size: 14pt }h3 { font-size: 10pt }td { font-size: 10pt; color: #99ff00; font-family: verdana,arial,geneva,sans-serif }
CSS: Ejemplo 2
body { background: white; color: black}
a:link { color: red }
a:visited { color: maroon }
a:active { color: fuchsia }
CCS: Principios
AgrupandoH1,H2,H3 { color: purple; }
Selector de clase.pato { color: brown; }
<p class="pato">Ejemplo</p>
h1 { font-size: 30pt }.rojo { color: red }.azul { color: blue }
Selector de id (único por elemento)#i5 { color="brown"; }
<p id="i5">Ejemplo</p>
CSS: Principios
Selector contextualh1 em { color: red; }
<h1>Esto es <em>rojo</em></h1>
<p>Esto <em>no es rojo</em></p>
Comentario/* Este es un comentario */
CSS: Pseudo clases y pseudo elementos
anchorSe aplica a hiperligas pero no a etiquetas
first-lineSe aplica a la primera líneap:first-line { color: red; }
<p>La primera linea en rojo... bla bla bla</p>
first-letterSe aplica a la primera letra
CSS: Propiedades de tipografía
font-familyp { font-family: Helvetica,sans-serif; }
font-style (italics, oblique, normal)font-variant (small-caps)font-weight (700,bold)font-size (200%, 36pt, +4)font ({font-style font-variant font-weight
font-size/line-height font-family;}) p {font: bold 12pt/14pt Helvetica,sans-serif;}
CSS: Propiedades de color
colorbackground-colorbackground-image
body { backgroun-image: url(pato.gif); }
background-repeat (no-repeat)background-attachment ( scroll,fixed )background-position (top, botton, center, left, right)background
body {background: white url(bg41.gif) fixed center;}
CSS: propiedades de texto
word-spacingp: { word-spacing: 0.5em; }
letter-spacingtext-decoration (underline, line-through)vertical-alignt (super, 50%)text-transform (uppercase, capitalize,lowercase)text-align (justify, center, left, right)text-indent (5em, -25px)line-height (18pt, 200%)
CSS: Propiedades de caja
margin-top (0.5in, 3em, 30px, 2ex)
margin-right
margin-bottom
margin-left
margin
padding-top, padding-bottom, etc
border-top-width, border-bottom-width, etc
CSS: Propiedades de caja
border-colorborder-style (solid)border-top, border-bottom, etc.
ul {border-top: 0.5in solid black;}
widthtable { width=80% }
floatimg { float: left }
CSS: Propiedades de clasificación
white-space (nowrap, pre)
list-style-type (square, lower-roman)
list-style-imageul { list-style-image: url(bala.gif); }
CSS: Unidades
Longitudwidth: 50px;margin-left: 2em;
Porcentajewidth: 50%;
Unidades de colorcolor: #FF00FF;color: rgb( 100%, 0%, 100% );
URLsurl( foto.gif);url( http://www.utm.mx/Z/foto.jpg );
