CSS Basic

Sintaxis

Regla de oro

/* Regla */
selector { /* Bloque de declaración */
    color: black; /* Declaración propiedad: valor */
    /* Comentario */
}

Donde escribirlo

  • Inline
  • Style tag
  • External file
<h1 style="color: red">Red</h1>

Ejemplo inline

Atributo Style

  • Agregar el atributo style
  • Escribir las declaraciones necesarias separadas de punto y como
  • El estilo es solamente aplicado a la etiqueta que tiene el atributo style
  • Esta forma de escribir CSS es útil para circunstancias específicas, no es buena idea utilizarlo para dar diseño a todo un sitio

Etiqueta Style

<style>
  h1 {
    color: teal;
  }
</style>

Ejemplo style
  • Agregar la etiqueta style dentro de head
  • Escribir bloques de declaraciones necesarias
  • Esta forma de escribir CSS es útil para la mayoría de circunstancias, pero hace difícil el manejo de los archivos HTML y no puede ser utilizado en varios sitios 

Archivo Externo

<!-- En el HEAD de HTML -->
 <link rel="stylesheet" href="style.css">
<!-- En style.css -->
h1 {
    color: teal;
}

Ejemplo externo
  • Se crea un archivo  con extensión css
  • Escribir bloques de declaraciones necesarias
  • Se conecta con el HTML usando la etiqueta link
  • Es útil en la mayoría de circunstancias y permite reutilización

Selectores

Permiten indicar a que elemento aplicar un declaración de estilo

Clasificación 

  • Selectores Simples
  • Combinación de Selectores
  • Selectores de Pseudo-Clases
  • Selectores de Pseudo-Elementos
  • Selectores de Atributos

Selectores Esenciales

  • Selector descendente 
  • Atributo
  • Estrella
  • Selector coma (,)
  • Selector adyacente

Selectores Simples

Etiqueta

Selecciona todas las etiquetas del tipo especificado 

/* Seleciona todas 
 * las etiquetas p */
p {
  color: red;
}

ID

Selecciona el elemento con el id. Se debe anteponer con # antes del id

/* Seleciona el elemento 
 * con id codigo*/
#codigo {
  color: red;
}
<p> parrafo </p>
<a id="codigo" href="#"> 
Enlace
</a>

Selectores Simples

Clase

Selecciona todas las etiquetas que contenga las clase. Añadir un . antes de la calse

/* Seleciona todas 
 * las etiquetas p */
.future {
  color: red;
}

*

Selecciona todos los elementos

/* Seleciona el elemento 
 * con id codigo*/
* {
  color: red;
}
<div class="futute">
  Contenido 1
</div>

<div class="futute">
  Contenido 2
</div>
<a id="codigo" href="#"> 
Enlace
</a>
<h1>
   titulo
</h1>
<div>
  texto
</div>

Selectores Simples

Selecciona todas las etiquetas p  que sean de clase text-danger

p.text-danger{
  color: tomato;
}
<p>
  texto normal
</p>
<p class="text-danger">
  texto danger
</p>

Operador ,

El Operador (,) se usa para aplicar la misma regla a varios selectores

h1, h2, p{
  text-align: center;
}
<h1>
  texto normal
</h1>
<h2 class="text-danger">
  texto danger
</h2>
<p class="text-danger">
  texto danger
</p>

Lectura

What are CSS Selectors?

Refencias

https://www.w3schools.com/cssref/css_selectors.asp

Colores

  • Nombres de colores
  • RGB
  • HEX
  • HSL
  • RGBA
  • HSLA
tomato
rgb(255,99,71)
#ff6347
hsl(9,100%,64%)

rgb(255,99,71,0.5)
hsl(9,100%,64%,0.5)

Algunas Propiedades

Bordes

a {
  /* dashed, solid, double,
   * groove, ridge, inset,
   * otuset,none,hidden*/
  border-style: dotted;
  /*  px,pt,cm,em ... 
   *  or thin, medium 
   *  or thick*/
  border-width: 5px;
  border-color: black;
  
  border-left-style: dotted solid;
}

Background

body {
  background-color: #fff;
  background-image: url("img.png");
  /* repeat-y, no-repeat */
  background-image: repeat-x ; 
  /* O con Unidades*/
  background-postion: right top; 
}
div {
  background: #ffffff url("img.png") no-repeat  right top;
  border: 1px solid red;
  border-radius: 5px;
}

Algunas Propiedades

Ancho

a {
 
  height: 10px;
  
}

Alto

a {
 width: 200px;
}

Algunas Propiedades

Margenes

a {
  padding-top: 10px;
  padding: 10px 5px;
  
}

Padding

a {
 margin: 10px;
 margin: 10px auto;
}

¿Cómo se aplican las reglas ?

Specificity

http://specificity.keegan.st/

Cascade

Win the last

Exercise 1

Subtitle

[05] [PW] - CSS Basic

By Néstor Aldana

Made with Slides.com

[05] [PW] - CSS Basic

Qué es, cómo funciona, cómo se escribe CSS. Como se cambian color de texto, fondo...

  • 241

More from Néstor Aldana