آموزش کامل CSS قسمت دوم
در قسمت اول از این مجموعه آموزشی، ما با کدهای CSS و یکی از روش های فراخوانی آنها در فایل HTML و همچنین ویژگی های font-size و font-family ،color ،background-color آشنا شدیم. در این جلسه یاد خواهیم گرفت که چگونه از کدهای CSS بصورت مشترک برای چند عنصر یا تگ HTML استفاده کنیم، چگونه برای عناصر صفحه کادر یا خط حاشیه تعریف کنیم و همچنین ارث بری در زبان CSS را بررسی خواهیم کرد.
کدنویسی مشترک CSS برای چند عنصر
در جلسه قبل آموختیم با نوشتن یک قانون برای عنصری، کدهای CSS ما بر روی تمامی عناصر هم نام با آن نیز اعمال خواهند شد. اما امروز می‌خواهیم یاد بگیریم چگونه میتوان با نوشتن یک قانون چندین عنصر متفاوت با نام های مختلف را تحت تاثیر قرار داد.
همانطور که به یاد دارید در جلسه قبل رنگ پس زمینه عنصر h1 را به رنگ بنفش تغییر دادیم اما اگر بخواهیم رنگ پس زمینه عنصر h2 را نیز به رنگ بنفش در بیاوریم باید چکار کنیم؟ دوباره قوانین را برای h2 بنویسیم؟ خیر! فقط کافیست در کنار عنصر h1 یک ویرگول بگذاریم و عنصر مورد نظر که در اینجا عنصر h2 است را مانند مثال زیر اضافه کنیم.
<!doctype html>
<html>
<head>
<style>
h1 , h2 { background-color:purple; }
p { color:red; font-size:25px; font-family:Tahoma; }
</style>
</head>
<body dir="rtl">
<h1>پیشرو سیستم</h1>
<p>به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
<h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
<p>می توانید این متن را در ویرایشگر خود تغییر دهید.</p>
</body>
</html>
پیشرو سیستم
به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.
شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.
می توانید این متن را در ویرایشگر خود تغییر دهید.
همانطور که مشاهده میکنید به همین سادگی با نوشتن یک قانون میتوان چندین عنصر متفاوت را تغییر داد. حال اگر خواستید فقط یکی از تیتر ها را تغییر بدهید باید دوباره برای عنصر مورد نظر کدهای CSS مجزایی را بنویسید. به عنوان مثال در اینجا اگر بخواهیم رنگ متن عنصر h1 به رنگ صورتی تغییر کند باید جداگانه برای آن قانون تغییر رنگ متن را بنویسیم.
<!doctype html>
<html>
<head>
<style>
h1 , h2 { background-color:purple; }
h1 {color:pink; }
p { color:red; font-size:25px; font-family:Tahoma; }
</style>
</head>
<body dir="rtl">
<h1>پیشرو سیستم</h1>
<p>به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
<h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
<p>می توانید این متن را در ویرایشگر خود تغییر دهید.</p>
</body>
</html>
پیشرو سیستم
به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.
شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.
می توانید این متن را در ویرایشگر خود تغییر دهید.
اضافه کردن کادر یا خط حاشیه با ویژگی border
ابتدا کدهای CSS تغییر رنگ پس زمینه عناصر h1 و h2 و تغییر رنگ متن عنصر h1 را که در قسمت قبل نوشتیم پاک کنید؛ حالا می‌خواهیم زیر دو عنصر h1 و h2 خط بکشیم برای اینکار باید از ویژگی border-bottom استفاده کنیم و برای مقدار آن باید 1px solid black را در نظر بگیریم.
<!doctype html>
<html>
<head>
<style>
h1 , h2 { border-bottom:1px solid black; }
p { color:red; font-size:25px; font-family:Tahoma; }
</style>
</head>
<body dir="rtl">
<h1>پیشرو سیستم</h1>
<p>به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
<h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
<p>می توانید این متن را در ویرایشگر خود تغییر دهید.</p>
</body>
</html>
پیشرو سیستم
به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.
شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.
می توانید این متن را در ویرایشگر خود تغییر دهید.
همانطور که مشاهده کردید در زیر دو عنصر h1 و h2 یک خط با رنگ مشکی کشیده شد، حالا اگر بخواهیم دور عناصر h1 و h2 یک کادر کامل ایجاد کنیم کافیست عبارت bottom- را مانند مثال زیر از border-bottom حذف کنیم.
<!doctype html>
<html>
<head>
<style>
h1 , h2 { border:1px solid black; }
p { color:red; font-size:25px; font-family:Tahoma; }
</style>
</head>
<body dir="rtl">
<h1>پیشرو سیستم</h1>
<p>به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
<h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
<p>می توانید این متن را در ویرایشگر خود تغییر دهید.</p>
</body>
</html>
پیشرو سیستم
به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.
شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.
می توانید این متن را در ویرایشگر خود تغییر دهید.
همانطور که در بالا مشاهده میکنید دور عناصر h1 و h2 یک کادر کامل ایجاد شده است.
وراثت و بازنویسی در CSS
ارث بری و بازنویسی دو مفهوم مهم در یادگیری CSS هستند؛ دو عنصر body و head در داخل عنصر HTML قرار دارند و در مرحله بعد باقی عناصر از این دو عنصر سرچشمه می‌گیرند پس مانند یک سلسله مراتبی عمل می‌کند که باقی عناصر از این دو عنصر ارث بری می‌کنند.
در این سلسله مراتب عنصر head اهمیت خاصی ندارد چرا که به آن استایلی تعلق نمی‌گیرد، درست است که کدهای CSS در عنصر head قرار می‌گیرند ولی نتیجه و تغییرات آنها در تگ body و زیر مجموعه های آن نمایش پیدا خواهد کرد. در واقع میتوان گفت فقط تگ body برای ما اهمیت دارد.
اگر کدهای مثال صفحه را دوباره بررسی کنید چهار عنصر در تگ body قرار داشتند، دو پاراگراف با نام p و دو تیتر با نام های h1 و h2، که این عناصر زیر مجموعه تگ body هستند و یک سلسله مراتب را تشکیل میدهند و ریشه آنها تگ html است که تگ body از آن ارث بری می‌کند و هر عنصری که در تگ body وجود دارد از body ارث بری می‌کند.
همانطور که در تصویر بالا مشاهده میکنید ارث بری به این طریق انجام میشود که اگر در عنصر body استایلی قرار بگیرد آن استایل برای تمامی عناصری که در زیر تگ body نوشته شده اند اعمال میشود به عنوان مثال اگر بخواهیم رنگ متن تمامی عناصر را تغییر دهیم فقط کافیست قانون تغییر رنگ متن را در عنصر body، در بالای تمام کدهای CSS بنویسیم و قانون رنگ قرمز پاراگراف های p را نیز پاک کنیم. لطفا به مثال زیر توجه کنید.
<!doctype html>
<html>
<head>
<style>
body {color:green; }
h1 , h2 { border-bottom:1px solid black; }
p { font-size:25px; font-family:Tahoma; }
</style>
</head>
<body dir="rtl">
<h1>پیشرو سیستم</h1>
<p>به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
<h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
<p>می توانید این متن را در ویرایشگر خود تغییر دهید.</p>
</body>
</html>
پیشرو سیستم
به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.
شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.
می توانید این متن را در ویرایشگر خود تغییر دهید.
حالا اگر خواستید رنگ عنصری با دیگر عناصر تفاوت داشته باشد، باید آن را بازنویسی کنیم یعنی به عنوان مثال برای همان عنصر بصورت مجزا قانون تغییر رنگ متن را بنویسیم. در این حالت مرورگر در هنگام اجرا و کامپایل صفحه HTML شما داخلی ترین کد CSS را در نظر خواهد گرفت و کدهای CSS والد را در مورد همان قانون بخصوص مثلا تغییر رنگ نادیده خواهد گرفت.
<!doctype html>
<html>
<head>
<style>
body {color:green; }
h1 , h2 { border-bottom:1px solid black; }
p { color:red;font-size:25px; font-family:Tahoma; }
</style>
</head>
<body dir="rtl">
<h1>پیشرو سیستم</h1>
<p>به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
<h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
<p>می توانید این متن را در ویرایشگر خود تغییر دهید.</p>
</body>
</html>
پیشرو سیستم
به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.
شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.
می توانید این متن را در ویرایشگر خود تغییر دهید.
همانطور که در بالا مشاهده می کنید ما رنگ متن قرمز را برای تگ p به صورت مجزا دوباره اضافه کردیم و این کد باعث شد عناصر p رنگ قرمز خود را حفظ کنند ولی تیترهای ما همچنان به رنگ سبز باقی بمانند.