Documento sin título

Me Gusta

HTML

XXXXX

XXXXX

CSS3C







Por qué se llama Hoja de Estilo en Cascada




1.  Cómo incluir CSS en un documento HTML

Parte  1

Parte 2

Parte 3

Incluir CSS en el mismo documento HTML

Es útil cuando se requieren pocos estilos o estilos específicos.

Definir CSS en un archivo externo (Es el más usado)

Permite incluir un mismo archivo CSS en multitud de páginas HTML, por lo que se garantiza la aplicación homogénea de los mismos estilos a todas las páginas que forman un sitio web y a la hora de un mantenimiento o alguna modificación del sitio web la tarea resulta sumamente sencilla.

Incluir CSS en los elementos HTML  (menos usado)


Ensucia el código HTML


2.  Modelo caja de texto



Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento




Hay dos tipos de cajas:



Los elementos block aparecen uno bajo el otro con “saltos de línea” (rompen el flujo de la página). Los elementos inline siguen el flujo, y están contenidos dentro de elementos de bloque.


Este modelo es la característica principal del Lenguaje CSS porque permite dividir una ventana en una serie de cajas o secciones:






3.Unidades de Medida




4.Colores en CSS

Los colores en CSS pueden escribirse de tres maneras:

5.Algunas Propiedades



Propiedades CSS Propiedades nuevas en CSS3



Otras Propiedades

Otras Propiedades

direction
empty-cells
filter
hanging-punctuation
text-indent
justificy-content
sprites
contadores
tooltips

tips: no olvides ; al final de cada propiedad y si quieres separar valores en la misma propiedad se pone espacio





6.Selectores Básicos


Selectores
Selector
Ejemplo
Descripción
#div
#div {
background:#09FF09;
La almohadilla representa a un div
#div1,  #div2, #div4  

Si se quiere aplicar los mismos estilos a varios divs diferentes, se pueden encadenar los selectores.
*
* {
margin: 0;
padding: 0;
}
El asterisco representa cada uno de los elementos en la página. Muchos desarrolladores usarán éste truco para poner a cero el margin y padding.
#div *
#div * {
border: 1px solidblack;
}
El nombre de div con # ´+ * representara a todos los hijos de ese div, a todos los divs que el contenga
.class
.clase {
color: red;
}
Representa a la clase llamada clase, así todos los elementos de esa clase serán rojos
X Y
p a {
color: red;
}
Es el selector descendente, selecciona a todos los elementos anchor dentro de p. Se puede componer de más de dos selectores
X
p {
color: red;
}
Coloca en color rojo todos   los elementos p que se encuentren en el documento. Seleccionar por el tipo y no por su id
X1, X2,..
h1, h2, h3 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}
Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los selectores.
X + Y
ul + p {
 color: red;
}
Seleccionará solamente el elemento que es inmediatamente precedido por el primer elemento.
X > Y
div#container > ul {
border: 1px solid black;
}
Sólo seleccionará hijos directos
X ~ Y
ul ~ p {
 color: red;
}
Seleccionará solamente todos los elementos que estén luego del primer elemento.
X[title]
a[title] {
 color: green;
}
Denominado como un selector de atributos, seleccionará las etiquetas anchor que tengan un atributo title.
X.Y
p.destacado {
color: red
 }
Selecciona aquellos elementos de tipo <p> que dispongan de un atributo class con valor destacado
X[href="url"]
a[href=
"http://archilatutoriales.blogspot.com/ "] {
color: #1f6053; /* nettuts green */
}
todas las etiquetas anchor que enlacen a http://archilatutoriales.blogspot.com/;

¿Cómo incluir este código en mi documento HTML?




7.Pseudo clases
X:checked
input[type=radio]:checked {
 border: 1px solid black;
}
pseudo clase que seleccionara sólo a un elemento radio button que el usuario que haya sido seleccionado
X:after
p::after {
    content: " - hola";
}
Inserta algo después del contenido de cada elemento p (- hola)
X:active
a:active {
    background-color: yellow;
}
El selector: active se utiliza para seleccionar el estilo y el enlace activo
X:visited y X:link
a:link { color: red; }
a:visted { color: purple; }
Son pseudoclases que usamos para darle a nuestras etiquetas anchor el estilo que queramos, bien sea antes o después de pulsado el link
X:before
p::before {
    content: "hola: ";
}
Inserta algún texto antes de que el contenido de cada elemento <p>. hola:
X:checked
input:checked {
    height: 50px;
    width: 50px;
}
Ajusta la altura y la anchura de todos los controles <input> checked
X:disabled
input[type="text"]:disabled {
    background: #dddddd;
}
Establece un color de fondo para todos elementos <input> de type = "text" deshabilitados
X:enabled
input[type="text"]:enabled {
    background: #ffff00;
}
Establece un color de fondo para todos elementos <input> de type = "text" habilitados
X:empty
p:empty {
    background: #ff0000;
}
Especificar un color de fondo para  todos los elementos p que estén vacios
X:hover
a:hover {
    background-color: yellow;
}
Selecciona el estilo del elemento cuando pasamos el raton encima de el.
X:focus
input:focus {
    background-color: yellow;
}
Selecciona el estilo del type cuando este tiene el foco


8.Notas


Prefijos
!important
@import
media
comentarios
Reglas at (@)
Alinear imagenes
Diferencias entre el selector Class y el selector Id
margin auto no funciona
mi div no aparece


9. Responsive

las reglas media (@media)