جلسه چهاردهمcss - دستور display و مقادیر آن

دستور inline block چه کاربردی دارد؟

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

نام: display

این دستور چه کاری انجام می‌دهد؟‌ نحوه‌ی نمایش المان‌های شما رامشخص می‌کند. ما در این دوره فقط با مقدار  inline-block کار داریم که المان‌های اچ تی ام ال در یک خط و در کنار هم می‌آورد. 

چه چیزهایی را در مقابلش بنویسیم؟ در این آموزش فقط با مقادیر خطی کردن یعنی inline-block کار داریم. 

نمونه‌ی نوشتن این دستور: display: inline-block

HTML

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

CSS

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

 

جعبه‌های شناور

 

جعبه‌های شناور

 

جعبه‌های شناور

 

جعبه‌های شناور

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

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

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

جلسه سیزدهمcss - شناوری المان‌ها

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

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

HTML

<div class="matn"><img src="http://zoomit.ir/ax.png" />اینجا یک متن نمونه قرار می‌گیرد. فرض کنید می‌خواهید در کنار متن نمونه‌ی خود یک عکس قرار بدهید. برای اینکه عکس و متن و به طور کلی دو المان در یک خط قرار بگیرند باید از قابلیت شناوری یا همان float استفاده کرد. </p>

CSS

 

img {
    float: right;
    margin:  0 0 10px 10px;
}

اینجا یک متن نمونه قرار می‌گیرد. فرض کنید می‌خواهید در کنار متن نمونه خود یک عکس قرار بدهید. برای اینکه عکس و متن و به طور کلی دو المان در یک خط قرار بگیرند باید از قابلیت شناوری یا همان float استفاده کرد.

دستور تخلیه: clear

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

div {
    clear: left;
}

به مثال زیر دقت کنید:

HTML

<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

.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 - تعیین موقعیت المان با دستور fixed و absolute

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

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

نام: position: fixed

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

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

نمونه نوشتن این دستور: Position: fixed و سپس مقدار فاصله از راست، چپ، بالا و  پایین 

در این حالت المان اچ تی ام ال شما به صورت ثابت در جای خود می‌ایستد و به هیچ قیمتی تکان نمی‌خورد!‌حتی اگر صفحه را اسکرول هم کنید این المان حرکت نمی‌کند و محو نمی‌شود. از این المان برای مواقعی که طراح قصد دارد یک تکه از صفحه را در هر قسمتی از صفحه در اختیار کاربران قرار دهد (مثل تبلیغات گوشه‌ی صفحه یا صفحه‌ی چت آنلاین پشتیبانی) استفاده می‌شود. ما در این قسمت هم یک المان فیکس شده در گوشه سمت راست صفحه قرار داده‌ایم که با قاب سبز رنگ مشاهده می‌کنید. 

 

HTML

<div class=fixed"> <p>یک المان فیکس شده در صفحه که تحت هیچ شرایطی تغییر مکان نمی‌دهد</p> </div>

CSS

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

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

position: absolute

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

نام: position: absolute

این دستور چه کاری انجام می‌دهد؟‌ نحوه و محل قرارگیری المان های شما رامشخص می‌کند. ما در این قسمت با موقعیت قطعی شده کار داریم.

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

نمونه نوشتن این دستور: Position: absolute و سپس مقدار فاصله از راست، چپ، بالا و  پایین 

HTML

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

CSS

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;
}

المان مادر که دارای موقعیت ریلیتیو است

المان ابسولوت که موقعیتش بر اساس موقعیت المان مادر تنظیم می‌شود

  

در این مثال همانطور که می‌بینید ما اول یک المان مادر ایجاد کرده‌ایم که موقعیت relative دارد. بدین ترتیب این المان می‌تواند در دل خودش المان دیگری را داشته باشد که موقعیتش به موقعیت این المان وابسته باشد. سپس ما این المان را با موقعیت absolute ایجاد کرده‌ایم و به المان خود گفته‌ایم که از سمت بالای المان مادر( دارای موقعیت relative) به میزان ۸۰ پیکسل و از سمت راست این المان نیز فاصله نداشته باشد. بدین ترتیب المان شما به سمت راست المان مادر و با فاصله ۸۰ پیکسلی از بالای آن می‌چسبد. 

جلسه یازدهم css- تعیین موقعیت درCSS

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

موقعیت استاتیک:

• نام: position
• این دستور چه کاری انجام می‌دهد؟‌ موقعیت المان‌ها در صفحه را مشخص می‌کند. این حالت هیچ ویژگی خاصی ندارد و حالت پیش‌فرض محسوب می‌شود و صرفا جهت آشنایی شما آورده شده است. 
• چه چیزهایی را در مقابلش بنویسیم؟ در این قسمت ما با موقعیت static سر و کار داریم. 
• نمونه نوشتن این دستور: position: static

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

HTML

<div class="static">

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

</div>

CSS

div.static {
    position: static;
    border:  3px solid #8AC007;
}

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

 

در این مثال ما اگر top، bottom یا right و left بدهیم تاثیری نخواهد داشت؛ چون المان ما حالت استاتیک دارد. 

موقعیت relative:

فرض کنید شما بخواهید المان خود را به مکان معین‌تری ببرید. مثلا بگویید که از سمت چپ صفحه ۲۰ پیکسل فاصله داشته باش! در این حالت می‌توانید از دستور relative برای تعیین position المان استفاده کرده و فاصله‌هایی که مد نظر دارید را برای المان مشخص کنید. مثلا شما می‌توانید به المانتان بگویید چقدر به سمت چپ یا راست یا بالا یا پایین برود. 

 

• نام: position
• این دستور چه کاری انجام می‌دهد؟‌ موقعیت المان‌ها در صفحه را مشخص می‌کند. شما بدین ترتیب می‌توانید المان خود را نسبت به قسمت‌های مختلف فاصله بیندازید و در جای دلخواه قرار دهید.
• چه چیزهایی را در مقابلش بنویسیم؟ در این قسمت ما با موقعیت relative سر و کار داریم. 
• نمونه نوشتن این دستور: position: relative

 

برای این کار در قدم اول کلمه position را می‌نویسیم و روبروی آن از ویژگی relative استفاده می‌کنیم. بدین ترتیب سی‌اس‌اس می‌فهمد که باید المان ما موقعیت بخصوصی داشته باشد.

قدم دوم: در خط بعدی فاصله‌ها را وارد می‌کنیم. چهار مقدار می‌توانیم وارد کنیم؛ فاصله از بالا (top)، فاصله از پایین(bottom)، فاصله از راست(right)، فاصله از چپ (left). برای مثال زمانی که ما در روبروی فاصله از بالا عدد ۲۰ پیکسل بنویسیم، المان ما از بالای صفحه به مقدار ۲۰ پیکسل به سمت پایین هول داده می‌شود. 

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

HTML

 <div class="relativ1">یک المان ریلیتیو که موقعیت خاصی برای آن مشخص نشده است.</div>
  <div class="relativ2">المان ریلیتیو دیگر که موقعیت مخصوص دارد.</div>

CSS

.relative1 {

position: relative;

} .relative2 {

position: relative;

top: -20px;

left: 20px;

background-color: white;

width: 500px;

}

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

المان ریلیتیو دیگر که موقعیت مخصوص دارد.

 

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

اما در div سبز رنگ که با کلاسrelative 2 نوشته شده است ما به المان خود گفته‌ایم که موقعیت جدیدی بگیرد که در آن از سمت چپ ۲۰ پیکسل فاصله داشته باشد و از سمت بالا نیز منهای ۲۰ پیکسل! در این حالت المان شما به جای اینکه از بالا فاصله بگیرد و به سمت پایین هول داده شود، بر عکس عمل می‌کند. اگر هنوز با قضیه منفی وارد کردن مشکل دارید بخش پایین مخصوص شماست.

وارد کردن عدد منفی در هنگام وارد کردن موقعیت در CSS: 

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

جلسه دهمcss - عرض و عرض حداکثر در المان‌ها

یکی از موضوعاتی که در اچ‌تی‌ام‌ال یاد گرفته‌ایم استفاده از عرض و طول برای المان‌های دارای اندازه همچون div است. در واقع شما می‌توانید برای عکس‌ها یا دیویژن‌های خود اندازه تعیین کنید. برای مثال:

HTML

المان غیر ریسپانسیو که با تغییر ابعاد مرورگر تغییر نمی کند

CSS

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

المان غیر ریسپانسیو که با تغییر ابعاد مرورگر تغییر نمی کند

چون عرض المان شما بیشتر از ۵۰۰ پیکسل است و عرض مرورگر شما کمتر از ۵۰۰ پیکسل است، مشکلی که پیش می‌آید این است که صفحه‌ی شما اسکرول خواهد شد. پنجره‌ی مرورگر خود را کوچک کنید تا بهتر این موضوع را مشاهده کنید.

برای رفع این مشکل باید از خاصیت max-width در سی‌اس‌اس استفاده کرد. به کمک این دستور، زمانی که صفحه‌ی مرورگر شما در اندازه‌ای کمتر از اندازه‌ی المانتان باشد به صورت خودکار المان شما را تغییر عرض می‌دهد تا دیگر صفحه اسکرول نشود. برای مثال زمانی که اندازه‌ی مرورگر کمتر از ۵۰۰ پیکسل است، عرض المان شما را به مقداری کمتر از ۵۰۰ پیکسل تبدیل می‌کند تا دیگر صفحه اسکرول نشود. این موضوع خصوصا در طراحی صفحات موبایل کاربرد دارد. این دستور همچنین باعث می‌شود که عرض المان شما محدود به عرض حداکثر شود و بیشتر از آن نتوانید بدان عرض بدهید. 

HTML

المان ریسپانسیو که با تغییر ابعاد مرورگر تغییر میکند

CSS

div.ex2 {
    max-width: 500px;
     border:  3px solid #8AC007;
}

جلسه نهمpadding-css

فرض کنید یک دیویژن رنگی دارید که در آن یک پاراگراف گذاشته‌اید! فاصله‌ای که بین پاراگراف (المان فرزند) و پدرش (المان دیویژین)‌ قرار می‌گیرد توسط padding مشخص می‌شود. در واقع از بردار المان تا محتوای داخلی آن فضای خالی وجود دارد که از آن به عنوان padding یاد می‌شود.

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

مثلا در زیر ما یک المان div داریم که پدر المان p و المان div دیگر (با آی دی pesar-1) است. بدین ترتیب المان p و div فرزندان المان div اول محسوب می‌شوند.

 <div id="1">

      <div id="pesar-1-"> <!-- این المان پسر المان ۱ و پدر متن پایینی است-->

       <p id="nave-1">این المان نوه دیویژن اول و پسر المان pesar-1   است.</p>

  </div>

</div>

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

نام: padding

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

چه چیزهایی را در مقابلش بنویسیم؟ در مقابل پدینگ فاصله مورد نظر را بر حسب پیکسل یادداشت می‌کنیم. 

نمونه‌ی نوشتن این دستور: padding : 100px یا padding-right یا padding-left یا padding-top یا padding-bottom 

ایجاد فاصله بین حاشیه المان و المان‌های داخلش کار سختی نیست؛ ولی چند مورد مخصوص دارد که در اینجا برایتان شرح داده‌ایم تا راحت‌تر از آن استفاده کنید.

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

همانطور که در مثال زیر می‌بینید ما به المان box که دور تا دور المان پاراگراف قرار گرفته است پدینگ ۱۰۰ پیکسلی داده‌ایم. چون کلمه پدینگ را به تنهایی و به اصطلاح خودمانی،ِ خشک و خالی نوشته‌ایم: این فاصله به صورت مساوی بین حاشیه‌ی هر چهار وجه داخلی box اعمال می‌شود. 

HTML

<div class="box"> 

<p  class=" element">  پدینگ باعث فاصله بین المان پدر و پسر می‌شود.</p>

</div>

CSS

p.element {

color: red;

}

div.box {

padding: 100px;

background-color: orange;

}

پدینگ باعث فاصله بین المان پدر و پسر می‌شود

 

حالت دوم: شاید بخواهیم سمت چپ را فاصله بیشتری بدهیم! شاید هم سمت راست را یا شاید بالا یا پایین! در این حالت سی اس اس این امکان را در اختیارمان می‌گذارد که به هر جهت از المان یک پدینگ بدهیم. مثلا به سمت چپ پدینگ ۱۰ پیکسلی، به راست ۳۰ پیکسل و به بالا و پایین هم ۲۰ پیکسل! 

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

HTML

<div class="box"> 

<p  class=" element">  پدینگ باعث فاصله بین المان پدر و پسر می‌شود.</p>

</div>

CSS

p.element {

color: red;

}

div.box {

padding-top: 20px;

padding-right: 30px;

padding-bottom: 20px;

padding-left: 10px;

background-color: orange;

}

پدینگ باعث فاصله بین المان پدر و پسر می‌شود

 

البته لازم به ذکر است که شما می‌توانید تنها در یکی از جهت‌ها پدینگ بدهید و مجبور نیستید که همیشه تمامی این مقادیر را بنویسید. 

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

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

نکته: اگر هر یک از فاصله‌ها را ننویسید یا عدد صفر بنویسید، پدینگ در آن ناحیه صفرخواهد بود.

جلسه هشتمcss - مارجین (margin)

مارجین:

فرض کنید که دو المان در صفحه دارید که می‌خواهید فاصله ۵۰ پیکسلی بین آن‌ها بیندازید. مثلا دو div با ابعاد طول و عرض ۱۰۰  در ۱۰۰ پیکسل داریم که می خواهیم از هم فاصله ۵۰ پیکسلی داشته باشند.  در این جور مواقع است که مارجین به کمک می‌آید. مارجین در واقع فاصله بین دو المان است.

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

نحوه‌ی اضافه کردن مارجین حول و حوش یک المان:

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

 

• نام: margin
• این ویژگی چه کاری انجام می‌دهد؟‌  با کمک این ویژگی می‌توانید بین المان‌های اچ تی ام ال فاصله ایجاد کنید. 
• چه چیزهایی را در مقابلش بنویسیم؟  فاصله بر حسب px.
• نمونه نوشتن این دستور: margin:20px 

 

در مثال زیر ما ابتدا حالت بدون مارجین را برای دو المان بررسی ٰکرده‌ایم. همانطور که می‌بینید در حالت بدون مارجین المان‌ها به هم چسبیده‌اند و از اطراف نیز در یک فاصله‌ی مشخص و مساوی قرار دارند.

HTML

<div class="red"> </div>

<div class="blue"></div> 

CSS

.red {
 margin: 0px;

bacground-color: red;

width:30px;

height:30px;

}

.blue{
  margin: 0px;

bacground-color: blue;

width:30px;

height:30px;
}

آبی و قرمز -المان‌های بدون مارجین

 

 

 

حالا برای درک بهتر مارجین به مثال زیر نگاه کنید. در این حالت به المان قرمز ما یک مارجین ۵۰ پیکسلی داده‌ایم.

HTML

<div class="red"> </div>

<div class="blue"></div> 

CSS

.red {
    margin: 50px;bacground-color: red;

width:30px;

height:30px;

}

.blue{
  margin: 0px;

bacground-color: blue;

width:30px;

height:30px;
}

آبی و قرمز - المان قرمز دارای مارجین است

 

 

 

همانطور که مشاهده می‌کنید، در این حالت المان قرمز که ۵۰ پیکسل مارجین دارد از هر چهار طرف به اندازه ۵۰ پیکسل فاصله گرفته است و بدین ترتیب از المان آبی نیز به اندازه ۵۰ پیکسل فاصله گرفته است.

حالت دوم: اگر روزی روزگاری بخواهید سمت چپ یک المان را با فاصله ۵۰ پیکسلی از المان‌های مجاور قرار دهید و سمت راست را  ۱۰۰ پیکسل از المان‌های دور و بری فاصله دهید،‌ آن وقت باید چه کار کرد؟ برای این کار می‌توانید مارجین را در جهت‌های چپ راست بالا و پایین به صورت جداگانه و با مقادیر مختلف اعمال کنید. بدین ترتیب المان شما از جهت‌های مختلف به مقدارهای دلخواه فاصله می‌گیرد. البته اجباری برای ایجاد فاصله از هر چهار طرف نیست و شما می‌توانید تنها در یک جهت به المان‌هایتان فاصله بدهید. مثال زیر را نگاه بیندازید تا بهتر متوجه منظورمان شوید. 

HTML

<div >

<p class="withMargin">المان دارای مارجین‌های مختلف در جهات مختلف است</p>

</div> 

<div>

   <p>المان بدون مارجین است</p>

</div>

 

CSS

div {

width: 150px; 

height: 150px;

border: 1px solid black;

margin-bottom: 40px;

}

withMargin  {
    margin-top: 30px;
    margin-bottom: 40px;
    margin-right: 20px;
    margin-left: 50px;
}

المان دارای مارجین‌های مختلف در جهات مختلف است

المان بدون مارجین در جهات مختلف است

 

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

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

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

p {
    margin: 100px 50px 10px 20px;
} 

که مساوی همان مدل نوشتن قبلی است با این تفاوت که به صورت خلاصه نوشته شده است:

p {
    margin -top: 100px;

   margin -right:50px;

  margin-bottom:10px;

  margin-left: 20px;
}

نکته: مارجین را می‌توانید به تمامی المان‌های اچ تی‌ ام ال اعمال کنید. 

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

جلسه هفتمcss - جعبه‌ها و قاب‌ها

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

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

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

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

HTML

<p>در مثال زیر ما یک مستطیل داریم که چون قاب دور  آن به صورت پیش‌فرض نامرئی است نمی‌توانیم آن را مشاهده کنیم</p>

<div class="shape1"> <p>متنی که دور آن یک قاب ۵ پیکسلی کشیده‌ایم </p> </div>

<p>در مثال زیر ما یک مستطیل داریم که در سی‌اس‌اس قاب اطراف آن را با اندازه ۲ پیکسل مرئی کرده‌ایم </p>

<div class="shape2"> <p>متنی که دارای یک قاب ۲ پیکسلی است</p> </div>

 

CSS

shape1 {
    border-style: solid;
    border-width:  5px;
}

shape2  {
     border-style:  solid;
     border-width:  2px;
}

 

متن بدون قاب

با قاب ۵ پیکسلی

در مثال زیر ما یک مستطیل داریم که در سی‌اس‌اس قاب اطراف آن را با اندازه ۲ پیکسل مرئی کرده‌ایم

با قاب دو پیکسلی

 

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

نام :‌ 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:  #98bf21

    width:  200px;

   height: 300px;
}

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

 

همچنین سی‌اس‌اس به شما این امکان را می‌دهد که برای هر سمت قاب، یک استایل تعیین کنید. برای این کار از دستور زیر استفاده می‌کنیم:

HTML

<p> متنی که هر طرف آن قاب جداگانه دارد</p>

CSS

p {
    border-top-style: dotted;
    border-right-style:  solid;
     border-bottom-style:  dotted;
     border-left-style:  solid;
}

 

متنی که هر طرف آن قاب جداگانه دارد

سوال: شاید برای شما هم این سوال پیش آمده باشد که چرا دور تا دور یک متن تا انتهای خط قاب کشیده می‌شود! اگر خاطر داشته باشید قبلا گفتیم که المان p جز المان‌های بلاک محسوب می‌شود. یعنی این المان از ابتدای سطر تا انتهای سطر کشیده می‌شود.

نکته: شاید برای شما نوشتن این دستورات به صورت جداگانه کار وقت‌گیری باشد! برای همین در سی‌اس‌اس می‌توانید تمامی دستورات را در یک دستور خلاصه کنید. در واقع تنها کافیست شما یک بار کلمه border را بنویسید و سپس تمامی دستورات را به ترتیب وارد کنید: دستور اول: ضخامت بردار، دستور دوم نوع قاب، دستور سوم رنگ قاب! در زیر مثال کامل این روش آمده است. 

نکته: همچنین شما می‌توانید قاب‌های سمت راست،چپ، بالا و پایین را نیز به همین شکل خلاصه بنویسید.

HTML

<div> قاب دور این المان به صورت خلاصه نوشته شده است</div>

CSS

div {
    border: 5px solid red;
}

 

 

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

 

جلسه ششمcss - تغییرات فونت در CSS

تغییر فونت‌ها در CSS:

در قدم اول به هر یک از سه روشی که دوست داریم و مناسب‌تر به نظر می‌رسد المان مورد نظر را انتخاب می‌کنیم. مثلا ما در این مثال می‌خواهیم المان‌های پاراگراف دارای کلاس text را با اندازه فونت بزرگ نشان دهیم. برای این کار مرحله‌ی زیر را طی می‌کنیم.

• نام:‌ font-size
• این ویژگی چه کاری انجام می‌دهد؟‌  تغییر اندازه فونت
• چه چیزهایی را در مقابلش بنویسیم؟  اندازه فونت بر اساس پیکسل یا em
• نمونه نوشتن این دستور: font-size: 14px

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

.p {

کروشه را باز و بسته  می‌کنیم و برای ایجاد فضای مناسب یک اینتر وارد می‌کنیم. 

.p {

در مرحله‌ی بعد تغییرات مورد نظر را در بین کروشه می‌نویسیم. در اینجا ما قصد داریم تا اندازه‌ی پاراگراف را تغییر دهیم؛ پس از دستور :font-size استفاده کرده‌ایم. در اینجا باید مقدار فونت دلخواه را بر حسب پیکسل بیان کنیم. مثلا اینجا فونت ما ۱۴px است که اندازه‌ی متوسطی است. با آزمون و خطا می‌توانید مقدار اندازه‌ی فونت دلخواهتان را پیدا کنید. 

HTML

<p class="text"> این متن با فونت اندازه ۱۴ پیکسل است</p>

 

CSS

.text {
    font-size: 14px;
}

این متن با فونت اندازه۱۴ پیکسل است.

تغییر نوع فونت:

• نام: font-family
• این ویژگی چه کاری انجام می‌دهد؟‌ تغییر نوع فونت
• چه چیزهایی را در مقابلش بنویسیم؟  نام فونت‌ دلخواه
• نمونه نوشتن این ویژگی: font-family: tahoma

برای تغییر نوع فونت نیز در مرحله‌ی اول، المان مورد نظر را انتخاب می‌کنیم. سپس در بین کروشه دستور font-family را می‌نویسیم و در جلوی آن نام فونتی که قصد انتخاب آن را به عنوان فونت المان داریم انتخاب می‌کنیم. مثال زیر این کار را نشان می‌دهد. 

HTML

<p> این متن با فونت تاهما نوشته می‌شود</p>

CSS

p {
    font-family: "Times New Roman", Times, serif;
}

این متن با فونت تاهما نوشته می‌شود

نکته: می‌توانیم چندین فونت را در جلوی font-family بنویسیم. بدین ترتیب در صورتی که اولین فونت‌ها در سیستم موجود نباشد، فونت بعدی استفاده خواهد شد. 

حالت فونت:

برای تغییر استایل فونت نیز از دستور font-style استفاده می‌شود. این دستور در واقع فونت شما را به حالت italic، oblique و یا معمولی در می‌آورد. 

• نام: font-style
• این ویژگی چه کاری انجام می‌دهد؟‌ تغییر حالت فونت
• چه چیزهایی را در مقابلش بنویسیم؟ حالت مورد نظر مثل ایتالیک 
• نمونه نوشتن این ویژگی: font-style: normal|italic|oblique;

HTML

<p class= "normal">متن با حالت معمولی و پیش فرض </p>

<p class="italic"> متن با حالت ایتالیک </p>

CSS

p.normal {
    font-style: normal;
}

p.italic {
    font-style:  italic;
}

متن با حالت معمولی و پیش فرض

متن با حالت ایتالیک

جلسه پنجمcss - تغییر استایل متون HTML

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

 رنگ متن:

• نام :‌ color
• این ویژگی چه کاری انجام می‌دهد؟‌  رنگ متن‌ها را تغییر می‌دهد!
• چه چیزهایی را در مقابلش بنویسیم؟  انواع رنگ‌ها را !
• نمونه نوشتن این ویژگی: color: red   یا  color: #44444   یا   ("2,color: rgb("2,2,2

یادآوری از گذشته: شما می‌توانید با انتخاب هر المان، رنگ متن درون آن را تغییر دهید. در واقع این کار یکی از سریع‌ترین روش‌ها برای تغییرات کلی در صفحه است. مثلا با انتخاب المان body تمامی متن‌های موجود در صفحه شما به استایل داده شده در می‌آید. مثال‌های زیر را نگاه کنید. 

HTML

<h2>عنوان با رنگ نارنجی نوشته می‌شود</h2>

<p>متن با رنگ طوسی نوشته می‌شود.</p>

CSS

h1 {
    color:  orange;
}

p  {
     color:  gray;
}

 

عنوان با رنگ نارنجی نوشته می‌شود

متن با رنگ طوسی نوشته می‌شود.

text-align

• نام :‌ text-align
• از این ویژگی چه کاری انجام می‌دهد؟  نحوه و محل قرار گیری متن‌ها را مشخص می‌کند !
• چه چیزهایی را در مقابلش بنویسیم؟ انواع جهت‌ها را! راست، چپ و وسط.
• نمونه نوشتن این ویژگی: text-align: center  یا  text-align : right  یا  text-align: left

با کمک این دستور شما می‌توانید متن‌های خود را به صورت راست چین، چپ چین یا وسط چین منظم کنید. دستورات مربوط به این موضوع را در زیر مشاهده می‌کنید:

HTML

<h1class="center">متن وسط چین</h1>

<p class="right">متن راست چین</p>

<p class="left">متن چپ چین</p>

CSS

 

center {
    text-align: center;
}

p.right{
    text-align:  right;
}

p.left {
     text-align:  left;
}

متن وسط چین

متن راست چین

متن چپ چین

 

Text Decoration

• نام :‌ Text Decoration
• از این ویژگی چه کاری انجام می‌دهد؟ نوع نوشتن متن را تغییر می‌دهد
• چه چیزهایی را در مقابلش بنویسیم؟ نوع استایل مورد نظر! خط کشیدن زیر متن، خط کشیدن روی متن و ...
• نمونه نوشتن این ویژگی: text-decoration: none|underline|overline|line-through|initial|inherit

گاهی المان‌های اچ‌تی‌ام‌ال صفحه، استایل‌های مخصوص خود را دارند. مثلا لینک‌ها در اچ‌تی‌ام‌ال به صورت پیش‌فرض با رنگ آبی نشان داده می‌شوند و همچنین یک خط در زیر آن‌ها کشیده می‌شود. بدین ترتیب شما اگر بخواهید آن‌ها را به صورت ساده در بیاورید می‌بایست برای این کار از دستور Text Decoration استفاده کنید. این دستور را در زیر مشاهده می‌کنید. 

a {
    text-decoration: none;
}

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

HTML

<p> متن با فونت تاهما </p>

CSS

p {
    font-family: "tahoma";
}

متن با فونت تاهما

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