Cómo aprender CSS en un día

Te enseñaré CSS básico en este comentario.

Sintaxis básica en línea (en su documento HTML):

<div style = ” [función-estilo] : [parámetros-estilo] ; [función-estilo] : [parámetros-estilo] ; ”>

El texto en negrita es CSS. Aquí se pueden encontrar todas las CSS [funciones de estilo] posibles y qué [parámetros de estilo] pueden tener. Esto se llama CSS en línea . El CSS en línea tiene prioridad sobre cualquier otra definición de CSS. Este es el tipo de CSS que desea usar en correos electrónicos, en casos de emergencia … o cuando le pagan dinero de mierda para hacer muchas correcciones. Por ejemplo:

Hará que el color de fondo del cuadro

sea rojo. CSS también toma valores de color HEX y rgb , rgba , hsl & hwb (se usa rarley), así como cmyk para todas sus impresoras.

# FF0000 = rojo = rgb (255,00,000) = rgba (255,000,000,1) = hsl (0, 100%, 50%) = cmyk (0%, 100%, 100%, 0%)

Más colores aquí.

Sin embargo, la mayoría de CSS se encuentra en un archivo separado llamado generalmente style.css, que está vinculado a su archivo .html principal a través de . Estos archivos style.css son enlaces a través de la siguiente etiqueta HTML ubicada siempre entre las secciones de sus archivos .html, de esta manera:

Estos se ven similares y así:

.style1 {
[función de estilo]: [parámetros de estilo]; }

El punto antes de la palabra style1 indica que esta es una clase de estilo que se puede aplicar a cualquier elemento html de esta manera:

Las cosas entre los corchetes {} indican lo que se debe hacer con esa clase de estilo dada. Es esencialmente idéntico a lo que puede poner en el estilo CSS en línea .

Si no hay punto (.), Los parámetros se aplicarán a cualquier elemento html con ese nombre. Ejemplo:

div {
fondo: rgb (000,255,000); }

Lo anterior hará que todos los elementos

tengan un fondo verde.

¡Bravo! Hasta ahora has aprendido S tyle S heets (CSS sin la Cascada). Ahora aprendamos qué significa el bit de escala C.

El siguiente código CSS:

.style1 span {
fondo: rgb (000,000,255); }

Se aplicará a todos los elementos

dentro de a. elemento HTML style1 dentro de su documento HTML. Entonces, en su estructura HTML, el siguiente tendrá un fondo azul:

Y también este:

Esto se debe a que el elemento HTML todavía está anidado dentro del elemento <div class = ”style1 ″> .

¿Lo estás entendiendo? Bien … muy bueno. Ahora es el momento para algunas Pseudo clases y pseudo elementos.

Una pseudo clase en su archivo .css se aplica después de un punto doble (:) (y no se puede aplicar en CSS en línea) . Se ve así:

.style1: hover {
tamaño de fuente: 25px; }

Las pseudo clases permiten apuntar a varios estados que pueden tener los elementos HTML. El código CSS anterior se activará cuando un cursor se mueva sobre un elemento HTML que tenga aplicado .style1 y cambie el tamaño de fuente a 25 píxeles (px).

Más sobre otras pseudo clases aquí.

Se aplica un pseudo elemento después de 2x puntos dobles (::). Estos permiten apuntar a elementos específicos dentro de HTML. Por ejemplo:

.style1 :: primera letra {
font-family: arial; }

El código CSS anterior se aplicará solo a la primera letra solo en el elemento HTML .style1 , un tipo de fuente Arial.

Más elementos de pseudo clase se pueden encontrar aquí.

Si llegaste tan lejos, deberías aprobar el examen de mañana con una D- ahora. El último bit para aprender son las clases de medios específicos. Estos se activan cada vez que se muestra un tipo de medio específico o cuando hay una resolución de navegador específica presente. Este es el núcleo de los sitios móviles receptivos. Un ejemplo de una consulta de medios CSS se ve así:

@media screen y (min-width: 995px) {
.style1 {
fondo: rojo; }
}

Puedes ver que hay una extraña mierda @media antes de la clase css regular. el bit @media especifica qué clases se deben aplicar cuando el tamaño de la pantalla tiene un ancho mínimo de 995 px. Esto es extremadamente útil cuando se diseña un sitio receptivo móvil, ya que permite rehacer toda la pantalla HTML si es necesario para adaptarse a una resolución particular. Más sobre ese jazz aquí.

Eso es lo básico. Espero haber entendido el punto. Ahora voy a volver a chupar mi cerveza.

Paso 1:

Cierre todos los programas en su computadora.

Paso 2:

Abra una ventana del navegador y busque “Tutorial CSS”. Elija uno, hay muchos y cualquiera servirá.

Paso 3:

Sigue el tutorial. Probablemente te llevará una o dos horas.

Etapa 4:

Darse cuenta de CSS no es tan difícil. En realidad no es difícil en absoluto, por qué simplemente no hay nada.

Paso 5:

Haz algo con CSS. Nada demasiado elegante, solo unos pocos párrafos con diferentes estilos de encabezado. Demasiado fácil.

Paso 6:

Ahora agregue márgenes de un color diferente a su página y aplique sangría a uno de los párrafos, haga una cita con un fondo de color claro. Es posible que desee imprimir una hoja de trucos CSS. Es un poco de trabajo pero deberías estar bien.

Paso 7:

Abra su página en un navegador diferente (Chrome, Firefox, Edge). Debería verse igual.

Paso 8:

Oh, mierda!

Paso 9:

No, no, está bien, no hay necesidad de entrar en pánico, puedes arreglar esto. Solo prueba algunas cosas diferentes. Allí ahora se ve casi igual, solo el usuario más pedante estaría en desacuerdo y solo tomó tres horas.

Paso 10:

¿Qué quieres decir con que no se ve bien (firefox / chrome / edge / iphone 4,5,6 / el navegador de tu madre)! Bueno, no importa que nadie lo use de todos modos.

¡15% de nuestra base de usuarios! No dices … bueno, supongo que mejor lo arreglo entonces.

Paso 11:

Sí, es tarde pero aún no hemos terminado. La página debe tener tres columnas, excepto en dispositivos móviles donde es solo una y tabletas donde son dos, y necesitamos un párrafo que flote a la izquierda, pero que no oculte el texto. También necesitamos una forma de insertar imágenes para que el texto fluya a su alrededor, a menos que sean demasiado grandes o demasiado pequeños, o decidamos que no queremos hacerlo.

Lo siento lo siento. Una última cosa no sería simplemente increíble si hubiera una línea vertical entre las columnas, pero no todo el camino hasta la parte superior, digamos dos tercios de la pantalla, excepto en un teléfono porque entonces se ve raro.

Paso 12:

No hay paso 12, los números no tienen significado, el tiempo no tiene significado. Solo cuando dejes ir las construcciones y preconceptos humanos, comprenderás realmente la lógica detrás de CSS y solo entonces lo aprenderás en un día.

En realidad CSS es muy fácil. incluso más fácil que HTML, puedes aprender CSS en un día. te sugeriré

Los mejores cursos de aprendizaje en línea de CSS

1. Guía para principiantes de HTML y HTML5

2. HTML y CSS paso a paso para principiantes absolutos

3. Introducción a HTML y CSS: desarrollo web para principiantes

4. El curso completo de HTML y CSS: de principiante a profesional

5. Cree sitios web receptivos del mundo real con HTML5 y CSS3

Practica bien.

haz algunas páginas web simples y prueba en tu navegador.

Todo lo mejor .

Usted no

CSS, además de ser desordenado, no es un lenguaje difícil de aprender. Sin embargo, al igual que cualquier otra tecnología, aprenderlo apropiadamente requiere tiempo (y mucha práctica). Simplemente no vas a hacer esto en un día. ¿Quieres lo básico de CSS vainilla? ¡Bueno! Quizás un día sea suficiente. Sin embargo, no vas a dominar el meollo del lenguaje, los buenos hábitos y demás, en ese solo día. Además, existen los preprocesadores de CSS (Sass, Stylus, etc.) que son los favoritos para un número cada vez mayor de desarrolladores en estos días.

En cuanto a las sugerencias, otro póster ya ha incluido material sólido, por lo que todo lo que puedo hacer es desearle buena suerte.

  1. Conocer HTML: realmente no puedo aprender CSS aparte de un documento que contiene algo de HTML
  2. Comience con un documento HTML simple y aplique atributos de estilo como:

    Text

    ->

    Text

  1. Al agregar estos atributos, puede ver de inmediato sus efectos y aprender el comportamiento de CSS. En el ejemplo anterior, su texto dentro de la etiqueta debe volverse rojo.
  • Si no está satisfecho después de hacer esto, revise el tutorial HTML CSS de W3Schools o compre un libro como Learn CSS in One Day y Learn It Well y practique más.
  • Vaya al curso CSS sobre Codecademy y trabaje en él.

    El curso tardará aproximadamente un día en completarse y, al concluir, tendrá conocimientos básicos de HTML y CSS (estos dos lenguajes se complementan entre sí, por lo que debe tener una comprensión básica de uno para aprender el otro).

    A partir de este momento, cada vez que no esté familiarizado con un concepto, simplemente búsquelo en una fuente como el Tutorial web en línea de W3Schools

    Feliz aprendizaje 😀

    Abra los sitios web que le gusten y realice ingeniería inversa. encuentra uno típico primero, luego muévete hacia los geniales.

    google es tu amigo, google todo lo que no sabes.

    De esta manera no practicará ningún CSS, practicará el CSS necesario para construir un sitio web.

    Puedes aprender lo básico de css en un día.

    Puedes aprender de los recursos en línea. Lee algunos tutoriales. Haga algunas cosas CSS y mire el código de otras personas.

    Google y la herramienta de inspección del navegador es tu amigo.

    Inspeccione el código del sitio web que le gusta. De esa manera puedes encontrar algo nuevo.

    La herramienta de inspección del navegador es realmente una buena manera de aprender. Puede agregar y cambiar algún valor y ver el resultado de inmediato.

    Todo lo mejor para usted.

    Si desea aprender CSS en un día, vaya a los cursos CSS en línea. Hay muchos sitios diferentes que le ofrecen cursos CSS gratuitos como khanacadmy [1], Aprenda a codificar con cursos en línea gratuitos, proyectos de programación y preparación de entrevistas para trabajos de desarrollador. o cualquier otro sitio web.

    Descansa de otros trabajos por un día, toma asiento y completa el curso.

    Puedes aprender CSS fácilmente en un día.

    Notas al pie

    [1] Academia Khan

    Hay muchos recursos disponibles en línea, como W3schools, Codeacademy, Freecodecamp y muchos más. Deberá aprender HTML antes de aprender CSS. Dedique de 4 a 6 horas para aprender los conceptos básicos. Con práctica creando proyectos, eventualmente lo dominarás. Sin embargo, no querrás detenerte allí. Tendrás que seguir adelante para aprender JavaScript y otros lenguajes de programación.

    Puedes aprenderlo en un día, eso no es gran cosa. pero necesitas desarrollar páginas web usando CSS. entonces solo significa que aprendiste por completo. la teoría no te ayudará, debes tener conocimientos prácticos sobre ella. para eso, tomas algunos archivos psd de referencia simples de internet. y comenzar a desarrollar usando HTML y CSS.

    Entonces puedes darte cuenta sobre CSS cómo se juega en páginas web 🙂 todo lo mejor 🙂

    Tutorial CSS

    Es lo mejor para principiantes.

    únete a Free Code Camp, es un proceso muy efectivo y rápido para aprender CSS junto con que primero repasa tus habilidades de HTML, luego te ayuda a aprender CSS más jQuery y finalmente Javascript.link se proporciona para obtener ayuda.

    Aprenda a codificar con cursos en línea gratuitos, proyectos de programación y preparación de entrevistas para trabajos de desarrollador.

    Mi consejo: obtenga un recurso (libro o sitio web), reserve un día sin ningún otro plan, pase ese día aprendiendo CSS.

    ¿De qué otra manera aprenderías algo en un día?

    Puede que no seas perfecto o un maestro completo al final del día, pero habrás aprendido una buena parte de CSS. Y CSS es bastante simple en comparación con muchos otros idiomas.

    pruebe Mega sitio de información bíblica

    Css es fácil de aprender y es un lenguaje creativo de diseño web. Definitivamente puedes completarlo en un día con la ayuda de youtube porque youtube tiene una gran cantidad de videos tutoriales css fáciles. También lo aprendí de tu tubo y lo completo en un día .
    feliz codificación 🙂

    Tutorial CSS

    Al aprenderlo, ¿por qué molestarse en preguntar?

    Sigue construyendo cosas. Sin embargo, un día no es suficiente.

    W3school -css (tendrás una idea)

    Bueno, aprendí todo lo básico a mi propio ritmo y de forma gratuita.

    En este sitio W3schools es brillante para los estudiantes rápidos.

    🙂