Fundamentos Basicos de Hojas de Estilos

1
FUNDAMENTOS BASICOS DE HOJAS DE ESTILOS
CSS - Lección 1: Introducción
El consorcio que regula los estandars para la web recomienda separar el contenido de
una página de su diseño. El contenido se genera con html (tienes un curso de html
aquí), y el diseño toma forma mediante código css. Estas siglas significan hojas de
estilo en cascada, y su misión es la de proporcionar un diseño uniforme para todo
nuestro sitio web.
Esto proporciona una ventaja muy importante: a la hora de realizar cambios en el diseño
de nuestra web, no necesitamos cambiar el código de cada una de las páginas que
tengamos; sinó que bastará con cambiar solo el código css para que haga efecto en
todos los documentos de nuestro sitio web.
Lo primero que se verá en este curso será la sintaxis de este lenguaje; después veremos
las diferentes formas de implementar esta tecnología en nuestra web y, por último,
nos centraremos en asimilar los diferentes elementos para controlar nuestro diseño.
CSS - Lección 2: La sintaxis de las hojas de estilo
Para escribir correctamente hojas de estilo en cascada necesitamos saber sus reglas
ortográficas. La consecuencia inmediata es la de poder identificar las partes que
componen este lenguaje.
La sintaxis es muy sencilla ya que siempre se sigue el mismo patrón. Vamos a

introducirnos en materia diciendo que los elementos son: un selector y una
declaración.La declaración, a su vez, está compuesta por una propiedad y un valor.
p {
color:blue;
font-size:14pt;
}
En el código de ejemplo, el selector es la letra p; haciendo referencia a la etiqueta p

(párrafo) del documento html asiciado. La declaración es todo lo que va dentro de las
llaves. Como parte de la declaración tenemos dos propiedades (en fucsia) y dos
valores en verde.
Hay un aspecto importante que no se puede olvidar:
Las declaraciones se separan entre sí mediante un punto y coma

Las propiedades se separan de los valores mediante dos puntos
El preformateado que le hemos dado al código css es arbitrario y sirve para

organizar visualmente el código. De ello, te recomendamos que respetes este
preformateado para que luego no tengas dificultades a la hora de revisar tu código,
la figura 1 ilustra muy bien esto.
2
Figura 1: El preformateado nos ayuda a identificar

los elementos del código
No cabe duda de las ventajas de preformatear nuestras hojas de estilo; esto nos ayuda a
identificar las propiedades y valores rápidamente, así cómo las distintas
declaraciones.
CSS - Lección 3: Implementación del estilo en cascada
Hay tres formas de implementar el código css en nuestros documentos html. Las
primera es estableciendo un atributo en la propia etiqueta html que deseemos darle
un estilo. La segunda es en la cabecera de nuestra página web, a través de la
etiqueta <style>. La tercera forma es la más flexible, se trata de un documento
independiente en donde definir el diseño.
En relación a la primera forma, utilizaremos el atributo style en la propia etiqueta

html a la cual deseemos proporcionarle diseño. En el siguiente código utilizamos esta
forma de implementación css para darle a un párrafo color azul y un tipo de fuente
arial.


<p style="color:blue; font-family:arial;">
Las hojas de estilo en cascada nos ayudan
enormemente a generar y mantener un diseño
gráfico para nuestro sitio web.</p>
Como ves, el valor que debe de tomar el atributo style son las declaraciones de la
sintaxis css necesarias para dar el diseño deseado.
Con la segunda forma de utilizar código css, que hemos mencionado antes, podemos
darle diseño a todo un documento html de forma integral. Para ello, escribiremos el
código css en la cabecera de nuestra página web; dentro de la etiqueta <style>
<html>

<head>


<style type="text/css">

</style>
</head>

<body>


<h2>Hojas de estilo en cascada</h2>

<p>Con la etiqueta style podemos
diseñar nuestras páginas webs.</p>

<p>Esta técnica de diseño web es
muy flexible y potente para el
webmaster.</p>
</body>
</html>
En el código anterior tenemos un documento html con un título y dos párrafos en el

cuerpo de la página. En su cabecera hemos definido un diseño para el documento, que
hemos escrito en código css dentro de la etiqueta cerrada <style>. El atributo
type="text/css" es opcional ponerlo para que el navegador sepa de que tipo de
código se trata.
Observa también que hemos metido el contenido de la etiqueta <style> dentro de los
símbolos de comentario html. La razón de esto es porque hay navegadores antiguos
que no soportan esta etiqueta; entonces, al encontrarse con este código lo tomará
como comentarios html y así no lo mostrará en nuestra página web.
Es recomendable que escribas el código anterior en tu blog de notas. Empieza

escribiendo primero la estructura html; después sigue por el cuerpo de la página y,
finalmente, por el título de la página y la etiqueta <style>.
Para la tercera forma de implementar css, vamos a utilizar una nueva etiqueta html: la
etiqueta <link>. Se trata de una etiqueta abierta, que sirve para establecer una
conexión o enlace entre la hoja de estilo en cascada y el documento html.
<html>
<head>
4
<title>Mi página web con diseño</title>


<link href="midiseño.css" type="text/css"
rel="stylesheet" />
</head>
<body>
<h2>Hojas de estilo independientes</h2>
<p>Podemos escribir hojas de estilo

independientes que se pueden aplicar
a cualquier documento html.</p>
<p>Con solo enlazar la página con la

etiqueta link aplicaremos todo el
diseño escrito en el archivo css.</p>
</body>
</html>
Cuando usamos una hoja de estilos independiente: un documento css; es importante

asignarle a la etiqueta link el atributo rel. Este atributo es imprescindible y sirve
para especificar si se trata de un diseño persistente, es decir, que nunca se va alternar
con otro diseño (valor stylesheet); o bien si vamos a ir alternando con otros diseños
(valor alternate stylesheet). Este aspecto es algo obsoleto, ya que los navegadores
actuales carecen de capacidad para hacer que el usuario elija el estilo alterno que quiera,
aún así hay que especificar.
El enlace que establece la conexión entre los dos archivos; el html y el css, se realiza a
través del atributo html href="midiseño.css" que se encuentra en la etiqueta <link>.
El valor que toma el atributo href es el destino de la hoja de estilo. En la figura 2
podemos apreciarlo más gráficamente.
Figura 2. El atributo href es imprescindible con

los documentos css externos
5
No cabe duda que la forma más ventajosa es la última que hemos visto; en un solo
documento definimos todo el diseño de nuestra web, de manera que para cambiar el
aspecto de todo un web tan solo tenemos que acudir al documento css. Queda pro
ver otra forma de implementación css, pero no lo veremos por ahora porque es para
trabajar de forma más avanzada.
css - Lección 4: Primeros pasos con css
Es hora de empezar a conocer el lenguaje css; o también llamado lenguaje de hojas de

estilo en cascada. Para ello vamos a hacerlo de forma práctica. Se propondrá códigos
de trabajo para practicar, y asimilar así todos los conceptos. A partir de los códigos
de trabajo, irás cambiando valores, añadiendo declaraciones, etc...
Para comenzar, abre esta página html con la que vamos a trabajar en una
ventana/pestaña nueva, copia el código, pégalo en tu blog de notas y guárdalo en tu
disco duro con el formato html. Vamos a introducirnos en el diseño modificando las
propiedades de los párrafos Si abres el archivo que has guardado con tu navegador
verás que la página consta de un título y dos párrafos.
En primer lugar, nos centraremos en los párrafos; por ello, escribiremos el selector
css para párrafos y sus llaves. En el siguiente código puedes ver como se escribe.
p {
</style>
La primera declaración que escribamos será para cambiar el color del texto de los
párrafos. Esta declaración se escribe dentro de las llaves. Su escritura es:
color:blue;
p {
color:blue; /* color del texto */
}
</style>
La figura 3 muestra como el texto de la página ha cambiado a color azul, tal y como
hemos puesto como valor en la propiedad color para el selector p
6
Figura 3: Cambio a color azul de los párrafos
Con tan solo cambiar el valor de la propiedad del color al selector de párrafos, podemos
cambiar el color de los párrafos de nuestra página web. Experimenta con otros valores
como green, orange, yellow o purple.
CSS - Lección 5: Dando presentación al texto
En la lección anterior hemos visto como darle color al texto. Por supuesto, el diseño no
se limita solo alto, en vez de eso, podemos controlar hasta el más mínimo detalle en
cuanto a la presentación del texto se refiere.
En concreto, vamos a aprender como cambiar el tipo de letra, la alineación, la

separación de líneas, el tamaño del texto y muchos otros aspectos en cuanto a la
presentación del texto se refiere.
Ovserva la siguiente tabla, en ella se detallan las diferentes propiedades para

configurar la presentación del texto:
propiedades para darle presentaci?n al texto

color Con esta propiedad le damos color al texto
font-family Para aplicar un tipo de letra
font-size Nos permite modificar el tama?o de la fuente
font-weight Habilitamos con esta propiedad el texto en negrita
text-align Nos permite alinear el texto y justificarlo
line-height Para controlar la separaci?n de los renglones
Por ejemplo, el siguiente código nos permite diseñar una página en la que tenemos un
título y un párrafo. En concreto, presenta el texto en color rojo para el título, y
naranja para el párrafo. Además, el párrafo tiene el texto justificado y un
interlineado grueso. También, le daremos al título un tipo de letra arial y le
cambiaremos el tamaño.
h1 {
color:red; /* color rojo del texto */
font-family:arial; /* tipo de letra arial */
font-size:20px; /* tamaño de letra 24 pixels */
}
7
p {
color:orange; /* color rojo del texto */
text-align:justify; /* texto justificado */
line-height:18px; /* interlineado grueso */
font-size:12px; /* tamaño de letra 24 pixels */
}
Hay propiedades cuyo valor es un tamaño, como el tamaño del texto (font-size) o el
tamaño del interlineado (line-height). Para estas magnitudes utilizaremos una
cantidad en pixeles. El atributo text-align tiene cuatro valores: left para
alinear a la izquierda, right para alinear a la derecha, center para centrar el texto y
justify para ajustarlo al ancho de la ventama.
El código presentaría así el texto en una página:
Figura 4. Diseño de una página cambiando la

presentación del texto
CSS - Lección 6: Diseñando listas
Con las hojas de estilo podemos diseñar nuestras listas de forma muy flexible. Por
ejemplo, no estaremos limitados a listas verticales; sino que podemos transformarlas en
listas horizontales.
Esto es útil para hacer barras de navegación que respeten los estándares web. Así, se
pueden meter una serie de enlaces de navegación en una lista y transformar ésta en una
lista horizontal.
Antes de nada, y como es costumbre, veamos las propiedades para diseñar listas:
Propiedades css para listas

list-style-type Para especificar el tipo de marcador para cada elemento
list-style-image Para implementar una imagen como marcador
list-style-position Para situar el marcador dentro del texto o en el margen
display Disponer los elementos horizontalmente
Por defecto, en las listas ordenadas cada elemento viene identificado por un número por
defecto. Con la propiedad list-style-type podemos cambiar esto y hacer que la
ordenación sea alfabética o mediante numeración romana. Los valores que puede
adoptar esta propiedad son: decimal (por defecto), lower-alpha, upper-alpha,
lower-roman y upper-roman.
8
Figura 5. Direfentes valores para la propiedad

list-style-type en listas ordenadas.
En cuanto a los valores que pueden tener los elementos de una lista desordinada para la
propiedad list-style-type son: disc (por defecto), circle y square. Existe
otro valor que poseen las dos clases de listas, se trata de none, y sirve para que no
aparezca símbolo alguno en cada elemento.
También tenemos la posibilileco usar ninguno de los marcadores vistos, sino el que
nosotros queramos por medio de una imagen. Así, es posible establecer como
marcador una imagen. Para ello tenemos que utilizar la propiedad list-style-
image. Solo sirve para listas desordenadas como es lógico.
ul {
list-style-image:url("imagenes/rombo.gif");
}
El código anterior nos habilitaría una imagen como marcador en todas las listas
desordenadas de nuestras páginas. El valor que toma la propiedad indica que se use la
imagen rombo.gif situada en la carpeta imagenes. Para poner un valor, siempre hay que
poner "url" y, entre paréntesis, el destino del archivo a enlazar.
Figura 6. Se pueden poner imágenes

como marcadores.
Si observas, los marcadores siempre se quedan a la izquierda, ocupando el margen

izquierdo del texto. Podemos cambiar esto con la propiedad list-style-
position, cuyos valores posibles son outside (por defecto) y inside. Así
podremos hacer que los marcadores se coloquen a la altura del texto.
Figura 7. Efecto en una lista para los dos valores de la

propiedad list-style-position.
Por último decir que podemos mostrar listas en las que los elementos se dispongan
de forma horizontal. para ello nos valdremos de la propiedad display, dándole un
valor de inline. Existen muchas más propiedades para dar diseño a las listas, pero
aún no las veremos para no complicar el aprendizaje.
9
CSS - Lección 7: Definición del color del texto
En esta lección vamos a profundizar en el tema de aplicar color a distintos

elementos; por ejemplo, explicaremos técnicas para dominar la aplicación de color a
nuestros textos.
Estos elementos tienen un denominador común: albergan dentro de ellos texto, el color
del texto de los diversos elementos se puede manipular por medio de las hojas de estilo
en cascada.
Existen muchas formas de implementar color al texto; cada una tiene sus ventajas y
sus incovenientes. La razón por la que se puede aplicar color al texto de diversas
formas, es porque hay circunstancias a la hora de diseñar que requieren una forma
de implementación u otra.
Por ejemplo, hay desarrollos de diseños que no son muy complejos, entonces bastaría
para implementar color dándole valores a la propiedad color mediante el nombre del
color en cuestión. Trabajando en diseños complejos no podríamos aplicar esta clase de
valores.
La forma más simple de aplicar color al texto de un elemento; como puede ser un
párrafo o una lista, es estableciendo como valor el nombre (en inglés) del color que
deseemos aplicar a la propiedad color. Por ejemplo, en la declaración color:blue;
estableceríamos el color azul para el texto.
La segunda forma de controlar el color del texto es aplicando valores hexadecimales

al color. Esta nueva forma de implementar valores es más precisa que la primera, y está
destinada a conseguir mayor precisión en el color que deseamos establecer. Como
ejemplo, para introducirnos, tenemos la siguiente declaración que establece el color
verde para el texto: color:#00FF00;.
Su funcionamiento es el siguiente: se trata de tres pares de números; que miden la

catidad de color primario que se aplicará. El primer par de números corresponde al
color rojo, el pár de números del medio corresponde al color verde, y el último par
de números al color azul. Mezclando estos tres, en mayor o menor grado, podemos
crear cualquier color.
Figura 8. Los colores que representa cada pareja

de números hexadecimales.
La tercera forma de aplicar color se basa en la anterior: mezclando distintas

cantidades de colores primarios. La diferencia está en la sintaxis, ya que en este caso no
10
se usa notación hexadecimal; lo que se usa son coordenadas paramétricas. Aquí un

ejemplo de esta forma para color azul: color:rgb(0,0,255);.
La sintaxsis del valor de la propiedad empieza por unas siglas, las iniciales de cada
color que se representa: red, green y blue. Entre paréntesis ponemos los parámetros de
cada color separados por comas; el rango va de 0 a 255.
Existe una variante que consiste en poner los parámetros en tanto por ciento, en
vez de utilizar el rango de 0 a 255. Por ejemplo, podemos escribir la siguiente
declaración para poner un color rojo:rgb(100%,0%,0%);.
Relación de valores para el color

color nombre hexadecimal paramétrica paramétrica
rojo red #FF0000 rgb(255,0,0) rgb(100%,0%,0%)
lima lime #00FF00 rgb(0,255,0) rgb(0%,100%,0%)
azul blue #0000FF rgb(0,0,255) rgb(0%,0%,100%)
negro black #000000 rgb(0,0,0) rgb(0%,0%,0%)
blanco white #FFFFFF rgb(255,255,255) rgb(100%,100%,100%)
amarillo yellow #FFFF00 rgb(255,255,0) rgb(100%,100%,0%)
celeste aqua #00FFFF rgb(0,255,255) rgb(0%,100%,100%)
rosa pink #FFC0CB rgb(255,192,203) rgb(100%,75%,80%)
morado purple #800080 rgb(128,0,128) rgb(50%,0%,50%)
CSS - Lección 8: Aplicando hojas de estilo a las tablas
Con las hojas de estilo podemos proporcionarle un aire nuevo a nuestras tablas, que
son los objetos que albergan a los datos tabulados. En esta misma web se utiliza código
CSS para diseñar las tablas de este curso.
Como ves, por las tablas de este curso, podemos diseñar éstas de forma muy flexible;
personalizándolas hasta límites insospechados. Por ejemplo, dándole un color a cada
fila.
A continuación se te presentan las propiedades que podemos usar para diseñar

nuestras tablas:
Propiedades para diseñar tablas

border-collapse Fuerza a que los bordes contiguos de las celdas se solapen
border-spacing Para establecer la distancia entre los bordes de las celdas
border-style Para habilitar un borde, con un estilo determinado
background-color Para aplicar un color de fondo a la tabla
padding Pone un margen entre el borde de las celdas y su contenido
11
Por lo general, en algunos navegadores, las celdas no se solapan, quedando un poco

separadas las unas de las otras. Con la propiedad border-collapse podemos
conseguir controlar este aspecto.
Esta propiedad tiene dos valores: collapse y separate. El primer valor es el que
establece el que se adosen las celdas contiguas. El segundo valor es el que se
establece por defecto, y deja una separación entre las celdas.
En la imagen 9 puedes ver este concepto más gráficamente:
Figura 9. Podemos hacer colapsar los bordes para que las celdas
se adosen unas con otras.
Si lo que deseamos es que las celdas de una tabla guarden una separación entre ellas,
podemos controlar la distancia de la separación de las celdas. Para ello nos
valdremos de la propiedad border-spacing. Los valores que tomará esta
propiedad serán cantidades en píxeles.
Aunque existen otras magnitudes para medir la cantidad de distancia, como por ejemplo
porcentajes, por ahora nos vamos a centrar en la unidad de pixel. En una próxima
lección nos centraremos en las distintas unidades que podemos manejar con las hojas de
estilo en cascada.
También tenemos la posibilidad de ponerle un color de fondo a las celdas. Mediante

la propiedad background-color estableceremos los valores en las modalidades
que analizamos en la lección 7 de este mismo curso.
Cuando creamos una tabla, ésta no aparece como tal, sino que lo que vemos son solo los
datos tabulados contenidos en la tabla. Esto es porque los bordes no aparecen. Con la
propiedad border-style podemos hacer que se muestren los bordes, pudiendo
elegir entre varios tipos. A continuación los tipos y sus características:
 solid - la línea del borde se muestra con un solo trazo y lisa.

 double - la línea del borde aparece con doble trazo.
 groove - la línea aparece con bajo relieve.
 ridge - la línea del borde se muestra con alto relieve.
12
Figura 10. Podemos elegir entre distintos tipos de bordes

para las tablas o las celdas.
Vamos a implementar un código para que asimiles mejor el funcionamiento de todas

estas propiedades que hemos visto para las tablas y sus celdas (también pondrémos la
imagen de la tabla que genera el código):
table {
border-style:double;
background-color:aliceblue;
border-spacing:12px;
}
th {
border-style:solid;
background-color:aquamarine;
}
td {
border-style:groove;
background-color:orange;
padding:4px;
}
Tenemos una tabla con celdas normales y de encabezados. Hemos escrito en el código
diferentes valores para el estilo del borde; en concreto, tenemos doble trazo para el
borde de la tabla, uno sólido para los encabezados y otro de bajo relieve para las celdas
normales. Obversa también que le hemos dado un color de fondo diferente para cada
elemento: los encabezados con un azul verdoso, las celdas con naranja y la tabla con
gris.
Por otro lado se ha puesto un espacio entre el borde de la tabla y las celdas mediante
la declaración border-spacing:12px; ubicada en el selector table. Esta
declaración la heredarán las celdas también. Por último hemos utilizado la declaración
padding:4px; en el selector td para dejar un margen entre el borde de las celdas
y su contenido.
En la figura 11 se muestra el resultado del diseño que implementaría el código anterior:

13
Figura 11. Un diseño de tabla realizado con código css.

Fundamentos Basicos de Hojas de Estilos

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Fundamentos Basicos de Hojas de Estilos

Încărcat de

Drepturi de autor:

Formate disponibile

1

FUNDAMENTOS BASICOS DE HOJAS DE ESTILOS

CSS - Lección 1: Introducción

CSS - Lección 2: La sintaxis de las hojas de estilo

La sintaxis es muy sencilla ya que siempre se sigue el mismo patrón. Vamos a

En el código de ejemplo, el selector es la letra p; haciendo referencia a la etiqueta p

Hay un aspecto importante que no se puede olvidar:

Las declaraciones se separan entre sí mediante un punto y coma

El preformateado que le hemos dado al código css es arbitrario y sirve para

Figura 1: El preformateado nos ayuda a identificar

CSS - Lección 3: Implementación del estilo en cascada

En relación a la primera forma, utilizaremos el atributo style en la propia etiqueta

En el código anterior tenemos un documento html con un título y dos párrafos en el

Es recomendable que escribas el código anterior en tu blog de notas. Empieza

<title>Mi página web con diseño</title>

<h2>Hojas de estilo independientes</h2>

<p>Podemos escribir hojas de estilo

<p>Con solo enlazar la página con la

Cuando usamos una hoja de estilos independiente: un documento css; es importante

Figura 2. El atributo href es imprescindible con

css - Lección 4: Primeros pasos con css

Es hora de empezar a conocer el lenguaje css; o también llamado lenguaje de hojas de

Figura 3: Cambio a color azul de los párrafos

CSS - Lección 5: Dando presentación al texto

En concreto, vamos a aprender como cambiar el tipo de letra, la alineación, la

Ovserva la siguiente tabla, en ella se detallan las diferentes propiedades para

propiedades para darle presentaci?n al texto

El código presentaría así el texto en una página:

Figura 4. Diseño de una página cambiando la

CSS - Lección 6: Diseñando listas

Propiedades css para listas

Figura 5. Direfentes valores para la propiedad

Figura 6. Se pueden poner imágenes

Si observas, los marcadores siempre se quedan a la izquierda, ocupando el margen

Figura 7. Efecto en una lista para los dos valores de la

CSS - Lección 7: Definición del color del texto

En esta lección vamos a profundizar en el tema de aplicar color a distintos

La segunda forma de controlar el color del texto es aplicando valores hexadecimales

Su funcionamiento es el siguiente: se trata de tres pares de números; que miden la

Figura 8. Los colores que representa cada pareja

La tercera forma de aplicar color se basa en la anterior: mezclando distintas

se usa notación hexadecimal; lo que se usa son coordenadas paramétricas. Aquí un

Relación de valores para el color

CSS - Lección 8: Aplicando hojas de estilo a las tablas

A continuación se te presentan las propiedades que podemos usar para diseñar

Propiedades para diseñar tablas

Por lo general, en algunos navegadores, las celdas no se solapan, quedando un poco

En la imagen 9 puedes ver este concepto más gráficamente:

También tenemos la posibilidad de ponerle un color de fondo a las celdas. Mediante

 solid - la línea del borde se muestra con un solo trazo y lisa.

Figura 10. Podemos elegir entre distintos tipos de bordes

Vamos a implementar un código para que asimiles mejor el funcionamiento de todas

En la figura 11 se muestra el resultado del diseño que implementaría el código anterior:

Figura 11. Un diseño de tabla realizado con código css.

S-ar putea să vă placă și