Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial del curso intensivo de CSS para principiantes

 Tutorial del curso intensivo de CSS para principiantes


¿Qué es CSS (hojas de estilo en cascada)? CSS es un método de aplicar reglas a documentos HTML para cambiar o agregar estilo a la apariencia del contenido en un sitio web. Las hojas de estilo en cascada mantienen el contenido y la presentación independientes entre sí. Mantener esta separación de contenido y presentación facilita el mantenimiento del aspecto general de un sitio web al permitir que se realicen actualizaciones en un archivo central en lugar de actualizar cada página individualmente. Esto ayuda a mantener limpio el HTML, acelera los tiempos de carga de la página y facilita la navegación de la página.


CSS es flexible

CSS permite a los diseñadores web tener un control detallado sobre la apariencia de los sitios web. Esto se debe a que puede diseñar una variedad de propiedades de la página, como texto, fuente, tamaños de fuente, colores de fuente, colores de fondo, colores de enlaces, animaciones, transiciones y mucho más. CSS hace uso de un modelo de caja . Los elementos de nivel de bloque en una página web se colocan y formatean usando CSS. Un bloque indica una parte de contenido que a menudo tiene una nueva línea en el marcado de la página y aparece visualmente como un bloque. Los elementos de nivel de bloque incluyen cosas como div, p, h1 y otras etiquetas de nivel de encabezado. Img elementosestán en realidad en línea, lo que significa que a menos que estén flotando en CSS, fluirán horizontalmente con texto y otros elementos en línea. Los elementos de nivel de bloque a menudo tendrán aplicados elementos como un margen, borde o color de fondo. Al aplicar reglas de diseño y formato a los elementos de nivel de bloque, se tiene control sobre el diseño de las páginas web utilizando hojas de estilo en cascada.


Reglas de formato CSS

Hay dos secciones de una regla de formato en CSS. El primero es un selector y el segundo es una declaración. Un selector de CSS puede ser un elemento html individual y una identificación o un nombre de clase. Por ejemplo, aquí usamos h2 como nuestro selector y cualquier cosa entre llaves {} es la declaración.

Cada declaración tiene dos partes. La primera es la propiedad, como tamaño de fuente, y el valor de esa propiedad, como 20px. El ejemplo anterior ha configurado todos los elementos h2 para que tengan un tamaño de fuente de 20 píxeles. Solo tenemos un h2 en la página, pero si hubiera 15 de ellos, todos seguirían esta regla de CSS. Aquí hay otra forma de ver la sintaxis CSS.


Tres formas de insertar CSS

Hay tres formas de incluir CSS en una página web. Estos son los siguientes:

  • Hoja de estilo externa
  • Hoja de estilo interal
  • Estilo en línea

Hoja de estilo externa

Una hoja de estilo externa es la forma más común de incluir CSS en un sitio web. Esto se debe a que con la hoja de estilo externa, el diseñador web tiene una ubicación que se puede usar para ajustar el estilo de cualquier elemento en un sitio web completo. A continuación, se muestra un ejemplo de un documento HTML que hace referencia a una hoja de estilo externa.


Hoja de estilo interna

La hoja de estilo interna (o incrustada) es lo que usamos para el primer ejemplo de este tutorial. En este escenario, simplemente coloque las etiquetas <style> de apertura y cierre en la sección <head> del marcado html. Una vez más, aquí hay un ejemplo de la hoja de estilo interno.


Hoja de estilo en línea

La hoja de estilo en línea es una especie de método de último recurso al configurar reglas de formato CSS. Este enfoque aplica las reglas de estilo CSS directamente al elemento HTML. Esto mezcla el contenido con la presentación, lo cual no es una gran idea. Este es un ejemplo de estilo en línea.

En este ejemplo, el estilo en línea tiene prioridad, por lo que el tamaño de fuente en el elemento h2 sería de 30 píxeles. Esto nos lleva a nuestro siguiente tema, Cascada.


¿Qué se entiende por cascada en CSS?

La cascada en CSS se refiere al siguiente proceso.

Si el diseñador web no aplica un estilo explícito a una página web, el navegador web que se utilice asignará los estilos predeterminados.

Si el diseñador tiene una hoja de estilo, esos estilos anularán los estilos asignados por el navegador.

Además, esta cascada funciona dentro de la misma hoja de estilo, entre hojas de estilo y también entre hojas de estilo externas y estilos en línea. Un elemento definido en la parte superior de una hoja de estilo podría ser anulado por una nueva definición que viene más adelante en la hoja de estilo.

En última instancia, nos referimos a este proceso en cascada como especificidad . Hay muchas reglas que gobiernan la especificidad en CSS y si cree que un determinado elemento debería tener un estilo determinado en su página web, pero no lo tiene, es probable que le falte una regla de especificidad. La especificidad de CSS no es simple, por lo que es probable que se tropiece de vez en cuando.

Los niveles de especificidad se dividen en cuatro categorías:

  • Estilos en línea (estilo en el documento) : un estilo en línea está dentro del documento HTML. Se adjunta directamente al elemento que se va a diseñar. <h1 style = ”color: # 777;”>
  • ID (# de selectores de ID) : ID es un identificador para elementos de una sola página, como #span.
  • Clases, atributos y pseudoclases: esta categoría incluye .classes, [atributos] y pseudoclases como: hover y: focus
  • Elementos y pseudoelementos (# de selectores de elemento (tipo)) : Cosas como h1, div,: before y: after.

Si eso no fuera lo suficientemente confuso, existe un sistema de puntos real que determina el "ganador" al decidir qué estilo se aplicará a un elemento en función de la Especificidad dada y tiene el siguiente formato:

(1,0,0,0)

Un estilo en línea vale 1000.
Una ID vale 100.
Un atributo, clase o pseudoclase vale 10.
Un solo elemento o pseudoelemento vale 1.

Aquí están algunos ejemplos.

SelectorValor de especificidad
* {}*
li {}1 (un elemento - 0,0,0,1)
li: primera línea {}2 (un elemento, un pseudo-elemento - 0,0,0,2)
ul li {}2 (dos elementos - 0,0,0,2)
ul ol + li {}3 (tres elementos - 0,0,0,3)
h2 + * [rel = up] {}11 (un atributo, un elemento - 0,0,1,1)
ul ol li.first {}13 (una clase, tres elementos - 0,0,1,3)
li.last.winner {}21 (dos clases, un elemento - 0,0,2,1)
estilo = ""1000 (un estilo en línea - 1,0,0,0)
div p.special-text {}12 (dos selectores HTML y un selector de clase - 0,0,1,2)
#nombre del cliente { }100 (un selector de identificación - 0,1,0,0)
body # item-list .post p {}112 (selector de id, selector de clase, 2 selectores HTML - 0,1,1,2)

Practicando reglas CSS

Así que esa es la palabrería elegante de CSS, pero para aprender realmente CSS, simplemente tienes que empezar a probar algunos ejemplos. Podemos comenzar con este diseño de sitio web básico sin estilo en absoluto.

Tiene un aspecto tan emocionante como imagina.
Documento HTML sin estilo en absoluto


Agregar hoja de estilo externa

Podemos comenzar agregando un archivo CSS dedicado a nuestro proyecto.
ejemplo de hoja de estilo externa


Uso de la etiqueta HTML <link>

Una vez que se crea nuestro nuevo archivo style.css, podemos vincularlo en nuestro archivo index.html de esta manera.

Hicimos uso de tres atributos de rel , type y href . rel Especifica la relación entre el documento actual y el archivo css vinculado. type Especifica el tipo de medio del documento vinculado y href Especifica la ubicación del archivo css vinculado.


Agregar color de fondo CSS

Como primer ejercicio, podemos apuntar al elemento de la página que tiene un ID de encabezado. Luego, estableceremos un color de fondo en ese elemento.
style.css

ejemplo de color de fondo css


Cambiar el color del texto con CSS

Podemos cambiar el color del texto en un documento HTML usando la propiedad color. Hagamos que el texto dentro del área del encabezado sea blanco.
style.css

ejemplo de color de texto CSS


Configuración del color de fondo de toda la página

Podemos aplicar un color de fondo a toda la página apuntando al elemento <body> y estableciendo la propiedad background-color. Lo haremos de un bonito color gris claro.
style.css

ejemplo del color de fondo del CSS de la página del cuerpo


Configuración del color de fondo del contenedor de la página

Establezcamos ahora el color de fondo del elemento #container en blanco. Esto le dará un buen contraste entre el fondo de la página gris claro y el color de fondo del área de contenido.
style.css

css fondo gris y fondo de contenido blanco


Centrado de texto con CSS

Al usar la propiedad text-align, podemos centrar el texto en el encabezado del sitio web.
style.css

ejemplo de centro de alineación de texto css


Cómo centrar el contenido de la página con CSS

Ahora también queremos centrar la página general en el centro. Para esto, podemos apuntar al div #container y usar las propiedades width, margin-left y margin-right. Estableceremos el ancho de la página en 600px y cada propiedad de margen debe establecerse en automático.
style.css

centro de contenido de página css margen automático


Configuración de relleno en CSS

Mirando la página hasta ahora, podemos ver que el texto choca contra los lados, la parte superior y la parte inferior de las diferentes secciones de la página. Para solucionar esta sensación de apretón, utilice la propiedad padding. Podemos comenzar apuntando al div #content y agregando algo de relleno como ese.
style.css

ejemplo de relleno css en el contenido


Presentamos CSS Float

Ahora queremos presentar un concepto que te volverá absolutamente loco. Ese concepto es la propiedad flotante. Lo que queremos hacer es poner el #nav y el #main

elementos uno al lado del otro. Podemos hacer esto usando un float con un valor de left en un div y un float con un valor de right en el otro. Probemos eso.
style.css

CSS flotante ejemplo a la izquierda y a la derecha


Fijación de flotador con transparente

El ejemplo de flotación anterior funcionó, ya que consiguió que los dos divs se alinearan uno al lado del otro. Sin embargo, el problema es que el elemento #footer se está acercando a la página y superponiendo el contenido. Para arreglar esto usamos la propiedad clear. El código siguiente dice que el pie de página debe estar libre de elementos flotantes antes de mostrarse. De hecho, esto funciona bastante bien. También agregamos texto ficticio adicional para mostrar el efecto.
style.css

css claro ambos ejemplo


Aplicar estilo a enlaces activos en CSS

Necesitaremos ajustar nuestro HTML un poco para agregar enlaces en nuestra área de navegación. Crearemos tres enlaces y cada uno tendrá una clase. Un enlace tendrá la clase de activo, mientras que los otros dos enlaces tendrán la clase de no activo.
index.html

Ahora, en el archivo style.css podemos apuntar a esos enlaces específicos. De hecho, las dos reglas siguientes dicen que solo queremos apuntar a un elemento que tenga una clase de .active o .notactive, y sea un elemento secundario del elemento #nav.

estilo CSS enlaces activos vs no activos


Eliminación de subrayados de hipervínculos con CSS

Tal vez queramos deshacernos del subrayado en las etiquetas de anclaje en la página. Podemos hacer eso con la propiedad text-decoration establecida en none.

css text-decoration none ejemplo


Eliminación de viñetas de elementos de lista con CSS

Los elementos de la lista son una excelente manera de organizar las cosas en la página. Sin embargo, muchas veces es bueno deshacerse de las viñetas pero mantener el diseño de la lista. Podemos hacer esto usando list-style-type configurado en none.

css list-style-type none ejemplo

Observe que todavía hay un espacio a la izquierda de los enlaces. Para eliminar esto, también podemos establecer el relleno en 0 así:

Esto empuja los elementos li hacia la izquierda ahora.
list-style-type none sin ejemplo de relleno


Cambiando la tipografía con la familia de fuentes

La fuente estándar que representa el navegador es bastante suave. Para tener una fuente más atractiva visualmente en la página, podemos establecer la propiedad font-family. La propiedad font-family a menudo contiene varios nombres de fuentes a los que recurrir en caso de que no se admita el primero elegido. Esto asegura la máxima compatibilidad entre navegadores. Si el navegador no admite la primera fuente, intenta con la siguiente. Apuntemos a las fuentes Verdana, Arial, Helvetica y sans-serif.
style.css

ejemplo de familia de fuentes css


Hacer un área de pie de página distinta

Podemos usar las propiedades de relleno, color de fondo, color y alineación de texto para hacer que el área del pie de página se parezca más a un pie de página para redondear la página.
style.css

}
área de pie de página personalizada CSS


Relleno en el encabezado

Por último, agregaremos algo de relleno adicional al área del encabezado para completar este diseño CSS muy básico que hemos completado desde cero.

ejemplo de relleno de encabezado css


¡CSS es poderoso!

Ahora, veamos la representación HTML inicial frente al diseño final que hizo uso de solo una cantidad muy modesta de CSS.


Sin CSS

Sin CSS en absoluto


CSS terminado

ejemplo de relleno de encabezado css

Publicar un comentario

0 Comentarios