CSS
¿Qué es CSS?
CSS (Cascading Style Sheets - Hojas de Estilo en Cascada), son un mecanismo simple que describe como se va a presentar un documento en la pantalla, en un dispositivo de sonido,como se va a imprimir, en un dispositivo braille, aparatos moviles, etc.
CSS nos permite posicionar el contenido, diseñar tablas, definir caraterísticas para sitios en diferentes idiomas y propiedades relacionadas con la comunicación del usuario.
CSS nos ayuda a separar el contenido de la presentación.CSS nos permite controlar el estilo y el formato de múltiples páginas Web a la vez.
La estructura de CSSCSS funciona a base de reglas.
Cada regla está compuesta por un selector y la declaración.
La declaración a su vez esta compuesta por una propiedad y su valor.La declaración debe estar definida entre llaves({...})
Sintaxisselector{propiedad:valor}
Veamos un ejemplo donde el selector p indica que todos los elementos p del documento HTML serán afectados por la declaración cuya propiedad es color y su valor es blue.
p{color:blue}
Si el valor está compuesto por varias palabras, debemos definirlo entre comillas.
p{font-family:"Times New Roman"}
Si deseas especificar más de una propiedad, deberás separarlas con un punto y coma(;).
h1{color:red; text-align:center}
Para definir los estilos de forma más clara y fácil de leer, puedes describir cada propiedad en diferentes líneas.
p
{
color:red;
text-align:center;
}
Si deseas definir una misma propiedad para varios selectores, solo debe agruparlos separándolos con una coma(,)
p, h1, h2, h3
{
color:blue;
font-family:Arial;
}
________________________________________
El selector class
Con el selector class se pueden definir diferentes estilos para un mismo elemento HTML.
Por ejemplo el elemento p puede ser de color azul o de color rojo. El valor del selector class debe ir antepuesto por un punto (.)
Sintaxis
p.azul {color:blue}
p.rojo {color:red}
Y así se vería en el documento HTML.
Código
Este texto es de color azul
Este texto es de color rojo
Resultado
Este texto es de color azul
Este texto es de color rojo
Con el selector class también podemos definir diferentes estilos para cualquier elemento HTML.
Por ejemplo definimos un class rojo y uno azul.
Sintaxis
.azul {color:blue}
.rojo {color:red} Ejemplo
Por ejemplo definimos un class rojo y lo utilizamos en dos ocasiones.
Código
Este título es de color rojo
Este texto es de color azul
Y este texto es de color rojo
Resultado
Este título es de color rojo
Este texto es de color azul
Y este texto es de color rojo
________________________________________
El selector ID
El selector id se utiliza para definir un atributo el cual tiene un valor único en todo el documento. Hacemos referencia a él anteponiendo el símbolo "#".
Sintaxis
#centrado {text-align:center} /* afecta a cualquier elemento que lo use */
h3#subrayado {text-decoration:underline} /* afecta solo al elemento h3 */ Ejemplo
Definimos un id general y uno para un selector en particular.
Código
Título centrado
Título subrayado
Texto centrado
El selector id no afecta al elemento p ya que el mismo no ha sido definido como texto subrayado
Resultado
Título centrado
Título subrayado
Texto centrado
El selector id no afecta al elemento p ya que el mismo no ha sido definido como texto subrayado
________________________________________
Comentarios en CSS
Para agregar un comentario que ayude a ser más legible el documento utilizamos
"/* comentario */".
p
{
text-align:right; /* texto alineado a la derecha */
color:blue; /* color de texto: azul */
font-family:Verdana; /* tipo de fuente:Verdana */
} ¿Dónde usar los estilos?
Cuando un navegador lee una hoja de estilos, este formatea el documento de acuerdo a la misma.
Hay 3 formas de insertar una hoja de estilos:
1. Entre líneas
2. Dentro de la sección Head o en bloque
3. Hojas de estilo externas
1. Entre líneas
Definimos el estilo directamente dentro del código HTML.
Sintaxis
Debemos usar esta forma cuando un único estilo es aplicado a un solo elemento.
Su uso está dado por el atributo style.
Ejemplo
Vamos a aplicar un estilo "solo" al elemento p de esta línea.
Código
Este párrafo es de color rojo y se encuentra a 30 pixels del margen izquierdo.
Resultado
Este párrafo es de color rojo y se encuentra a 30 pixels del margen izquierdo.
________________________________________
2. Dentro de la sección Head
Las hojas de estilo interna deben usarse cuando una página tiene un estilo único.
Sintaxis
Este texto es de color blanco
y el color de fondo
de la página es #008080.
Resultado
Este texto es de color blanco y el color de fondo de la página es #008080.
En este ejemplo se muestra que la etiqueta
Nota: debemos dejar un espacio en blanco entre los valores
Los posibles valores para definir los fondos
color | transparent | URL | none | repeat | repeat-x | repeat-y | no-repeat | no-repeat | fixed | % | longitud | left | center | right | top | bottom
Ejemplo
Vamos a aplicar un fondo rojo al elemento h2 de esta página.
Código
El fondo del título es rojo.
Resultado
El fondo del título es rojo.
________________________________________
Aplicar color al fondo
La propiedad background-color especifica el color de fondo del elemento.
Sintaxis
Establecer el color de fondo.
etiqueta HTML {background-color: valor}
Los posibles valores para definir los colores del fondo
color | transparent
Ejemplo
Vamos a aplicar un color de fondo a la página.
Código
El fondo de la página es naranja.
Resultado
El fondo de la página es naranja.
________________________________________
Decorar el fondo con una imagen
La propiedad background-image inserta una imagen como fondo del elemento.
Sintaxis
Insertar una imagen de fondo.
etiqueta HTML {background-image: url("nombre-de-la-imagen")}
Los posibles valores para la inserción de imágenes de fondo
url | none
Ejemplo
Vamos a usar una imagen de fondo en nuestra página.
Código
Ejemplo de una imagen de fondo
Resultado
Ejemplo de una imagen de fondo
________________________________________
Imagen más pequeña que el tamaño del fondo
Si la imagen que elegimos de fondo es más pequeña que este, podemos repetir la imagen horizontalmente o verticalmente hasta cubrir todo el fondo. Para ello utilizamos la propiedadbackground-repeat.
Sintaxis
Repetir una imagen de fondo.
etiqueta HTML {
background-image: url('/nombre-de-la-imagen');
background-repeat: valor;
}
Los posibles valores para la repetición de una imagen en el fondo
repeat | repeat-x | repeat-y | no-repeat
Ejemplo
Vamos a usar esta imagen de fondo en nuestro ejemplo.
Código
Repetición de una imagen de fondo
Resultado
Repetición de una imagen de fondo
________________________________________
Imagen de fondo estática o dinámica
La propiedad background-attachment nos permite fijar o liberar una imagen de fondo, es decir que al movernos por la página con la barra de desplazamiento, la imagen de fondo quede anclada en el lugar o se desplaze con la misma.
Sintaxis
Imagen de fondo estática o dinámica.
etiqueta HTML {
background-image: url('/nombre-de-la-imagen');
background-attachment: valor;
}
Los posibles valores para esta propiedad
fixed | scroll
________________________________________
Elije el lugar exacto para ubicar la imagen de fondo
La propiedad background-position nos permite ubicar una imagen en un lugar específico dentro del fondo.
Sintaxis
etiqueta HTML {
background-image: url('/nombre-de-la-imagen');
background-position: valor;
}
Los posibles valores para la ubicación exacta de la imagen en el fondo
% | coordinadas x-y | left | center | right | top | bottom
Ejemplo
Vamos a usar una imagen y la ubicaremos en alguna coordenada dentro del fondo.
Código
Imagen en las coordenadas x=60px y=100px
Resultado
Imagen en las coordenadas x=60px y=100px
________________________________________
Propiedades del fondo
Propiedad Descripción Valores Detalles Ej.
background Propiedades individuales relacionadas con el fondo. background-color Color de fondo
background-image Imagen de fondo
background-repeat Repetición del fondo
background-attachment Acoplamiento del fondo
background-position Posición del fondo
background-color Color de fondo. color Color
transparent Transparente
background-image Imagen de fondo. URL Dirección URL
none Nada
background-repeat Repetición de la imagen de fondo. repeat Repite
repeat-x Repite horizontalmente
repeat-y Repite verticalmente
no-repeat No se repite
background-attachment Desplazamiento de la imagen de fondo. scroll Desplaza
fixed Fija
background-position Posición de la imagen de fondo. % Porcentaje
longitud Longitud
left Izquierda
center Centro
right Derecha
top Superior
bottom Inferior
Los textos con CSS
Las propiedades de los textos nos permiten controlar la apariencia de los mismos.
Entre los ajustes que podemos aplicar a los textos, tenemos:
1. La sangría
2. El alineado
3. La decoración
4. Espacio entre letras
5. Espacio entre palabras
6. Mayúsculas y minúsculas
7. Espacios en blando
________________________________________
Sangría de los textos - text-indent
La propiedad text-indent se utiliza para generar sangría en la primera línea de un texto.
Sintaxis
selector {text-indent: valor}
Los posibles valores para definir la sangría
longitud | %
Ejemplo
Vamos a ver como se comporta un texto con sangría.
Código
En la primera línea de este párrafo observamos una sangría de 2 centímetros de distancia del borde.
Resultado
En la primera línea de este párrafo observamos una sangría de 2 centímetros de distancia del borde.
________________________________________
Alineado de los textos - text-align
La propiedad text-align se utiliza para alinear un texto a la derecha, izquierda o centro del bloque que lo contiene.
Sintaxis
selector {text-align: valor}
Los posibles valores para alinear los textos
left | right | center | justify
Ejemplo
Alineamos un texto a la derecha y otro en el centro.
Código
Texto a la derecha
Texto en el centro
Resultado
Texto a la derecha
Texto en el centro
________________________________________
La decoración de los textos - text-decoration
La propiedad text-decoration se utiliza para subrayar, tachar, remarcar con una línea superior o parpadear un texto.
Sintaxis
selector {text-decoration: valor}
Los posibles valores para decorar los textos
none | underline | overline | line-through | blink
Ejemplo
Definimos un texto parpadeante y un enlace sin subrayar.
Código
Texto parpadeando
Ir a la home de Virtualnauta
Resultado
Texto parpadeando
Ir a la home de Virtualnauta ________________________________________
Separación entre letras - letter-spacing
La propiedad letter-spacing se utiliza para definir la distancia que queremos dejar entre letra y letra de un mismo texto.
Sintaxis
selector {letter-spacing: valor}
Los posibles valores para esta propiedad
normal | distancia
Ejemplo
Vamos definir una distancia entre letras de 5 píxeles.
Código
La distancia entre letras es de 5 píxeles
Resultado
La distancia entre letras es de 5 píxeles
________________________________________
Separación entre palabras - word-spacing
La propiedad word-spacing se utiliza para definir la distancia que queremos dejar entre palabras.
Sintaxis
selector {word-spacing: valor}
Los posibles valores para esta propiedad
normal | distancia
Ejemplo
Vamos definir una distancia entre palabras de 2 centímetros.
Código
La distancia entre palabras es de 2 centímetros
Resultado
La distancia entre palabras es de 2 centímetros
________________________________________
Transformar los textos a mayúsculas o minúsculas - text-transform
La propiedad text-transform se utiliza para convertir un texto a mayúsculas o minúsculas.
Sintaxis
selector {text-transform: valor}
Los posibles valores para convertir los textos
capitalize | uppercase | lowercase | none
Ejemplo
Vamos definir la primera letra de cada palabra en mayúsculas.
Código
La primera letra de cada palabra se a convertido
a mayúsculas
Resultado
La Primera Letra De Cada Palabra Se A Convertido A Mayúsculas
________________________________________
Espacios en blanco - white-space
La propiedad white-space se utiliza para manipular el comportamiento de los espacios en blanco dentro de cada elemento.
Sintaxis
selector {white-space: valor}
Los posibles valores para esta propiedad
normal | pre | nowrap | pre-wrap | pre-line
Ejemplo
Vamos ver el comportamiento de los espacios en blanco dentro de un texto.
Código
Dejo varios espacios en
blanco entre palabra y palabra.
Aca también dejo varios
espacios en blanco entre palabra y
palabra pero los comprime
a uno solo.
Resultado
Dejo varios espacios en blanco entre palabra y palabra.
Aca también dejo varios espacios en blanco entre palabra y palabra pero los comprime a uno solo.
________________________________________
Propiedades de los textos
Propiedad Descripción Valores Detalles Ej.
text-indent Desplazamiento de la primera línea del texto. longitud Longitud
% Porcentaje
text-align Alineamiento del texto. left Izquierda
right Derecha
center Centro
justify Justificar
text-decoration Efectos de subrayado, tachado, parpadeo. none Sin efectos
underline Subrayado
overline Línea por encima
line-through Tachado
blink Parpadeo
text-transform Transformaciones del texto a mayúsculas/minúsculas. capitalize Convierte en mayúscula el primer carácter de cada palabra
uppercase Convierte en mayúscula todas las letras del elemento
lowercase Convierte en minúscula todas las letras del elemento
none Neutraliza el valor heredado
letter-spacing Espacio entre caracteres. normal Normal
longitud Longitud
word-spacing Espacio entre palabras. normal Normal
longitud Longitud
white-space Comportamiento de los espacios dentro de los elementos. normal Normal
pre Preformateado
nowrap Los cambios de línea solo ocurren con el elemento br
pre-wrap
pre-line
direction Sentido direccional de la escritura. ltr Izquierda a derecha
rtl Derecha a izquierda
unicode-bidi Sentido direccional de la escritura. normal Normal
embed Abre un nivel adicional de incrustación con respecto al algoritmo bidireccional
bidi-override Si el elemento es a nivel de línea o es un elemento a nivel de bloque, crea una sustitución
Las fuentes
Las propiedades de las fuentes nos permiten controlar la apariencia de las mismas.
Posiblemente la definición de las fuentes sea el uso más común de CSS.
Entre los ajustes que podemos aplicar a las fuentes, tenemos:
1. La familia
2. La intensidad
3. El estilo
4. El tamaño
5. La variante
6. La definición general
________________________________________
Familia de fuentes - font-family
Para definir el tipo de fuente usamos la propiedad font-family.
Es recomendable usar un tipo de fuente común, que todos los navegadores reconozcan (ej.:Arial, Verdana, Helvetica, sans serif, etc.).
Sintaxis
selector {font-family: familia de fuente, familia de fuente genérico}
Nota: debemos utilizar comas entre los valores.
Los posibles valores para definir las familias de fuentes
Las más comunes | arial | Verdana | Helvetica | "Times New Roman" | Courier | Univers
Los posibles valores para definir las familias de fuentes genérico
serif | sans-serif | cursive | fantasy | monospace
Ejemplo
Vamos a definir una familia para una fuente.
Código
La familia de esta fuente es Times New Roman.
Resultado
La familia de esta fuente es Times New Roman.
________________________________________
Intensidad de las fuentes - font-weight
Una característica muy útil es el control de la intensidad de las fuentes. Para ello utilizamos la propiedad font-weight.
Sintaxis
selector {font-weight: valor}
Los posibles valores para definir los fondos
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Ejemplo
Vamos a aplicar intensidad a las fuentes del elemento h2 de esta página.
Código
La intensidad de este texto es lighter.
Resultado
La intensidad de este texto es lighter.
________________________________________
Estilo de las fuentes - font-style
La propiedad font-style nos sirve para definir un estilo normal, oblicuo o italic.
Sintaxis
selector {font-style: valor1}
Los posibles valores para definir los estilos
normal | italic | oblique
Ejemplo
Vamos a definir el estilo del elemento h3 de este ejemplo.
Código
El estilo de este título es oblique.
Resultado
El estilo de este título es oblique.
________________________________________
Tamaño de las fuentes - font-size
Controlar el tamaño de las fuentes suele ser de mucha utilidad. La propiedad encargada de eso esfont-size.
Sintaxis
selector {font-size: valor}
Los posibles valores para definir el tamaño de las fuentes
xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | tamaño | %
Ejemplo
Vamos a ver como se comporta cada uno de los valores de la propiedad font-size.
Código
Tamaño:xx-small
Tamaño:x-small
Tamaño:small
Tamaño:medium
Tamaño:large
Tamaño:x-large
Tamaño:xx-large
Tamaño:larger
Tamaño:smaller
Resultado
Tamaño:xx-small
Tamaño:x-small
Tamaño:small
Tamaño:medium
Tamaño:large
Tamaño:x-large
Tamaño:xx-large
Tamaño:larger
Tamaño:smaller
________________________________________
Variante de las fuentes - font-variant
Una variación que se le puede dar a las fuentes es el de usar pequeñas mayúsculas, para eso usamos de la propiedad font-variant.
Sintaxis
selector {font-variant: valor}
Los posibles valores para definir las variantes de las fuentes
normal | small-caps
Ejemplo
Vamos a variar las fuentes de este título h2.
Código
El texto esta escrito en minúscula.
Resultado
EL TEXTO ESTA ESCRITO EN MINÚSCULA.
________________________________________
La propiedad de las fuentes - font
La propiedad font es la forma comprimida en la cual podemos definir todos los valores de las fuentes de una sola vez. Esta propiedad se aplica a todos los elementos.
Sintaxis
selector {font: valor1 valor2 valor n}
Nota: debemos dejar un espacio en blanco entre los valores.
Los posibles valores para definir las fuentes
Todos los valores de font-family | font-style | font-variant | font-weight | font-size | caption | icon | menu | message-box| small-caption | status-bar
Ejemplo
Vamos a definir un tipo de fuente para p.
Código
El tipo de fuente es Palatino large bold en italic.
Resultado
El tipo de fuente es Palatino large bold en italic.
________________________________________
Propiedades de las fuentes
Propiedad Descripción Valores Detalles Ej.
font Atajo para establecer el resto de propiedades sobre las fuentes a la vez. font-style Estilo de fuente
font-variant Variante de fuente
font-weight Peso de la fuente
font-size Tamaño de la fuente
font-family Familia de fuentes
caption Fuente a utilizar en los botones, menús desplegables, etc.
icon Ícono
menu Fuente de los menús desplegables
message-box Fuente de las caja de mensajes
small-caption Pequeña leyenda
status-bar Fuentes de la barra de estado
font-family Familias de fuentes. nombre-familia Nombre de la familia de fuentes
familia-genérica Familia genérica
font-style Estilo de la fuente. normal Estilo normal
italic Itálica
oblique Oblicua
font-variant Convierte las minúsculas a mayúsculas pero mantienen un tamaño inferior a las mayúsculas. normal Normal
small-caps Mayúsculas pequeñas
font-weight Intensidad de la fuente. normal Normal
bold Negrita
bolder Negrita mas fuerte
lighter Suave
100 Valor 100
200 Valor 200
300 Valor 300
400 Valor 400
500 Valor 500
600 Valor 600
700 Valor 700
800 Valor 800
900 Valor 900
font-size Tamaño de la fuente. xx-small XX-Pequeña
x-small X-Pequeña
small Pequeña
medium Mediana
large Grande
x-large X-Grande
xx-large XX-Grande
larger Máxima
smaller Mínima
tamaño Tamaño
% Porcentaje
dOCUMENTO DE
sistemasremington.webnode.com/desarrollo-web-i/css/recursos/