آموزش کامل Css

آموزش کامل CSS قسمت سوم

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

استفاده از کلاس (Class)

در جلسه های قبل کمی با کدهای عمومی CSS آشنا شدیم به عنوان مثال کدی که برای عنصر p نوشتیم برای تمامی عناصر با نام p در کل صفحه اعمال شد، حال اگر بخواهیم قانونی فقط برای یکی از عناصر p اعمال شود باید چکار کنیم؟ اینجاست که تگ Class در HTML به کمک ما خواهد آمد. برای استفاده از کلاس ها در CSS نیاز است که اول به عنصر HTML مورد نظر خود تگ Class را اضافه کنیم و برای آن یک نام منحصر به فرد در نظر بگیریم تا بعدا بتوانیم از نام کلاس خود در کدهای CSS استفاده کنیم.

برای آموزش ما در اینجا میخواهیم پاراگراف اول در صفحه را آبی و پاراگراف دوم را به رنگ بنفش تغییر دهیم پس باید اول یک تگ Class در عنصر p اضافه کنیم و برای آن یک نام منحصر به فرد مثلا blue را در نظر بگیریم، این نام باید بین دابل کوتیشن و به این حالت “class=”blue نوشته شود، برای تگ دوم نیز همین کار را تکرار میکنیم و نام purple را به آن اختصاص می دهیم، حال برای استفاده از این کلاس ها کافیست به سادگی مانند مثال زیر دو قانون مجزا برای عنصر p در کد CSS خود تعریف کنیم و نام کلاس ها را بعد از گذاشتن یک نقطه (.) در انتهای عناصر p اضافه کنیم.

<!doctype html>
<html>
<head>
    <style>
        body     { color:green; }
        h1 , h2  { border-bottom:1px solid black; }
        p.blue   { color:blue; font-size:25px; font-family:Tahoma; }
        p.purple { color:purple; font-size:25px; font-family:Tahoma; }
    </style>
</head>
<body dir="rtl">
    <h1>پیشرو سیستم</h1>
    <p class="blue">به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
    <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
    <p class="purple">می توانید این متن را در ویرایشگر خود تغییر دهید.</p>
</body>
</html>

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

همانطور که مشاهده می‌کنید با استفاده از تگ Class برای یک عنصر HTML و استفاده از آن در کدهای CSS می‌توانیم به صورت مجزا برای آن عنصر ویژگی های منحصر به فرد تعریف کنیم که فقط مخصوص همان کلاس باشد و بر روی دیگر عناصر اعمال نشود.

حالا سوال اینجاست که آیا کلاس ها همیشه باید با یک عنصر HTML همراه باشند یا میتوانیم کلاس مشترک بین عناصر داشته باشیم؟ در جواب این سوال باید گفت کلاس ها می توانند وابسته به یک عنصر HTML نباشند و همه عناصر صفحه به صورت مشترک از یک کلاس استفاده کنند.

به عنوان مثال دوم برای توضیح این جواب میخواهیم یک تگ blockquote را جایگزین تگ p دوم در صفحه خود کنیم. از تگ blockquote در HTML برای نمایش نقل قول استفاده می‌شود. حالا اگر خواستیم که تگ blockqoute هم از کلاس blue پیروی کند کافیست از عبارت p.bule در کد های CSS حرف p را حذف کنیم. با حذف کردن حرف p منحصر به فرد بودن این کلاس به عنصر p را از بین بردیم برای همین این قانون برای تمامی عناصر با تگ کلاس blue اعمال خواهد شد. به مثال زیر توجه کنید:

<!doctype html>
<html>
<head>
    <style>
        body     { color:green; }
        h1 , h2  { border-bottom:1px solid black; }
        .blue    { color:blue; font-size:25px; font-family:Tahoma; }
        p.purple { color:purple; font-size:25px; font-family:Tahoma; }
    </style>
</head>
<body dir="rtl">
    <h1>پیشرو سیستم</h1>
    <p class="blue">به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
    <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
    <blockquote class="blue">می توانید این متن را در ویرایشگر خود تغییر دهید.</blockquote>
</body>
</html>

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

همانطور که در بالا مشاهده کردید جمله ای که با تگ blockquote نوشتیم با کمی تفاوت ظاهری در نوشتار و رنگ آبی در سایت ظاهر شده است. شما میتوانید چندین کلاس مختلف را بر روی یک عنصر اعمال کنید، برای اینکار کافیست در داخل تگ Class در کنار نام کلاس قبلی بعد از یک فضای خالی یا space نام کلاس جدید را وارد کنید. به عنوان مثال اگر بخواهیم زیر نوشته هایمان خط کشیده شود فقط کافیست کنار کلاس قبلی یک کلاس جدید به نام underline را اضافه کنیم و یک قانون CSS برای underline نیز بنویسیم.

<!doctype html>
<html>
<head>
    <style>
        body       { color:green; }
        h1 , h2    { border-bottom:1px solid black; }
        .blue      { color:blue; font-size:25px; font-family:Tahoma; }
        p.purple   { color:purple; font-size:25px; font-family:Tahoma; }
        .underline { text-decoration: underline; }
    </style>
</head>
<body dir="rtl">
    <h1>پیشرو سیستم</h1>
    <p class="blue">به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
    <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
    <blockquote class="blue underline">می توانید این متن را در ویرایشگر خود تغییر دهید.</blockquote>
</body>
</html>

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

همانطور که در نتیجه بالا مشاهده می کنید در زیر عنصر blockquote خط آبی کشیده شد چون فقط همین عنصر است که در تگ Class خود نام underline دارد.

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

استفاده از ویژگی font-family

امروز می‌خواهیم کمی بیشتر در مورد قوانین مربوط به فونت صحبت کنیم. در آموزش قسمت اول کمی با ویژگی font-family آشنا شدیم و فهمیدیم که با آن میتوانیم برای صفحه HTML خود یا یکی از از عناصر بخصوص در صفحه فونت متفاوتی را اعمال کنیم.

در قسمت اول ما فونت Tahoma را در کدهای CSS خود فراخوانی و بر روی بعضی از عناصر صفحه اعمال کردیم، حال در این قسمت یاد خواهیم گرفت که چگونه بجای یک عدد فونت یک مجموعه فونت را در CSS به ترتیب اولویتمان در کنار هم فراخوانی کنیم تا اگر مرورگر اولین فونت را شناسایی نکرد سراغ دومین فونت را بگیرد و به همین ترتیب الی آخر. این قانون را در عنصر body می‌نویسیم و تمامی ویژگی های font-family در عناصر بعدی را حذف می‌کنیم.

در اینجا به عنوان مثال فونت های Verdana , Arial , Geneva , Arial black را به ترتیب می‌نویسیم و مرورگرتلاش می‌کند اول از همه فونت Verdana را بارگذاری کند و در صورت شناسایی نکردن این فونت در اولویت بعدی فونت Arial قرار می‌گیرد و به همین ترتیب تا آخر ادامه می‌یابد. 

<!doctype html>
<html>
<head>
    <style>
        body       { color:green; font-family:Verdana ,Arial ,Geneva ,Arial black; }
        h1 , h2    { border-bottom:1px solid black; }
        .blue      { color:blue; font-size:25px; }
        p.purple   { color:purple; font-size:25px; }
        .underline { text-decoration: underline; }
    </style>
</head>
<body dir="rtl">
    <h1>پیشرو سیستم</h1>
    <p class="blue">به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
    <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
    <blockquote class="blue underline">می توانید این متن را در ویرایشگر خود تغییر دهید.</blockquote>
</body>
</html>

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

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

یادتان نرود که ما این قانون را در عنصر body نوشتیم برای همین فونت ها در تمامی عناصر فرزند اعمال شدند.

دیدگاهتان را بنویسید