Clase 3 de Mayo

hojas de estilo
CSS
CSS es el acrnismo de CascadingStyle Sheets

(es decir, hojas de estilo en cascada)
qu puedo hacer con CSS?

CSS es un lenguaje de estilo que define la presentacin de los
documentos HTML. Por ejemplo, CSS abarca cuestiones
relativas a fuentes, colores, mrgenes, lneas, altura, anchura,
imgenes de fondo, posicionamiento avanzado y muchos
otros temas.
Qu diferencia hay entre CSS y HTML?

HTML se usa para estructurar el contenido; CSS se usa para
formatear el contenido previamente estructurado.
Qu beneficios me ofrece CSS?

CSS fue toda una revolucin en el mundo del diseo
web. Entre los beneficios concretos de CSS
encontramos:
control de la presentacin de muchos documentos desde
una nica hoja de estilo;
control ms preciso de la presentacin;
aplicacin de diferentes presentaciones a diferentes tipos
de medios (pantalla, impresin, etc.);
numerosas tcnicas avanzadas y sofisticadas.
cmo funciona
CSS?
La sintaxis bsica de CSS
aplicando CSS a un documento

HTML
Mtodo 1: En lnea (el atributo style)

Un modo de aplicar CSS a HTML es usando el atributo de
HTML style. Si ampliamos el ejemplo anterior sobre el color de
fondo rojo, CSS se puede aplicar as:
Mtodo 2: Interno (la etiqueta style)

Otra forma es incluir el cdigo CSS usando la etiqueta
HTML
<style>. Por ejemplo, as:
Mtodo 3: Externo (enlace a una hoja de estilo)

Una hoja de estilo externa es sencillamente un fichero de texto
con la extensin .css. Como cualquier otro fichero, puedes
colocar la hoja de estilo en el servidor web o en el disco duro.
Por ejemplo, digamos que tu hoja de estilo se llama style.css
y est localizada en una carpeta que se llama style. Esta
situacin se puede ilustrar de la siguiente manera:

Fjate cmo la ruta a nuestra hoja de estilo aparece
indicada por medio del atributo href.
La lnea de cdigo debe insertarse en la seccin de
encabezado del cdigo HTML, es decir, entre la
etiqueta
<head> y </head>. De esta manera:

Este vnculo indica al navegador que debera usar la presentacin del
fichero CSS al mostrar el fichero HTML. Lo realmente bueno de este
mtodo es que se pueden vincular varios documentos HTML con la
misma hoja de estilo. En otras palabras, se puede usar un nico fichero
CSS para controlar la presentacin del muchos documentos HTML.
colores y
fondos
Color de primer plano: la propiedad 'color'

La propiedad color describe el color de primer plano de un elemento.
Por ejemplo, imagina que queremos que todos los ttulos de un
documento aparezcan con color rojo oscuro. Todos los ttulos estn
marcados con el elemento <h1>. El cdigo siguiente establece el color
de los elementos <h1> como rojo.
Los colores se pueden introducir como valores hexadecimales, como en
el ejemplo anterior: #ff0000; o se pueden usar los nombres de los
colores: "red" (rojo), o bien como valores rgb: (rgb(255,0,0)).
La propiedad 'background-color'
La propiedad background-color describe el color de fondo de
los elementos.
El elemento <body> contiene todo el contenido de un documento
HTML. As pues, para cambiar el color de fondo de una pgina, la
propiedad background-color debera aplicarse al elemento <body>.
La propiedad 'background-color'
Tambin se pueden aplicar colores de fondo a otros elementos, entre ellos,
a los encabezados y al texto. En el ejemplo que sigue se aplicarn
diferentes colores a los elementos <body> y <h1>
Imgenes de fondo [background-image]

La propiedad CSS background-image se usa para insertar una imagen
de fondo.
Para insertar la imagen de la mariposa como imagen de fondo de
una pgina web, aplica sencillamente la propiedad backgroundimage al elemento <body> y especifica la localizacin de la imagen.
Repetir la imagen de fondo [background-repeat]

La tabla siguiente resume los cuatro valores diferentes para la
propiedad
background-repeat.
Fijar la imagen de fondo [backgroundattachment]

La propiedad background-attachment especifica si una imagen est fija
o se desplaza con el elemento contenedor.
Una imagen de fondo fija no se mover con el texto cuando el lector
se desplace por la pgina, mientras que una imagen de fondo no fija
se desplazar con el texto de la pgina web
Combinacin de propiedades [background]

La propiedad background es una forma abreviada de todas
las propiedades de fondo listadas a lo largo de esta leccin.
Con la propiedad background se pueden comprimir varias propiedades,
y as escribir una hoja de estilo de forma ms abreviada, lo que facilitar
su lectura.

Por ejemplo, observa estas cinco lneas de
cdigo:
Usando background se puede lograr el mismo resultado con una

nica lnea de cdigo:

El orden en que deben aparecer las propiedades individuales es
el siguiente:
[background-color] | [background-image] | [backgroundrepeat]| [background-attachment] | [background-position]
fuente
s
Familia de fuentes [font-family]

La propiedad font-family se usa para establecer una lista ordenada de
fuentes que se usarn para mostrar un elemento determinado o una
pgina web. Si la primera fuente de la lista no est instalada en el
ordenador desde el que se accede al sitio, se seguir probando con
la siguiente fuente hasta encontrar una fuente apropiada.
Para clasificar las fuentes se usan dos tipos de nombres: nombres de una
familia y familias genricas. Estos dos trminos se explican a
continuacin.
Familia de fuentes [font-family]
Estilo de la fuente [font-style]

La propiedad font-style define la fuente elegida bien con el valor normal,
el valor italic o el valor oblique. En el ejemplo que sigue, todos los
encabezados marcados con <h2> aparecern en cursiva.
Peso de la fuente [font-weight]

La propiedad font-weight describe qu intensidad o "peso" en negrita
debera tener la fuente. Toda fuente puede tener los valores normal o bold.
Algunos navegadores soportan, incluso, el uso de nmeros entre 100 y
900 (de cien en cien) para describir el peso de dicha fuente.
Tamao de la fuente [font-size]

El tamao de la fuente se establece por medio de la propiedad font-size.
A la hora de describir el tamao de las fuentes, existen muchas unidades
diferentes (por ejemplo, pxeles y porcentajes) entre las que elegir.
Existe una diferencia clave entre las cuatro unidades anteriores. Las
unidades 'px' y 'pt' establecen el tamao de la fuente de forma absoluta,
mientras que '%' y 'em' permiten al usuario ajustar el tamao de la
misma segn considere oportuno.
Combinacin de propiedades [font]

Si usamos la propiedad abreviada font es posible incluir todas las
propiedades diferentes relativas a fuentes en una nica
propiedad.

Por ejemplo, imagina estas cuatro lneas de cdigo que usamos
para describir las propiedades de fuente para la etiqueta <p>:
Usando la propiedad abreviada, el cdigo se puede simplicar

as:

El orden de los valores para la propiedad font es:
font-style | font-variant | font-weight | font-size | fontfamily
preguntas
?

Clase 3 de Mayo

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Clase 3 de Mayo

Загружено:

Авторское право:

Доступные форматы

hojas de estilo

CSS es el acrnismo de CascadingStyle Sheets

qu puedo hacer con CSS?

Qu diferencia hay entre CSS y HTML?

Qu beneficios me ofrece CSS?

La sintaxis bsica de CSS

aplicando CSS a un documento

Mtodo 1: En lnea (el atributo style)

Mtodo 2: Interno (la etiqueta style)

Mtodo 3: Externo (enlace a una hoja de estilo)

Mtodo 3: Externo (enlace a una hoja de estilo)

Mtodo 3: Externo (enlace a una hoja de estilo)

Color de primer plano: la propiedad 'color'

Imgenes de fondo [background-image]

Repetir la imagen de fondo [background-repeat]

Fijar la imagen de fondo [backgroundattachment]

Combinacin de propiedades [background]

Combinacin de propiedades [background]

Usando background se puede lograr el mismo resultado con una

Combinacin de propiedades [background]

Familia de fuentes [font-family]

Familia de fuentes [font-family]

Estilo de la fuente [font-style]

Peso de la fuente [font-weight]

Tamao de la fuente [font-size]

Combinacin de propiedades [font]

Combinacin de propiedades [font]

Usando la propiedad abreviada, el cdigo se puede simplicar

Combinacin de propiedades [font]

Вам также может понравиться