آموزش کامل CSS – قسمت 14: دستور display

توسط با بدون دیدگاه آموزش کامل CSS

دستور display در css

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

دستور display نحوه نمایش المان ها را مشخص می کند.

مقدار inline block

همانطور که می‌دانید المان‌های اچ‌تی‌ال غالبا به صورت بلاک و خطی بوده و هر المان یک سطر کامل را اشغال می‌کند. کلمه بلاک در واقع به المان‌هایی مثل <p> یا <div> اطلاق می‌شود. این المان‌ها هیچ چیز دیگری را در کنار خود جای نمی‌دهند. در جلسه قبل ما با استفاده از خاصیت شناور float المان ها در کنار یکدیگر قرار دادیم. امروز با استفاده از display و inline block تمامی المان ها را در یک سطر و کنار یکدیگر قرار می دهیم.

مقدار inline block المان ها را در یک خط کنار هم قرار می دهد. در مثال زیر 4 جعبه شناور را در کنار یکدیگر قرار می دهیم:

<div class="floating-box">جعبه‌های شناور</div>
<div class="floating-box">جعبه‌های شناور</div>
<div class="floating-box">جعبه‌های شناور</div>
<div class="floating-box">جعبه‌های شناور</div>

css code

.floating-box {
    display: inline-block;
    width:  150px;
     height:  75px;
     margin:  10px;
     border:  3px solid #8AC007;
}

خروجی مثال به صورت زیر نمایش داده می شود:

سی اس اس 14

همان طور که مشاهده می کنید بعد از استفاده از دستور inline-block دیو های ما به صورت شناور در کنار هم و در یک سطر قرار گرفتند.

برای تمرین یک لیست بدون نظم unorderd list ایجاد کنید و  کاری کنید که آیتم‌های لیست به جای اینکه زیر هم قرار بگیرند، در کنار هم قرار بگیرند.

راهنمایی: المان‌ لیست یک المان بلاک است و برای تبدیل یک المان بلاک به المانی که در یک خط قرار بگیرد، از دستور خاصی استفاده می‌کردیم.

آموزش کامل CSS – قسمت 13: شناور کردن المان ها

توسط با بدون دیدگاه آموزش کامل CSS

شناور کردن المان ها در css

شناور کردن المان ها یکی از مهمترین امکاناتی است که css در اختیار ما قرار می دهد. در css شما می توانید المان ها را به صورت شناور در آورید، این یعنی این که css به شما کمک می کند که المان ها را به راحتی و بدون دردسر در کنار هم و هر جای صفحه که دوست دارید به کار ببرید.

دستور float

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

 html code:

<div class=”matn”><img src=”آدرس عکس دلخواه“/> در اینجا یک متن دلخواه می نویسیم </div>

css code:

img {

float: right;

margin: 0 0 10px 10px; }

بدین صورت عکس در سمت راست متن شما و در یک سطر قرار می گیرد.

دستور clear

زمانی که شما یک المان را به حالت شناور در می آورید به بقیه المان ها اجازه می دهید که در کنار این المان قرار بگیرند. حال اگر بخواهید که المان های کنار دستی را به خط بعدی بفرستید و هیچ چیز مزاحم کار شما نشود باید از دستور clear یا تخلیه استفاده کنید. هر سمتی که این دستور را بدهید المان های آن سمت به خط بعدی منتقل خواهند شد. همچنین می توانید با مقدار both در این دستور المان های هر دو سمت را تخلیه کنید. به مثال زیر دقت کنید:

html code:

<h2> بدون استفاده از دستور تخلیه </h2>

<div class=”div1″>div1</div>

<div class=”div2″>div2 – در این حالت دیویژن دوم چون دستور تخلیه ندارد بر روی دیویژن اول که در حالت شناور در سمت چپ قرار دارد، قرار می‌گیرد </div>

<h2> با استفاده از دستور تخلیه </h2>

<div class=”div3″>div3</div>

div class=”div4″>div4 –  با استفاده از دستور تخلیه المان‌های شناور در طرف تخلیه شده به خط بعدی هول داده می‌شوند </div>

css code:

.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #8AC007;
}

.div2 {
border: 1px solid red;
}


.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #8AC007;
}

.div4 {
border: 1px solid red;
clear: left;
}

مثال را انجام دهید و نتیجه آن را مشاهده کنید. خواهید دید که div1 در div2 و div3 بالای div4 سمت چپ قرار می گیرد.

آموزش کامل CSS – قسمت 12: موقعیت المان ها 2

توسط با بدون دیدگاه آموزش کامل CSS

همان طوری در جلسه قبل آموزش گفتیم position چهار حالت دارد که با دو حالت آن آشنا شدیم.

المان ها فیکس شده

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

برای استفاده از این حالت خاصیت fixed را در مقابل position قرار می دهیم و سپس مقادیر راست، چپ، بالا و پایین را مشخص می کنیم. از این حالت می توانیم برای تبلیغات، چت آنلاین و موارد دیگر استفاده کنیم.

<div class=fixed”> <p>المان فیکس شده</p> </div>

div.fixed {
    position: fixed;
    bottom:  0;
     right:  0;
     width:  300px;
     border:  3px solid #8AC007;
}

حالت بعدی absolute نام دارد

موقعیت قطعی زمانی است که شما می‌گویید این المان باید در این نقطه قرار بگیرد. در این حالت المان شما نسبت به المان مادر خود که موقعیت relative دارد، موقعیتش را تنظیم می‌کند. اگر هیچ المان مادری با موقعیت relative وجود نداشته باشد، این المان خود را نسبت به body یا همان کل صفحه تنظیم می‌کند.

برای استفاده از این حالت یک المان مادر ایجاد می‌کنیم که دارای موقعیت relative باشد. بدین ترتیب المان ما می‌تواند نسبت به این المان فاصله‌‌ای دلخواه بگیرد. سپس یک المان دیگر ایجاد می‌کنیم که موقعیتش به صورت absolute باشد. این المان موقعیت خود را از سمت راست، چپ، بالا یا پایین بر اساس المانی که دارای موقعیت relative بود تنظیم می‌کند.

<div class=”relative”> <p>المان مادر که دارای موقعیت رلتیو است</p>

<div class=”absolute”> <p>المان ابسولوت که موقعیتش بر اساس موقعیت المان مادر تنظیم می‌شود </p>

</div> </div>

div.relative {
    position: relative;
    width:  400px;
     height:  200px;
     border:  3px solid #8AC007;
} 

div.absolute  {
    position:  absolute;
     top:  80px;
     right:  0;
     width:  200px;
     height:  100px;
     border: 3px solid #8AC007;
}

آموزش کامل CSS – قسمت یازدهم: موقعیت المان ها

توسط با بدون دیدگاه آموزش کامل CSS

در این قسمت از آموزش css با امکان جابجا کردن المان ها در صفحات وب به وسیله css آشنا می شویم. این کار را به کمک دستور position انجام می دهیم.

دستور position

همان طوری که از نام آن پیداست این دستور موقعیت المان ها را مشخص می کند. دستور position چهار حالت مختلف دارد.

اولین حالت، موقعیت static است که در واقع همان حالت پیش فرض این دستور است و تاثیری در موقعیت المان ندارد.

حالت دوم relative است. در این حالت 4 مقدار right , left , top و bottom را می توانیم برای آن مشخص کنیم.

html code:

<div class=”default”>متن المان اول</div>
<div class=”relative”>متن المان دوم</div>

css code:

.default {

position: static;

} .relative {

position: relative;

top: -20px;

left: 20px;

background-color: white;

width: 500px;

}

همان طور که در مثال فوق مشاهده می کنید ما به div اول موقعیت پیش فرض داده ایم.

معنی عدد منفی در موقعیت

در حالت عادی زمانی که شما مثلا ۲۰ پیکسل را بروی فاصله از بالا بنویسید، سی‌اس‌اس‌ از بالاترین نقطه، ۲۰ پیکسل پایین می‌آید تا بین بالاترین سطح و المان شما ۲۰ پیکسل فاصله باشد. اما زمانی که شما به جای ۲۰ عدد ۲۰- را بنویسید، سی اس اس المان شما را در جهت خلاف بالا می‌برد؛ یعنی به جای حرکت به سمت پایین به اندازه‌ی ۲۰ پیکسل به بالا حرکت می‌کند.

حالت های سوم و چهارم را در جلسه بعدی خواهیم گفت.

آموزش کامل CSS – قسمت دهم: عرض حداکثر در المان ها

توسط با بدون دیدگاه آموزش کامل CSS

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

مثال زیر یک المان div را با عرض ثابت و غیر ریسپانسیو نشان می دهد:

 div.ex1 {
    width: 500px;
    margin:  auto;
    border:  3px solid #8AC007;
}

اگر عرض مرورگر کمتر از 500 پیکسل باشد صفحه اسکرول می خورد. برای رفع این مشکل باید از خاصیت max-width استفاده شود.با استفاده از این خاصیت در صورتی که عرض مرورگر کمتر از المان باشد عرض المان به صورت خودکار تغییر می کند تا دیگر صفحه اسکرول نخورد. این دستور همچنین باعث می شود که عرض المان شما محدود به حداکثر شود و نتوانید عرض بیشتری به آن بدهید. حال در مثال فوق به جای ;width:500px دستور زیر را قرار دهید.

max-width:500px;

آموزش کامل CSS – قسمت نهم: فاصله های داخلی

توسط با بدون دیدگاه آموزش کامل CSS

در قسمت قبلی با فاصله بین دو المان در css آشنا شدیم که به آن margin گفته می شد. در این جلسه در مورد فاصله های داخلی المان ها صحبت خواهیم کرد که به آن padding گفته می شود.

خاصیت padding در css

فرض کنید یک div رنگی دارید که نوشته ای در آن گذاشته اید. فاصله ای که بین نوشته و div قرار دارد همان padding یا فاصله از داخل می باشد. پدینگ در واقع فاصله بین border المان تا محتوای داخلی آن است که در قسمت هفتم آموزش به صورت تصویری آن را نشان دادیم.

این فاصله می تواند از هر 4 جهت راست، چپ، بالا و پایین اعمال شود. در مقابل padding فاصله مورد نظر را برحسب پیکسل می نویسیم. نمونه نوشتن پدینگ به این صورت می باشد ;padding:10px

در نوشتن padding چند حالت پیش می آید:

حالت اول:

در واقع همان حالتی است که در نمونه فوق نوشتیم. در این حالت فاصله به اندازه مساوی از هر 4 جهت اعمال می شود. مثلا فاصله از داخل المان از هر 4 جهت 10 پیکسل است. در مثال زیر ما به المان box که دور تا دور پاراگراف قرار گرفته فاصله 10 پیکسلی داده ایم.

// -- html code: --

<div class="box"> 

<p  class=" element">متن</p>

</div>

// -- css code: --

p.element {

color: red;

}

div.box {

padding: 10px;

background-color: orange;

}

حالت دوم:

اگر بخواهیم فاصله ها از هر طرف عدد متفاوتی باشد از این روش می توانیم استفاده کنیم به مثال زیر توجه کنید که در آن فاصله از هر طرف را جداگانه تعریف کرده ایم.

p.element {

color: red;

}

div.box {

padding-top: 20px;

padding-right: 30px;

padding-bottom: 20px;

padding-left: 10px;

background-color: orange;

}

لازم به ذکر است که شما می توانید تنها در یک جهت فاصله بدهید و لازم نیست که تمامی فاصله ها را ذکر کنید. می توانید فاصله را فقط در جهتی که می خواهید بنویسید.

حالت سوم:

شاید نوشتن هر 4 دستور برای برنامه های بزرگتر کاری خسته کننده باشد. بنابراین می توانید به صورت خلاصه تر هر 4 جهت فاصله را در یک خط بنویسید. در این حالت فاصله ها به ترتیب و از سمت چپ به راست بدین صورت می باشند: بالا ، راست ، پایین ، چپ.

p {
    padding: 25px 50px 20px 50px;
}

در این حالت اگر هر کدام از اعداد را ننویسید صفر در نظر گرفته می شود.

آموزش کامل CSS – قسمت هشتم: فاصله بین المان ها

توسط با یک دیدگاه آموزش کامل CSS

همان طور که در قسمت های قبلی آموزش css گفتیم المان های html دارای فاصله ای نامرئی از یکدیگر هستند. این فاصله ها از طریق مارجین اندازه گیری و استفاده می شوند.

مارجین

فرض کنید دو المان داریم که می خواهیم فاصله بین آن ها باشد، در این مواقع از مارجین یا فاصله استفاده می کنیم.

تعریف مارجین: فاصله ای است بین بیرونی ترین سطح هر المان با خارجی ترین سطح المان دیگر.

نحوه اضافه کردن مارجین به المان ها

هر المان می تواند در هر چهار جهت دارای یک فاصله مشخص باشد. اگر بخواهید دور تا دور یک المان از چهار طرف فاصله یکسانی داشته باشد تنها کافی است کلمه margin را نوشته و روبروی آن عدد مورد نظر را بر حسب پیکسل بنویسید.

مثال زیر مارجین از 4 طرف برای یک پاراگراف را مشخص می کند:

p {

margin-top: 100px;

margin-right: 50px;

margin-bottom: 120px;

margin-left: 70px;

}

یک میانبر ساده

کد زیر معادل مثال فوق است:

p {

margin: 100px 50px 120px 70px;

}

اعداد به ترتیب فاصله از بالا، راست، پایین و چپ هستند. همچنین اگر یکی از اعداد را ننویسیم به صورت پیش فرض صفر در نظر گرفته می شود.

نکته: مارجین را می توانیم به تمام المان های html اعمال کنیم.

به عنوان تمرین دو متن و دو جعبه‌ی مستطیلی ایجاد کنید و بین دو جعبه فاصله ۱۰۰ پیکسلی و بین متن‌ها فاصله ۲۰۰ پیکسلی بگذارید.

آموزش کامل CSS – قسمت اول: آشنایی و روش استفاده

توسط با بدون دیدگاه آموزش کامل CSS

مقدمه

در ابتدا باید بگوییم کسانی که با html هیچ آشنایی ندارند باید ابتدا آشنایی مقدماتی با این زبان داشته باشید، برای این منظور به بخش آموزش کامل html مراجعه کنید.

سی اس اس در کنار اچ تی ام ال هسته فناوری ساخت صفحات وب است. سی‌اس‌اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است. در حال حاضر بیشترین استفاده از این زبان برای استایل دادن به صفحات وب است.

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

ما در اولین قسمت تنها نحوه اضافه کردن سی‌اس‌اس به صفحه را آموزش می‌دهیم. پس نگران برخی دستورات به کار رفته در نمونه‌ها را  که نمی‌دانید نباشید. ما در قسمت های بعدی به طور کامل در رابطه با آن‌ها صحبت خواهیم کرد. در کد های زیر کد css را با رنگی دیگر می نویسیم.

روش های استفاده از css در صفحات html

روش اول به صورت خطی

در این روش از مشخصه های css در تگ های html استفاده می کنیم. این روش به دلیل استفاده مستقیم و در هم کدها فقط برای تغییرات کوچک و در حد یک المان مناسب است تا موجب شلوغی بیش ازحد صفحات نشود. به این نوع سی اس اس اصطلاحا inline گفته می شود.

مثال:‌  <p style="color: red;"> متن با رنگ قرمز </p>

در کل بهتر است برای جلوگیری از شلوغی صفحه و کدها و همچنین افزایش سرعت از این نوع استایل دادن خوداری کنیم.

روش دوم به صورت داخلی

در این روش از تگ <style> در تگ <head> استفاده می کنیم، این نوع سی اس اس را internal یا داخلی می گویند. در این روش استایل های ما تنها در همان صفحه خوانده می شوند و در صفحات دیگر قابل دسترسی نیست.

<head>
<style>
body{
background-color: blue;
}

h1{
color: red;
margin-left: 40px;
}
</style>
</head>

 قسمت رنگی یک کد سی اس اس است.

روش سوم به صورت یک فایل خارج صفحه

بهترین روش استفاده از سی اس اس است که پیشنهاد می کنیم از این روش استفاده کنید. برای ایجاد یک فایل مجزای css در ادیتور خود یک فایل جدید ایجاد کرده و آن را با پسوند css. ذخیره کنید. حالا صفحه اچ تی ام الی باز کنید و در تگ هد آن کد زیر را اضافه کرده و آدرس فایل سی اس اس را در آن وارد کنید.

<head>

<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

</head>

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