Introducción a CSS
Tipos de selectores:
- Selector universal (*)
- Selector por tipo (body, p, a, etc.)
- Selector por clase (.mi-clase)
- Selector por ID (#id-elemento)
Especificidad de selectores:
ID > clase > tipo > universal.
Selectores CSS - Combinadores
- Combinador de hijo “>”: selecciona los elementos que son hijos directos del primer elemento. Sintaxis: A > B.
- Combinador general de hermanos “~”: selecciona hermanos. El segundo elemento sigue al primero y ambos comparten el mismo elemento padre. Sintaxis: A ~ B
Propiedades (resúmen):
Para texto:
- font-family: Cambiar la fuente del texto. Generalmente se asigna una triada (Ej: Arial, Helvetica, sans-serif).
- font-style: Estilo de la fuente (italic, oblique, etc.)
- font-weight: Espesor de la fuente -en negrita- (Ej: bold, bolder o valores de 100 a 900).
- color: color del texto.
- text-align: Alineación del texto (right -derecha-, left -izquierda, center -centrado-, justify -justificado-)
Modelo de caja:
- width: Ancho del elemento.
- height: Altura del elemento.
- border: Borde del elemento. Primero el espesor, luego estilo del borde y por último el color (Ej: 1px solid black).
- background-color: Color de fondo del elemento.
- margin: Separación del elemento con otros elementos (desde el borde para afuera)
- margin-top
- margin-right
- margin-bottom
- margin-left
- padding: Espacio entre el borde y el contenido del elemento.
- padding-top
- padding-right
- padding-bottom
- padding-left
- box-sizing:
- content-box (por defecto): el tamaño total del elemento será igual al tamaño asignado por el width y el height más el padding y el espesor del border.
- border-box: el tamaño total del elemento será el determinado por el valor asignado a el width y height, el padding y espesor del border estarán contenidos dentro de esas dimensiones.
Colores
Los colores en CSS se pueden escribir de tres maneras:
- Nombre del color en inglés (blue, white, black, etc...)
- Con rgb(intensidad de rojo, intensidad de verde, intensidad de azul). Los valores de intensidad van del 0 al 255, siendo rgb(255,255,255) el blanco y rgb(0,0,0) el negro.
- Color hexadecimal #RRVVAA (R: rojo, V: verde, A: azul) los valores van desde 00 a FF, siendo #FFFFFF el blanco y #000000 el negro.
Ver selector de colores: https://htmlcolorcodes.com/es/
Colores con transparencia
Los colores que vimos hasta ahora, son colores sólidos. Pero se pueden aplicar transparencias a éstos de dos formas:
- Con rgba(rojo,verde,azul, transparencia). La transparencia es un valor de 0 a 1 (con decimales), siendo 0 totalmente transparente y 1 color sólido. Ej: rgba(255,255,255,1) es un color blanco completamente sólido, rgba(255,255,255,0.5) color blanco con una transparencia media y rgba(255,255,255,0) color completamente transparente (no visible).
- Con hezadecimal #RRVVAATT siendo TT la transparencia y puede tomar valores de 00 a FF, 00 completamente transparente y FF color sólido.
Ejemplo de clase:
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>Titulo de la pagina</h1>
<p class="texto-derecha"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus minima nesciunt est dignissimos accusantium aliquam consequatur dicta nobis. Animi provident dolor maxime dolorum nostrum, reprehenderit, quidem culpa voluptatum, sunt vero voluptates dolores iure necessitatibus. Obcaecati numquam quibusdam doloremque facere repellat modi magnam iste. Quas doloribus sed magnam autem pariatur, laborum aut temporibus </p>
<p class="texto-justificado">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsum unde beatae quisquam tempore quia maxime, modi pariatur. Ipsam, porro sed, similique at quis alias error eum quaerat, aperiam deleniti quidem ex blanditiis dignissimos iusto quasi facere voluptates. Non sunt, perferendis quis corporis quasi rerum odit? Enim temporibus adipisci expedita!</p>
<p class="texto-centrado">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium harum quam quisquam, possimus ea aliquam saepe, veritatis necessitatibus cum, rerum velit cupiditate suscipit! Soluta, modi asperiores unde autem alias explicabo beatae fuga at dolore accusantium deserunt possimus iure atque adipisci blanditiis veritatis sapiente? Tempore ipsam reprehenderit laudantium, nesciunt quia sint?</p>
<div class="cuadro">
Texto dentro del cuadro
</div>
<div class="cuadro1">
Cuadro Padre
<div class="cuadro2" id="cuadro2">
Cuadro Hijo
</div>
</div>
</body>
</html>
- style.css
h1{
font-family: Arial, Verdana, sans-serif;
font-size: 35px;
font-style: bold;
font-weight: 900;
color: red;
text-decoration: underline;
}
p{
font-family: Arial, Helvetica, sans-serif;
}
.texto-derecha{
text-align: right;
}
.texto-justificado {
text-align: justify;
}
.texto-centrado{
font-family: 'Courier New', Courier, monospace;
text-align: center;
}
/* COMENTARIO */
.cuadro{
box-sizing: border-box;
width: 200px;
height: 200px;
border: 1px solid black;
padding: 50px;
margin: 50px;
text-align: center;
}
/* px % pt em rem */
.cuadro1{
box-sizing: border-box;
width: 300px;
height: 300px;
border-top: 2px solid lightgreen;
border-left: 5px dotted white;
background-color: rgb(0, 0, 255);
/*#83dd46*/
}
#cuadro2{
font-family: fantasy;
}
.cuadro2{
box-sizing: border-box;
width: 150px;
height: 150px;
margin: 20px 0px 0px 10px;
padding: 10px;
background-color: #FFFFFFbb;
/*rgba(255,255,255, 0.7)*/
font-family: Arial, Helvetica, sans-serif;
}
div{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
Comentarios
Publicar un comentario