درخواست های ارتباط
جستجو
لیست دوستان من
صندوق پیام
همه را دیدم
  • در حال دریافت لیست پیام ها
صندوق پیام
رویدادها
همه را دیدم
  • در حال دریافت لیست رویدادها
همه رویدادهای من

طراحی وب سایت با کمک HTML و CSS - بخش پنجم :: Box Model

0 نظرات
147 بازدیدها
سلام به دوستان عزیز itrpo
ما تا الان چهار جلسه را در باب HTML و CSS در کنار هم یاد گرفتیم و یک دید کلی نسبت به آن ها پیدا کردیم و در این جلسه بعد از کمی مباحث تئوری وارد مبحث Box Model خواهیم شد که یکی از اصلی ترین

مباحث HTML و CSS است.

رنگ ها در صفحات وب


ما قبلا با Prtoperty های color و background-color آشنا شدیم . اگر به خاطر بیاورید سه نوع مقدار می توانستیم به آن ها بدهیم. حالا می خواهیم کمی عمیق تر با انواع این رنگ ها آشنا شویم.

نام رنگ

ما می توانستیم نام رنگ مورد نظرمان را به انگلیسی به Property هایی که مقدارشان از نوع رنگ است بدهیم. مانند کد زیر:
background-color:gainsboro;

کد HEX

هر رنگ کد HEX خود را دارد که این کد با " # " شروع می شود و حاوی اعداد و حروف است. مانند کد زیر:
background-color:#f3f3f4;

کد RGB

هر رنگ یک کد RGB دارد که در حقیقت میزان رنگ های اصلی نور یعنی قرمز و سبز و آبی را در آن تعیین می کند.
background-color: rgb(192, 192, 192);
البته در CSS شما می توانید به جای نوشتن rgb بنویسید rgba و یک پارامتر دیگر در انتهای پرانتز بنویسید که از 0 تا1 قبول می کند و میزان شفافیت را نشان می دهد.
برای اطاعات بیشتر در زمینه ی رنگ های rgb می توانید این مطلب را مطالعه کنید. آموزش ساخت منو های شیشه ای با استفاده از رنگ های rgb

HSL

با استفاده از کد HSL نیز می توانیم در CSS به المان ها رنگ بدهیم .
شما می توانید برای به دست آوردن کد رنگ مورد نظرتان (کد rgb یا hex یا hsl) از این وبسایت استفاده کنیم: HSL Picker
--

اندازه ها در صفحات وب


همانطور که در CSS می شود انواع مختلفی از رنگ ها را به عنوان مقدار Property ها استفاده کرد ، در Property هایی که مقدار اندازه می گیرند می توانیم از واحد های مختلفی استفاده کنیم.
  • !! pt این واحد برابر 1.74 اینچ است.
  • !! pc این واحد برابر 12 pt است.
  • !! mm میلیمتر
  • !! cm سانتی متر
  • !! in اینچ
  • !! % این واحد برابر درصدی از عرض تگ مادر است.
  • !! em این واحد برابر اندازه ی به ارث برده شده ی تگ است . (مثلا اگر عرضی 2سانتی متری را از تگ مادر به ارث برده اگر به آن اندازه ی 2em بدهیم 2سانتی متر دو برابر می شود.)
  • !! px پیکسل بیشترین استفاده را در صفحات وب دارد و برابر یک پیکسل از مانیتور موجود است.

خب تا اینجا با نوع های رنگ ها و اندازه ها آشنا شدیم و با توجه به دانشی که قبلا برای آدرس دهی به دست آورده بودیم حالا می توانیم با Property های CSS به راحتی کار کنیم. و البته می توانیم با خیال راحت

مبحث مهم Box Model را شروع کنیم.

Box Model


توی وبسایت های مختلف که می رویم ، تنها با لینک ها و متن ها برخورد نمی کنیم ! این وبسایت ها قسمت های مختلفی دارند مانند قسمت هایی که در جلسه ی قبل با آن ها آشنا شدیم.
همچنین در جلسات قبل با دو نوع display آشنا شدیم که تعیین می کرد که یک تگ به اندازه ی محتوایش عرض صفحه را بگیرد یا کل عرض آن را. حالا می خواهیم کمی به ژرفای این مطالب برویم.
ما میدانیم که هر المان در HTML (تگ) برای خودش یک Display تعیین شده دارد. ما می توانیم با استفاده از CSS این خاصیت را در تگ ها تغیر دهیم.
برای این کار ما می توانیم از Property زیر استفاده کنیم.
display:inline;

inline-block

این یکی دیگر از انواع display است . با این نوع display ما می توانیم از خواص یک المان block استفاده کنیم در عین این که display ما inline است و می توانیم آن ها را کنار هم بچینیم.

من برای شروع Box Model فولدر Project6 را ایجاد و فایل index.html را در آن درست کردم.
همه ی تگ ها مستطیل هستند . Box Model در حقیقت تعیین اندازه ی این المان ها با استفاده از چند خاصیت است.
box model

هر المان دارای خاصیت های زیر است که با Property های CSS قابل تغیر هستند.

Margin

این خاصیت فاصله ی المان را از چهار طرفش تعیین می کند.
margin:10px;

Padding

این خاصیت فاصله ی المان را از محتوایت داخش تعیین می کند . به بیان دیگر این خاصیت یک فاصله از داخل برای المان بوجود می آورد.
padding:10px;

Border

این خاصیت کادری برای تگ (المان) ما تعیین می کند که می تواند رنگ و شکل های مختلف داشته باشد.
border:1px solid red;
ما تا به حال با Property هایی کار کردیم که یک مقدار می گیرند اما تعدادی از آن ها هستند که چند مقدار مختلف را باید برای آن ها تعیین کنیم. (البته می شود با Property های دیگری هر کدام از این مقدار ها را

جدا به المان نسبت داد)
مقدار اول ضخامت کادر ما را تعیین می کند ، مقدار دوم نوع آن را ( مقدار های متفاوتی می گیرد مانند dashed که کادر خط چین برای المان می گذارد) و مقدار سوم رنگ کادر ما خواهد بود.

Width

با استفاده از این خاصیت می توانیم عرض خالص المان مورد نظر را تنظیم کنیم . توجه داشته باشید که Margin و Padding و Border به عرض ما اضافه خواهند شد و عرض نهایی المان جمع همه ی این ها است.
width:200px;

Height

همانطور که از نامش معلوم است ارتفاع المان ما را تعیین می کند . این خاصیت هم مثل width با Margin و Padding و Border جمع خواهد شد تا ارتفاع نهایی المان را بسازد.
width:200px;

ما با خاصیت های Box Model آشنا شدیم و حالا می خوایهم از آن ها استفاده کنیم ولی قبل از آن باید با تگی که قولش را به شما داده بودم آشنا بشیم .

Div

با دقت به سایت itpro نگاه کنید. آیا تمامی بخش های وبسایت در Header و Footer و Section و ... تقسیم بندی می شوند ؟ جواب من خیر است. با نگاهی کلی می توان فهمید که این تگ ها جوابگوی تمامی قسمت

های یک سایت به عنوان Box یا بخش نیستند. قبل از معرفی HTML5 تمامی این ها با تگی ساخته می شد به نام Div اما بعد از معرفی آن تگ های Header و ... جای ان را در بخش های اصلی سایت ها گرفتند اما

هنوز این تگ کاربرد های بسیاری برای طرحان سایت دارد.
با مثالی که خواهیم زد شما هم با کاربرد های تگ Div و هم با کاربرد های Margin ، Padding ، Border ، Width و Height بیشتر آشنا خواهید شد.

داخل index.htnl که درون project 6 قرار دارد ابتدا کد های اولیه ی یک فایل html را می نویسم:
<!DOCTYPE html>
	<html>
	<head>
		<title>ITPRO</title>
		<style>
			body{
				direction:rtl;
			}
		</style>
	</head>
	<body>	
	
	</body>
</html>
حالا می خواهم تگ Div را نوشته و به آن Style دهم.
<!DOCTYPE html>
	<html>
	<head>
		<title>ITPRO</title>
		<style>
			body{
				direction:rtl;
			}
			div#my-div{
				width:100px;
				height:100px;
				margin:10px;
				padding:10px;
				border:5px solid gray;
				background-color:gainsboro;
			}
		</style>
	</head>
	<body>	
		<div id="my-div"></div>
	</body>
</html>
همانطور که در بالا با هم آموخته بودیم به آن Style دادم.
خروجی:
box model

دیدیم که مربعی با عرض و طول 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 پاک می کنم تا به هر سمت جداگانه فاصله بدهم.

width:100px;
height:100px;
padding:10px;
border:5px solid gray;
background-color:gainsboro;
margin-top:200px;
margin-right:500px;
margin-left:20px;
margin-right:20px;

خروجی:
margin

دیدیم که فاصله ها تغیر کردند.
همچنین ما می توانیم این مقدار ها را به صورت جداگانه در همان Property اول یعنی margin تعیین کنیم. برای این کار من به شکل زیر عمل می کنم.
margin:200px 500px 20px 20px;
ما به ترتیب فاصله های بالا - راست - پایین - چپ را با دادن فاصله مشخص می کنیم. یعنی عدد اول Margin بالا و عدد دوم margin راست ، عدد سوم فاصله از پایین و در نهایت فاصله از چپ مشخص شده است.

border-radius Property

این Property در نسخه ی css3 ارایه شد و امکان گرد کردن گوشه های المان ها را به ما می دهد شما با دادن یک مقدار از نوع اندازه میزان گردی المان را مشخص می کنید. من با استفاده از این Property

گوشه های تگ Div را گرد می کنم:
border-radius:20px;
خروجی:
border radius

دیدیم که گوشه های Div ما گرد شد. حالا اگر ما بخواهیم کل Div گرد شود باید مقدار آن را نصف عرض و طول المان قرار دهیم (برای گرد شدن باید عرض و طول المان برابر باشند . در غیر این صورت المان ها

بیضی خواهند شد.)
border-radius:50px;
با توجه به این که طول و عرض تگ ما 100px است من به border-radisu مقدار 50px دادم تا گرد شود. اگر به خاطر بیاورید در واحد هایی که می توانستیم برای اندازه ها استفاده کنیم % نیز بود. حالا من برای

این که اگر زمانی طول یا عرض المان تغیر کرد نیازی به تغیر این Property نباشد مقدار آن را از نوع درصدی می دهم و کد زیر را جای گزین کد بالا می کنم:
border-radius:50%;
حالا خروجی را میبینم:
border radius

دید که تگ ما گرد شد.
در جلسه ی آینده با float ها و position ها آشنا خواهیم شد.

ITPRO باشید.
محمد پارسا صفوی
انجمن تخصصی فناوری اطلاعات ایران - tosinso.com


برچسب ها
ردیف عنوان قیمت
1 طراحی وب سایت با کمک HTML و CSS - بخش اول :: مقدمه رایگان
2 طراحی وب سایت با کمک HTML و CSS - بخش دوم:: Style ها و متن ها رایگان
3 طراحی وب سایت با کمک HTML و CSS - بخش سوم::لینک ها و Css property ها رایگان
4 طراحی وب سایت با کمک HTML و CSS - بخش چهارم :: تگ های ساختاری و CSS Selector های پیشرفته رایگان
5 طراحی وب سایت با کمک HTML و CSS - بخش پنجم :: Box Model رایگان
6 طراحی وب سایت با کمک HTML و CSS - بخش ششم :: Float ها رایگان
7 طراحی وب سایت با کمک HTML و CSS - بخش هفتم :: Position ها رایگان
8 طراحی وب سایت با کمک HTML و CSS - بخش هشتم :: لیست ها ، Background ها و عکس ها رایگان
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول رایگان
10 طراحی وب سایت با کمک HTML و CSS - بخش دهم :: کد نویسی اصولی و Transition ها رایگان
11 طراحی وب سایت با کمک HTML و CSS - بخش یازدهم :: Animation ها رایگان
12 طراحی وب سایت با کمک HTML و CSS - بخش دوازدهم (پایانی) :: طراحی واکنشگرا و IFrame ها رایگان
مطالب مرتبط

در حال دریافت اطلاعات

نظرات
هیچ نظری ارسال نشده است

    برای ارسال نظر ابتدا به سایت وارد شوید

    arrow