El documento explica los conceptos básicos de las hojas de estilo en cascada (CSS), incluyendo su historia, las diferentes formas de aplicar CSS a las páginas web mediante hojas externas, internas o en línea, y el uso de selectores de ID y clase para estilizar elementos específicos sin necesidad de repetir código.
Cuenta la leyenda que al construir un documento HTML se tenía que definir cada una de las propiedades en las diferentes etiquetas para mejorar su apariencia. Así las cosas, se pensó en una estrategia que permitiera independizar la parte visual del contenido propio del documento HTML.
CSS son las siglas de Cascade Style Sheets, que quiere decir en español “Hojas de Estilos en Cascada”. Se trata de una especificación sobre los estilos físicos aplicables a un documento HTML y trata de dar la separación definitiva de la lógica (estructura) y la presentación del documento HTML.
Que es CSS? Presentacion Basica para CSSjosuew2013
Se muestra una pequeña presentacion sobre que es CSS, cual es su historia, fases, etc. de una manera entendible. tambien se muestran algunos ejemplos de un codigo en html con CSS
Cuenta la leyenda que al construir un documento HTML se tenía que definir cada una de las propiedades en las diferentes etiquetas para mejorar su apariencia. Así las cosas, se pensó en una estrategia que permitiera independizar la parte visual del contenido propio del documento HTML.
CSS son las siglas de Cascade Style Sheets, que quiere decir en español “Hojas de Estilos en Cascada”. Se trata de una especificación sobre los estilos físicos aplicables a un documento HTML y trata de dar la separación definitiva de la lógica (estructura) y la presentación del documento HTML.
Que es CSS? Presentacion Basica para CSSjosuew2013
Se muestra una pequeña presentacion sobre que es CSS, cual es su historia, fases, etc. de una manera entendible. tambien se muestran algunos ejemplos de un codigo en html con CSS
Presentación de CSS para la clase de Programación V de la Corporación Universitaria Autónoma del Cauca.
Andrés Giovanni Lara Collazos
Robert Velasco
Luis Muñoz
Presentación de CSS para la clase de Programación V de la Corporación Universitaria Autónoma del Cauca.
Andrés Giovanni Lara Collazos
Robert Velasco
Luis Muñoz
Ipsos, empresa de investigación de mercados y opinión pública, divulgó su informe N°29 “Claves Ipsos” correspondiente al mes de abril, que encuestó a 800 personas con el fin de identificar las principales opiniones y comportamientos de las y los ciudadanos respecto de temas de interés para el país. En esta edición se abordó la a Carabineros de Chile, su evaluación, legitimidad en su actuar y el asesinato de tres funcionarios en Cañete. Además, se consultó sobre el Ejército y la opinión respecto de la marcha en Putre.
2. Introducción al CSS.
• A finales de 1994 nace el consorcio W3C (World Wide Web
Consortium) que es la encargada de generar las
recomendaciones de programación y diseño de los portales de
internet. Este consorcio, actualmente operativo, ha ido
regulando las bases y protocolos para la programación de las
webs.
• Con el pasar de los años las hojas de estilo en cascada o CSS
han ido evolucionando. Inicialmente se comenzó con el nivel
CSS1 en 1996 y actualmente, después de muchas mejoras y
actualizaciones, se encuentra en el nivel CSS3 que es lo que
actualmente conocemos y con las normas que se diseñan las
plantillas web.
3. Significado de una regla.
• Las reglas de uso de las hojas de estilo en cascada son muy
sencillas ya que prácticamente se utiliza un mismo formato
para las etiquetas. Para entender la regla que se aplica en las
hojas de estilo en cascada veamos un ejemplo:
• Etiqueta: es el parámetro HTML al que le vamos a aplicar el
estilo.
• Declaración: es el estilo completo que se le va a aplicar la regla
y viene delimitado por los símbolos { de apertura y } de cierre.
• Propiedad: es el atributo al que se le asignará el valor CSS.
• Valor: es el valor de la propiedad que tendrá la etiqueta.
4. Formas de usar CSS.
• Para usar CSS es necesario tener conocimientos básicos de
HTML/XHTML que es en el formato en el que se aplican las
reglas de las hojas de estilo en cascada. Hay 3 formas básicas
de aplicar las hojas de estilo en cascada en un sitio web:
a) Hoja de estilos en cascada Externa.
• Una hoja de estilos en cascada externa es ideal cuando se
aplica el estilo a muchas páginas. Con una hoja de estilos en
cascada externa se puede cambiar el aspecto de un sitio web
completo con solo modificar un archivo. Cada página debe
enlazar a la hoja de estilo con la etiqueta
1 <link>
5. • Esta etiqueta va dentro de la cabecera:
1 <head>
2 <link rel="stylesheet" type="text/css"
href="estilos.css">
3 </head>
Una hoja de estilos en cascada externa puede ser escrita en cualquier editor de texto
y el contenido no debe tener etiquetas HTML. La hoja de estilos en cascada debe ser
guardada con una extensión .css. Un ejemplo de un archivo de hoja de estilos en
cascada se muestra a continuación:
1
body {background-image:url("images/
imagen.gif");}
2
hr {color:#F00;}
3
p {margin-left:20px;}
6. • Muy importante a tener en cuenta es la ruta del archivo que se va a guardar. En este caso si la ruta
se llama en la cabecera href=”estilos.css” esto le va a indicar al navegador que la hoja de estilos en
cascada se encuentra en la raíz del servidor. También es posible guardarla dentro de un directorio
llamado /css en nuestro servidor por lo que la ruta debe de cambiar quedando como
href=”css/estilos.css” y de esta manera sea posible para el navegador interpretarla y aplicarla en el
sitio web.
• b.) Hoja de estilos en cascada Interna.
• Una hoja de estilo en cascada interna debe ser usada cuando un único
documento tiene un estilo único. Para definir estilos internos en la sección
head de una página HTML se escribirá el código mediante las etiquetas
<style> de apertura y </style> de cierre
quedando así:
view sourceprint?
<head>
<style>
body {background-image:url("images/ imagen.gif");}
hr {color:#F00;}
p {margin-left:20px;}
</style>
</head>
7. • C) Hojas de estilo en cascada Múltiples.
• Además de estos tres métodos individuales se puede utilizar el CSS
combinando los métodos según los necesitamos. Veamos un ejemplo:
• Tenemos una página interna de nuestro sitio que se llama ayuda.html. En esta
página queremos personalizar la etiqueta h2 para mostrar subtítulos
adaptados a nuestro contenido (puedes ver el artículo de introducción al
HTML).
• En nuestra plantilla la hoja de estilos en cascada está declarada para todas las
páginas internas de la siguiente manera:
• view sourceprint?
• 1
• <head>
• 2
• <link rel="stylesheet" type="text/css" href="estilos.css">
• 3
• </head>
8. • La etiqueta h2, en esta hoja de estilos en cascada, tiene las siguientes propiedades:
• 1
• h2 {color:#000; font-weight: bold; font-size: 18px;}
• Este formato se aplicará a la etiqueta h2 en todo nuestro sitio web y la etiqueta h2 será de color
negro, en negritas y con un tamaño de fuente de 18 píxeles.
• Ahora, supongamos que queremos personalizar esta etiqueta únicamente para la página interna de
nuestro ejemplo, ayuda.html. Para esto podemos usar el método de hojas de estilos en cascada
interna:
• 1
• <head>
• 2
• <link rel="stylesheet" type="text/css" href="estilos.css">
• 3
• <style>
• 4
• h2 {color:#06F; font-size: 24px;}
• 5
• </style>
• 6
• </head>
9. • Este formato se aplicará a la etiqueta h2 únicamente en la página interna ayuda.html y la
etiqueta h2 ahora será de color azul, seguirá estando en negritas pero con un tamaño de
fuente de 24 píxeles.
• Por último supongamos que queremos crear en nuestra sección de ayuda un apartado que es
más importante que el resto como “Ayuda Online”. Para esto podemos aplicar el tercer
método de hojas de estilo en cascada en línea quedándonos de la siguiente manera:
• 1
• <h2 style="color:#F00; text-transform:uppercase; font-size:28px;">Ayuda Online</h2>
• En nuestra página interna ayuda.html el único apartado que se verá diferente será el que se
subtitule “Ayuda Online” que es al que le aplicamos las nuevas reglas quedando de color rojo,
todo el texto en mayúsculas y de tamaño de fuente de 28 píxeles.
• Al ver este ejemplo podemos sacar en conclusión el orden de prioridad del uso de los
métodos de hojas de estilos en cascada.
• Hojas de estilo en cascada Externa. (menor prioridad)
• Hojas de estilo en cascada Interna.
• Hojas de estilo en cascada en Línea. (mayor prioridad)
• La etiqueta h2, aunque inicialmente había sido declarada de color negro, en el apartado de
“Ayuda Online” aparecerá de color rojo ya que prevalece este método con mayor prioridad.
10. • Selectores ID’s y clases en CSS.
• Volviendo al ejemplo anterior, aunque hemos visto una manera de utilizar los tres métodos
efectivamente, a la larga si queremos personalizar muchas de nuestras páginas internas en nuestro
sitio web, tendremos la desventaja de que por exceso de código nuestro sitio web empiece a ir más
lento y además de realizar el trabajo múltiples veces sin necesidad.
• Para evitar trabajar de más y sobrecargar nuestro sitio web contamos con 2 propiedades
fundamentales de las hojas de estilo en cascada que nos permitirán ahorra tiempo y disgustos: los
selectores ID’s y las clases.
• ID’s: se utiliza para especificar un estilo único para un elemento dentro de todo el sitio. Este utiliza
el atributo “id” del elemento HTML y se define con el símbolo “#”.
• Clases: se utiliza para especificar un estilo para varios elementos en el sitio. Este utiliza el atributo
“class” del elemeto HTML y se define con un “.”.
• Aplicando los selectores a nuestro ejemplo podemos crear unas nuevas reglas en nuestro archivo
estilos.css quedando de la siguiente manera:
• view sourceprint?
• 1
• h2 {color:#000; font-weight: bold; font-size: 18px;}
• 2
• #ayudaonline { color:#06F; font-size: 24px;} (creamos una ID llamada ayudaonline)
• 3
• .ayuda { color:#F00; text-transform:uppercase; font-size:28px;} (creamos una clase llamada (ayuda)
11. • Se puede observar que solo utilizaremos el método de hojas de estilos en cascada externo
agregando 2 nuevas reglas: #ayuda que será la ID única y .ayudaonline que será la clase. Es muy
importante destacar que tanto el nombre que le demos a los ID’s como las clases nunca pueden
comenzar por números aunque si pueden contenerlos pero deben siempre comenzar por una letra
y es recomendable que se escriban todas en minúsculas.
• En nuestra página ayuda.html tendremos que realizar la siguiente modificación a todas las
etiquetas h2 excepto la de “Ayuda Online”:
• 1
• <h2 class=”ayuda”>Ayuda para Particulares</h2>
• 2
• <h2 class=”ayuda”>Ayuda para Empresas</h2>
• 3
• …
• En nuestro apartado “Ayuda Online” realizamos la siguiente modificación:
• 1
• <h2 id=”ayudaonline”>Ayuda Online</h2>
• Como se puede observar, aplicando los selectores, nos ahorramos el escribir mucho código en
nuestra página y tiempo ya que si queremos modificar las propiedades de esta etiqueta en un
futuro con solo cambiar un archivo las propiedades de estas cambiarán automáticamente.
