cssطراحی سایت

جلسه ۳۱: درصدها در CSS

در این درس نگاهی خواهیم انداخت به واحد درصد در CSS. نحوه ارتباط آن با اندازه متن، چه تاثیری بر اندازه و عرض و ارتفاع نیز دارد. موارد زیر را بیان خواهیم کرد

  • استفاده از درصد با متن
  • استفاده از درصد با اعلامیه های ارتفاع و عرض

استفاده از درصد با متن

درصد ها ، درست مانند ایمیل ها و یادداشت ها توسط کاربر قابل تغییر اندازه هستند. اگر برای مثال اندازه قلم ۱۰۰٪ باشد:

p {
  font-size: 100%
}

در نتیجه برابر با اندازه پیش فرض قلم در مرورگر کاربر خواهد بود. معمولاً ۱۶ پیکسل. افزایش یا کاهش این درصد باعث کاهش یا کاهش اندازه متن می شود. این متن را کوچکتر می کند:

p {
   font-size: 80%
}

این متن را بزرگتر می کند:

p {
    font-size: 120%;
}

استفاده از درصد برای ارتفاع و عرض خروجی زیر را در نظر بگیرید:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>A Simple Page</title>
<link rel=”stylesheet” href=”styles.css” />
</head>
<body>
  <div class=”content”>
     Hello World
  </div>
</body>
</html>
html,
body {
  width: 100%;
  height: 100%;
}    

.content {
   width: 60%;
   height: 400px;
   background-color: teal;
}
در کد بالا ، .content دارای عرض ۶۰٪ است. ۶۰٪ از چه چیزی؟ ۶۰٪ از کل فضای موجود. توجه داشته باشید که عناصر ریشه ۱۰۰٪ عرض دارند یعنی اندازه صفحه موجود را پر می کنند.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>A Simple Page</title>
<link rel=”stylesheet” href=”styles.css” />
</head>
<body>
  <div class=”content”>
     Hello World
    <div class=”sub-content”>
      Hello from sub content
    </div>
  </div>
</body>
</html>
html,
body {
  width: 100%;
  height: 100%;
}    

.content {
   width: 60%;
   height: 400px;
   background-color: teal;
}

.sub-content {
  width: 30%;
  height: 80%;
  background-color: #eaeaea;
}   
اگر شما دارای یک تقسیم عرض ۳۰٪ در content. باشید ، آیا ۳۰٪ از کل فضا یا فضای موجود در .content خواهد بود؟ خودت ببین. چند واحد جالب دیگر برای بررسی وجود دارد. بیا ادامه بدهیم.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا