طراحی وب سایت در کرج
026-34204893
09101013858

آموزش css – جعبه‌ها و قاب‌ها در css

آموزش css – جعبه‌ها و قاب‌ها در css

آموزش css – جعبه‌ها و قاب‌ها در cssطراحی سایت در کرج شرکت کیان تجارت فاوا

یکی ازمفاهیم ابتدایی ولی مهم css و html مدل جعبه‌ای است. در واقع می‌توان هر المانhtml را به صورت چند لایه تصور کرد. یک لایه‌ی اصلی در این المان‌ها محتوایی است که وجود دارد. لایه بعدی بردار یا قابی است که دور تا دور این المان کشیده شده است و در حالت پیش‌فرض نامرئی است، ولی شما می‌توانید با کمک دستور border آن را ظاهر کنید. لایه بعدی لایه پدینگ یا فضایی است که بین بردار و محتوا قرار می‌گیرد و این دو را از هم جدا می‌کند. لایه آخر نیز فضای بین بردار یک المان با بردار المان‌های دیگر است که به مارجین نامیده می‌شود.

در شکل زیر می‌توانید این موضوع را به وضوح مشاهده کنید:

box model ebef6

اضافه کردن قاب:

  • در حالت پیش‌فرض قابی که دور تا دور المان‌های html وجود دارد، دیده نمی‌شود. ولی شما هر زمان که بخواهید می‌توانید این قاب را با رنگ و ضخامت دلخواه نمایش دهید.
    • نام :‌ border-style و border-size
    • این ویژگی چه کاری انجام می‌دهد؟  برای تعیین قاب در اطراف المان‌ها از این دستور استفاده می‌کنیم.
    • چه چیزهایی را جلوی این دستور بنویسیم؟ اندازه و نوع قاب دور المان‌ها را.
    • نحوه‌ی استفاده: border-style: solid و border-size: 1px را در بخش دستورات می‌نویسیم.
    • همانطور که گفتیم، هر المان اچ‌تی‌ام‌ال در واقع دارای یک قاب منحصر به فرد است که دور تا دور المان را اشغال کرده. برای همین موضوع معمولا این قاب به صورت نامرئی است؛ ولی همیشه وجود دارد.

 

تغییر رنگ و حالت قاب:

نام :‌ border-style و border-color

این ویژگی چه کاری انجام می‌دهد؟  برای تعیین رنگ قاب در اطراف المان‌ها از این دستور استفاده می‌کنیم.

چه چیزهایی را جلوی این دستور بنویسیم؟ اندازه رنگ و نوع قاب دور المان را

نحوه استفاده: border-style: solid و border-size: 1px و border-color: red

دستور  border-style می‌تواند حالت‌های مختلفی داشته باشد. این دستور همانطور که گفتیم در واقع نوع بردار را مشخص می‌کند. نوع بردار می‌تواند به صورت خطی‌(solid)، به صورت خط چین (dashed) و یا به صورت نقطه‌چین (dotted) باشد.

 

HTML

<div class=”border”> المانی با ابعاد مشخص و قاب مرئی </div>

CSS

border {
border-style: solid;
border-color:  #۹۸bf21

    width:  ۲۰۰px;

   height: 300px;
}

المانی با ابعاد مشخص و قاب مرئی

 

پست مرتبط
آموزش جی‌کوئری - jQuery + دانلود - شرکت طراحی سایت در کرج - شرکت کیان تجارت فاوا
آموزش جی‌کوئری – jQuery + دانلود

آموزش جی‌کوئری – jQuery + دانلود – شرکت طراحی سایت در کرج – شرکت کیان تجارت فاوا   جی‌کوئری یا jQuery یک کتابخانه جاوا اسکریپت سبک وزن چند مرورگری می‌باشد که برای ساده کردن نوشتن اسکریپ‌های سمت-مشتری در  (HTML) طراحی شده است. تعداد کدهای مورد نیاز انجام یک فرآیند به وسیله جی‌کوئری در مقایسه با جاوااسکریپت بسیار کمتر خواهد […]

ادامه مطلب
آموزش html 5 + دانلود کتاب - طراحی سایت در کرج شرکت کیان تجارت فاوا
آموزش html 5 + دانلود کتاب

آموزش html 5 + دانلود کتاب – طراحی سایت در کرج شرکت کیان تجارت فاوا   HTML5 یا زبان نشانه‌گذاری ابرمتنی ۵ یا اچ‌تی‌ام‌ال۵ (به انگلیسی: HyperText Markup Language5 یا HTML5) زبانی برای ساختن و ارائهٔ محتوا برای شبکه جهانی وب است، این پنجمین تجدید نظر از استاندارد اچ‌تی‌ام‌ال است (در سال ۱۹۹۰ ایجاد و در سال ۱۹۹۷ به عنوان HTML4 استاندارد شده‌است) و تاکنون همچنان […]

ادامه مطلب
برندینگ در شبکه های اجتماعی - شرکت طراحی سایت در کرج - کیان تجارت فاوا
برندینگ در شبکه های اجتماعی

۱- انتخاب شبکه هایی که از تصویر برند شما پشتیبانی می کند فیسبوک : یکی از بهترین رسانه ها جهت گسترش برند می باشد که بیش از یک میلیارد نفر از آن استفاده می کنند و از طریق آن با هم در ارتباط هستند. اینستاگرام : شبکه اجتماعی بر مبنای انتشار عکس و ویدئو با بیش از نیم […]

ادامه مطلب

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