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).
