คำสั่งพื้นฐาน CSS

คำสั่ง คำอธิบาย
width : 100px; กำหนดความกว้าง
min-width: 100px; กำหนดความกว้าง ขั้นต่ำ
max-width: 100px; กำหนดความกว้าง กว้างสุด
height : 100px; กำหนดความสูง
min-height: 100px; กำหนดความสูง ขั้นต่ำ
max-height: 100px; กำหนดความสูง สูงสุด
font-size : 14px; กำหนดขนาดตัวอักษร
font-weight: normal; กำหนดความหนาตัวอักษร
font-family: 'sans-serif'; กำหนดรูปแบบตัวอักษร
text-align : center; จัดตำแหน่งตัวอักษร
line-height: 1.5; กำหนดส่วนสูงของบรรทัด
color : #286F65; กำหนดสีตัวอักษร
white-space: nowrap; กำหนดให้ตัวอักษรไม่ให้ขึ้นบรรทัดใหม่
padding : 10px 15px; ใส่ช่องว่างภายใน
margin : 10px 15px; ใส่ช่องว่างภายนอก
border : 5px solid #000; ใส่เส้นขอบ
box-shadow: 0 0 8px rgba(0, 0, 0, 0.15); ใส่เงา
float : left; จัดชิดซ้าย
float : right; จัดชิดขวา
clear : both; เคลียร์ float
overflow : hidden; การสร้างขอบเขตถ้าอยู่นอกขอบเขตจะไม่แสดงผล
opacity : 0.5; ใส่ค่าความโปร่งทึบ
display : block; แสดงผลแบบเต็มช่อง
display : inline; แสดงผลต่อกันในบรรทัด
display : none; ปิดการแสดงผล
background-color : #00ff00; ใส่สีพื้นหลัง
background-image : url("paper.gif"); ใส่รูปพื้นหลัง
position : relative; การจัดการเรื่องตำแหน่งแสดงผล
content : '…'; ใส่ข้อความ
cursor: pointer; กำหนดรูปแบบเคอร์เซอร์
transition: all 1s ease-in-out; การทำอนิเมชั่นด้วย CSS

โดย: [K] Narongchai Suphiratwanich

นักพัฒนาเว็บไซต์ด้วยระบบเวิร์ดเพรส เป็นผู้ช่วยให้กับ Mennstudio และ เปิดธุรกิจเล็กๆ อยู่ในอำเภอปาย

สอบถาม & พูดคุย