Creaci n de p ginas de web
This presentation is the property of its rightful owner.
Sponsored Links
1 / 17

Creación de Páginas de Web PowerPoint PPT Presentation


  • 72 Views
  • Uploaded on
  • Presentation posted in: General

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>

Download Presentation

Creación de Páginas de Web

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Creaci n de p ginas de web

Creación de Páginas de Web

M.C. Luis Zarza


Css hoja de estilos en cascada

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

CSS: Marca referencial

<head><title>Mi pagina</title>

<link rel=“….<linkrel="stylesheet"href="estilo.css"type="text/css“

media=“projection”></head>


Descriptores de medios

Descriptores de medios

Screen

tty

Projection

Tv

Handheld

Print

Braille

Aural

All


Css definici n interna

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

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

CSS: Ejemplo 2

body { background: white; color: black}

a:link { color: red }

a:visited { color: maroon }

a:active { color: fuchsia }


Ccs principios

CCS: Principios

Agrupando

H1,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

CSS: Principios

Selector contextual

h1 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

CSS: Pseudo clases y pseudo elementos

anchor

Se aplica a hiperligas pero no a etiquetas

first-line

Se aplica a la primera línea

p:first-line { color: red; }

<p>La primera linea en rojo... bla bla bla</p>

first-letter

Se aplica a la primera letra


Css propiedades de tipograf a

CSS: Propiedades de tipografía

font-family

p { 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

CSS: Propiedades de color

color

background-color

background-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

CSS: propiedades de texto

word-spacing

p: { word-spacing: 0.5em; }

letter-spacing

text-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

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 caja1

CSS: Propiedades de caja

border-color

border-style (solid)

border-top, border-bottom, etc.

ul {border-top: 0.5in solid black;}

width

table { width=80% }

float

img { float: left }


Css propiedades de clasificaci n

CSS: Propiedades de clasificación

white-space (nowrap, pre)

list-style-type (square, lower-roman)

list-style-image

ul { list-style-image: url(bala.gif); }


Css unidades

CSS: Unidades

Longitud

width: 50px;

margin-left: 2em;

Porcentaje

width: 50%;

Unidades de color

color: #FF00FF;

color: rgb( 100%, 0%, 100% );

URLs

url( foto.gif);

url( http://www.utm.mx/Z/foto.jpg );


  • Login