آموزش HTML - چیدمان با استفاده ازcss

چیدمان HTML با استفاده از CSS شامل ایجاد محتوای ساختاری یک صفحه وب و استایل‌دهی به آن با ویژگی‌های CSS است. با استفاده از ویژگی‌های CSS می‌توانید صفحات وب واکنش‌گرا و جذابی ایجاد کنید.

چیدمان HTML با استفاده از ویژگی‌های CSS

ویژگی‌های زیر در CSS برای طراحی چیدمان HTML استفاده می‌شوند −

• ویژگی CSS float
• ویژگی CSS display: flex
• ویژگی CSS display: grid

بیا هر ویژگی CSS را با کمک مثال‌ها و جزئیات بررسی کنیم. در توضیحات و مثال‌های زیر، با استفاده از این ویژگی‌های CSS چیدمان‌های واکنش‌گرای HTML خواهیم ساخت.

چیدمان HTML با استفاده از ویژگی CSS float

ویژگی float در CSS به شما امکان می‌دهد موقعیت اجزای صفحه وب را کنترل کنید. وقتی یک عنصر شناور (float) می‌شود، از جریان عادی سند خارج شده و به موقعیت مشخص‌شده مانند left یا right منتقل می‌شود.

مثال

در مثال زیر، تگ‌های <nav> و <article> با استفاده از ویژگی float:left در CSS به سمت چپ شناور شده‌اند:

<!DOCTYPE html>
<html>
<head>
   <title>The float Property</title>
   <style>
   * {
      box-sizing: border-box;
   }
   header {
      font-size: 25px;
      color: whitesmoke;
      padding: 1px;
      text-align: center;
      background-color: lightslategray;
   }
   nav {
      float: left;
      width: 20%;
      height: 250px;
      background: lightgray;
      padding: 20px;
   }
   nav ul {
      padding: 1px;
   }
   article {
      float: left;
      padding: 20px;
      width: 80%;
      background-color: lightyellow;
      height: 250px;
   }
   footer {
      background-color: lightslategray;
      padding: 10px;
      text-align: center;
      color: white;
      padding-top: 20px;
      padding-bottom: 10px;
   }
   footer a {
      margin: 10px;
   }
   footer p {
      margin-top: 30px;
   }
</style>
</head>
<body>
   <!--header segment-->
   <header>
      <div>
        <p>Tutorialspoint</p>
      </div>
   </header>
   <section>
   <!--Menu Navigation segment-->
   <nav>
         <ul>
            <li>
               <a href="#">Home</a>
            </li>
            <li>
               <a href="#">Jobs</a>
            </li>
            <li>
               <a href="#">Library</a>
            </li>
            <li>
               <a href="#">Articles</a>
            </li>
            <li>
               <a href="#">Certification</a>
            </li>
         </ul>
      </nav>
      <!--Content segment-->
      <article>
         <h1>Welcome to Tutorials point</h1>
         <p> Tutorialspoint.com is a dedicated website to provide quality online education in the domains of Computer Science, Information Technology, Programming Languages, and other Engineering as well as Management subjects. </p>
      </article>
   </section>
   <!--Footer segment-->
   <footer>
      <div>
         <p>Copyrights  TUTORIALS POINT (INDIA) PRIVATE LIMITED. All rights reserved.</p>
      </div>
   </footer>
</body>
</html>

با اجرای کد بالا، یک ساختار چیدمان شامل هدر، نوار ناوبری، بخش محتوا و فوتر خواهیم داشت.

چیدمان HTML با استفاده از ویژگی CSS display:flex

روش CSS flexbox (که با نام Flexible Box Layout نیز شناخته می‌شود) روش کارآمدتری برای طراحی چیدمان است. این روش به توسعه‌دهندگان اجازه می‌دهد تا فضاهای بین اجزای مختلف یک صفحه وب را مرتب و توزیع کنند. برای استفاده از قابلیت‌های Flexbox، باید ویژگی display را برابر با flex یا inline-flex قرار دهیم.

توجه: ما یک آموزش اختصاصی Flexbox در وب‌سایت خود داریم. لطفاً برای درک بهتر به آن مراجعه کنید.

مثال

مثال زیر نحوه استفاده از ویژگی display:flex در CSS را برای طراحی چیدمان یک صفحه وب نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <style>
      header {
         text-align: center;
         background-color: lightslategray;
         font-size: 50px;
         color: whitesmoke;
      }
      .contain {
         display: flex;
         background: lightgray;
         height: 250px;
         width: 100%;
      }
      .flex-item1 {
         flex-basis: 25%;
         background-color: lightslategray;
         color: whitesmoke;
         margin: 10px;
         padding: 5px;
         letter-spacing: 1px;
      }
      .flex-item2 {
         flex-basis: 75%;
         background-color: lightslategray;
         margin: 10px;
         padding: 5px;
         letter-spacing: 1px;
      }
      footer {
         background-color: lightslategray;
         text-align: center;
         color: white;
         padding: 10px;
      }
   </style>
</head>
<body>
   <header>
      <div>Tutorialspoint</div>
   </header>
   <div class = "contain">
      <div class = "flex-item1">
         <ul>
            <li>
               <a href="#">Home</a>
            </li>
            <li>
               <a href="#">Jobs</a>
            </li>
            <li>
               <a href="#">Library</a>
            </li>
            <li>
               <a href="#">Articles</a>
            </li>
            <li>
               <a href="#">Certification</a>
            </li>
         </ul>
      </div>
      <div class = "flex-item2">
         <h2>Welcome to Tutorials point</h2>
         <p>Tutorialspoint.com is a dedicated website to provide quality online education in the domains of Computer Science, Information Technology, Programming Languages, and other Engineering as well as Management subjects. </p>
      </div>
   </div>
   <footer>
      <div>
         Copyrights  TUTORIALS POINT (INDIA) PRIVATE LIMITED. All rights reserved.
      </div>
   </footer>
</body>
</html>

با اجرای کد HTML بالا، یک ساختار چیدمان دریافت خواهیم کرد.

چیدمان HTML با استفاده از ویژگی CSS display:grid

چیدمان CSS grid یکی دیگر از افزوده شده‌ها به تکنیک‌های طراحی چیدمان HTML است که شبکه‌ای از سطرها و ستون‌ها را تعریف می‌کند. این روش همچنین قابلیت‌هایی برای کنترل اندازه و همچنین موقعیت‌دهی به محتوای صفحه وب ارائه می‌دهد.

مثال

در این مثال، قصد داریم همان چیدمان صفحه وب را با استفاده از ویژگی display:grid در CSS طراحی کنیم.

<!DOCTYPE html>
<html>
<head>
   <style>
      header {
         text-align: center;
         background-color: lightslategray;
         font-size: 50px;
         color: whitesmoke;
      }
      .contain {
         display: grid;
         background-color: lightgray;
         grid-template-columns: auto auto;
         padding: 5px;
         grid-gap: 5px;
         height: 250px;
      }
      .item1 {
         background-color: lightslategray;
         margin: 5px;
         padding: 5px;
         letter-spacing: 1px;
      }
      .item2 {
         background-color: lightslategray;
         margin: 5px;
         padding: 5px;
         letter-spacing: 1px;
      }
      footer {
         background-color: lightslategray;
         text-align: center;
         color: white;
         padding: 10px;
      }
   </style>
</head>
<body>
   <header>
      <div>Tutorialspoint</div>
   </header>
   <div class="contain">
      <div class="item1">
         <ul>
            <li>
               <a href="#">Home</a>
            </li>
            <li>
               <a href="#">Jobs</a>
            </li>
            <li>
               <a href="#">Library</a>
            </li>
            <li>
               <a href="#">Articles</a>
            </li>
            <li>
               <a href="#">Certification</a>
            </li>
         </ul>
      </div>
      <div class="item2">
         <h2>Welcome to Tutorials point</h2>
         <p>Tutorialspoint.com is a dedicated website to provide 
		 quality online education in the domains of Computer Science, 
		 Information Technology, Programming Languages, and 
		 other Engineering as well as Management subjects.
         </p>
      </div>
   </div>
   <footer>
      <div>Copyrights  TUTORIALS POINT (INDIA) PRIVATE LIMITED. All rights reserved.</div>
   </footer>
</body>
</html>

با اجرای کد بالا، یک ساختار چیدمان ایجاد می‌شود.