قالب بندی صفحه وب

تگ div

با استفاده از این تگ که مخفف division هست به معنی تقسیم بندی ، میتوان صفحه را به بخش های مختلف تقسیم بندی کرد. در اصل چهارچوب قالب رو بسازیم. یعنی مثل ساخت یک خونه که میگیم این قسمت آشپزخونه باشه و این قسمت حموم و اتاق خواب و پذیرایی و حیاط و ... حالا با استفاده از تگ div هم میایم صفحه را قسمت بندی میکنیم مثلا سمت راست ساید بار باشه و بالا هدر صفحه و پایین فوتر و وسط هم مثلا نوشته ها باشه و.. 

تگ div اگر خالی باشد هیچ فضایی از صفحه را اشغال نمیکند ولی باعث میشه که تگ های بعد از آن در سطر بعد قرار بگیرند. چون تگ div سعی میکنه تمام عرض صفحه را در بر گیرد مگر اینکه ما براش اندازه تعریف کنیم و دستکاریش کنیم تا تمام صفحه را در بر نگیرد.

 

مثال:

 < div > 

 در این قسمت هرچی بنویسیم اندازه تگ دیو بزرگتر میشه

 < / div >

 

شروع کار با css

 

کدهای css در تگ style نوشته می شوند.

برای اینکه به یک تگ کدهای css نسبت بدهیم میتوان از چند روش اشتفاده کرد.

کدهای css دو قسمت دارند یکی propertiy یا مشخصه ای که قراره تغییر کنه و یکی مقدار مشخصه یا value هست. پروپرتی و value با علامت : از هم متمایز میشوند.

1- استایل دهی inline در html

:مثال

 

< div style = "color : red; background : black; "  >

    hello world

< / div >

 

 همونطور که در کدهای بالا مشاهده میکنید یک پروپرتی style هست که ما کدهای css را در آن نوشتیم و color رنگ نوشته های داخل تگ را تغییر میدهد و bachground هم پس زمینه تگ div را.

حالا میخواهیم به تگ div  حاشیه بدیم دورش مثلا خط سیاه بکشیم که محدوده اش مشخص بشه.

مثال:

 

< div style = "  color : red ; background : black ; border: 2px solid blue " > 

< / div >

 

دستور border در css سه مقدار میگیرد اولی تعداد پیکسل برای حاشیه هست و دومی نوع حاشیه که خط صاف باشه ( solid) و یا خط چین باشه (dash) و یا نقطه باشه. و سومین مقدار رنگ حاشیه هست.

رنگ میتواند به صورت عددی وارد شود که دو رقم اول رنگ قرمر و دو رقم بعد رنگ سبز و دو رقم بعدی رنگ آبی هست که سیستم رنگ rgb را پیاده سازی میکند.

مثلا این رنگ قرمز هست:

#ff0000 قرمز

#00ff00 سبز

#0000ff آبی

شماره رنگ ها را میشه از برنامه فتوشاپ یا paint ویندوز هم در آورد.

که در css به این شکل نوشته میشود

color : #12fb45;

2- استایل دهی internal:

در این روش یک تگ style باز میکنیم و کدهای css را در آن مینویسیم و استایل را توسط یکی از selectorها به تگ اعمال میکنیم.

selector ها:

1- نام تگ:

با نوشتن نام تگ و باز کردن براکت {} میتوان کدهای css را به مجموعه ای از تگها اعمال کرد مثلا تمام تگهای div را بهشون یک border میدهیم.

مثال:

//start---

< style >

  div{

     border:1px solid #000000;

   }

< / style >

< div >

hello world...

< / div >

//end----

در کد بالا تمامی تگ های div یک حاشیه 1 پیکسلی سیاه میگیرند

دانلود ویدئو آموزش مطالب این صفحه

صفحه قبلیصفحه بعدی