3

Conceptos básicos de CSS

 3 years ago
source link: https://dev.to/martindev/conceptos-basicos-de-css-58hg
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Conceptos básicos de CSS

  • Lenguaje de hojas de estilo en cascada que permite modificar la presentación en el navegador de un documento escrito en formato HTML.
  • La sintaxis principal del lenguaje CSS se basa en el uso de reglas de estilo, las cuales permiten seleccionar un elemento HTML para posteriormente modificar su presentación.

El siguiente es un ejemplo de una regla de estilo aplicada a un elemento HTML tipo <p>.

p {
  color: red;
}

Enter fullscreen mode

Exit fullscreen mode

  • p - Selector.
  • color - Propiedad.
  • red - Valor

Cada par propiedad-valor se debe separar dentro de la regla de estilo mediante el carácter ;.

CSS y HTML

Existen 3 formas de vincular código CSS con los elementos definidos en la estructura de un documento HTML.

  • Interno - Se incluye la regla de estilo directamente dentro del elemento HTML, haciendo uso del atributo style. 
<p style="color: red;">

Enter fullscreen mode

Exit fullscreen mode

  • Embebido - Dentro de las etiquetas <head></head> del documento HTML, se incluye un elemento <style> cuyo contenido podrá incluir reglas de estilo CSS. 
<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

Enter fullscreen mode

Exit fullscreen mode

  • Externo - Es la forma más común y recomendada de vincular código CSS y HTML, ya que permite mediante un documento con extensión .css, el cual contendrá únicamente código CSS, asociarlo a la estructura del sitio web de la siguiente manera. 
<head>
  <link rel="stylesheet" href="/main.css">
</head>

Enter fullscreen mode

Exit fullscreen mode

Selector de clase e id

Los atributos class e id permiten seleccionar un elemento HTML para posteriormente estilizarlo de la siguiente manera:

<h1 class="estilo-1">Encabezado</h1>
<p class="estilo-1">Hola Mundo</p>

.estilo-1 {
  color: red;
}

Enter fullscreen mode

Exit fullscreen mode

Una misma clase puede ser asociada a multiples elementos HTML, de forma tal como en el ejemplo anterior, al tener ambos elementos el mismo valor de clase, el resultado será la aplicación de la misma regla de estilo.

La selección de elementos mediante id permite únicamente seleccionar un elemento a la vez, con lo cual multiples elementos no deben compartir el mismo valor de id.

<p id="estilo-2">

#estilo-2 {
  color: green;
}

Enter fullscreen mode

Exit fullscreen mode

Propiedades CSS

Las propiedades CSS son las encargadas de definir que estilo será el aplicado al elemento seleccionado, permitiendo modificar atributos tales como el color, tamaño, posicionamiento, etc.

Estilizar texto

  • font-family - Modifica el tipo de fuente.
  • font-size - Modifica el tamaño.
  • font-style - Modifica el aspecto.
  • font-weight - Modifica el peso de los caracteres.
  • color - Modifica el color.

Modelo de caja

La estructura HTML posiciona cada uno de sus elementos como si fueran cajas apiladas una sobre la otra.
Cada elemento contiene una serie de propiedades que pueden ser modificadas haciendo uso de CSS.

  • width - Ancho del elemento.
  • height - Altura del elemento.
  • padding - Cantidad de espacio existente entre el contenido del elemento y su borde.
  • border - Linea que rodea cada uno de los 4 lados del elemento.
  • margin - Cantidad de espacio existente entre cada uno de los elementos.

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK