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

توسط با بدون دیدگاه آموزش کامل 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;

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

آموزش کامل CSS – قسمت سوم: انتخاب و نام گذاری المان ها

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

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

انتخابگر CSS

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

برای فراخوانی یک المان لازم است که اسم آن را صدا بزنیم. المان های html هر کدام دارای یک نام عمومی و اختصاصی هستند. مثلا متون با تگ p و لینک ها با تگ a شناخته می شوند. در واقع این ها همان نام های عمومی المان ها هستند. اگر ما در css تگ p را صدا بزنیم با تمام متون روبرو هستیم. در مثال زیر رنگ تمام پارگراف های موجود در متن تغییر می کند.

p{

color: red;

}

حال اگر ما قصد تغییر تمام پاراگراف ها را نداشته باشیم و فقط بخواهیم یکی از المان ها مثلا پاراگراف دوم را تغییر بدهیم باید چه کار کنیم؟ در این جا از class و id استفاده می کنیم که در واقع بهترین راه انتخاب المان ها است.

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

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

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

افزودن id به المان های html

برای اضاف کردن آی دی به هر المان کلمه id را به عنوان صفت در تگ اول المان مورد نظر قرار می دهیم و نام آی دی را به آن انتساب می دهیم.

id = “نام مورد نظر”

حال باید با css آن را انتخاب کنیم. برای این کار باید علامت # و نام آی دی که دادیم را کنار آن بنویسیم.

#نام مورد نظر

مثال:

<p id= "hi">پاراگراف مورد نظر با آی دی</p>

#hi{

text-align: center;

color: red;

}

انتخاب از طریق کلاس

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

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

<h2 class="ghermez">عنوان</h2>

.ghermez{

color: red;

}

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

p.abi{

color: green;

}

بدین ترتیب تگ‌هایی h1 یا دیگر تگ‌هایی که دارای همین کلاس abi هستند مخاطب شما نخواهند بود و تنها المان‌های پاراگراف مورد تغییر قرار خواهند گرفت.

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

نکته: با انتخاب المان body تمامی تغییرات گفته شده در کل المان‌ها اعمال می‌شود. چون المان body مادر تمامی المان‌های درون صفحه است. پس اگرقصد تغییری در کل المان‌ها دارید استفاده از تگ body یا html توصیه می‌شود.

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

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

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

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

قوانین کلی نوشتن CSS

نوشتن در سی اس اس 3 مرحله دارد:

  1. نام گذاری المان های html
  2. صدا زدن المان های نام گذاری شده در فایل css
  3. حال کافیست تغییراتی که می خواهید در جلوی نام المان ها بنویسید

سه مرحله فوق را در قالب یک مثال اجرا می کنیم. فرض کنید قصد داریم تمامی پاراگراف‌های موجود در صفحه‌ را به رنگ قرمز در بیاوریم.

قدم اول: المان های اچ تی ام الی که قصد تغییر آن ها را داریم انتخاب می کنیم. ما در این جا قصد تغییر متن ها را داریم و می دانیم که تگ ها در html با تگ p نوشته می شوند، پس p را به عنوان نام این المان می نویسیم.

قدم دوم: در جلوی المان انتخاب شده یک کروشه باز می کنیم.

قدم سوم: بعد از کروشه آن چیزی که قصد داریم در این المان تغییر کند را می نویسیم. مثلا برای تغییر رنگ المان کلمه color به معنای رنگ را نوشته جلوی آن : قرار می دهیم.

قدم چهارم: در جلوی دو نقطه تغییری که قصد داریم اعمال شود را می نویسیم، مثلا نام یا کد رنگی که در نظر داریم را می نویسیم و سیمی کولن می گذاریم. در نهایت کروشه را می بندیم.

p {

color: red;

}

حال تمامی تگ های پاراگراف صفحه به رنگ قرمز در می آیند.

توجه داشته باشید که در انتهای هر دستور css در کروشه باید سیمی کولن قرار دهیم و هر دستور را در یک سطر می نویسیم تا خوانایی کدها بیشتر می شود.

فرض کنید می خواهیم بعد از قرمز کردن رنگ متن فونت آن را نیز به تاهما تغییر دهیم، دستور زیر را اضافه می کنیم.

p {

color: red;

font-family: tahoma;

}

در قسمت بعد با نحوه‌ی انتخاب و نام‌گذاری المان‌های اچ‌تی‌ام‌ال بیشتر آشنا خواهیم شد.