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 CSS
CSS 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({...})

Sintaxis
selector{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}

Ejemplo
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



 


Bla, bla, bla
Texto, texto, texto


La etiqueta
 


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/

 


Haz tu página web gratis Webnode