T8 -CSS Flashcards
Tipo MIME de CSS
Text/CSS
Significado de CSS
Cascading Style Sheets
¿Cómo enlazamos un CSS a un HTML?
<link></link>
Qué hace:
p{
color:red
}
Todos los p en HTML tienen el texto de color rojo
Què hace:
.parrafo1{
color:red
}
La clase “Parrafo1” tiene el texto en color rojo
Tenemos un div ¿Cómo está estructurado? el cuadrado de dentro a fuera
padding>border>margin
Que hace:
#parrafo2{
color:red
}
El id “parrafo2” tiene el texto en rojo
¿Cómo puedes personalizar el CSS dependiendo del navegador que utilices?
Con la propiedad:
-webkit-box-shadow
-mox-box-shadow
Tipos de medias para imprimir y para la pantalla
@media print{}
@media screen{}
Con que propiedad de CSS podemos poner divs encimas de otros
z-index
Preprocesadores de CSS
LESS
SASS
STYLUS
FRAMEWORKS DE CSS
BOOTSTRAP
FOUNDATION
BUMBA
MATERIALIZE
Que es un CDN
Es una red de distribución de contenidos esta red no se cae nunca, es decir siempre está operativa
Que CDN sin mas importantes
Cloudflare
Akamai
hostry
Concepto DRY de CSS que significa
Don’t Repeat Yourself
no repetir codigo para eso se ha creado los preprocesadores
Sintaxis de CSS
Selector{ propiedad:valor}
Preferencia de reglas de CSS
*DE - A +
MENOS PREFERENCIA A MAS PREFERENCIA:
Fichero.css(Externo)<Propio HTML(en el <head> dentro de la etiqueta <style> (interno)<Propio html pero dentro de la etiqueta(local) <p STYLE=""></style>
at-rules
@MEDIA
@IMPORT
@MEDIA
@FONT-FACE
etiqueta1>etiqueta2{
}
Etiqueta 2 dentro de etiqueta 1 (DIRECTAMENTE!)
a ~ b {
}
aplica si b es hermano de a
a + b
aplica si b es hermano directo de a
E[atr^= algo]
que EMPIEZA por “algo”
E[atr$= algo]
que TERMINA por “algo”
E[atr*= algo]
que contenga “algo”
que pseudoclases conocemos
selector:pseudoclase{
}
:active
:hover (al pasar el raton por encima)
:visited
:invalid
:empty
:required
:first-child
que pseudoelementos conocemos
selector::pseudoelemento{
}
::after
::before
::first-line
como forzamos herencia en CSS
con inherit es decir:
p{
background:inherit
}
hereda el background de su padre
como forzar una regla o que no herede un selector
con !important
unidades absolutas de tamaño CSS
in : pulgadas
cm
pc : picas
mm
pt : puntos
px
q : cuarto de mm
unidades relativas
em
ex
ch
rem
%
display:none que hace?
no renderiza ni el hueco
visibility:hidden que hace
oculta el div pero DEJA el hueco
