Ccs.sandromtz_4101

CCS
Las hojas de estilo en cascada (CSS, acrónimo de Cascading
StyleSheets) son una herramienta fantástica para añadir presentación a
los sitios web. Pueden ahorrarte mucho tiempo y te permitirán diseñar
sitios web de un modo totalmente nuevo. CSS es imprescindible para
todos aquellos que trabajen en el campo del diseño web.
El presente tutorial te iniciará en el uso de CSS en solo unas horas. Es
fácil de entender y te enseñará todo tipo de técnicas
sofisticadas.Aprender CSS es divertido. Según vayas avanzando en el
contenido del tutorial, recuerda dedicar el tiempo suficiente para
experimentar con lo que hayas aprendido en cada lección.
Para usar CSS es necesario tener una experiencia básica en HTML.. Si
no estás familiarizado con HTML, empieza, por favor, con nuestro
tutorial HTML antes de adentrarte en CSS.

¿Qué software necesito?
 Evita, por favor, usar software tal como FrontPage, DreamWeaver o Word con este tutorial. Este
tipo de software tan sofisticado no te ayudará a aprender CSS; más bien, te limitará y reducirá
de modo significativo tu curva de aprendizaje.
 Todo lo que necesitas es un editor de texto sencillo y gratuito.
 Por ejemplo, Microsoft Windows incorpora un programa que se llama Bloc de notas. Se localiza
normalmente en el menú de Inicio, sección Todos los programas dentro de la carpeta
Accesorios. Si no es éste, puedes usar un editor de texto parecido, por ejemplo, Pico para Linux
o Simple Text para Macintosh.
 Este tipo de editores de texto sencillos son ideales para aprender HTML y CSS puesto que no
afectan o cambian el código que vas tecleando. De esto modo, los éxitos y errores sólo se te
podrán atribuir a ti... y no al software.
 Puedes usar cualquier navegador con este tutorial. Te animamos a que mantegas siempre
actualizado tu navegador y uses la versión más reciente.Un navegador y un sencillo editor de
texto es todo lo que necesitas
 CSS es el acrónicmo de CascadingStyle Sheets (es decir, hojas de estilo en cascada).

¿Qué diferencia hay entre CSS y
HTML?
 HTML se usa para estructurar el contenido; CSS se usa para
formatear el contenido previamente estructurado.Vale, suena un
poco técnico y confuso... pero sigue leyendo; pronto todo tendrá
sentido.
 Allá en los buenos tiempos en que Madonna era una "Virgen" y un
tipo llamadoTim Berners Lee inventó el WorldWideWeb, el lenguaje
HTML sólo se usaba para añadir estructura al texto. Los autores
podían marcar sus textos diciendo "esto en un título" o "esto es un
párrafo", usando las etiquetas HTML <h1> y <p>, respectivamente.
 A medida que laWeb fue ganando popularidad, los diseñadores
empezaron a buscar posibilidades para añadir formato a los
documentos en línea. Para satisfacer esta reclamación, los
fabricantes de los navegadores (en ese momento, Netscape y
Microsoft) inventaron nuevas etiquetas HTML, entre las que se
encontraban, por ejemplo, <font>, que se diferenciaba de las
etiquetas originales HTML en que definían el formato... y no la
estructura.

 Esto también llevó a una situación en la que las etiquetas
estructurales originales, por ejemplo, <table>, se usaban cada
vez más de manera incorrecta para dar formato a las páginas
en vez de para añadir estructura al texto. Muchas nuevas
etiquetas que añadían formato, por ejemplo, <blink>, sólo las
soportaban un tipo determinado de navegador. "Necesitas el
navegador X para visualizar esta página" se convirtió en una
declaración de descargo común en los sitios web.
 CSS se inventó para remediar esta situación, proporcionando a
los diseñadores web con sofisticadas oportunidades de
presentación soportadas por todos los navegadores. Al mismo
tiempo, la separación de la presentación de los documentos del
contenido de los mismos, hace que el mantenimiento del sitio
sea mucho más fácil.

¿Qué beneficios me ofrece CSS?
 CSS fue toda una revolución en el mundo del diseño web. Entre los
beneficios concretos de CSS encontramos:
 control de la presentación de muchos documentos desde una única
hoja de estilo;control más preciso de la presentación;aplicación de
diferentes presentaciones a diferentes tipos de medios (pantalla,
impresión, etc.);Numerosas técnicas avanzadas y sofisticadas.

 Formatear y añadir estilo al texto es un tema clave para cualquier
diseñador web. En esta lección presentaremos las increíbles
oportunidades que ofrece CSS a la hora de añadir presentación al
texto. Describiremos las siguientes propiedades:

 text-indent
 text-align
 text-decoration
 letter-spacing
 text-transform

Sangría del texto [text-indent]
 La propiedad text-indent permite añadir un toque de
elegancia a los párrafos de texto al aplicar sangría a la
primera línea de dicho párrafo. En el ejemplo siguiente se
ha aplicado una sangía de 30px a todos los párrafos de
texto marcados con la etiqueta <p>:


 p {
 text-indent: 30px;
 }


Alineación del texto [text-align]
 La propiedad CSS text-align es el
equivalente al atributo align usado en
versiones anteriores de HTML. Los
valores posibles de esta propiedad son:
left(texto alineado a la izquierda), right
(texto alineado a la derecha) o center
(texto con alineación centrada). Además,
el valor justify(alineación justificada)
alargará cada

 línea de forma que los márgenes izquierdo y derecho estén justificados. Esta tipo de presentación la habrás visto, por ejemplo,
en periódicos y revistas.

 En el ejemplo que sigue, el texto de los encabezados de la tabla, <th>, se ha alineado a la derecha, mientras que los datos de
la tabla, <td>, aparecen centrados. Además, los párrafos de texto normales están justificados:


 th {
 text-align: right;
 }

 td {
 text-align: center;
 }

 p {
 text-align: justify;
 }

Decoración del texto [text-decoration]
 La propiedad text-decoration permite añadir diferentes "decoraciones" o "efectos" al texto.
Por ejemplo, se puede subrayar el texto, tacharlo o ponerle un subrayado superior. En el
ejemplo siguiente, el elemento <h1>aparecerá subrayado, el elemento <h2> aparecerá con
un subrayado por encima del texto y el elemento <h3> tendrá el texto tachado.


 h1 {
 text-decoration: underline;
 }

 h2 {
 text-decoration: overline;
 }

 h3 {
 text-decoration: line-through;


 Espaciado entre caracteres [letter-spacing]
 El espaciado entre los caracteres de texto se puede
especificar usando la propiedad letter-spacing. El valor
de esta propiedad corresponde, sencillamente, al
ancho deseado. Por ejemplo, si queremos un
espaciado de 3px entre los caracteres de un párrafo de
texto <p> y6px entre los caracteres de los
encabezados <h1>, usaríamos el siguiente código:
 h1 { letter-spacing: 6px; } p
{ letter-spacing: 3px; }

 capitalize
 Pone en mayúscula la primera letra de cada palabra. Por ejemplo, "john doe" aparecerá como "John Doe".
 uppercase
 Convierte todas las letras a mayúscula. Por ejemplo, "john doe" aparecerá como "JOHN DOE".
 lowercase
 Convierte todas las letras a minúscula. Por ejemplo, "JOHN DOE" aparecerá como "john doe".
 None:No se realiza transformación alguna; el texto se presenta tal como aparece en el cógido HTML.
 Como ejemplo, usaremos una lista de nombres. Todos los nombres están marcados con la etiqueta <li> (de "list
element", es decir, elemento de lista). Supongamos que queremos que las iniciales de los nombres aparezcan
en mayúscula y los títulos con todos los caracteres en mayúscula.
 Échale un vistazo al código fuente del ejemplo y verás que el texto aparece realmente en minúscula.
 h1 { text-transform: uppercase; } li {
text-transform: capitalize; }

Ccs.sandromtz_4101

Más contenido relacionado

La actualidad más candente (19)

Similar a Ccs.sandromtz_4101 (20)

Último (14)

Ccs.sandromtz_4101