jueves, 26 de marzo de 2020

Código CSS - Sintaxis

¿Qué es el código CSS?

El código CSS es un lenguaje de diseño gráfico que permite definir las propiedades, comportamientos y demás atribuciones de diseño de los elementos de un documento escrito en lenguaje de marcado, especialmente HTML, estas propiedades pueden ser almacenadas en archivos .css y de esta forma reutilizar en diferentes documentos HTML. Actualmente se encuentra en la versión 3, llamada CSS3.

Formas de acoplamiento del CSS con HTML

Existen tres formas (niveles), y cada una de ellas tiene más preponderancia que la anterior:


Primera: En un archivo externo llamado hoja de estilo. Este se debe incluir en el documento HTML con la etiqueta <link> en la sección <head> del HTML. Ejemplo: 

<link rel="stylesheet" href="file.css"/>

Donde "file.css" es el archivo externo u hoja de estilos.


Segunda: A nivel de página. Se da cuando se incluye código CSS en el documento HTML con la etiqueta <style> en la sección <head> del HTML. Ejemplo:

<style>/*Código CSS*/</style>

Este código servirá exclusivamente para el archivo HTML donde se escribe, si tuviera una archivo externo que asigna determinada propiedad y esta propiedad se repite dentro de la etiqueta "<style>", el valor asignado en "<style>" será el que se mantenga.


Tercera: A nivel de marca. Se produce cuando el código CSS se declara dentro de un elemento HTML con la propiedad "style". Ejemplo:

<div style="color: green;">Hola</div>


Sintaxis

Se coloca primero el nombre del elemento HTML (etiqueta), nombre de la clase (class) o identificador (id), luego entre llaves irán las propiedades, dos puntos y sus valores de la siguiente manera:


Como se escribe Ejemplo práctico 
  1. [nombre del elemento] {
  2.     propiedad1: valor1;
  3.     propiedad2: valor2;
  4.     /* Comentario de linea*/
  5.     propiedad3: valor3;
  6.     /* 
  7.     *Comentario de bloque
  8.     propiedad4: valor4;
  9.     propiedad5: valor5;
  10.     */
  11. }
 
  1. div{
  2.     width: 100px;
  3.     height: 100px;
  4.     background-color: #FEE;
  5.     margin: 10px;
  6.     border: 1px solid red;
  7.     color: brown;
  8.     font-family: "calibri";
  9.     font-size: 20px;
  10.     text-align: center;
  11. }




Publicado por en
Etiquetas: ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)