Cascading Style Sheet (CSS)

Es un lenguaje utilizado en la presentación de documentos HTML. Un documento HTML viene

siendo coloquialmente “una página web”. Entonces podemos decir que el
lenguaje CSS sirve para organizar la presentación y aspecto de una página web.
Combinando los Lenguajes
 Conceptos Básicos

 Estilos en línea  Estilos externos

 <h3 style=“background-color: green; color: white;”></h3>  <link>

 Estilos internos
<style>
h3 {
background-color: green;
}
</style>
 Selectores Básicos

 Selector universal *  Selector de hijos  Selector de atributo

 Selector de tipo o elemento - e  Select1 > selector2  [attr]
 Selector Descendiente  [attr=val]
 Selector de hermanos
elemento1 elemento2
adyacente  [attr~=val]
 Selectores id y class
 Selector1 + selector2  [attr|=val]
 Selector de Clase .Nombre
 [attr^=val] CSS3
 Selector de Identificación
 Selector de hermano general
 [attr$=val] CSS3
#nombre  Selector1 ~ elemento2
 [attr*=val] CSS3
 Combinar selectores
 Selectores Avanzados

 CSS2  :first-of-type
 :hover
 Pseudo Clases  :last-of-type  ::first-letter
 :focus
 selector:pseudo-class  :lang  :only-child  ::first-line
 selector.class:pseudo-class  :first-child  :only-of-type  ::after
 CSS1  CSS3
 :root  ::before
 Básicos  Avanzados
 :nth-child(N)  :empty  ::selection
 :link
 :visited
 :nth-last-child(N)  :target  ::-webkit-scrollbar
 :nth-of-type(N)
 :active  :enable  -track
 :nth-last-type(N)
 :disable  -thumb
 :last-child
 :not(x)  :checked
Propiedades de fuentes

 font-family: font|initial|inherit;
 font-style:
normal|italic|oblique|initial|inherit;
 font-weight:
normal|bold|bolder|lighter|number|i
nitial|inherit|100-900
 font-size: médium | xx-small | x-small |
small | large | x-large | xx-large |
smaller | larger | lenght | initial |
inherit | % | px | em | rem | vm | vh |
vmin | vmax;
 shorthand -> font
 Propiedades de texto

 CSS2.1  CSS3
 text-indent  text-decoration-style
 text-transform  text-align-last
 white-space  text-decoration-color
 word-spacing  text-decoration-line

 letter-spacing  text-overflow

 text-align  word-wrap
 text-shadow: x | y | blur | color
 text-decoration
Estilos de listas (list-style-type: val;)

 disc
 lower-latin
 circle
 upper-latin
 square
 armenian
 decimal
 georgian
 decimal-leading-zero
 lower-alpha
 lower-roman
 upper-alpha
 upper-roman
 none
 lower-greek
 Modelo de caja

 Padding  Propiedade Float y clear

 Border  Propiedades Position y Z-index
 Margin
 Width
 Height
 Max-width
 Min-width
 Box-sizing
 Display
 Unidades y Valores
 Unidades de longitud Absolutas
 In, cm, mm, pt, pc y px
 Unidades de longitud relativas
 em, ex, rem, %
 Unidades de longitud viewport
relativas
 vw, vh, vmin y vmax
 Colores tipo de valores
 Keywords, hexadecimales # y
los métodos rgb() rgba() hsl()
hsla()
 Otros tipos de valores
 url()
Border, Backgrounds, Sombras

 Background
 border-radius
 border-image
 sombras
 box-shadow
Degradados

 Degradados lineales (linear-gradients)

 Degradados radiales (radial-gradients)
 Repeating gradients
Multi-column y Flexbox

 Multi-Column
 Flexbox
@font-face
Fuentes Personalizadas, Fuentes Web

 Fuentes Personalizads (@font-face) – Web fonts

 Fuentes Iconos (@font-face)
Transformaciones – Transiciones

 Transiciones
 Transformaciones 2D
 Transformaciones 3D
Animaciones

 Animation-delay  @keyframes [identificador]

 Animation-direction
 Animation-duration
 Animation-iteration-count
 Animation-name
 Animation-play-state
 Animation-timing-function
 Animation-fill-mode
@Media Queries

 Operadores Lógicos
 And
 Not
 Only
 Lista separado por comas, “OR”
 Type
 Orientation: landscape - portrait
 All
 Tv
 Print
 screen
 Max-width, max-height
 Min-width, min-height