Tabla de contenido
Simplemente registre el historial de CSS que conocía antes de aprender CSS, aprenda CSS sistemáticamente y cómo aprenderlo.
CSS (inglés: hojas de estilo en cascada) se denomina hojas de estilo en cascada
1. ¿La historia de CSS?
Para una introducción histórica detallada, consulte Wikipedia CSS
1.1 La propuesta de CSS
CSS fue propuesto originalmente por Harken Wim Lay en 1994. Luego, Harken Wim Lay y Bert Boss colaboraron para diseñar CSS y publicaron CSS1 en 1996.
1.2 versión CSS
- CSS1 1996
- CSS2 1998-agregado posicionamiento, índice z, medios
- CSS2.1 2004-2011, es la versión más extensa ahora (soporte IE)
- CSS3 se redactó en 1999: CSS relativamente nuevo (para actualizar el módulo, solo el número de versión del módulo, actualice cada uno)
- CSS4 comenzó a diseñar en 2011
1.3. ¿Qué significa apilar?
- Cascada de estilo (el mismo selector se puede diseñar varias veces)
- Cascada de selectores (se pueden usar diferentes selectores para diseñar un elemento)
- Apilamiento de archivos (se pueden usar varios archivos para apilar)
Estas características hacen que CSS sea extremadamente flexible
1.4. ¿Cómo puedo saber qué navegadores admiten qué funciones? (compatibilidad)
Método 1: ejecutar a través de docenas de navegadores
Método 2 : use caniuse.com , puede decirle si el navegador es compatible
Rojo significa que hay un problema con el navegador, amarillo es un problema y verde no es un problema
2. CSS de química del sistema
¿Qué se debe aprender para aprender un idioma?
- Gramática (cómo escribir código)
- Cómo depurar (cómo saber si su código es incorrecto)
- Dónde encontrar información
- ¿Quién es el creador de estándares?
2.1 sintaxis
Sintaxis 1: estilo
选择器 {
属性名：属性值；
/*注释*/
}
Nota:
Todos los símbolos son símbolos ingleses
Distinguir entre mayúsculas y minúsculas, "a" y "A" son diferentes
No hay comentarios para //
Se puede omitir el último punto y coma, pero no se recomienda
Incorrecto en cualquier lugar, no se informará ningún error, el navegador simplemente lo ignorará
Gramática 2: en gramática
@charset "UTF-8";
/* 指定当前文件的字符编码或字符集*/
@import url(3.css);
/*导入额外的css*/
@media (min-width: 100px) and (max-width: 200px){
}
/*媒体查询*/
Nota:
@charset debe colocarse en la primera línea, los dos primeros en la sintaxis deben terminar con un punto y coma ";"
Juego de caracteres significa un juego de caracteres, pero UTF_8 es una codificación de caracteres (GBK chino, japonés y coreano, código universal Unicode-UTF-8 / UTF-16 / UTF-32)
charset determina la codificación del archivo en lugar del juego de caracteres.
2.2 ¿Cómo depurar?
-
Código de verificación de vaildator W3C
-
VScode puede confirmar algunas líneas de error
-
* webstorm puede saber qué salió mal mirando el color
-
Utilice herramientas de desarrollador, consulte la advertencia
También hay un método de depuración de bordes para la autocomprobación:
Pasos: Si hay un problema con un elemento, agregue un borde a este elemento ¿El borde no aparece? Explique que el selector es incorrecto o la sintaxis es incorrecta
¿Aparece el borde? Verifique si el límite cumple con las expectativas y elimine el límite cuando se resuelva el error, que es equivalente al método de depuración de registros de JS.
2.3 ¿Dónde puedo encontrar información?
-
Palabras clave de búsqueda de Google + MDN, como flex MDN
-
Trucos CSS es el sitio web de Village English flex css tricks
-
css + Zhang Xinxu (estudió css durante más de diez años y escribió innumerables documentos css)
2.4 Quién es el creador de estándares
El último estándar de especificaciones css , puede buscar documentos si no puede encontrarlo, puede ver la extensa versión china de css 2.1.
3. ¿Cómo aprender? -Método CRM
Aprende la forma de aprender del Valle del Hambre.
-
copia-copia de documentos, copia del maestro
-
Ejecutar: ponga en su propia máquina para que funcione correctamente
-
Modifique: agregue un poco de sus propias ideas y ejecute
-Seguir
Estoy en camino de aprender el frente desde la entrada al suelo. Cada vez que miras, es tu mayor estímulo para mi viaje de aprendizaje, ¡trabajemos juntos duro!
Bienvenidos a dejar sus valiosos comentarios.
----Al final
