آموزش ساخت لیست جهتدار و پیکان در CSS

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

آموزش ساخت لیست جهتدار و پیکان در CSS

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

برای شروع با کد html زیر کار را آغاز می کنیم:

<div class="box">
    Css arrow
</div>

حال باید به آن استایل بدهیم. می خواهیم یک مثلث داخل باکس قرار دهیم. به مثلث position: absolute و باکس position: relative می دهیم. به این خاطر که می خواهیم موقعیت مثلث را روی باکس تنظیم کنیم. استایل ها را به صورت زیر به آن می دهیم:

.box { position: relative;
 background-color: aqua;
 padding: 40px;
 text-align: center;
 color: white;
 font-size: 40px;
 width: 200px;
 height: 100px;
 margin: 10% 40%; }

استایل زبر را برای مثلث می نویسیم:

.box:after {
 bottom: 100%;
 left: 50%;
 position: absolute;
 width: 0;
 height: 0;
 border: 50px solid transparent;
 margin-left: -50px;
 border-bottom-color: aqua;
 content: ""; }

کار تمام است و جهت در بالای باکس قرار می گیرد.

آموزش کامل 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 – قسمت دهم: عرض حداکثر در المان ها

توسط با بدون دیدگاه آموزش کامل 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 از یکدیگر هستند. اگر المان ها را به صورت چند لایه تصور کنید، لایه اول محتوای المان است و لایه بعدی بردار یا قابی است که دور آن کشیده شده است. این قاب در حالت پیش فرض نامرئی بوده و ما با دستور border می توانیم آن را ظاهر کنیم. لایه بعدی لایه پدینگ یا فضایی است که بین قاب و محتوا قرار دارد و در واقع این دو را از هم جدا می کند. لایه دیگر هم فضای بین قاب یک المان با قاب المان دیگر است. لایه ها را در شکل زیر مشاهده می کنید.

مدل لایه های قاب

نحوه استفاده از قاب ها

برای نمایش قاب ها در CSS از خاصیت border استفاده می کنیم. ویژگی های قاب ها به صورت های زیر می باشد:

  • border-style : نوع قاب
  • border-size : اندازه یا ضخامت قاب
  • border-color : رنگ قاب
  • border-top-style : نوع ضلع بالایی قاب
  • border-bottom-style : نوع ضلع پایینی قاب
  • border-right-style : نوع ضلع راست قاب
  • border-left-style : نوع ضلع چپ قاب

p{

border-top-style: dashed;

border-bottom-style: solid;

border-right-style: dotted;

border-left-style: dotted;

}

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

border: 5px solid red;

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

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

در قسمت پنجم آموزش css با نحوه تغییر دادن متن ها در سی اس اس آشنا شدیم. در این قسمت از آموزش روش کار کردن با فونت ها در css را خواهیم گفت.

تغییر فونت ها در css

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

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

<p class=”text”>متن مورد نظر</p>

.text {

font-size: 14px; }

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

برای تغییر نوع فونت نیز بعد از انتخاب المان مورد نظر از خاصیت font-family استفاده می کنیم.

<p>متن موردنظر</p>

p {

font-family: tahoma; }

نکته: در مقابل font-family می توان چند فونت را نوشت و با کاما از هم جدا کرد که اگر فونتی در سیستم نبود بعدی اعمال شود.

حالت فونت

برای تغییر در استایل فونت می توانیم از خاصیت font-style استفاده کرد. استایل فونت شامل حالت های italic , oblique و normal می باشد. مثال:

<p class= "normal">متن معمولی</p>

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

p.normal {

font-style: normal; }

p.italic {

font-style: italic; }

 پایان قسمت ششم

آموزش کامل CSS – قسمت پنجم: تغییر استایل متن

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

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

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

رنگ متن color

شما می توانید با انتخاب هر المان رنگ آن را تغییر بدهید. به مثال زیر توجه کنید:

html: ———————————

<h2>عنوان با رنگ نارنجی</h2>

<p>متن با رنگ آبی</p>

css: ————————————

h2{

color: orange;

}

p{

color: blue;

}

موقعیت متن text-align

با کمک این ویژگی می توان راستچین، چپ چین یا وسط چین بودن متن را مشخص کرد. مثال:

html: ——————————————–

<h2 class = “center”>وسط چین</h2>

<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

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

a{

text-decoration: none;

}

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

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

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

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

پس زمینه در CSS

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

اضافه کردن رنگ

برای رنگ آمیزی در css از 3 روش استفاده می کنیم:

روش اول 

در این روش از کد HEX به شکل زیر استفاده می کنیم و کد رنگ را همراه با علامت # به کار می بریم. کد هگزادسیمال رنگ یک مقدار کاراکتری ترکیبی از اعداد 0 تا 9 و حروف a تا f می باشد.

مثال: “#c91021”

روش دوم 

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

مثال: “rgb (255,0,0)”

روش سوم

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

رنگ پس زمینه

این ویژگی background-color نام دارد و رنگ مورد نظر به هر سه شکل فوق در جلوی آن قابل استفاده است. روش استفاده از آن به صورت زیر است:

backgroud-color: blue;

backgroud-color: #c91021;

background-color: rgb (255,0,0);

عکس پس زمینه

این ویژگی background-image نام دارد و تصویر پس زمینه المان های اچ تی ام ال را تغییر می دهد. آدرس عکس به صورت زیر در مقابل آن قرار می گیرد:

background-image: url(“image address”);

توجه داشته باشید که در ذکر آدرس عکس فرمت آن را مانند زیر حتما بنویسید:

background-image: url(“http://pardiswp.com/image.jpg”);

تکرار تصویر پس زمینه

شما می توانید تصویر پس زمینه را به صورت افقی یا عمودی تکرار کنید مثلا زمانی که اندازه تصویر کوچک است.

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

background-image: url(“http://pardiswp.com/image.jpg”);

background-repeat: repeat-x;

  • تکرار عمودی: در این حالت عکس به صورت عمودی تا زمانی که پس زمینه را پر کند تکرار می شود.

background-image: url(“http://pardiswp.com/image.jpg”);

background-repeat: repeat-y;

برای جلوگیری از تکرار تصویر دستور زیر را وارد می کنیم:

background-repeat: no repeat;

پایان قسمت چهارم