Declaración de derechos de autor: los derechos de autor de este artículo pertenecen al autor original. La traducción es solo para referencia de lectores nacionales
. Resumen de este artículo: los trucos de CSS más utilizados, como esquinas redondeadas, mayúsculas, etc.
Hubo una traducción anterior de "8 trucos de CSS de una oración" que presentaba 8 trucos de CSS de una sola oración muy útiles. Esta semana les traeré un artículo similar, que presenta algunos de los trucos de CSS más utilizados, o se llama. Truco CSS. Por supuesto, creo que cada diseñador tendrá algunas preferencias personales. A mí personalmente no me gustan mucho algunos de los trucos del artículo.
1. No utilice el efecto de esquinas redondeadas de la imagen
<div id="container">
<b clase=”rtop”>
<b clase=”r1″></b> <b clase=”r2″></b> <b clase=”r3″></b> <b clase=”r4″></b>
</b>
<!–el contenido va aquí –>
<b clase=”rbottom">
<b clase=”r4″></b> <b clase=”r3″></b> <b clase=”r2″></b> <b clase=”r1″></b>
</b>
</div>
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{pantalla: bloque; altura: 1px desbordamiento: oculto}
.r1{margen: 0 5px}
.r2{margen: 0 3px}
.r3{margen: 0 2px}
.r4{margin: 0 1px; height: 2px}
(A muchas personas les gusta usar esta técnica de redondeo, pero a mí personalmente no me gusta mucho. Aunque no necesito hacer imágenes con esquinas redondeadas, estas etiquetas adicionales siempre se siente superfluo)
2. Lista con estilo
<ol>
<li>
<p>Esta es la línea uno</p>
</li>
<li>
<p>Aquí está la línea dos</p>
</li>
<li>
<p>Y última línea</p>
</li>
</ol>
ol {
fuente: cursiva 1em Georgia, Times, serif;
color: #999999;
}
ol p {
fuente: normal .8em Arial, Helvética, sans-serif;
color: #000000;
}
También me gusta mucho este efecto. Puedes aplicar diferentes fuentes a los números de serie.
3. Formulario sin tabla
4. Técnica de comillas dobles
5. Efecto de palabra degradado
6. Centrado vertical
Para obtener más información, consulte el texto original
10. Letra mayúscula
<p class=”introducción”> Este párrafo tiene la clase “introducción”. su navegador admite la pseudoclase "primera letra", la primera letra será una letra mayúscula </p>
p.introduction:first-letter {.
tamaño de fuente: 300%;
peso de fuente: negrita;
flotador: izquierda;
ancho: 1em;
}