Hay muchos consejos sobre el desarrollo de diseños web CSS y los amigos novatos a menudo no están familiarizados con ellos. En uno o dos problemas pequeños, puede llevar mucho tiempo resolverlo. Aunque este aspecto se ha mencionado muchas veces en los documentos de 52CSS.com, muchos amigos todavía cometen errores en estos temas. Echemos un vistazo a estas técnicas de CSS hoy. Léalas detenidamente. Quizás no las comprenda completamente. Puede buscar en 52CSS.com para ampliar el conocimiento que desea.
1. La etiqueta ul tiene un valor de relleno de forma predeterminada en Mozilla, pero en IE solo el margen tiene un valor.
2. El mismo selector de clase puede aparecer repetidamente en un documento, pero el selector de identificación solo puede aparecer una vez. Utilice tanto clase como id para definir una etiqueta en CSS. Si las definiciones se repiten, la definición realizada por el selector de id es válida porque el peso de id es mayor que el de clase.
3. Una forma estúpida de ajustar la compatibilidad (IE y Mozilla):
Los principiantes pueden encontrar una situación de este tipo: el atributo de la misma etiqueta se muestra normalmente cuando está configurado en A en IE, pero debe configurarse en B en Mozilla para que se muestre normalmente, o los dos se invierten.
Solución temporal: es posible que el selector {nombre de propiedad: B! Importante; nombre de propiedad: A} no funcione a veces. Puede buscar más soluciones de ERRORES en 52CSS.com.
4. Si se requiere algo de espacio entre un grupo de etiquetas anidadas, déjelo en el atributo de margen de la etiqueta ubicada en el interior en lugar de definir el relleno de la etiqueta ubicada en el exterior.
5. Se recomienda utilizar imagen de fondo en lugar de imagen de estilo de lista para el icono delante de la etiqueta li.
6. IE no puede distinguir la diferencia entre relación de herencia y relación padre-hijo. Todas son relaciones de herencia.
7. Cuando agregues selectores a tus etiquetas, no olvides agregar comentarios a los selectores en CSS. Sabrás por qué haces esto cuando modifiques tu CSS más adelante. También una palabra de precaución: no te vuelvas demasiado loco.
8. Si configura una imagen de fondo oscuro y un efecto de texto brillante para una etiqueta. Se recomienda establecer un color de fondo más oscuro para su etiqueta en este momento. Debido a que las imágenes se pierden, el texto sigue siendo legible.
9. Al definir los cuatro estados de un enlace, preste atención al orden: Enlace visitado Hover Active
10. Utilice fondo para imágenes que no tengan nada que ver con el contenido. Recuerde siempre separar la presentación del contenido.
11. El color definido se puede abreviar #8899FF=#89F
12. Las tablas siguen siendo útiles en algunos aspectos. Cuando encuentres una tabla de datos, no la odies.
13. <script> no tiene el atributo de idioma y debe escribirse así: <script type="text/javascript">
14. Tabla de contorno perfecta de un solo píxel (puede pasar la prueba en IE5, IE6, IE7 y FF1.0.4 o superior)
tabla{ colapso-frontera:colapso } td{ borde:#000 sólido 1px } |
15. Los valores de margen negativos pueden desempeñar un papel en el posicionamiento relativo cuando la etiqueta usa posicionamiento absoluto. Cuando la página se muestra en el centro, el atributo left:XXpx no es adecuado para capas que usan posicionamiento absoluto. Es una buena idea colocar esta capa junto a una etiqueta que debe colocarse relativamente y luego usar valores negativos para el margen.
16. Cuando se utiliza el posicionamiento absoluto, el valor del margen se puede utilizar para posicionar en relación con su propia posición, que es diferente del posicionamiento de atributos como arriba e izquierda en relación con el borde de la ventana. La ventaja del posicionamiento absoluto es que permite que otros elementos ignoren su existencia.
17. Si el texto es demasiado largo, cambie la parte larga a puntos suspensivos y muéstrelo: no válido en IE5 y FF, pero se puede ocultar, válido en IE6
| <DIV STYLE="ancho:120px;alto:50px;borde:1px azul sólido;desbordamiento:oculto;desbordamiento de texto:elipsis"> <NOBR>Por ejemplo, hay una línea de texto que es tan larga que no se puede mostrar en una sola línea en la tabla.</NOBR> |
18. Cuando pueda haber problemas de duplicación de texto causados por comentarios en IE, puede cambiar los comentarios a:
<!–[if !IE]>Pon tu comentario aquí…<![endif]–> |
19. Cómo llamar fuentes externas usando CSS
gramática:
| @font-face{font-family:name;src:url(url);sRules} |
Valor:
nombre: nombre de la fuente. cualquier valor posible del atributo font-family url (url): especifique el archivo de fuente OpenType usando una dirección URL absoluta o relativa sRules: definición de hoja de estilo |
20. ¿Cómo centrar verticalmente el texto en un cuadro de texto en un formulario?
Si el uso de altura de fila y grupos de altura no tiene ningún efecto en FF, la forma es definir el relleno superior e inferior para lograr el efecto deseado.
21. Pequeños problemas a los que prestar atención al definir la etiqueta A:
Cuando definimos a{color:red;}, representa los estilos de los cuatro estados de A. Si queremos definir un estado donde se coloca el mouse, simplemente defina a:hover. Los otros tres estados están en A. El estilo definido. Cuando solo se define un a:link, asegúrese de recordar definir los otros tres estados.
22. No es necesario abreviar todos los estilos:
Cuando se define p{padding:1px 2px 3px 4px} antes de la hoja de estilo, se agrega otro estilo en el proyecto posterior con un relleno superior de 5px y un relleno inferior de 6px. No necesariamente tenemos que escribir p.style1{padding:5px 6px 3px 4px}. Se puede escribir como p.style1{padding-top:5px;padding-right:6px;}. Puede que sientas que escribirlo de esta manera no es tan bueno como el original, pero ¿alguna vez has pensado en ello? El método define repetidamente el estilo. Además, ¡no es necesario averiguar cuáles son los valores de relleno inferiores e izquierdos originales! Si el estilo anterior P cambia en el futuro, el estilo de p.style1 que definió también cambiará.
23. Cuanto más grande sea el sitio web, más estilos CSS habrá. Antes de comenzar, haga todos los preparativos y planes, incluidas las reglas de nomenclatura. División de bloques de páginas, clasificación de estilos internos, etc.
24. Truncamiento de caracteres chinos de ancho fijo: desbordamiento: oculto; desbordamiento de texto: puntos suspensivos; espacio en blanco: nowrap (Sin embargo, solo puede manejar el truncamiento de texto en una línea, no en varias líneas). No puede, sólo se esconde.
Si hay muchas cosas que no comprende, no importa. Registre estas habilidades y visite 52CSS.com con frecuencia para comprobarlas. Definitivamente obtendrá algo. También puedes ingresar el contenido que te interesa en el cuadro de búsqueda de la izquierda para buscar. Le invitamos a dejar comentarios y agregar sugerencias de CSS.