Home-theater-designers
คุณสมบัติการแสดงผล CSS เป็นเครื่องมือที่มีประสิทธิภาพสำหรับนักออกแบบเว็บไซต์ ช่วยให้คุณควบคุมเลย์เอาต์องค์ประกอบของเว็บไซต์ด้วยสไตล์ที่น้อยที่สุด พร้อมค่าที่เรียบง่ายที่จำง่าย
แต่ค่านิยมแต่ละค่าเหล่านี้ทำอะไร และทำงานอย่างไร ลองหา
คลิปวิดีโอประจำวันนี้
คุณสมบัติการแสดงผล CSS คืออะไร?
คุณสมบัติการแสดงผลระบุประเภทของการแสดงกล่องที่ใช้สำหรับองค์ประกอบ HTML บนเว็บเพจ ส่งผลให้มีพฤติกรรมที่หลากหลาย รวมถึงการไม่ปรากฏตัวเลย คุณสามารถแก้ไขค่าเหล่านี้บนเว็บไซต์ของคุณผ่านสไตล์ชีตหรือส่วนการปรับแต่ง CSS ที่เหมาะสมใน เครื่องมือ CMS เช่น WordPress .
ให้องค์ประกอบสอดคล้องกับการแสดงผล CSS: inline
ค่าความกว้างและความสูงใช้ไม่ได้กับองค์ประกอบที่มีการแสดงผลแบบอินไลน์ เนื้อหาภายในกำหนดขนาด องค์ประกอบ HTML แบบอินไลน์สามารถอยู่เคียงข้างกับองค์ประกอบอื่น ๆ ได้ โดยมีลักษณะเหมือน a . การแสดงแบบอินไลน์มักใช้สำหรับข้อความ
windows ไม่รู้จักฮาร์ดไดรฟ์ภายนอก
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</div>
</body>
</html>
มาร์กอัป HTML และ CSS ด้านบนนี้เป็นตัวอย่างที่ดีของการแสดงค่าอินไลน์ เมื่อใช้งานร่วมกัน จะแสดงข้อความบรรทัดเดียวที่สร้างด้วยองค์ประกอบ HTML ที่แตกต่างกันสองรายการ
ควบคุมเค้าโครงเว็บไซต์ด้วยการแสดง CSS: block
ในบางวิธี ค่าบล็อกการแสดงผลจะตรงกันข้ามกับค่าในบรรทัด สามารถกำหนดขนาดความสูงและความกว้างได้ และองค์ประกอบที่มีค่านี้ไม่สามารถอยู่ติดกันได้ ตัวอย่างข้างต้นแสดงสององค์ประกอบที่มีค่าบล็อก องค์ประกอบที่มีค่าการแสดงบล็อกเริ่มต้นที่ความกว้างสูงสุดขององค์ประกอบหลัก
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</div>
</body>
</html>ไม่เหมือนกับตัวอย่างสไตล์อินไลน์ ตัวอย่างค่าบล็อกการแสดงผลนี้แบ่งบรรทัดของข้อความออกเป็นสองบรรทัดที่แตกต่างกัน ค่าความกว้างของเนื้อหาที่พอดีจะกำหนดความกว้างขององค์ประกอบให้ตรงกับความยาวของข้อความ
องค์ประกอบ HTML แบบเคียงข้างกันพร้อมการแสดง CSS: inline-block
CSS แสดงค่าบล็อกอินไลน์ทำงานเหมือนกับค่าอินไลน์ปกติ โดยสามารถเพิ่มมิติข้อมูลเฉพาะได้ ทำให้สามารถสร้างเลย์เอาต์แบบกริดได้โดยไม่ต้องมีองค์ประกอบหลักอยู่ในตำแหน่ง ย้อนกลับไปที่ตัวอย่างก่อนหน้านี้ การเพิ่มค่าบล็อกอินไลน์ทำให้องค์ประกอบสามารถอยู่ติดกันได้
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</div>
</body>
</html>
ค่าอินไลน์บล็อกไม่ต่างจากค่าอินไลน์มากนัก สิ่งสำคัญที่ควรทราบคือ คุณสามารถกำหนดขนาดขององค์ประกอบด้วยค่านี้ ซึ่งช่วยให้ทำงานได้ง่ายขึ้นในบางกรณี
ซ่อนองค์ประกอบเว็บไซต์ด้วยการแสดง CSS: none
ค่าที่แสดงที่ง่ายที่สุดคือ 'ไม่มี' ค่านี้จะซ่อนองค์ประกอบและองค์ประกอบย่อยใดๆ พร้อมกับระยะขอบและคุณสมบัติการเว้นวรรคอื่นๆ องค์ประกอบที่มี CSS ไม่แสดงค่าใด ๆ จะยังคงมองเห็นได้ในตัวตรวจสอบเบราว์เซอร์
สร้างองค์ประกอบที่ยืดหยุ่นและตอบสนองด้วย CSS display: flex
Display flex เป็นหนึ่งในโหมดเค้าโครง CSS ใหม่ล่าสุด เมื่อ display flex อยู่บนองค์ประกอบหลัก องค์ประกอบทั้งหมดภายในนั้นจะกลายเป็นองค์ประกอบ CSS ที่ยืดหยุ่น องค์ประกอบหลักในการกำหนดค่านี้คือ flexbox
Flexboxes สร้างการออกแบบที่ตอบสนองด้วยตัวแปรที่กำหนดไว้ล่วงหน้า เช่น ความกว้างและความสูง มันคุ้มค่า เรียนรู้เกี่ยวกับ HTML/CSS flexboxes ก่อนที่คุณจะเริ่มต้น
ติดตั้ง remix os ลงในฮาร์ดไดรฟ์
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.flex {
display: flex;
font-size: 3rem;
}
#flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Flex</h1>
<div class="flex">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html> วางตำแหน่ง Flexboxes เคียงข้างกับจอแสดงผล: inline-flex
Inline-flex ทำงานเหมือนกับ flexbox ปกติ โดยมีประโยชน์เพิ่มเติมขององค์ประกอบที่สามารถนั่งถัดจากองค์ประกอบอื่นๆ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>สร้างตารางที่ซับซ้อนด้วยการแสดงผล CSS: table
ค่าของตารางแสดงผลชวนให้นึกถึงสมัยก่อนของการออกแบบเว็บไซต์ แม้ว่าเว็บไซต์ส่วนใหญ่จะไม่ได้ใช้ตารางสำหรับเลย์เอาต์ในปัจจุบัน แต่ก็ยังใช้ได้สำหรับการแสดงข้อมูลและเนื้อหาในรูปแบบที่อ่านได้
การเพิ่มค่าตารางให้กับองค์ประกอบ HTML จะทำให้มันทำหน้าที่เหมือนองค์ประกอบตาราง แต่คุณต้องการค่าเพิ่มเติมเพื่อให้ตารางของคุณทำงานได้อย่างถูกต้อง
รูปแบบที่ดีที่สุดสำหรับฮาร์ดไดรฟ์ภายนอก mac
จอแสดงผล CSS: table-cell
องค์ประกอบที่มีค่าเซลล์ตารางทำหน้าที่เป็นแต่ละเซลล์ภายในตารางหลัก และค่าตารางคอลัมน์และแถวตารางจะจัดกลุ่มเซลล์แต่ละเซลล์เหล่านี้ไว้ด้วยกัน
จอแสดงผล CSS: table-row
ค่าแถวตารางทำงานเหมือนกับองค์ประกอบ HTML
จอแสดงผล CSS: table-column
ค่าคอลัมน์ของตารางทำงานคล้ายกับค่าแถวตารางเท่านั้น แต่จะไม่แยกตารางของคุณออก คุณสามารถใช้ค่านี้เพื่อเพิ่มกฎ CSS เฉพาะให้กับคอลัมน์ต่างๆ ที่มีอยู่แล้วได้
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
#column-1 {
display: table-column-group;
background-color: yellow;
}
#column-2 {
display: table-column-group;
background-color: lightgreen;
}
#column-3 {
display: table-column-group;
background-color: lightblue;
}
#row-1 {
display: table-row;
}
#row-2 {
display: table-row;
}
#row-3 {
display: table-row;
}
#cell {
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</div>
</div>
</div>
</body>
</html>สร้างตารางเคียงข้างกันด้วยการแสดงผล CSS: inline-table
เช่นเดียวกับตัวแปรแบบอินไลน์อื่นๆ ที่เราได้ดูไปแล้ว ตารางแบบอินไลน์ทำให้สามารถวางองค์ประกอบตารางไว้ข้างๆ องค์ประกอบอื่นๆ
สร้างเลย์เอาต์เว็บไซต์ที่ตอบสนองด้วยการแสดง CSS: grid
ค่ากริดที่แสดง CSS นั้นคล้ายกับค่าของตาราง เฉพาะคอลัมน์และแถวของกริดเท่านั้นที่สามารถปรับขนาดได้อย่างยืดหยุ่น ทำให้กริดเหมาะสำหรับการสร้างเลย์เอาต์หลักสำหรับหน้าเว็บ โดยจะเว้นที่ว่างสำหรับส่วนหัวและส่วนท้ายแบบเต็มความกว้าง ในขณะเดียวกันก็ทำให้มีพื้นที่เนื้อหาที่มีขนาดต่างกัน
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
#grid-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</div>
</div>
</body>
</html>
กริดมีความคล้ายคลึงกับ flexboxes เพียงแต่สามารถวางองค์ประกอบไว้ด้านล่างและติดกันได้ คุณสมบัติ grid-template-areas มีความสำคัญสำหรับสิ่งนี้ ดังที่คุณเห็นจากโค้ด ส่วนหัวและส่วนท้ายของเราใช้พื้นที่สี่ช่องว่างในอาร์เรย์ เนื่องจากเป็นความกว้างเต็มความกว้าง แถบด้านข้างใช้ช่องละหนึ่งช่อง ในขณะที่เนื้อหาใช้สองช่อง โดยแยกแถวกลางของตารางออกเป็นสามคอลัมน์ได้อย่างมีประสิทธิภาพ
จอแสดงผล CSS: inline-grid
การใช้ค่า inline-grid จะทำให้กริดของคุณอยู่ถัดจากองค์ประกอบอื่นๆ เช่นเดียวกับค่าอินไลน์อื่นๆ ในคู่มือนี้
การใช้ CSS Display สำหรับการออกแบบเว็บ
คุณสมบัติการแสดงผล CSS เป็นวิธีที่สะดวกในการปรับโครงสร้างองค์ประกอบเว็บไซต์โดยไม่ต้องเปลี่ยนมาร์กอัป HTML ซึ่งเหมาะสำหรับผู้ที่ใช้แพลตฟอร์มการจัดส่งเนื้อหา เช่น Shopify หรือ WordPress แต่ก็มีประโยชน์สำหรับการออกแบบเว็บทั่วไปเช่นกัน