طراحی سایت
ساناتک
شنبه 27 شهريور 1395
1
CSS چیست

اضافه کردنِ رنگ و لعابی جذاب تر به کار

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

در واقع شما به بهترین شکل ممکن زیربنا و بنیانِ سایت خود را ساخته اید و مو هم لای درزش نمی رود، باقی کارها تماماً بر روی ظاهر کار متمرکز می شود و اصل کار تمام شده است. در این فصل یاد می گیریم که چگونه رنگ و لعابی جذاب تر به سایت خود ببخشیم. ابزاری که در اینجا کار با آن را یاد می گیریم تا به هدف خود برسیم CSS(Cascading Style Sheets) می باشد. اول از هر چیز بیایید با هم ببینیم CSS چیست.

CSS چیست؟

از آنجا که تقریباً تمام این فصل در رابطه با CSS می باشد بهتر است اول ببینیم اساساً CSS چیست؟! CSS زبانی است که به شما اجازه می دهد در اندازه قلم، رنگ ها، کوچک و بزرگ ها، پس زمینه و ... دست برده و آن ها را در سایت خود تغییر دهید. در این فصل با انواع استفاده های CSS آشنا می شویم.

تغییرات ظاهری در پاراگراف ها و جملات با استفاده از inline styles

اگر با Microsoft Word کار کرده اید با این بخش آشنایی دارید. شما می توانید جملات و پاراگراف های خود را در این نرم افزار با سایز قلم های گوناگون و رنگ های دلخواه زیبا کنید. در XHTML و با استفاده اندکی از کدهای CSS هم می توانیم این کار را انجام دهیم؛

<p style="color: red;">The quick brown fox jumped over the lazy dog.</p>

در مثال بالا از یک مشخصه style بین تگ های باز و بسته پاراگراف خود استفاده کردیم، در XHTML به این تغییرات داخلی در فونت و نوشته ها inline style گفته می شود.

مشخصه style می تواند یکی یا بیشتر باشد، در اینجا color یکی از ویژگی هایی است که می خواهیم در آن بنا به سلیقه شخصی خود تغییر ایجاد کنیم و red در اینجا مقدار این ویژگی می باشد. اگر دوست دارید می توانید ویژگی های دیگری علاوه بر color به style کار خود اضافه کنید. به عنوان مثال اگر بخواهیم نوشته خود را به صورت bold نمایش دهیم می توانیم از ویژگیِ font-weight استفاده کنیم، در اینجا هم مقادیر گوناگونی قابل استفاده هستند اما معمولاً از bold و normal برای این قسمت استفاده می شود. خوب حالا به عنوان تمرین یک پاراگرافِ قرمز و bold می سازیم؛

<p style="color: red; font-weight: bold">The quick brown fox jumped over the lazy dog.</p>

توجه کنید که بین دو ویژگی استفاده شده از یک سِمی-کالون(;) استفاده کردیم. می توانیم به همین روش ویژگی های بیشتری به style کار خود اضافه کنیم اما یادتان باشد این روش کار ما را اندکی بی نظم خواهد کرد، در آینده روش بسیار بهتری برای اعمال این تغییرات یاد می گیریم.

اضافه کردن Inline styles به سایت

در برنامه ویرایش متن خود فایل about.html را باز کرده و یک Inline style اضافه می کنیم. می خواهیم پاراگراف اول بعد از About Us را آبی و bold کنیم. با توجه به مطالبی که به تازگی با یکدیگر آموختیم برای این کار باید کدی مشابه کد زیر داشته باشیم؛

<p style="color: blue; font-weight: bold;">Bubble Under is a group
of diving enthusiasts based in the south-west UK who meet up
for diving trips in the summer months when the weather is good
and the bacon rolls are flowing. We arrange weekends away as
small groups to cut the costs of accommodation and travel and
to ensure that everyone gets a trustworthy dive buddy.</p>

اگر کد شما هم به شکل بالاست کار را ذخیره کرده و در یک مرورگر اجرا کنید، ظاهر کار باید شبیه به عکس 3.1 شده باشد؛

مثال ساده از css

عکس 3.1: محتوای نشان داده شده با رنگ آبی و به صورت bold.

تعداد بازدید: 192
مطالب دیگر آموزش طراحی سایت
روش های انتخاب تگ با استفاده از classوضعیت های گوناگون یک لینک در یک صفحه وبstyle دهی گروهی به چندین تگانتخاب زمینه کاری در CSS با خصوصیت idکاربرد دستور em و italics در CSS
 
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید