Séptima Clase - Terminología CSS y DIVs

Términos comunes de CSS

Además de los términos HTML, hay algunas comunes términos CSS que usted querrá familiarizarse con. Cuanto más se trabaja con HTML y CSS de las más estos términos se convertirá en segunda naturaleza.
Selectores

Un selector determina exactamente qué elemento, o elementos, los estilos correspondientes se aplicarán a. Los selectores pueden incluir una combinación de diferentes IDs, clases, tipos y otros atributos - todo dependiendo de lo específico que usted desea ser. Los selectores pueden ser identificados como todo lo que viene antes del primera llave, { .

p {  ...  }

Propiedades

Una propiedad determina el estilo que se aplicará a un elemento. Las propiedades pueden ser identificados como el texto que viene inmediatamente antes de los dos puntos. Hay un abundante número de propiedades que se pueden utilizar, y continuamente se están añadiendo otros nuevos.

p {
  Color:  # ff0;
  fuente-size :  16px ;
}

Valores

Un valor determina el comportamiento de una propiedad. Los valores pueden ser identificados como el texto en el medio de los dos puntos y punto y coma.

p {
  Color:  # ff0;
  font-size :  16px ;
}

CSS Estructura y sintaxis

CSS funciona mediante el uso de selectores para aplicar estilos a los elementos HTML. Todos los estilos en cascada CSS, que permite diferentes estilos que se heredan de múltiples elementos.

Como un ejemplo, es posible establecer un estilo para todo el texto en una página para ser de un color específico, tamaño, y peso. A continuación, mediante un selector más específico que el estilo puede ser sobreescrito por un elemento único.

. Figura 1.01CSS sintaxis de esquema.

La siguiente sintaxis muestra cómo se aplicarían a todos los estilos de párrafo.

p {
  Color:  # ff0;
  font-size :  16px ;
}

Largo vs Corto

En CSS hay varias maneras diferentes para declarar los valores de una propiedad. Con CSS de sintaxis larga, se apilan las múltiples declaraciones, una tras otra para cada propiedad y su valor. Con CSS abreviado se utiliza una propiedad y la lista de varios valores. Lo mejor es usar CSS abreviado, ya que requiere menos código. No todas las propiedades CSS son compatibles con el abreviado así que asegúrese de que está utilizando la propiedad y estructura de valores correcta.

/ * Modo largo * /
p {
  padding-top :  10px ;
  padding-right :  20px ;
  padding-bottom :  10px ;
  padding-left :  20px ;
}

/ * Modo corto * /
p {
  padding :  10px  20px ;
}

/ * Modo corto * /
p {
  padding :  10px ;
}

Comentarios en HTML y CSS

HTML y CSS le dan la posibilidad de dejar los comentarios en el código. Estos comentarios se pueden utilizar para ayudar con la organización, establecer recordatorios y administrar el código más eficaz. Los comentarios se hacen especialmente útil cuando hay varias personas trabajando en el mismo código. Cualquier contenido envuelto en comentarios no se representará en la página.

Comentarios HTML envuelven el contenido a partir de <- y terminan con -> . comentarios CSS envuelven el contenido empezando por / * y terminan con * / .

Selectores

Selectores, como se mencionó anteriormente, son el factor determinante en cuanto a qué elementos se van a ser estilizada. De este modo, es importante para entender completamente cómo utilizar selectores y cómo se pueden aprovechar. Algunos de los selectores más comunes incluyen elementos, los ID y las clases, o alguna combinación de los tres.

Type selectors

Los "type selectors" son el selector más básico. Basta nombrar a los elementos elementos sin los atributos para aplicar el estilo. Este tipo de selectores se prefieren siempre que sea posible, ya que requieren menos código y son fáciles de manejar.

HTML

<p> ... </ p>

CSS

p {  ...  }

Selectores de Clase

Selectores de clases le permiten aplicar el mismo estilo a un conjunto de elementos, dándoles todo lo mismo atributo de clase. Las clases se indican en el CSS mediante la identificación de la clase con un punto inicial. Está permitido usar el mismo atributo de clase en múltiples elementos de una página.

HTML

<Div  class = "increible" > ... </ div>

CSS

. increíble {  ...  }

Selectores ID

Selectores de ID son similares a los selectores de clase sin embargo que se utilizan para dirigir sólo un elemento único a la vez. En lugar de utilizar el atributo de clase, IDS, naturalmente, utilizar el atributo ID. En lugar de un período de, al igual que con las clases, los ID se denotan mediante la identificación de la identificación con el símbolo de sostenido líder. IDs sólo pueden utilizarse una vez por página e idealmente deben ser reservados para elementos significativos.

HTML

<Div  de id = "shayhowe" > ... </ div>

CSS

# Shayhowe {... }

Combinación de selectores

Una belleza de CSS es la capacidad de combinar selectores y heredar estilos. Esto le permite comenzar con un selector más genérico y su forma de ser más específicas como sea necesario. Además, puede combinar diferentes selectores a ser tan específico como usted desee.

ul # li sociales {
  padding :  0  3px ;
}

ul # sociales li a {
  height :  17px ;
  width :  16px ;
}

ul # li.tumblr sociales a {
  background : url ( 'tumblr.png' )  0  0  no-repeat ;
}

Suma de selectores

Los selectores pueden ser extremadamente poderosos y los selectores mencionados anteriormente son sólo el comienzo. Se disponen de muchos selectores avanzados.  Antes de poner nombres aleatorios a un elemento, comprobar si existe alguno que permita seleccionarlo por uno. También es importante mencionar que no todos los selectores de avanzar en el trabajo en todos los navegadores, especialmente con los nuevos selectores introducidas en CSS3. Si el selector no parece estar funcionando comprobar si el navegador lo soporta de manera adecuada.

Tutorial sobre DIVs

http://es.learnlayout.com/display.html

Posicionamiento de los DIVs

http://www.trisfera.com/ejemplosRetos/position_float/