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>
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>- 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;
}- 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
Refencias
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
Cascade
Win the last