คำชี้แจงลิขสิทธิ์: ลิขสิทธิ์ของบทความนี้เป็นของผู้เขียนต้นฉบับ การแปลมีไว้เพื่อการอ้างอิงของผู้อ่านในประเทศเท่านั้น
สรุปบทความนี้: เทคนิค CSS ที่ใช้บ่อยที่สุด เช่น มุมโค้งมน ตัวพิมพ์ใหญ่ ฯลฯ
ก่อนหน้านี้มีการแปล "8 One-Sentence CSS Tricks" ที่ได้แนะนำ 8 เคล็ดลับ CSS ประโยคเดียวที่มีประโยชน์มากในสัปดาห์นี้ ฉันจะนำบทความที่คล้ายกันมาให้คุณทราบ ซึ่งจะแนะนำเคล็ดลับ CSS ที่ใช้บ่อยที่สุดบางส่วน หรือที่เรียกว่า เคล็ดลับ CSS แน่นอนว่าฉันเชื่อว่านักออกแบบทุกคนจะมีความชอบส่วนตัวบ้าง โดยส่วนตัวแล้วฉันไม่ชอบเทคนิคบางอย่างในบทความนี้มากนัก
1. อย่าใช้เอฟเฟกต์มุมโค้งมนของรูปภาพ
<div id="container">
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</ข>
<!–เนื้อหาอยู่ที่นี่ –>
<b class=”rbottom">
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</ข>
</div>
.rtop, .rbottom{display:บล็อก}
.rtop *, .rbottom *{จอแสดงผล: บล็อก; ความสูง: 1px;
.r1{ระยะขอบ: 0 5px}
.r2{ระยะขอบ: 0 3px}
.r3{ระยะขอบ: 0 2px}
.r4{margin: 0 1px; height: 2px}
(หลายๆ คนชอบใช้เทคนิคการปัดเศษนี้ แต่โดยส่วนตัวแล้วฉันไม่ชอบมันมากนัก แม้ว่าฉันจะไม่ต้องสร้างภาพที่มีมุมโค้งมน แต่แท็กพิเศษเหล่านี้ก็มักจะ รู้สึกฟุ่มเฟือย)
2. รายการสไตล์
<ol>
<li>
<p>นี่คือบรรทัดที่หนึ่ง</p>
</li>
<li>
<p>นี่คือบรรทัดที่สอง</p>
</li>
<li>
<p>และบรรทัดสุดท้าย</p>
</li>
</ol>
เฒ่า {
แบบอักษร: ตัวเอียง 1em จอร์เจีย, Times, serif;
สี: #999999;
}
เอล พี {
แบบอักษร: ปกติ .8em Arial, Helvetica, sans-serif;
สี: #000000;
-
ฉันชอบเอฟเฟกต์นี้มาก คุณสามารถใช้แบบอักษรที่แตกต่างกันกับหมายเลขซีเรียลได้
3. รูปแบบที่ไม่มีตาราง
4. เทคนิคเครื่องหมายคำพูดคู่
5. เอฟเฟกต์คำไล่ระดับสี
6. การจัดกึ่งกลางแนวตั้ง
สำหรับข้อมูลเพิ่มเติม โปรดดูข้อความต้นฉบับ
10. Drop cap
<p class=”introduction”> ย่อหน้านี้มีคลาส “introduction” เบราว์เซอร์ของคุณรองรับคลาสหลอก “อักษรตัวแรก” ตัวอักษรตัวแรกจะเป็นตัวอักษรพิมพ์ใหญ่ </p>
p.introduction:first-letter {
ขนาดตัวอักษร: 300%;
น้ำหนักตัวอักษร: ตัวหนา;
ลอย: ซ้าย;
ความกว้าง: 1em;
-