سلام خدمت همه دوستان با یه جلسه دیگه از دوره ی آموزشی HTML و CSS خدمتتون هستیم که به علم شما در رابطه با طراحی سایت اضافه کنیم و برای همین کار در آموزش امروز ما در رابطه با رنگ ها که در جلسات قبلی با هم در html کار کرده بودیم در این جلسه هم بیشتر با این مباحث کار خواهیم کرد و در ادامه با پس زمینه در css آشنا خواهیم شد که چند نوع دارد و چطور کار میکند و در انتها هم با border ها کار خواهیم کرد که این مباحث تا انتها با شما همراه خواهد بود پس با دقت کار کنید تا بتوانید بهترین نتیجه را از این آموزش ها بگیرید . پس با ما همراه باشید تا امروز هم یک آموزش منحصر به فرد داشته باشیم.
در ضمن یادتون نره که جلسه قبلی آموزش css رو ببینید که این دو جلسه با هم در ارتباط هستن .
[toc]
رنگ ها در CSS :
خوب همانطور که میدانید رنگ ها در طراحی سایت ارزش زیادی دارند تا این که شما بتوانید بهترین ارتباط را با کاربر داشته باشید و ما در CSS از هر نوع مدل رنگی میتوانیم استفاده کنیم رنگ ها را نمایش دهیم به عنوان مثال میتونیم از RGB یا هگزا دسیمال و در ادامه از نوع ترنسپرنت هم میتوانیم استفاده کنیم . حالا نحوی اضافه و کار کردن با رنگ را در CSS رو میبینیم.
در جلسه قبلی بهتون گفتم که چطور یک فایل CSS رو ایجاد کنید و با استفاده از لینک آن را به HTML متصل کنید فرض کنید ما می خواهیم روی h1 که در html هست تغییرات انجام بدیم کافی است که در فایل css نام اون تگ و یا ویژگی رو بنویسیم با یک براکت باز و {} داخل آن کد های خود رو مینویسیم و حالا بریم سراغ کد نویسی .
پیشنهاد من به شما : شروع و آشنایی با کد نویسی css
h1
{
color: blue;
background-color: #eee;
}
در کد بالا ما تونستیم رنگ پس زمینه و رنگ متن تگ h1 رو تغییر بدیم و یک سری کارهای دیگه میتونیم انجام بدیم که در ویدئو میتونید با اون آشنا بشید .
در اینجا لازمه که دو سایت کاربردی رو بهتون معرفی کنم که شاید تا انتهای کار با ما همراه باشن :
سایت flatuicolors.com :
این سایت یک سایت بسیار عالی برای انتخاب رنگ است به طور که شما هر نوع رنگ با هر نوع سلیقه ای که داشته باشید میتونید از این سایت استفاده کنید و این سایت دارای امکانات دیگری نظیر الگو های آماده طراحی سایت را دارد که میتونید از این سایت برای الگو برداری استفاده کنید.
سایت loremipsum.ir :
و این سایت هم در بین کسانی که در عرصه وب و طراحی کار میکنند آشنا است کار این سایت و تولید محتوای نامهموم است و شما برای قالب و ها دمو های خودتون میتونید که از این سایت استفاده کنید که در ویدئو انتهای مقاله حتما بهتون میگم که چطور با سایت کار کنیم و از متن آن استفاده کنیم.
خوب این از رنگ ها بود که در ادامه آموزش ها هم از رنگ ها بسیار زیاد استفاده خواهیم کرد .
کار با Background در CSS :
شما میتوانید با پس زمینه ها رنگ ، تصویر و یا حالت آنها را تغییر دهید که با هم به بررسی آنها می پردازیم :
- background-color : همانطور که در قمست رنگ ها هم به آن اشاره شده میتوانید رنگ پس زمینه خود را عوض کنید.
- background-image : این گزینه به شما کمک میکند تا یک تصویر را به صفحه اصلی یا هر قسمت صفحه اضافه کنید .
- background-repeat : این گزینه به این معنا است که تصویر و هر چیزی که برای پس زمینه انتخاب میکنید در صفحه تکرار شود یا خیر که داری چندین مقدار است (در حالت عادی که رو تکرار قرار دارد و no-repeat به این معنا است که از تصویر فقط یکی باشد هیچ گونه تکراری در صفحه نداشته باشد . repeat-x و y تکرار در محورای x,y را اشاره میکند که هر کدام را انتخاب کنید در همان محور تکرار خواهد شد).
- background-attachment : این گزینه هم دارای دو مقدار برای انتخاب است (fixed و scroll) فیکس که همان به معنای ثابت بودن است تصویر شما هر چقدر به پایین اسکرول شود در جای خود ثابت است ولی اسکرول دقیقا برعکس آن عمل میکند و با محتوای صفحه به پایین اسکرول میشود .
- background-position : این گزینه دارای چندین مقدار است که محل تصویر شما را انتخاب میکند (top , right , left , bottom) .
با تمام این گزینه ها کار خواهیم کرد و نتیجه را به شما نشان خواهیم داد .
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
شما تمام این تکه کد بالا را میتوانید در یک خط هم جای دهید و کد شما کار کند :
body
{
background: #fff url("tree.jpg") no-repeat right top fixed;
}
این هم از کدهای background که خیلی پیچیده نبود و کار کردن با آنها راحت و آسوده است حتما یادتون نره که تمرین کنید .
مطالعه بیشتر : شروع کد نویسی با HTML
نحوه ی کار کردن با Border ها در CSS :
border ها اهمیت زیادی در طراحی صفحات وب دارند چرا که امرزه هر سایتی در طراحی خود از border ها استفاده میکند.
ما در border ها چندین نوع داریم که به بررسی آنها می پردازیم :
- border-style : این گزینه چندین مقدار دارد که نوع نمایش خط را نشان می دهد که چگونه کار میکند به عنوان مثال (dotted , dashed , solid) این گزینه هایی است که شما میتوانید انتخاب کنید.
- border-width : این گزینه که از اسمش هم پیداست ضخامت border را به ما نشان میدهد .
- border-color : در این قسمت هم به راحتی می توانید رنگ خط مورد نظر را عوض کنید .
- border-top-style : شما به جای top میتوانید اسم چهار جهت اصلی را ینویسید و نوع هر جهت را جداگانه انتخاب کنید .
این از گزینه هایی بود که شما می توانستید برای یک border انتخاب کنید.
و شما توسط تنها کلمه border میتوانید این کار های را انجام دهیم با هم ببینیم :
p {
border: 5px solid red;
}
در خط بالا که میبینید چندین کار در یک خط نوشته شده است و که ضخامت و نوع و همچنین رنگ border را عوض کرده است .
شما همچنین می توانید از یک border کامل فقط یک طرف آن را داشته باشید :
p {
border-left: 6px solid red;
background-color: lightgrey;
}
تکه کد بالا دقیقا سمت چپ تگ P را استایل داده است .
خوشحالم که توانستم این جلسه را هم به پایان برسانم اگر هر گونه سوال یا پیشنهادی داشتید می توانید از طریق کامنت زیر همین مقاله سوال خود را بپرسید . منتظر ویدئوی آموزشی باشید که در کمتر از یک روز دیگر منتشر خواهد شد .
