Contenido

Curso para aprender CSS3 desde cero
Hola Seores del Foro, le coloco a disposicin este Curso de CSS3 desde cero que
he creado y he estructurado por Temas y mdulos como manda la especificacin,
desde los conceptos bsicos hasta los ms avanzados, para ayudar a las personas
que recin comienzan con este lenguaje de estilos.
Aprender no cuesta nada, Ensear muchsimo menos

Introduccin a CSS3
1. VIDEO 3
CSS 2.1 CSS3 Potencian lenguaje de diseo
Media queries
Selectores Level
Estilo en lnea <p style=margin-left:20px>
Estilos internos <head> <style type=></style></head>
Estilos link <link rel=stylesheet href=>
Sintaxis basicos
H2(selector) {color(propiedad): #d0fff3(valor);}
2. VIDEO 4
Selectores bsicos
a. Selector Universal (*)
*{propiedad:valor}
*{
Margin:0; //Quita todos los mrgenes
Padding:0;
Color:red;//Todo el texto color rojo
}
Selector de tipo o elemento

E{propiedad:valor}
Body{
Color:#000;
Background:#FFF}
}
Selector descendiente
H1 span {
Font-weight:bold;
Color:#1e4607;
}
Lo que est dentro de una etiqueta h1 que sea span
6. Selectores bsicos (>) (+) (~) Selectores bsicos
a) Hijos s1>s2{propiedad:valor;}
div>a{}
Se aplican los estilos directamente del elemento padre
Div a {} se aplica a todo
5. Selectores .class #id

Class a ms de un elemento
#id - nicos (solo un elemento)
Selector de clase .Nombre {propiedad:valor;}

<header class=parrafo>
.cabecera, .pie {}
O
.parrafo{}
Selector de identificacion
#nombre {propiedad:valor;}
<div id=contenido></div>
#contenedor{}
</header>
2) identificador
3)combinar selectores #id .class elemento {}
#contenido header.cabecera h1 span{ list-style-

type:none}
Video 6
1) Hijos
2) Selector de hermano adjacente
Selector 1 + Selector 2 {propiedad: valor;}
(Selecciona un elemento especifico y hermanos en el
mismo nivel de jerarquia)
H1+p{}
P+p{} (Selecciona todos los elementos p, que siguen a
otro elemento prrafo)
3) Selector de hermano general

Selector 1~Selector 2 {propiedad: valor;}
(elige a todos los que siguen al primer elemento)
Video 7
Selector de atributos
1. Bsico [attributo] independiente de su valor
<a href= rel=></a>
2. Valor exacto [attributo~=valor]

A[rel] {}
A[rel=]{}
<h1 tittle=titulo de cabecero></h1>
[tittle~=titulo]{}
3. [attributo~=valor] (Busca el valor aunque no

sea exacto titulo seguido de un espacio)
<h1 tittle=titulo de cabecera></h1>
[tittle~=titulo]{}
4. [attributo|=valor]
(debe tener un guion despus de la palabra)
[tittle |= titulo]{}
5. [attributo ^=valor]
href"=https://www.google.com
6. [attributo$=valor] termina con un valor

<a href=archivo.rar></a>
A[href ^=http://] Empieza con un valor
A[href$=.rar]
7. [attributo*=valor] contiene busca si contiene la
palabra en el valor
A[href*=]{}
8. Seudoclases
9. CSS1 (link, visited, actived)
CSS2(hover, focus, lang, first-child)
CSS3
10. Pseudoclases estructurales basicas
First-child
Last-child
Only-child
Introduccin a CSS3
#1 - Introduccin 15 de sept 2016

#2 - Un poco de historia de CSS 15 de sept 2016 (introdujo en 1996 en la versin html 4.0
css1) css3 se divide en modulo de caractersticas individuales e independientes cada
modulo avanza sin tener en cuenta la evolucin de los demas
#3 - Conceptos bsicos (estilo en lnea, internas, link
Selectores bsicos
#4 - Selectores bsicos 15 sept 2016

#5 - Selectores Id y Class 19 sept 2016
#6 - Combinadores de Selectores 19 sept 2016
#7 - Selectores de atributo 19 sept 2016
#8 - Introduccin a las Pseudo Clases 19 sept 2016
#9 - Pseudo-Clases de Link y Acciones 19 sept 2016
#10 - Pseudo Clases estructurales bsicas 19 sept 2016
Selectores avanzados
#11 - Pseudo clases :nth-child() y :nth-last-child()

#12 - Pseudo clases estructurales de tipo :nth-of-type() y :nth-only-type
#13 - Ms Pseudo clases de CSS3
#14 - Pseudo clases UI o de Interfaz de Usuario
#15 - Pseudo Elementos, parte 1
#16 - Pseudo Elementos, parte 2 ::before y ::after
Valores y Unidades
#17 - Unidades de Longitud Absolutas

#18 - Unidades de Longitud Relativas
#19 - Unidades de Longitud Viewport Relativas
#20 - Los Colores en CSS como tipos de valor
#21 - Otros tipos de valores en CSS
Texto, Fuentes, y Listas
#22 - Propiedades de fuentes en CSS3

#23 - Utilizando el mtodo Shorthand con las Propiedades Fonts
#24 - Propiedades de Textos en CSS3
#25 - Propiedad de Textos text-shadow
#26 - Estilos de Listas
Modelo de Caja de CSS
#27 - Modelo de Caja en Css. padding, border y margin

#28 - Modelo de caja CSS Width y Height
#29 - Box-sizing Modificando el Modelo de caja predeterminado
#30 - La propiedad Display y sus valores
#31 - Las Propiedades Float y Clear
#32 - Las Propiedades Position y Z-index
Backgrounds, Sombras y Bordes a Elemento HTML
#33 - Las Propiedades Background bsicas

#34 - Las Propiedades Background avanzadas
#35 - Border-radius
#36 - Box-shadow
#37 - Border-image
Degradados con CSS3
#38 - Degradados lineales (Linear-Gradients)

#39 - Degradados Radiales (Radial-Gradients)
#40 - Repeating Gradients
Flexbox y Multi-Column
#41 - Entendiendo las caracteristicas Flexbox de CSS3

#42 - Mltiples columnas con Multi-Column layout de CSS3
Web Fonts, Fuentes personalizadas con @Font-Face
#43 Web fonts, Fuentes personalizadas con @font-face

#44 Icon fonts, Iconos basados en Fuentes con @font-face
Transiciones y Transformaciones
#45 - Las Transiciones y sus Propiedades

#46 - Transformaciones 2D
#47 - Transformaciones 3D
Animaciones con CSS3
#48 - Las Animaciones en CSS3
Las hojas de estilos en cascadas (CSS) son un lenguaje utilizado para describir el
aspecto visual de una pgina web o cualquier aplicacin virtual. Usando CSS
podemos cambiar colores, margenes, bordes, tipografias, fondos, y mucho ms. El
contenido de este curso gratuito de CSS3 desde Cero consolidar las Fundaciones
CSS desde las ms bsicas hasta un nivel muy avanzado.
Curso CSS3, aprende desde 0
Introduccin a CSS3
En este primer bloque Aprenderemos los conceptos bsicos y fundamentales de CSS
#1 Introduccin
Bienvenida al Curso de CSS3 desde Cero 2014
Ver video
Duracin: 2 min, 04 seg.
#2 Un Poco De Historia De CSS

Un la historia y evolucin de la CSS, por lo que fue creado, y cmo beneficia a los
diseadores y desarrolladores.
Ver video
#3 Conceptos Bsicos
Veremos una visin general de los conceptos fundamentales de CSS y la terminologa, y
como aplicarlos a una pagina web.
Ver video
Selectores Bsicos
Por medio de los selectores elegimos fcilmente a determinados elementos HTML del
documento web para luego aplicar los estilos CSS.
#4 Selectores Bsicos
Los Selectores se utilizan para seleccionar un de elemento en el documento HTML para
aplicarle estilos. Veremos el selector universal y Tambin los selectores de elementos de
etiquetas HTML.
Ver video
#5 Selectores Id Y Class
Los selectores de clases y los de identificacin permiten que apuntamos especficamente a
los elementos en funcin de sus atributos de class o id.
Ver video
#6 Combinadores De Selectores
los Combinadores crean relacin entre dos o ms selectores y Se utilizan para apuntar a los
elementos secundarios y hermanos directos.
Ver video
#7 Selectores De Atributo
los Selectores de atributos permiten seleccionar los elementos HTML basados en sus
atributos o en los valores del mismo.
Ver video
#8 Introduccin A Las Pseudo Clases
La pseudo-clases es similar a una clase en HTML, pero no se especifica explcitamente en
el documento. En este video veremos una peuqea introduccin a este tema.
Ver video
#9 Pseudo-Clases De Link Y Acciones

las pseudo-clases de enlaces permiten enlaces permiten dar estilos en funcin de si son o no
visitados o si hicieron clic en el. y las pseudo-clases de Accin usuario se aplican en
funcin de la interaccin del usuario con un elemento.
Ver video
#10 Pseudo Clases Estructurales Bsicas

Las Pseudo-clases Estructurales seleccionan los elementos en funcin de su posicin en el
documento HTML. En este video, veremos como seleccionar el primer, ltimo y unico hijo
de algn elementos HTML.
Ver video
Selectores Avanzados
Con los selectores avanzados vamos a ser mas precisos y exactos al momento de apuntar a
un elemento HTML sin la necesidad de una clase o un ID.
#11 Pseudo Clases :Nth-Child() Y :Nth-Last-Child()

En este video vamos a utilizar la pseudo-clase :nth-child() para apuntar a cualquier hijo de
un elemento HTML.
Ver video
#12 Pseudo Clases Estructurales De Tipo :Nth-Of-Type() Y :Nth-Only-Type

En este video vamos a ser ms especfico con las pseudo-clases estructurales para dirigirnos
a determinados tipos de elementos.
Ver video
#13 Ms Pseudo Clases De CSS3

En este video veremos mas Pseudo Clases de CSS3, veremos las Pseudo Clases :root,
:empty, :target, y :not()
Ver video
#14 Pseudo Clases UI O De Interfaz De Usuario

En este video terminamos con las Pseudo Clases de CSS3, viendo las pseudo clases
:enabled, :disabled y :checked
Ver video
#15 Pseudo Elementos, Parte 1

Los pseudo-elementos apuntan a elementos virtuales que no estn definidos en el marco
HTML y no aparecen en el cdigo fuente. En este video veremos los pseudo-elementos
::first-line y ::first-letter.
Ver video
#16 Pseudo Elementos, Parte 2 ::Before Y ::After

Los pseudo-elementos ::before y ::after nos permiten insertar elementos virtuales, antes y
despus del contenido de un elemento. Estos elementos solo son visibles para el usuario y
no aparecen en el cdigo fuente.
Ver video
Valores y Unidades
Cada propiedad CSS acepta algun tipo de valor, una palabra clave, unidad de longitud, o
valor de color. En este bloque veremos los valores comunes de CSS.
#17 Unidades De Longitud Absolutas

Las Unidades de longitud absolutas son tiles cuando se conoce el medio de salida, estas
Unidades absolutas consisten en las unidades fsicas (in, cm, mm, pt, pc y la unidad px).
Ver video
#18 Unidades De Longitud Relativas

Las Unidades de longitud relativas especifican una longitud que es relativa a otra longitud,
como el tamao de fuente de un elemento o de la anchura de la ventana del navegador. En
este video veremos las unidades de longitud de CSS (em, ex, rem y %).
Ver video
#19 Unidades De Longitud Viewport Relativas

Las Unidades de longitudes Viewport relativas definen una longitud porcentual al tamao
del viewport que es la parte visible del documento en los diferentes dispositivos donde se
puede visualizar una pagina web. En este video veremos las unidades de longitud viewport
relativas de CSS (vw, vh, vmin y vmax).
Ver video
#20 Los Colores En CSS Como Tipos De Valor

En este video, vamos a aprender cmo dar un color como valor a las diferentes propiedades
de CSS y cmo definir colores utilizando palabras clave, valores hexadecimales # y los
metodos rgb(), hsl() y rgba() y hsla().
Ver video
#21 Otros Tipos De Valores En CSS

En este video, veremos con que otros tipos de valores podemos contar en CSS para aplicar
a los elementos HTML por medio de las diferentes propiedades de CSS.
Ver video
Texto, Fuentes, y Listas

Los Texto son la sangre de una pgina web, y CSS tiene muchas opciones para definir
estilos de texto. En este bloque veremos cuales son.
#22 Propiedades De Fuentes En CSS3
En este video, veremos las diferentes propiedades para las fuentes comunes y bsicas.
Tmbien veremos los valores que podemos definir para mejorar nuestro texto por medio de
CSS y las propiedades fonts, o propiedades de fuentes.
Ver video
#23 Utilizando El Mtodo Shorthand Con Las Propiedades Fonts

En este video, veremos como aplicar el metodo Shorthand o forma abreviada para unificar
las diferentes propiedades fonts de CSS.
Ver video
#24 Propiedades De Textos En CSS3

En este video, vamos a aprender las propiedades de texto comunes que se pueden utilizar
para especificar los espaciados entre palabras y letras, decoracin de texto, alineacin etc..
Ver video
#25 Propiedad De Textos Text-Shadow

En este video, aprenderemos a utilizar la propiedad de texto text-shadow para aplicar
sombras a los textos por medio de CSS3.
Ver video
#26 Estilos De Listas

En este video vamos a ver como utilizar las propiedades de lista en CSS y como se puede
utilizar para controlar la apariencia de las listas ordenadas y desordenadas del documento
HTML.
Ver video
Modelo de Caja de CSS

Cada elemento HTML puede ser pensado como una caja con contenido, relleno, bordes y
mrgenes. El modelo de caja es la base del diseo con CSS.
#27 Modelo De Caja En Css. Padding, Border Y Margin

En este video veremos Concepto Modelo de Caja en Css, veremos los principales
componentes que forman este modelo, veremos como se comportan los margenes, los
padding y los bordes en un elemento HTML pensado como una caja.
Ver video
#28 Modelo De Caja CSS Width Y Height

En este video seguimos viendo el Concepto Modelo de Caja en Css, y seguimos viendo
las principales propiedades que forman esta base en CSS, Width y Height.
Ver video
#29 Box-Sizing Modificando El Modelo De Caja Predeterminado

En este video seguimos viendo el Concepto Modelo de Caja en Css, y vamos a ver como
cambiar el modelo de caja que aplican los navegadores por defecto con la propiedad Box-
sizing
Ver video
#30 La Propiedad Display Y Sus Valores

En este video seguimos viendo Propiedades que afectan el Modelo de Caja en Css,y
vamos a ver la propiedad Display y sus diferentes valores (block, inline, inline-block, none,
list-item, table, etc.)
Ver video
#31 Las Propiedades Float Y Clear

En este video seguimos viendo Propiedades que afectan el Modelo de Caja en Css,y
vamos a ver como podemos utilizar las propiedades Float y Clear
Ver video
#32 Las Propiedades Position Y Z-Index
Terminamos este bloque de lo que llamamos el Modelo de Caja en Css viendo un par de
propiedades que solemos usar mucho cuando diseamos en CSS, Position y Z-index
Ver video
Backgrounds, Sombras y Bordes

Con CSS, cualquier elemento puede tener un fondo, un borde y una sombra, y en este
bloque veremos como utilizar estas propiedades.
#33 Las Propiedades Background Bsicas

En este video veremos las propiedades de background bsicas en CSS, veremos las
propiedades: background-color, background-image, background-repeat, background-
position y background-attachment y cada uno de sus valores
Ver video
#34 Las Propiedades Background Avanzadas

En este video veremos la segunda parte del tema de los background en CSS, los que nos
brinda la especidficacin CSS3. Background con multiples imagenes, background-size,
background-origin y background-clip con sus multiples valores
Ver video
#35 Border-Radius
En este video veremos todo lo relacionado con la propiedad border-radius, y como saber
configurar sus valores para obtener la redondes de radio que nesecitamos en nuestros
elemento HTML
Ver video
#36 Box-Shadow
En este video veremos la propiedad box-shadow de CSS3 que nos permitira aadir sombra
a las cajas en nuestro HTML de forma muy fcil.
Ver video
#37 Border-Image
En este video veremos la propiedad border-image de CSS3 que nos permitira aplicar una
imagen a los bordes de los elementos HTML
Ver video
Degradados con CSS3

Con CSS3 podemos hacer transiciones suaves entre dos o ms colores. En este bloque
vamos a explorar gradientes CSS lineales y radiales.
#38 Degradados Lineales (Linear-Gradients)

En este video veremos como aplicar fondo con degradados de colores lineales bsicos o
rectos con niveles de color y ngulos de grado con la propiedad linear-gradients de css3
Ver video
#39 Degradados Radiales (Radial-Gradients)

Los degradados radiales parten de un punto central y se extienden suavemente en una forma
circular o elptica. En este video, veremos las opciones y parmetros que podemos utilizar
para crear gradients radial, o degradados radiales.
Ver video
#40 Repeating Gradients

En este video veremos como hacer para que los degradados que apliquemos ya sean
radiales o lineales en los elementos HTML se repitan infinitamente, esto lo logramos con la
propiedad repeating-x-gradient
Ver video
Flexbox y Multi-Column
Con CSS Flexbox y Multi-Column, se puede definir fcilmente mltiples columnas de
texto y ajustar la flexibilidad de los elementos.
#41 Entendiendo Las Caracteristicas Flexbox De CSS3

En este video Tutorial veremos las caractersticas Flexible Box de CSS3, o simplemente
Flexbox, Veremos el poder y eficiencia que nos brindan para poder disear con los
estndares del da de hoy de forma muy sencilla y con resultados excelentes.
Ver video
#42 Mltiples Columnas Con Multi-Column Layout De CSS3

En este video, vamos a aprender cmo definir varias columnas de contenido generado
desde CSS junto con su ancho, espaciado y algunas otras caracteristicas con las propiedades
de CSS3 Multiple column layout
Ver video
Web Fonts, Fuentes Personalizadas con @Font-Face

CSS3 en su nivel 3 desempolva la regla @Font-face que nos va a permitir vincular fuentes
no estndar en nuestras paginas web.
#43 Web Fonts, Fuentes Personalizadas Con @Font-Face

En este video vamos a ver cmo podemos vincular fuentes externas a nuestro proyecto web
con la regla @font-face, tambin veremos como utilizar las fuentes de Google Fonts y
utilizaremos la herramienta Fonts Squirrel para generar nuestras propias fuentes.
Ver video
#44 Icon Fonts, Iconos Basados En Fuentes Con @Font-Face

En este video veremos como incluir Iconos vectoriales basadas en fuentes tipograficas de
sitios como.. Icomoon, o Font Awesome por medio de la regla @font-face.
Ver video
Transiciones y Transformaciones
Las Propiedades de transicin de CSS proporcionan una manera de controlar la velocidad
de la animacin en el cambio de las propiedades.
#45 Las Transiciones Y Sus Propiedades

En este video veremos como aplicar transiciones a los elementos HTML con las
propiedades que nos ofrece CSS3, transition-property, transition-duration, transition-delay
y transition-timing-function.
Ver video
#46 Transformaciones 2D
En este video veremos las transformaciones CSS que nos van a permitir mover, rotar,
escalar, sesgar en el espacio bidimensional, con la propiedad transition y sus diferentes
funciones.
Ver video
#47 Transformaciones 3D
Las transformaciones 3D en CSS3 que nos van a permitir manipular el elemento en un
entonor tridimencional utilizando los ejes X, Y y Z, vamos a poder rotar, mover y escalar
los elementos dentro de una perspectiva 3D que establecemos en la pgina.
Ver video
Animaciones con CSS3

Las Animaciones de CSS3 hacen posible animar las transiciones de un estilo CSS a otro. y
esto lo hacemos por medio de los keyframes.
#48 Las Animaciones En CSS3

En este video vamos a ver los conceptos bsicos de las animaciones en CSS3, veremos las
propiedades que debemos de utilizar para tener el control sobre nuestras animaciones y
veremos la regla keyframes para definir los pasos de la secuencia de nuestras animaciones.
Ver video
Los Media Queries
Los Media Queries nos permiten aplicar declaraciones CSS dinmicamente en funcin de
los diferentes dispositivos donde se muestre el sitio web.

Contenido

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Contenido

Enviado por

Direitos autorais:

Formatos disponíveis

Curso para aprender CSS3 desde cero

Aprender no cuesta nada, Ensear muchsimo menos

Selector de tipo o elemento

5. Selectores .class #id

Selector de clase .Nombre {propiedad:valor;}

#contenido header.cabecera h1 span{ list-style-

3) Selector de hermano general

2. Valor exacto [attributo~=valor]

3. [attributo~=valor] (Busca el valor aunque no

6. [attributo$=valor] termina con un valor

#1 - Introduccin 15 de sept 2016

#4 - Selectores bsicos 15 sept 2016

#11 - Pseudo clases :nth-child() y :nth-last-child()

#17 - Unidades de Longitud Absolutas

Texto, Fuentes, y Listas

#22 - Propiedades de fuentes en CSS3

Modelo de Caja de CSS

#27 - Modelo de Caja en Css. padding, border y margin

Backgrounds, Sombras y Bordes a Elemento HTML

#33 - Las Propiedades Background bsicas

Degradados con CSS3

#38 - Degradados lineales (Linear-Gradients)

#41 - Entendiendo las caracteristicas Flexbox de CSS3

Web Fonts, Fuentes personalizadas con @Font-Face

#43 Web fonts, Fuentes personalizadas con @font-face

#45 - Las Transiciones y sus Propiedades

Animaciones con CSS3

#48 - Las Animaciones en CSS3

#2 Un Poco De Historia De CSS

#9 Pseudo-Clases De Link Y Acciones

#10 Pseudo Clases Estructurales Bsicas

#11 Pseudo Clases :Nth-Child() Y :Nth-Last-Child()

#12 Pseudo Clases Estructurales De Tipo :Nth-Of-Type() Y :Nth-Only-Type

#13 Ms Pseudo Clases De CSS3

#14 Pseudo Clases UI O De Interfaz De Usuario

#15 Pseudo Elementos, Parte 1

#16 Pseudo Elementos, Parte 2 ::Before Y ::After

#17 Unidades De Longitud Absolutas

#18 Unidades De Longitud Relativas

#19 Unidades De Longitud Viewport Relativas

#20 Los Colores En CSS Como Tipos De Valor

#21 Otros Tipos De Valores En CSS

Texto, Fuentes, y Listas

#23 Utilizando El Mtodo Shorthand Con Las Propiedades Fonts

#24 Propiedades De Textos En CSS3

#25 Propiedad De Textos Text-Shadow

#26 Estilos De Listas

Modelo de Caja de CSS

#27 Modelo De Caja En Css. Padding, Border Y Margin

#28 Modelo De Caja CSS Width Y Height

#29 Box-Sizing Modificando El Modelo De Caja Predeterminado

#30 La Propiedad Display Y Sus Valores

#31 Las Propiedades Float Y Clear

Backgrounds, Sombras y Bordes

#33 Las Propiedades Background Bsicas

#34 Las Propiedades Background Avanzadas

Degradados con CSS3

#38 Degradados Lineales (Linear-Gradients)

#39 Degradados Radiales (Radial-Gradients)

#40 Repeating Gradients

#41 Entendiendo Las Caracteristicas Flexbox De CSS3

#42 Mltiples Columnas Con Multi-Column Layout De CSS3

Web Fonts, Fuentes Personalizadas con @Font-Face

#43 Web Fonts, Fuentes Personalizadas Con @Font-Face