Introducción a CSS básicos

CSS
Introducción: elementos básicos

¿Para qué se utiliza?
• Una vez generado el contenido de un
documento html, las hojas de estilo
permiten proporcionar de un diseño
al documento.
• Con CSS el contenido y el diseño
permanecen independientes, de esta
forma la modificación de uno no
afecta al otro.

Reglas CSS
• CSS trabaja asociando reglas a
elementos que aparecen en un
documento web.
• Las reglas indican como se mostrará
el contenido.
• Una regla está formada por un
selector y una declaración.

Estructura de una regla
• Selector: especifica el elemento o
conjunto de elementos a los que
afectará la regla
• Declaración: Especifica el estilo a
aplicar a los elementos.
• Propiedad/valor: la declaración se
encuentra dividida en una propiedad
y el valor que tomará.

Ejemplo
h1, p, h2 {
font-family: arial,
color: #000000;
background-color: #FFFFFF;
}
Grupo de selectores
Grupo de declaraciones
Propiedad
Valor

Agrupación de selectores
• Si un grupo de elementos dispone de
características comunes se puede
disponer en la regla la lista de
selectores.
• Los selectores irán separados por el
carácter «,».
• Puede haber varias reglas para un
mismo selector.

Agrupación de declaraciones
• Una declaración siempre se
encuentra delimitada por llaves
• Un grupo de declaraciones asignada
a uno o varios selectores irán entre
las llaves correspondientes.

Ejemplo
h1{
color: black;
border:6px solid blue;
}
h3{
color: blue;
border:3px solid green;
}
h1, h2, h3{
letter-spacing: 4px;
padding: 12px;
}
Estas reglas se
aplicarán a todos
los selectores de la
lista

Embeber una hoja de estilo
• Se utiliza para este fin el elemento
<style type=‘text/css’>.
• En su interior se especifican las
reglas.
• Es posible ocultar a los navegadores
que no soporten CSS las
declaraciones comentando las
reglas.

Ejemplo (reglas embebidas)
…
<style type=‘text/css’>

</style>
…
Reglas
Inicio de comentario
Elemento style
Fin de comentario

Enlazar a hojas de estilo externas
• Con el elemento link es posible hacer
referencia a un fichero que contenga
las reglas.
• Este elemento necesita que le sean
asignados los parámetros:
– rel, valor stylesheet
– href, url que especifica la localización
del fichero
– type, el tip MIME del archivo ‘text/css’

Ejemplo: enlace a CSS
<link rel=‘stylesheet’ href=‘usr/css/estilos_1.css’ type=‘text/css’>
Contenido del archivo estilos_1.css
….
…...
p{
font-family: arial;
font-size: 12pt;
}
……
…..

Importar una hoja de estilos
• Dentro de un elemento style es para
posible incluir la regla @import con el
fin de utilizar una hoja de estilos
externa.
@import url(‘usr/css/h_estilos.css’);
</style>

Utilizar el atributo style
• Se utiliza dentro del elemento
<head> para enlazar un archivo css
o incluir estilos que únicamente se
aplicarán sobre ese documento
HTML.
H1 {
color:#FFFF00;
}
</style>

Ventajas de utilizar hojas de estilo
externas
• Evita que tengamos que repetir las
mismas reglas en cada documento.
• Es posible modificar la apariencia
desde un único archivo.
• La carga de documentos HTML es
mas rápida, una vez que se carga la
primera hoja de estilos.
• Es posible seleccionar hojas de estilo
distintas dependiendo del navegador.

Clasificación
• Podemos clasificar las propieades
que controlan la apariencia del texto
en:
– Aquellas que afectan a la fuente y su
apariencia
– Aquellas que afectan al texto de forma
independiente de la fuente utilizada

Propiedades de la fuente
Propiedad Objetivo
font Permiten combinar varias propiedades en una
font-family Especifica el tipo de fuente a utilizar
font-size Especifica el tamaño de la fuente
font-weight Especifica si la fuente será normal o negrilla
font-style Especifica si la fuente será normal, itálica o cursiva
font-variant Establece si la fuente será normal o versalitas

Algunos conceptos tipográficos
• Una familia de fuentes se denomina
«typeface», por ejemplo, Arial
• Una fuente en un miembro específico
de una familia, por ejemplo, Arial de 9
puntos negrilla
• Una familia de fuentes es «serif» si
dispone de remates o adornos
• Una familia de fuentes es
monoespaciada si todas sus caracteres
disponen de la misma anchura.

La propiedad font-size
• Especifica el tamaño de la fuente, se
puede indicar de varias formas:
– Longitud en diversas unidades: px, em,
ex, pt, in, cm, pc, mm, rem, vw o vh
– Tamaño absoluto: xx-small, x-small,
small, medium, large, x-large, xx-large.
– Tamaño relativo: smalle, larger
– Porcentaje, relativo al tamaño del
elemento padre.

La propiedad font-weight
• Se utiliza para modificar básicamente
grosores de las fuentes.
• Los posibles valores que le pueden
ser asignados son: normal, bold,
bolder, ligther, y de 100 en 100
empezando por 100 y finalizando en
900.

Las propiedades font-style y font-
variant
• La propiedad font-style permite
indicar los siguietes valores: normal,
italic o oblique
• La propiedad font-variant permite
indicar si la fuente es normal o
versales. Los valores que puede
tomar son: normal o small-caps.

Propiedades del formato de texto
Propiedad Función
color Especifica el color del texto
text-align Especifica la alineación horizontal respecto al elemento
que lo contiene
vertical-align alineación vertical respecto al elemento que lo contiene
text-decoration Indica si el texto debe estar subrayado
text-indent Indica una indentación respecto del borde
text-transform Indica si el texto está en mayúscula, minúscula …
text-shadow Indica un sombreado en la fuente
letter-spacing Controla el espaciado entre caracteres (tracking)
word-spacing Controla el espaciado entre palabras
white-spacing Establece el comportamiento de los espacios en blanco
direction Especifica la dirección del texto (similar al atributo dir)

Algunos valores de las
propiedades
Propiedad Valores
color Código hexadecimal RGB
text-align left, right, center, justify, start, end
vertical-align baseline, sub, super, top, text-top, middle, bottom,
text-bottom
text-decoration underline, overline, line-through, none
text-indent Cantidad que deseamos se encuentre indentada la
primera línea
text-shadow Un código de color y 3 longitudes
text-transform None, capitalize, uppercase, lowercase
letter-spacing Longitud de la separación, permite cantidades
negativas
word-spacing Longitud de la separación, permite cantidades
negativas

Ejemplo
h3{
color: green;
font-family: Verdana;
}
p{
color: blue;
font-family: Cambria;
font-size: 150%;
}

Selectores
• Existen una serie de selectores que
van mas allá de los elementos HTML,
a saber:
– El selector universal
– El selector por tipo
– El selector por clase
– El selector por ID
– El selector hijo y descendiente
– El selector adyacente

El selector universal
• Se corresponde con cualquier
elemento de un documento HTML
• Está representado por el carácter «*»
• Todos los estilos especificados con
este selector serán aplicados a
cualquier elemento del documento.
• Estilos más específico podrán
sobreescribir los estilos
especificados con este selector.

El selector por tipo
• Basta incluir una lista de elementos
separados por coma para que los
estilos especificados se apliquen a
aquellos
h1,h2,h3{
color: blue;
}
Estos estilos se
aplicarán sobre las
cabeceras de nivel 1,
2 y 3

El selector por clase
• Permite aplicar un estilo a un
elemento que pertenezca a una
clase.
• Se puede utilizar de tres formas:
– Indicando que el elemento pertenece al
menos a la clase
– Indicando que el elemento es de un tipo
y una clase
– Indicando que el elemento pertenece a
una clase dentro de otra

Ejemplo (selector por clase)
<h3 class="resumen">Estilo aplicado a una cabecera de nivel 3</h3>
<p class="resumen entradilla">
Este párrafo sirve de ejemplo para modificar los atributos de texto
</p>
Se aplicará a todos los elementos de clase resumen
.resumen{
color: blue;
}
Se aplicará a todos los elementos de clase resumen
que sean párrafos
p.resumen{
color: blue;
}

Selector por ID
• Funciona de forma análoga a la
selección por clase, pero para un solo
elemento
• El elemento se identifica con el carácter
«#».
Se aplicará al elemento de id parrafo_importante
#parrafo_importante {
color: blue;
}

Los selectores hijo y descendiente
• El selector hijo permite aplicar un
estilo que se encuentra dentro de
otro. Se utiliza el símbolo «>» entre
el elemento padre e hijo.
• El selector descendiente aplicará un
estilo a cualquier elemento contenido
y que se corresponda con la regla de
estilo. Se utiliza el espacio en blanco
entre los elementos.

Ejemplos
td > i{
color: green;
font-size: 150%;
}
Ejemplo de selector hijo
A cualquier elemento <i> incluido
en una celda le será aplicada la
regla.
table i{
color: green;
font-size: 150%;
}
Ejemplo de selector
descendiente
A cualquier elemento <i> incluido
en una tabla, independientemente
del elemento que sea, le será
aplicada la regla.

Selector de hermanos adyacentes
• Permite seleccionar un elemento que
se encuentra a continuación de otro.
• Entre ambos elementos se situará el
carácter «+».
Ejemplo de hermano adyacente
A cualquier párrafo precedido de
una cabecera de nivel 3 le será
aplicada la regla.
h3+p{
color: blue;
}

Los selectores de atributos I
• Es posible aplicar estilos
dependiendo de los atributos y
valores de que disponga un
elemento.
• Este tipo de selectores ha sido
ampliado con CSS3.

Los selectores de atributos II
Selector Ejemplo Se corresponde con..
existencia p[id] Cualquier párrafo que lleve el atributo
id
igualdad p[id=‘val’] Párrafo cuyo id sea igual a val.
espacio p[class~=‘var’] Párrafo que contenga en su atributo
class el valor val
prefijo p[attr^x] Párrafo que incluya cualquier atributo
que empiece con el carácter «x»
subcadena p[attr*’pe’] Párrafo que incluya cualquier atributo
que contenga la cadena «pe».
sufijo p[attr$’e’] Párrafo que incluya cualquier atributo
que finalice con el carácter «e»

Ejemplos
<p id="intro" class="muestra">Un párrafo que sirve
como introducción</p>
p[id] {
color: #000000;
}
p[id="intro"] {
background-color : yellow;
}
p[class^="m"] {
El párrafo mostrado se ajusta a
las tres reglas:
• El párrafo contiene el atributo id
• El párrafo tiene por atributo id el
valor intro
• El párrafo tiene es de una clase
cuyo nombre comienza por m

Unidades
• Muchas propiedades de las hojas de
estilos deben ser expresadas en
unidades de longitud o tamaño.
• Las cantidades pueden venir
expresadas como:
– Cantidades absolutas
– Cantidades relativas
– En forma de porcentajes

Unidades relativas
• Existen tres tipos:
– El pixel
– Em
– Ex
• El pixel hace referencia a la
resolución de la pantalla, mientras
que las otras dos hacen referencia al
tamaño de la fuente.

Pixeles
• El pixel hace referencia a la mínima
resolución de un dispositivo.
• El navegador ajusta al dispositivo el
tamaño especificado en pixels en una
CSS, de tal forma que sea legible su
contenido.

Em
• Un «em» es equivalente a la altura
de la fuente actual, por tanto, puede
variar dependiendo de las
preferencias establecidas por el
usuario en el navegador.
• Normalmente se utiliza para
especificar espaciado entre texto y
elementos que tengan relación con
texto.

ex
• Especifica la altura de una x
minúscula, que depende
evidentemente de la fuente.

Nuevas unidades relativas
• «rem», representa el tamaño del
elemento raíz. De esta forma se
puede utilizar para hacer referencia a
aquella.
• «vh», es el 1% de la anchura de la
ventana gráfica. Permite escalar el
tamaño de la fuente cuando se
modifica la ventana gráfica.

Unidades absolutas
Unidad Se corresponde a…
pt punto
pc pica
in pulgada
cm centímetro
mm Milímetro

EL modelo de «cajas»
• Este modelo ayuda a comprender
como se muestran los distintos
elementos en el navegador.
• La idea es que todo elemento HTML
se encuentra contenido en una caja o
rectángulo, del que pueden
modificarse una serie de
características.

Propiedades mas importantes del
modelo
Propiedad Descripción
border Cada caja posee un borde que la separa del
resto
margin Es la distancia entre el borde de una caja y
la siguiente
padding Distancia entre el contenido y su borde

A tener en cuenta: elementos de
tipo bloque e inline
• Los elementos de tipo bloque
respecto al modelo de cajas se
comportan como si el elemento
ocupara todo el ancho del
navegador.
• Los elementos de tipo inline fluye a lo
largo de lo que ocupa el elemento.
Las imágenes son tratadas como un
elemento inline.

Propiedades del borde
• Podemos modificar tres propiedades
del borde, pudiendo especificar cada
lado del borde si fuera necesario
(boder-bottom, border-rigrth…)
Propiedad Descripcíón
border-color Color del borde
border-style Estilo del borde
border-width Anchura del borde

Valores para «border-style»
Valor Descripción
none No se muestra el borde
solid Es una línea única sólida
dotted Un línea única punteada
dashed Un línea única formada por guiones
double Línea doble
groove El borde parece tallado en la página
ridge Contrario a groove
inset Aparece el texto como embebido en la página
outset Parece que el texto saliera de la página
hidden Comeno none, pero tiene consecuencias cuando
hay conflictos con los bordes.

Ejemplos
Cada párrafo muestra un tipo de borde

Anchura del borde
• No es posible utilizar porcentajes,
pudiéndose utilizar medidas
absolutas o relativas
• Se pueden utilizar, además los
siguientes valores:
– «thin»
– «medium»
– «thick»

Agrupar propiedades del borde
p[id="solid"] {
border-style : solid;
}
p[id="dotted"] {
border : 6px solid blue;
}
El segundo párrafo reúne
en el elemento border las
tres propiedades
asignadas a un borde

La propiedad «padding»
• Indica el espacio entre el contenido
de un elemento y su borde.
• Se puede especificar cualquier tipo
de medida. No se hereda esta
propiedad, pero si se puede
especificar el valor «inherit».
• Se puede especificar el tamaño del
espaciado utilizando paddding-
bottom, padding-top …

La propiedad «margin»
• Esta propiedad controla el espacio
entre cajas.
• Su valor puede ser una longitud, un
porcentaje o el valor «inherit».
• No es una propiedad que hereden
los elementos hijos.
• Se puede utilizar margin-top, margin-
bottom…

Dimensiones de una caja de
contenido
Propiedad Objetivo
height Establece la altura
width Ancho de la caja
line-height Altura de la línea de texto
max-height /
min-height
Máxima altura de la caja
Mínima altura de la caja
max-width /
min-width
Máxima anchura de la caja
Mínima anchura de la caja

La propiedad «overflow»
• Cuando se controla el tamaño de la caja, su
contenido puede que necesite mas espacio para
mostrarse. Esta propiedad permite gestionar
como responderá el navegador.
Valor Comportamiento
hidden El texto que sobra no se muestra
visible El texto que no quepa se muestra fuera
scroll A la caja se le asigna barras deslizantes
auto Se muestran barras deslizantes cuando
se necesiten
inherit Hereda el comportamiento de su
elemento padre

Introducción a CSS básicos

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Introducción a CSS básicos

Similar a Introducción a CSS básicos (20)

Más de jcremiro

Más de jcremiro (20)

Último

Último (20)

Introducción a CSS básicos