Anuncio

CSS es el cambio más importante que las páginas web han visto en la última década, y allanó el camino para la separación de estilo y contenido. En la forma moderna, XHTML define el semántico Qué es el marcado semántico y cómo cambiará Internet para siempre [Explica la tecnología] Lee mas estructura: el significado y el contenido de la página web, mientras que CSS se ocupa de la presentación. Si bien la mayoría de nosotros nos sentimos cómodos escribiendo un poco de HTML, parece que pensamos que CSS es algún tipo de magia negra. Espero cambiar eso con estos 5 pequeños pasos para convertirme en un Hechicero CSS.

Este artículo está dirigido a usuarios que todavía tienen muy poca experiencia con CSS, aunque es de esperar que haya algo aquí para todos.

(1) Gramática

Como cualquier lenguaje, CSS tiene una cierta gramática, y puede parecer un poco "programa de computadora" al principio, pero en realidad es solo una lista de cosas. Todo el CSS se escribe así:

SELECTOR {PROPIEDAD: VALOR; VALOR DE LA PROPIEDAD; VALOR DE LA PROPIEDAD;}

Como ya sabrás, CSS funciona aplicando un estilo a un elemento seleccionado en la página web. Por ejemplo, para diseñar cómo se muestran todos sus enlaces, usaría "a" como selector. Las diversas propiedades y valores que aprenderá con la experiencia, pero algunos son fáciles, como COLOR, FRONTERA, FONT-SIZE, HEIGHT son algunas de las propiedades posibles, cuyos valores pueden ser rojo, 14pt, 150%, 1000px, realmente es que fácil. Veamos cómo haríamos para diseñar todos los enlaces rojos:

a {color: rojo;}

También puede usar el mismo bloque de CSS para hacer más de un tipo de elemento al mismo tiempo con comas:

a, h2, h3 {color: rojo;}

Esto hace no solo todos los enlaces, sino también todos los encabezados h2 y h3, en el mismo color rojo. Tenga en cuenta que todos pueden ser de diferentes tamaños, ya que este bloque de código en particular SOLAMENTE cambia el color.

(2) Selectores de clase e identificación

Sin embargo, a veces no desea diseñar TODOS los elementos a de la misma manera, y en esos casos, podría usar CLASE o CARNÉ DE IDENTIDAD. Como regla general, la ID se usa para elementos únicos y se usa más comúnmente para definir grandes bloques de contenido o botones especiales únicos y demás.

Por ejemplo, es posible que tenga un DIV grande para los bloques HEADER, CONTENT y FOOTER de su página, por lo que definirlos como ID sería un movimiento inteligente. Las clases, por otro lado, se usan cuando es probable que los elementos de estilo se repitan a lo largo de la página. Quizás desee que un grupo de elementos tenga esquinas redondeadas con un borde rojo sólido de 2 píxeles, en lugar de escribir el mismo estilo en línea un millón de veces, definiría una clase para él y adjuntaría la clase a esos elementos en lugar. Entonces, ¿cómo define estos ID y clases?

BARRA LATERAL

Para orientar estos elementos en CSS, usaría:

.red-rounded {// esta es una clase. radio de borde: 5px; borde: 2px rojo sólido; } #sidebar {.. } // esto es una identificación.

(3) Descendientes

Sin embargo, no es necesario que adjunte clases e ID a todo el contenido de su documento; también puede usar lo que llamamos DESCENDIENTES para seleccionar elementos. Mire esta declaración CSS y vea si puede descubrir qué hace:

#sidebar h1 {font-size: 20px;}

Esto PRIMERO encontrará el elemento con un ID de "barra lateral" y luego reducirá la selección a todos los

s contenido dentro de eso, y solo aplica el estilo a esos.

Entonces, si puede agrupar todos sus artículos de alguna manera, es mejor usar selectores descendientes, ya que es aún menos código que agregar un montón de clase = "" definiciones para todo.

(4) ¿Dónde poner este CSS?

La mejor manera de lidiar con CSS es separarlo completamente de su HTML. Cree un archivo llamado .css como quiera, y simplemente agregue esta línea a su encabezado HTML:

También puede agregar bloques de CSS a la sección entre etiquetas, pero no sugiero este método, ya que resulta en archivos HTML desordenados y difíciles de leer.

El tercer lugar para agregar CSS es en línea, pero también debes tener cuidado con eso. Cualquier cosa agregada en línea así:

anulará automáticamente cualquier cosa definida en su estilo separado. Por lo tanto, puede sentarse allí tratando de depurar durante siglos por qué sus miniaturas no cambian de tamaño y su CSS puede ser perfecto, pero si el elemento IMG ya incluye estilos en línea, entonces tendrán prioridad. ¿Cómo sabes si algo más lo está afectando?

(5) Obtenga FireBug o use Chrome

FireBug Guía de aficionados para personalizar el diseño de sitios web con FireBug Lee mas es una herramienta de desarrollo increíble que es especialmente útil para descubrir cómo funciona CSS. Toma un descanso para descargarlo y echarle un vistazo rápido. FireBug está disponible para Firefox como un complemento, o si usa Chrome, entonces un conjunto idéntico de características ya está incorporado. Una vez que haya activado el complemento en Firefox o esté usando Chrome, simplemente haga clic derecho en cualquier lugar de la página y seleccione "Inspeccionar elemento“.

Esto abrirá un nuevo panel en la parte inferior de su navegador. En el lado izquierdo está la vista XHTML, bien formateada y plegable. Si pasa el cursor sobre cualquier elemento, resaltará ese elemento en la página y le mostrará el modelo de cuadro CSS a su alrededor (hablaremos más sobre el modelo de cuadro en una lección futura). El punto clave aquí es que también puede seleccionar cualquier elemento y ver con precisión qué CSS está actuando sobre él en el lado derecho, y desglosará aquellos en los que los selectores han causado eso. Todo lo que se agregue en línea se mostrará debajo del encabezado "element.style". Pruébalo ahora en esta página. Tenga en cuenta que muy a menudo gran parte del CSS que aparece a la derecha está tachado con una línea central: esto significa que otro selector que trabaja en ese elemento tiene prioridad y está anulando el cruzado afuera.

Eso es todo por hoy, pero no dudes en dejar comentarios si crees que me he perdido algún principiante clave puntos, o si tiene alguna pregunta o problema específico con CSS, pregunte en la sección de soporte técnico de nuestro sitio. La próxima vez me gustaría desarrollar su conocimiento de CSS más allá de los cambios básicos de color y tamaño.