B3-CSS Flashcards
CSS Cascading Style Sheets Hojas de Estilo en Cascada
Describe cómo se deben mostrar los elementos HTML en la pantalla, en papel o en otros medios.
Ahorra mucho trabajo. Puede controlar el diseño de varias páginas web a la vez.
Las hojas de estilo externas se almacenan en archivos CSS
Regla CSS
Selector + declaración del bloque
El selector apunta al elemento HTML al que desea aplicar estilo.
El bloque de declaración contiene una o más declaraciones separadas por punto y coma.
Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.
Varias declaraciones CSS están separadas por punto y coma y los bloques de declaración están rodeados por llaves.
5 Categorías de selectores
Selectores simples (seleccione elementos según el nombre, identificación, clase)
Selectores combinadores (selecciona elementos en función de una relación específica entre ellos)
Selectores de pseudoclase (seleccionan elementos según un determinado estado)
Selectores de pseudoelementos (seleccionan y aplican estilo a una parte de un elemento)
Selectores de atributos (seleccione elementos según un atributo o valor de atributo)
CSS element Selector
Selecciona el elemento basado en el nombre del elemento
p {
text-align: center;
color: red;
}
CSS id Selector
El selector de identificación utiliza el atributo de identificación de un elemento HTML para seleccionar un elemento específico.
Se escribe un carácter almohadilla (#), seguido de la identificación del elemento.
#para1 {
text-align: center;
color: red;
}
CSS class Selector
El selector de clases selecciona elementos HTML con un atributo de clase específico.
Para seleccionar elementos con una clase específica, escriba un carácter de punto (.), seguido del nombre de la clase.
// todos los elementos con class=”center”
.center {
text-align: center;
color: red;
}
// solo los elementos <p> con class=”center” serán rojos y estarán alineados al centro
p.center {
text-align: center;
color: red;
}
Un elemento puede pertenecer a varias clases, el nombre de clase no puede comenzar con un numero.
CSS Universal Selector
El selector universal (*) se aplica a todos los elementos de la página.
* {
text-align: center;
color: blue;
}
CSS Grouping Selector
El selector de agrupación selecciona todos los elementos HTML con las mismas definiciones de estilo.
h1, h2, p {
text-align: center;
color: red;
}
Estilos externos
Los estilos externos se definen dentro del elemento <link></link>, dentro de la sección <head> de una página HTML:
<link></link>
Notación de la cantidad de pixeles
Incorrect (space): margin-left: 20 px;
Correct (no space): margin-left: 20px;
Inline CSS
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Orden en cascada
1 - Estilo en línea (dentro de un elemento HTML)
2 - Hojas de estilo externas e internas (en la sección principal)
3 - Navegador predeterminado
Comentarios
Un comentario CSS se coloca dentro del elemento <style> y comienza con /* y termina con */</style>
Especificación de colores
CSS/HTML support 140 standard color names.
Los colores también se pueden especificar usando valores RGB, valores HEX, valores HSL, valores RGBA y valores HSLA:
<h1>...</h1>
<h1>...</h1>
<h1>...</h1>
<h1>...</h1>
<h1>...</h1>
RGB values
Un color se puede especificar como un valor RGB, usando esta fórmula:
rgb (rojo, verde, azul)
Cada parámetro (rojo, verde y azul) define la intensidad del color entre 0 y 255.
HEX values
rrggbb
Se puede especificar un color utilizando un valor hexadecimal en la forma:
Donde rr (rojo), gg (verde) y bb (azul) son valores hexadecimales entre 00 y ff (igual que el decimal 0-255).
HSL values (Hue, Satuación, Luminosidad)
Un color se puede especificar usando tono, saturación y luminosidad (HSL) en la forma:
hsl(hue, saturation, lightness)
El tono es un grado en la rueda de colores de 0 a 360. 0 es rojo, 120 es verde y 240 es azul.
La saturación es un valor porcentual. 0% significa un tono de gris y 100% es el color completo.
La luminosidad también es un porcentaje. 0% es negro, 50% no es ni claro ni oscuro, 100% es blanco
RGBA values
Los valores de color RGBA son una extensión de los valores de color RGB con un canal alfa (opacidad de un color)
rgba(rojo, verde, azul, alfa)
El parámetro alfa es un número entre 0,0 (completamente transparente) y 1,0 (nada transparente)
HSLA values
Los valores de color HSLA son una extensión de los valores de color HSL con un canal alfa, (opacidad de un color).
hsla(hue, saturation, lightness, alpha)
El parámetro alfa es un número entre 0,0 (completamente transparente) y 1,0 (nada transparente)
CSS backgrounds
Cuando se utiliza la propiedad abreviada, el orden de los valores de las propiedades es:
background-color: color de fondo background-image: imagen de fondo background-repeat: repetición de fondo background-attachment: archivo adjunto de fondo background-position: posición de fondo
No importa si falta uno de los valores de propiedad, siempre y cuando los demás estén en este orden.
Border-style
La propiedad de estilo de borde especifica qué tipo de borde mostrar.
Margins
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Colapso de márgenes
Los márgenes superior e inferior de los elementos a veces se contraen en un solo margen que es igual al mayor de los dos márgenes.
¡Esto no sucede en los márgenes izquierdo y derecho! ¡Solo márgenes superior e inferior!
Padding
El relleno se utiliza para crear espacio alrededor del contenido de un elemento, dentro de los bordes definidos.
CSS height and width Values
auto -Es el default, el navegador calcula el valor.
length - Define el height/width en px, cm, etc.
% - Define el height/width en el porcentaje de bloque contenedor.
initial - Cambia el valor height/width al valor por defecto
inherit - El valor height/width será el heredado por el valor del padre.
Box Model
Se utiliza cuando se habla de diseño y disposición.
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
CSS Outline
La propiedad outline contorno es una línea dibujada fuera del borde del elemento.
outline-style outline-color outline-width outline-offset outline
CSS Text
background-color: lightgrey;
color: blue;
text-align: (center, rigth, left, justify)
text-align-last : se aplica a la ultima linea del texto
direction: y unicode-bidi se utilizan para cambiar la direccion
vertical-align alineacion vertical
CSS Text decoration
text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration
CSS Text Transformation
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
CSS Text Spacing
text-indent
letter-spacing
line-height
word-spacing
white-space
CSS Fonts Familys
Serif
Sans-serif
Monospace fonts
They create a mechanical look
Cursive fonts
Fantasy fonts
CSS Web Safe Fonts
Arial (sans-serif)
Verdana (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)
CSS Font Style
font-style (normal, negrita o cursiva)
font-weight ancho de letra
font-variant texto en varias capas
CSS Font Size
font-size:
CSS Google Fonts
<link></link>
<style>
</style>CSS Font Shortand
font-style
font-variant
font-weight
font-size/line-height
font-family
CSS Links
a {
color: hotpink;
}
Pueden seleccionarse según su estado
a:link - normal, link sin visitar
a:visited - link que un usuario ha visitado
a:hover - link cuando el usuario pasa el mouse sobre él
a:active - link en el momento en que se hace clic
CSS Lists
Existen dos tipos principales de listas:
listas desordenadas (<ul>): elementos marcados con viñetas
listas ordenadas (<ol>): elementos marcados con números o letras
list-style-type: tipo de marcador de elemento de lista.
list-style-image: especifica una imagen como elemento marcador.
list-style-position: posicion del marcador.
