Scribd
Cargar
55 vistas26 páginas

Guia 05 - CSS Introduccion

Este documento introduce CSS (Cascading Style Sheets), un lenguaje de estilo que define la presentación de documentos HTML. CSS controla aspectos como fuentes, colores, márgenes y posicionamiento. HTML se usa para estructurar contenido y CSS para formatearlo. El documento explica la estructura básica de CSS, incluyendo selectores, propiedades y valores, y métodos para aplicar CSS como en línea, interno y externo. También cubre etiquetas como <span> y <div> y propiedades como color, tamaño de fuente y

Cargado por

Daniel Alvarez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
55 vistas26 páginas

Guia 05 - CSS Introduccion

Este documento introduce CSS (Cascading Style Sheets), un lenguaje de estilo que define la presentación de documentos HTML. CSS controla aspectos como fuentes, colores, márgenes y posicionamiento. HTML se usa para estructurar contenido y CSS para formatearlo. El documento explica la estructura básica de CSS, incluyendo selectores, propiedades y valores, y métodos para aplicar CSS como en línea, interno y externo. También cubre etiquetas como <span> y <div> y propiedades como color, tamaño de fuente y

Cargado por

Daniel Alvarez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 26

Desarrollo Orientado a Plataformas

Unidad I – Hojas de Estilo en Cascada CSS


Guía 05 – CSS Introducción

Introducción a CSS
Cascading Style Sheets – Hojas de Estilo en Cascada

CSS es un lenguaje de estilo, que define la presentación de los documentos HTML. Por
ejemplo, CSS abarca cuestiones relativas a fuentes, colores, márgenes, líneas, altura,
anchura, imágenes de fondo, posicionamiento avanzado y muchos otros temas.
HTML se usa para estructurar el contenido; CSS se usa para formatear el contenido
previamente estructurado.
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.

Muchas de las propiedades que se usan en las hojas de estilo en cascada (CSS) son parecidas
a las de HTML. Así pues, si esta familiarizado con el uso de HTML para cuestiones de
presentación, lo más probable es que reconozca gran parte del código usado.

La Estructura básica CSS

✓ Selector: El selector es el elemento HTML que vamos a seleccionar del documento


para aplicarle un estilo concreto.
✓ Propiedad: La propiedad es una de las diferentes características que brinda el
lenguaje CSS.
✓ Valor: Cada propiedad CSS tiene una serie de valores concretos, con los que tendrá
uno u otro comportamiento.

Edgar Alexis Albornoz E email: [email protected] pág. 1


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

Taller Inicial
Aplicando CSS “Técnicas”
Desarrollar una pagina web con fondo rojo.

1) Usando HTML podría conseguirse así:

2) Aplicando CSS se puede lograr así:


body {background-color: #FF0000;
Existen diferentes formas de aplicar CSS a una pagina HTML.

Edgar Alexis Albornoz E email: [email protected] pág. 2


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

Método 1: En línea (el atributo style)


Se puede aplicar CSS directamente en la pagina HTML en la etiqueta correspondiente
usando el atributo style.

Método 2: Interno (la etiqueta style)


Usando la etiqueta <style> se definen los estilos CSS de la pagina.

Edgar Alexis Albornoz E email: [email protected] pág. 3


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

Método 3: Externo (enlace a una hoja de estilo)


El método recomendado es enlazar con lo que se denomina hoja de estilo externa.
Una hoja de estilo externa es sencillamente un fichero de texto con la extensión .css. Como
cualquier otro fichero, puede colocar la hoja de estilo en el servidor web o en el disco duro.
Para implementar el método 3 debe crear 2 archivos Taller01_Metodo3.html y miStyle.css,
en este Taller inicial se ubicaran estos dos archivos en la misma ubicación. Esta situación se
puede ilustrar de la siguiente manera:

El truco consiste en crear un vínculo desde el documento HTML (Taller01_Metodo3.html)


con la hoja de estilo (miStyle.css). Dicho vínculo se puede crear con una sencilla línea de
código HTML.
Codificación para el fichero Taller01_Metodo3.html

✓ La etiqueta <link> sirve para establecer relaciones con otros documentos,


enlaces o archivos.
✓ El atributo rel se utiliza para especificar la relación entre el documento actual
y el vinculado. Se usa solo cuando está presente el atributo href.
✓ El Atributo href especifica la URL del recurso enlazado.
Edgar Alexis Albornoz E email: [email protected] pág. 4
Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

Codificación para el fichero miStyle.css

Observe cómo la ruta a la hoja de estilo aparece indicada por medio del atributo href.
La línea de código debe insertarse en la sección de encabezado del código HTML, es decir,
entre la etiqueta <head> y </head>.
Este vínculo indica al navegador que debería usar la presentación del fichero CSS al mostrar
el fichero HTML. Lo realmente bueno de este método 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 presentación de muchos documentos HTML.

Esta técnica puede ahorrar mucho trabajo. Si se quisiere cambiar, por ejemplo, el color de
fondo de un sitio web compuesto por 100 páginas, un hoja de estilo puede ahorrar el tener
que cambiar de forma manual los 100 documentos HTML. Con CSS, el cambio se puede
llevar a cabo en unos segundos modificando parte del código de la hoja de estilo principal.

Edgar Alexis Albornoz E email: [email protected] pág. 5


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

Etiquetas complementarias
Los elementos <span> y <div>, son dos elementos de HTML de gran importancia en lo que se refiere
a CSS.

Los elementos <span> y <div> se usan para agrupar y estructurar un documento, y se usarán, a
menudo, junto con los atributos class e id (Esto será tema de una guía mas adelante).

✓ <span> </span> Elemento de línea, contenedor de línea.


✓ <div> </div> Divisiones, crea secciones o agrupaciones.

Etiqueta <span>
El elemento <span> es lo que se podría denominar un elemento neutro que no añade nada al
documento en sí. Pero con CSS <span> se puede usar para añadir características visuales distintivas
a partes específicas de texto en los documentos.

Etiqueta <div>
El elemento <div> se usa para agrupar uno o más elementos a nivel de bloque, mientras que <span>
se usa dentro de un elemento a nivel de bloque “Línea”.

Edgar Alexis Albornoz E email: [email protected] pág. 6


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

Practica I

Para el desarrollo de la Practica cree una carpeta Guia01CSS y dentro de esta un archivo
“index.html”, una carpeta style y dentro de esta un archivo “miStyle.css”.

1. Asigne a la Pagina un fondo verde aguamarina.


Verifique lo aplicado en el taller inicial.
2. Asigne al Titulo de la Pagina el color Rojo
a. Identificar la Etiqueta que va a recibir el estilo
b. Identificar el Atributo a manipular
c. Dar al valor correspondiente al atributo.

Propiedad “Color”
¿Qué valores puede Asignar en Color en que formatos?

3. Centre en al Pagina el Titulo

Edgar Alexis Albornoz E email: [email protected] pág. 7


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

Propiedad “text-align”
¿Qué tipos de Alineación puede Aplicar?

4. Convierta el texto del Titulo todo a Mayúscula

Propiedad “text-transform”
¿Qué tipos de Transformaciones puede Aplicar y como funcionan?

5. Cambie el tamaño de la fuente del titulo

Propiedad “font-size”
¿Cuáles son los formatos para indicar el tamaño de la fuente?

6. Cambie el color de fondo del Titulo a Azul claro

Propiedad “background-color”

7. Que se puede hacer con la propiedad text-decoration


8. Que se puede hacer con la propiedad letter-spacing

Edgar Alexis Albornoz E email: [email protected] pág. 8


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

Manejo de Fuentes en CSS


En esta guía aprenderá nociones sobre fuentes y cómo se aplican usando CSS. También se
analizara cómo solucionar el tema de que las fuentes específicas elegidas para un sitio web
ya que sólo se pueden aplicar si están instaladas en el dispositivo desde el que se accede a
dicho sitio web. Se describirán las siguientes propiedades CSS:
1. font-size
2. font-family
3. font-style
4. font-variant
5. font-weight
6. font

Tamaño de la fuente [font-size]


A la hora de describir el tamaño de las fuentes, existen muchas unidades diferentes
(Absoluto, Em”Se basa en el tamaño de eme 16 px”, %”porcentajes”, Px”píxeles” y
Pt”Puntos”) entre las que elegir. En esta guía nos centraremos en las unidades más comunes
y adecuadas. Como ejemplo, podemos comparar:

Existe una diferencia clave entre las unidades anteriores. Las unidades 'px' y 'pt' establecen
el tamaño de la fuente de forma absoluta, mientras que '%' y 'em' permiten al usuario
ajustar el tamaño de la misma según considere oportuno. Existen usuarios con algún tipo
de discapacidad como disminución visual, adultos mayores, o disponen de un monitor de
mala calidad. Para que su sitio web sea accesible para todo el mundo, deberá usar unidades
ajustables como: '%' o 'em'.

Edgar Alexis Albornoz E email: [email protected] pág. 9


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

Familia de fuentes [font-family]


La propiedad font-family se usa para establecer una lista ordenada de fuentes que se usarán
para mostrar un elemento determinado o una página 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
genéricas. Estos dos términos se explican a continuación.

La diferencia se puede ilustrar así:

Edgar Alexis Albornoz E email: [email protected] pág. 10


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

Al listar fuentes para el sitio web, por supuesto se empieza por la preferida, seguida ésta de
algunas fuentes alternativas. Se recomienda completar la lista con una familia de fuentes
genérica. Así, al menos, la página se mostrará usando una fuente de la misma familia si
ninguna de las especificadas no se encuentra disponible.

Analice el siguiente ejemplo

Análisis complementario: Los encabezados marcados con la etiqueta <h1> se mostrarán


usando la fuente "Times New Roman". Si esta fuente no está instalada en el ordenador del
usuario, se usará en su lugar la fuente " Arial ". Si ambas fuentes no están disponibles, se
usará una fuente de la familia “monospace” para mostrar los encabezados.

Observe cómo el nombre de fuente "Times New Roman" contiene espacios y, por lo tanto,
se lista usando comillas.

Nota: Pruebe modificando erróneamente cada nombre de fuente para que no exista y así
observar como el navegador recurre a la segunda opción o a la familia “Se usaron fuentes y
familia muy diferentes para observar los cambios”.

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 <h1>
aparecerán en cursiva.

Edgar Alexis Albornoz E email: [email protected] pág. 11


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

Diferencia entre Italic y oblique

Oblique es la misma fuente ligeramente inclinada “observe la L en la imagen”. Italic es la


fuente inclinada con sutiles cambios.

Variante de fuente [font-variant]


La propiedad font-variant se usa para elegir entre las variantes normal o small-caps
(versalita) de una fuente. La fuente a la que se aplica el valor small-caps es una fuente que
usa letras en mayúscula inicial más pequeñas, en vez de letras en minúscula. ¿Confuso?
Veamos los ejemplos siguientes:

Peso de la fuente [font-weight]


La propiedad font-weight describe qué intensidad o "peso" en negrita debería tener la
fuente. Toda fuente puede tener los valores normal o bold. Algunos navegadores soportan,
incluso, el uso de números entre 100 y 900 (de cien en cien) para describir el peso de dicha
fuente.

Edgar Alexis Albornoz E email: [email protected] pág. 12


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

Combinación de propiedades [font]


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

El orden de los valores para la propiedad font es:

font-style | font-variant | font-weight | font-size | font-family

Edgar Alexis Albornoz E email: [email protected] pág. 13


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

Texto
Formatear y añadir estilo al texto es un tema clave para cualquier diseñador web. En esta
guía presentaremos las increíbles oportunidades que ofrece CSS a la hora de añadir
presentación al texto. Describiremos las siguientes propiedades:
text-align
text-transform
text-decoration
letter-spacing
text-indent

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.

En el ejemplo que sigue, el texto dell titulo principal , <h1>, se ha alineado al centro,
mientras que el subtitulo, <h2>, aparece a la derecha. Además, los párrafos de texto
normales están justificados:

Transformación del texto [text-transform]


La propiedad text-transform controla la escritura en mayúsculas de un texto. Puedes elegir
entre los valores capitalize, uppercase o lowercase, sin importar cómo aparece el texto
original en el código HTML.

Edgar Alexis Albornoz E email: [email protected] pág. 14


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

Un ejemplo podría ser la palabra "título" que se puede presentar al usuario como "TÍTULO"
o "Título". A continuación ofrecemos una explicación de los valores de la propiedad text-
transform:
✓ 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ódigo HTML.
Como ejemplo, usaremos el titulo <h1> y convertiremos a minúscula todo su contenido, el
subtitulo <h2> se convertirá a mayúscula todo su contenido y en los párrafos <p> cada
palabra iniciara con mayúscula

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 “underline”, tacharlo “line-through” o ponerle un
subrayado superior “overline”. 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.

Edgar Alexis Albornoz E email: [email protected] pág. 15


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

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 6px entre los caracteres de un párrafo de texto <p>
y 3px entre los caracteres de los encabezados <h1>, usaríamos el siguiente código:

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 sangría de 30px a todos los párrafos de texto marcados con la etiqueta <p>:

Edgar Alexis Albornoz E email: [email protected] pág. 16


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

Selectores
Para crear diseños web profesionales, es imprescindible conocer y dominar los selectores de
CSS.

La estructura de un archivo CSS contiene la declaración donde indica "qué hay que hacer" y
el selector indica "a quién hay que hacérselo". Por lo tanto, los selectores son imprescindibles
para aplicar de forma correcta los estilos CSS en una página.

Nota Importante: En esta práctica se entrega una pagina web sobre el Principito. La idea es
ir agregando los diferentes selectores para dar el estilo a la pagina.

Selector universal
Se utiliza para seleccionar todos los elementos de la página.
El siguiente código aplica el selector universal y asigna a todos los elementos el margen y el
relleno en 0.

El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza


habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos
de una página.

Nota1: Agregue el selector * al CSS de la pagina del Principito y observe los cambios que van
ocurriendo.

Selector de tipo o etiqueta


Selecciona todos los elementos de la página, cuya etiqueta HTML coincide con el valor del
selector.

Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML
(sin los caracteres < y >) correspondiente a los elementos que se quieren seleccionar.

El siguiente código aplicara a la etiqueta h1 donde el color de fuente será Rojo, el tamaño de
la fuente 3em alineación centrada y todo el texto en mayúsculas.

Edgar Alexis Albornoz E email: [email protected] pág. 17


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

Genere los selectores para


• H2: Color de fuente azul y tamaño de la fuente en 2em.
• P: Color de fuente negra y tamaño de la fuente en 1em.

Su resultado a este punto debe ser:

Selector Múltiple
Si se quiere aplicar los mismos estilos a dos etiquetas diferentes o mas, se pueden encadenar
los selectores separándolos por una coma.
En el siguiente ejemplo, los títulos de sección h2 y p comparten los mismos estilos:

En este caso, CSS permite agrupar todas las reglas individuales en una sola regla con un
selector múltiple. Para ello, se incluyen todos los selectores separados por una coma.

Edgar Alexis Albornoz E email: [email protected] pág. 18


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios
elementos en una única regla CSS y posteriormente definir las propiedades específicas de
esos mismos elementos. El siguiente ejemplo establece en primer lugar las propiedades
comunes de las etiquetas H2 y P (estilo y tipo de letra) y a continuación, establece el tamaño
de letra de cada uno de ellos y el color.

Selector descendiente
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es
descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del
otro elemento.

Para la Pagina web del Principito se encuentra el código HTML siguiente:

Se quiere dar a la Etiqueta span que encierra el “I” el tono rojo, se pemsaria que la siguiente
instrucción soluciona el problema.

Funciona? Se le aplico solo a lo esperado? o a todas la etiquetas span?

Edgar Alexis Albornoz E email: [email protected] pág. 19


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

La solución es aplicar un selector descendiente para dar color Rojo al numero romano “I”
que esta en la etiqueta <span> que desciende de la etiqueta <h2>

Note que ya no se separan por comas, solo por espacio. Estas propiedades de color y fuente
se aplicarán solo a etiquetas Span que estén dentro de etiquetas H2

Agregue lo necesario para que se visualice de la siguiente forma:

Genere los selectores por decendencia para


• Etiquetas Span que se encuentran dentro de P: Color de fuente verde y peso de la
fuente negrita.
Su resultado a este punto debe ser:

Edgar Alexis Albornoz E email: [email protected] pág. 20


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

El selector p span selecciona tanto texto1 como texto2. El motivo es que en el selector
descendiente, un elemento no tiene que ser descendiente directo del otro. La única
condición es que un elemento debe estar dentro de otro elemento, sin importar el nivel de
profundidad en el que se encuentre.

Al resto de elementos <span> de la página que no están dentro de un elemento <p>, no se


les aplica la regla CSS anterior.

Los selectores descendentes siempre están formados por dos o más selectores separados
entre sí por espacios en blanco. El último selector indica el elemento sobre el que se aplican
los estilos y todos los selectores anteriores indican el lugar en el que se debe encontrar ese
elemento.

No debe confundirse el selector descendente con la combinación de selectores.

Se puede restringir el alcance del selector descendente combinándolo con el selector


universal. Analice el funcionamiento del siguiente selector.

Donde el código html del index es:

¿Quien toma el color Rojo? Libro o Pagina…. O ambos?

Edgar Alexis Albornoz E email: [email protected] pág. 21


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

La razón es que el selector table tr td * a se interpreta como todos los elementos de tipo
<a> que se encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro de
un elemento de tipo <td> y este dentro de un <tr> y a su vez dentro de <table>.

Como Pagina no esta dentro de span no aplica y por ese motivo permanece en azul.

Edgar Alexis Albornoz E email: [email protected] pág. 22


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

Selector de clase
Si se considera el código HTML de la pagina del Principito:

¿Cómo se pueden aplicar estilo CSS sólo al segundo párrafo “Linea 25” para que
sea de color GRIS en negrita?

El selector universal (*) no se puede utilizar porque selecciona todos los elementos de la
página.

El selector de tipo o etiqueta (p) tampoco se puede utilizar porque seleccionaría todos los
párrafos.

Por último, el selector descendente (body p) tampoco se puede utilizar porque todos los
párrafos se encuentran en el mismo sitio.

Una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página
consiste en utilizar el atributo class de HTML sobre ese elemento para indicar directamente
la regla CSS que se le debe aplicar:

A continuación, se crea en el archivo CSS una nueva regla llamada “destacado” con todos los
estilos que se van a aplicar al elemento. Para que el navegador no confunda este selector
con los otros tipos de selectores, se prefija el valor del atributo class con un punto (.) tal y
como muestra:

Edgar Alexis Albornoz E email: [email protected] pág. 23


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

El selector .destacado se interpreta como "cualquier elemento de la página cuyo atributo


class sea igual a destacado", por lo que solamente un párrafo en index cumple esa condición.

Este tipo de selectores se llaman selectores de clase y son los más utilizados junto con los
selectores de ID que se verán a continuación. La principal característica de este selector es
que en una misma página HTML varios elementos diferentes pueden utilizar el mismo valor
en el atributo class.

Los selectores de clase son imprescindibles para diseñar páginas web complejas, ya que
permiten disponer de una precisión total al seleccionar los elementos. Además, estos
selectores permiten reutilizar los mismos estilos para varios elementos diferentes.

Selector de clase con Tipo


¿Cómo es posible aplicar estilos solamente al <p>párrafo cuyo atributo class sea igual a
destacado? Combinando el selector de tipo y el selector de clase, se obtiene un selector
mucho más específico:

El selector p.destacado se interpreta como "aquellos elementos de tipo <p> que dispongan
de un atributo class con valor destacado".

Edgar Alexis Albornoz E email: [email protected] pág. 24


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

De lo anterior se deduce que el atributo .destacado es equivalente a *.destacado, por lo que


todos los diseñadores obvian el símbolo * al escribir un selector de clase normal.

Edgar Alexis Albornoz E email: [email protected] pág. 25


Desarrollo Orientado a Plataformas
Unidad I – Hojas de Estilo en Cascada CSS
Guía 05 – CSS Introducción

Selectores de ID
En ocasiones, es necesario aplicar estilos CSS a un único elemento de la página. Aunque
puede utilizarse un selector de clase para aplicar estilos a un único elemento, existe otro
selector más eficiente en este caso.

El selector de ID permite seleccionar un elemento de la página a través del valor de su


atributo ID. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor
del atributo id no se puede repetir en dos elementos diferentes de una misma página.

La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que
se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la
regla CSS:

HTML

En el ejemplo anterior, el selector #resaltar aplica a la etiqueta <span> solamente y afectara


el texto “NO” (cuyo atributo id es igual a resaltar).

La principal diferencia entre este tipo de selector y el selector de clase tiene que ver con
HTML y no con CSS. Como se sabe, en una misma página, el valor del atributo id debe ser
único, de forma que dos elementos diferentes no pueden tener el mismo valor de id. Sin
embargo, el atributo class no es obligatorio que sea único, de forma que muchos elementos
HTML diferentes pueden compartir el mismo valor para su atributo class.

De esta forma, la recomendación general es la de utilizar el selector de ID cuando se quiere


aplicar un estilo a un solo elemento específico de la página y utilizar el selector de clase
cuando se quiere aplicar un estilo a varios elementos diferentes de la página HTML.

Edgar Alexis Albornoz E email: [email protected] pág. 26

También podría gustarte