- Cómo incluir CSS en un documento HTML
- El Modelo caja de texto
- Unidades de Medida
- Colores en CSS
- Algunas propiedades
- Selectores básicos
- Pseudoclases
- Notas
- Responsive
Por qué se llama Hoja de Estilo en Cascada
9. Responsive
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
5.Algunas Propiedades
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
7.Pseudo clases
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
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 |
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
las reglas media (@media)