در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش طراحی سایت با HTML و CSS قسمت 5 : Box Model

ما قبلا با Prtoperty های color و background-color آشنا شدیم . اگر به خاطر بیاورید سه نوع مقدار می توانستیم به آن ها بدهیم. حالا می خواهیم کمی عمیق تر با انواع این رنگ ها آشنا شویم. ما می توانستیم نام رنگ مورد نظرمان را به انگلیسی به Property هایی که مقدارشان از نوع رنگ است بدهیم. مانند کد زیر: هر رنگ کد HEX خود را دارد که این کد با " # " شروع می شود و حاوی اعداد و حروف است. مانند کد زیر: هر رنگ یک کد RGB دارد که در حقیقت میزان رنگ های اصلی نور یعنی قرمز و سبز و آبی را در آن تعیین می کند. البته در CSS شما می توانید به جای نوشتن rgb بنویسید rgba و یک پارامتر دیگر در انتهای پرانتز بنویسید که از 0 تا1 قبول می کند و میزان شفافیت را نشان می دهد. برای اطاعات بیشتر در زمینه ی رنگ های rgb می توانید این مطلب را مطالعه کنید. با استفاده از کد HSL نیز می توانیم در CSS به المان ها رنگ بدهیم . شما می توانید برای به دست آوردن کد رنگ مورد نظرتان (کد rgb یا hex یا hsl) از این وبسایت استفاده کنیم: -- همانطور که در CSS می شود انواع مختلفی از رنگ ها را به عنوان مقدار Property ها استفاده کرد ، در Property هایی که مقدار اندازه می گیرند می توانیم از واحد های مختلفی استفاده کنیم. خب تا اینجا با نوع های رنگ ها و اندازه ها آشنا شدیم و با توجه به دانشی که قبلا برای آدرس دهی به دست آورده بودیم حالا می توانیم با Property های CSS به راحتی کار کنیم. و البته می توانیم با خیال راحت مبحث مهم Box Model را شروع کنیم. توی وبسایت های مختلف که می رویم ، تنها با لینک ها و متن ها برخورد نمی کنیم ! این وبسایت ها قسمت های مختلفی دارند مانند قسمت هایی که در جلسه ی قبل با آن ها آشنا شدیم. همچنین در جلسات قبل با دو نوع display آشنا شدیم که تعیین می کرد که یک تگ به اندازه ی محتوایش عرض صفحه را بگیرد یا کل عرض آن را. حالا می خواهیم کمی به ژرفای این مطالب برویم. ما میدانیم که هر المان در HTML (تگ) برای خودش یک Display تعیین شده دارد. ما می توانیم با استفاده از CSS این خاصیت را در تگ ها تغیر دهیم. برای این کار ما می توانیم از Property زیر استفاده کنیم. این یکی دیگر از انواع display است . با این نوع display ما می توانیم از خواص یک المان block استفاده کنیم در عین این که display ما inline است و می توانیم آن ها را کنار هم بچینیم. من برای شروع Box Model فولدر Project6 را ایجاد و فایل index.html را در آن درست کردم. همه ی تگ ها مستطیل هستند . Box Model در حقیقت تعیین اندازه ی این المان ها با استفاده از چند خاصیت است. هر المان دارای خاصیت های زیر است که با Property های CSS قابل تغیر هستند. این خاصیت فاصله ی المان را از چهار طرفش تعیین می کند. این خاصیت فاصله ی المان را از محتوایت داخش تعیین می کند . به بیان دیگر این خاصیت یک فاصله از داخل برای المان بوجود می آورد. این خاصیت کادری برای تگ (المان) ما تعیین می کند که می تواند رنگ و شکل های مختلف داشته باشد. ما تا به حال با Property هایی کار کردیم که یک مقدار می گیرند اما تعدادی از آن ها هستند که چند مقدار مختلف را باید برای آن ها تعیین کنیم. (البته می شود با Property های دیگری هر کدام از این مقدار ها را جدا به المان نسبت داد) مقدار اول ضخامت کادر ما را تعیین می کند ، مقدار دوم نوع آن را ( مقدار های متفاوتی می گیرد مانند dashed که کادر خط چین برای المان می گذارد) و مقدار سوم رنگ کادر ما خواهد بود. با استفاده از این خاصیت می توانیم عرض خالص المان مورد نظر را تنظیم کنیم . توجه داشته باشید که Margin و Padding و Border به عرض ما اضافه خواهند شد و عرض نهایی المان جمع همه ی این ها است. همانطور که از نامش معلوم است ارتفاع المان ما را تعیین می کند . این خاصیت هم مثل width با Margin و Padding و Border جمع خواهد شد تا ارتفاع نهایی المان را بسازد. ما با خاصیت های Box Model آشنا شدیم و حالا می خوایهم از آن ها استفاده کنیم ولی قبل از آن باید با تگی که قولش را به شما داده بودم آشنا بشیم . با دقت به سایت itpro نگاه کنید. آیا تمامی بخش های وبسایت در Header و Footer و Section و ... تقسیم بندی می شوند ؟ جواب من خیر است. با نگاهی کلی می توان فهمید که این تگ ها جوابگوی تمامی قسمت های یک سایت به عنوان Box یا بخش نیستند. قبل از معرفی HTML5 تمامی این ها با تگی ساخته می شد به نام Div اما بعد از معرفی آن تگ های Header و ... جای ان را در بخش های اصلی سایت ها گرفتند اما هنوز این تگ کاربرد های بسیاری برای طرحان سایت دارد. با مثالی که خواهیم زد شما هم با کاربرد های تگ Div و هم با کاربرد های Margin ، Padding ، Border ، Width و Height بیشتر آشنا خواهید شد. داخل index.htnl که درون project 6 قرار دارد ابتدا کد های اولیه ی یک فایل html را می نویسم: حالا می خواهم تگ Div را نوشته و به آن Style دهم. همانطور که در بالا با هم آموخته بودیم به آن Style دادم. خروجی: دیدیم که مربعی با عرض و طول 100px با کادری با عرض 5 px دارای فاصله از بیرون و داخل ایجاد شد. اما شاید همیشه ما نخواهیم که فاصله ی Div از همه طرف به یک شکل باشد!! برای این کار می توانیم از Property های Margin-top ، margin-bottom ، margin-left و margin-right استفاده کنیم.(برای padding هم از padding-top , padding-bottom , padding-left و padding-right) برای مثال من Margin را از Style های div پاک می کنم تا به هر سمت جداگانه فاصله بدهم. خروجی: دیدیم که فاصله ها تغیر کردند. همچنین ما می توانیم این مقدار ها را به صورت جداگانه در همان Property اول یعنی margin تعیین کنیم. برای این کار من به شکل زیر عمل می کنم. ما به ترتیب فاصله های بالا - راست - پایین - چپ را با دادن فاصله مشخص می کنیم. یعنی عدد اول Margin بالا و عدد دوم margin راست ، عدد سوم فاصله از پایین و در نهایت فاصله از چپ مشخص شده است. این Property در نسخه ی css3 ارایه شد و امکان گرد کردن گوشه های المان ها را به ما می دهد شما با دادن یک مقدار از نوع اندازه میزان گردی المان را مشخص می کنید. من با استفاده از این Property گوشه های تگ Div را گرد می کنم: خروجی: دیدیم که گوشه های Div ما گرد شد. حالا اگر ما بخواهیم کل Div گرد شود باید مقدار آن را نصف عرض و طول المان قرار دهیم (برای گرد شدن باید عرض و طول المان برابر باشند . در غیر این صورت المان ها بیضی خواهند شد.) با توجه به این که طول و عرض تگ ما 100px است من به border-radisu مقدار 50px دادم تا گرد شود. اگر به خاطر بیاورید در واحد هایی که می توانستیم برای اندازه ها استفاده کنیم % نیز بود. حالا من برای این که اگر زمانی طول یا عرض المان تغیر کرد نیازی به تغیر این Property نباشد مقدار آن را از نوع درصدی می دهم و کد زیر را جای گزین کد بالا می کنم: حالا خروجی را میبینم: دید که تگ ما گرد شد. در جلسه ی آینده با float ها و position ها آشنا خواهیم شد. ITPRO باشید. محمد پارسا صفوی انجمن تخصصی فناوری اطلاعات ایران - tosinso.com
#آموزش_css #طراحی_صفحات_وب #آموزش_کار_با_div #آموزش_طراحی_سایت #آموزش_html_و_css #آموزش_html #آموزش_باکس_مودل
عنوان
1 آموزش طراحی سایت با HTML و CSS قسمت 1 : مقدمه رایگان
2 آموزش طراحی سایت با HTML و CSS قسمت 2 : Style ها و متن ها رایگان
3 آموزش طراحی سایت با HTML و CSS قسمت 3 : لینک ها و CSS Property رایگان
4 آموزش طراحی سایت با HTML و CSS قسمت 4 : تگ های ساختاری و Selector رایگان
5 آموزش طراحی سایت با HTML و CSS قسمت 5 : Box Model رایگان
6 آموزش طراحی سایت با HTML و CSS قسمت 6 : Flaot ها رایگان
7 آموزش طراحی سایت با HTML و CSS قسمت 7 : Position ها رایگان
8 آموزش طراحی سایت با HTML و CSS قسمت 8 : لیست ، Background و عکس رایگان
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول رایگان
10 آموزش طراحی سایت با HTML و CSS قسمت 10 : کد نویسی اصولی رایگان
11 آموزش طراحی سایت با HTML و CSS قسمت 11 : انیمیشن ها رایگان
12 آموزش طراحی سایت با HTML و CSS قسمت 12 : طراحی واکنشگرا رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره پاییزه می تونی امروز ارزونتر از فردا خرید کنی ....