در جلسه ی اول با مفهوم CSS و نحوه ی کار با آن و البته نقشی که در ظاهر صفحات سایت دارد آشنا شدیم. در این جلسه قصد داریم به روش های اضافه کردن CSS به HTML بپردازیم و اطلاعاتی را در این زمینه در اختیار شما قرار دهیم. اگر جلسه ی اول CSS را مطالعه نکرده اید می توانید از طریق لینک مورد نظر به آن دسترسی داشته باشید. البته پیشنهاد ما این است که تمامی جلسات را به ترتیب و پشت سر هم مطالعه کنید.
به راحتی میتوانید به تمامی جلسات آموزش HTML از طریق لینک قرار داده شده دسترسی داشته باشید.
سه روش برای افزودن CSS به یک صفحه وب وجود دارد:
در اکثر قریب به اتفاق موارد باید از روش استایل دهی خارجی استفاده شود. با این حال مواردی هم هست که نیاز به استایل دهی درون خطی یا داخلی دارد.
استایل درون خطی به تگ های خاص HTML اعمال می شوند. ویژگی های استایل برای تعریف قوانینی است که فقط در مورد تگی خاص اعمال می شود. در اینجا نگاهی داریم به نحوه ی نوشتن استایل درون خطی؛
<h1 style=”color:red; padding:10px; text-decoration:underline;”>
Example Heading
</h1>
این کد باعث می شود که عنوان فقط با خط قرمز زیرخط دار و فاصله ی 10 پیکسل از هر طرف ایجاد شود. در موارد بسیار کمی استایل دهی درون خطی استفاده می شود. تقریباً در بیشتر موارد بهتر است از این نوع استایل دهی استفاده نشود.
یک استایل دهی داخلی، بلوکی از CSS است که به یک تگ head فایل HTML اضافه میشود. تگ استایل در بین تگ های باز و بسته ی head و تمام اعلان های CSS در بین تگ های style مورد استفاده قرار میگیرند.
<head>
<style>
h1 {
color: red;
padding: 10px;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Example Heading</h1>
</body>
کد بالا همان نتایج استایل دهی درون خطی را دارد. با این حال ، مزیت استفاده از استایل دهی داخلی به جای استایل دهی درون خطی این است که تمام تگ های h1 در صفحه تحت تأثیر استایل ها قرار می گیرند.
استایل دهی خارجی فایلی است که فقط شامل دستورات CSS است. قوانین تعریف شده در این فایل با استفاده از تگ لینک که در تگ head فایل HTML قرار دارد به یک یا چند فایل HTML اضافه می شوند.
برای استفاده از استایل دهی خارجی ابتدا یک فایل CSS ایجاد و هنگام ذخیره سازی آن را با پسوند css. ذخیره کنید.
/*************************************************
Save with a name ending in .css such as styles.css
*************************************************/
h1 {
color: red;
padding: 10px;
text-decoration: underline;
}
حالا که یک صفحه استایل دهی خارجی داریم، می توانیم با استفاده از تگ لینک آن را به فایل HTML اضافه کنیم.
<head>
<link rel=”stylesheet” type=”text/css” href=”styles.css“>
</head>
<body>
<h1>Example Heading</h1>
</body>
هنگامی که فایل HTML لود می شود این تگ لینک باعث می شود که استایل های موجود در فایل styles.css در صفحه وب نمایش داده شود. در نتیجه ، تمام تگ های h1 با متن قرمز ، زیرخط دار و با 10 پیکسل فاصله داخلی از هر طرف نشان داده می شوند.
تقریباً در همه موارد استایل دهی خارجی روش مناسبی برای استایل دهی صفحات وب است. مزیت اصلی استفاده از این روش این است که می تواند به هر تعداد فایل HTML اضافه شود. در نتیجه می توان از یک استایل دهی خارجی منفرد برای کل وب سایت استفاده کرد.
هنگام طراحی یک سایت ساده که تنها یک صفحه دارد ، می توان از استایل دهی داخلی نیز استفاده کرد. اگر وب سایت مورد نظر هرگز فراتر از آن صفحه اولیه رشد نکند، استفاده از استایل دهی داخلی قابل قبول است در غیر این صورت نیاز به استفاده از سایر استایل هاست.
استایل های درون خطی در دو حالت قابل استفاده هستند:
در بقیه ی موارد بهتر است از استایل دهی خارجی به جای درون خطی استفاده کرد.
هنگام نوشتن CSS بسیار پیش می آیند که قوانین نوشته شده با هم در تضاد باشند. به عنوان مثال ، هنگام استایل دهی ” عنوان ” ، ممکن است تمام قوانین زیر برای تگ h1 اعمال شود؛
چگونه یک توسعه دهنده می تواند قوانینی بنویسد که به اندازه کافی عمومی باشد تا بتواند هر h1 را پوشش دهد اما به اندازه کافی خاص هم باشد؟
استایل های CSS از دو قانون پیروی می کنند که برای نوشتن CSS موثر باید آنها را درک کنید. درک این قوانین به شما کمک می کند CSS را در صورت نیاز گسترده ، اما در صورت لزوم بسیار خاص بنویسید.
این دو قانون حاکم بر رفتار CSS “ارث بری (inheritance)” و “خاصیت پذیری (specificity)” هستند.
چرا به استایل های CSS آبشاری می گویند؟ یعنی قوانین به صورت آبشاری زیر هم نوشته می شوند و اگر چندین قانون نوشته شده با یکدیگر مغایرت داشته باشند ، آخرین قانون نوشته شده اجرا می شود. به این ترتیب ، استایل ها به سمت پایین سقوط می کنند و آخرین قانون نوشته شده اعمال می شود. بیایید با یک مثال ببینیم.
دو قانون CSS را در یک استایل داخلی می نویسیم که با یکدیگر در تناقض هستند؛
<head>
<style>
p {color: red;}
p {color: blue;}
</style>
</head>
<body>
<p>What color will the text of this paragraph be?</p>
</body>
مرورگر از بین استایل ها عبور می کند و آخرین استایلی را که به کار رفته است اعمال می کند و همه استایل های قبلی را نادیده می گیرد.
.code_sample_p {color: red;}
.code_sample_p {color: blue;}
What color will the text of this paragraph be?
همین ویژگی آبشاری هنگام استفاده از صفحه های استایل خارجی نیز به کار می رود.
استفاده از چند صفحه استایل خارجی بسیار رایج است. در این صورت استایل های صفحه به ترتیب ظاهر شدن در تگ head فایل HTML بارگذاری می شوند. در مواردی که تعارض بین قوانین استایل رخ می دهد، قوانین CSS موجود در هر صفحه، استایل های لود شده قبلی را کنار می زند. برای مثال کد زیر را در نظر بگیرید:
<head>
<link rel=”stylesheet” type=”text/css” href=”styles_1.css“>
<link rel=”stylesheet” type=”text/css” href=”styles_2.css“>
</head>
اگر تضادی بین استایل های موجود در این دو استایل خارجی وجود داشته باشد ، قوانین موجود در styles_2.css اعمال خواهند شد.
ویژگی وراثت نمونه دیگری از رفتار آبشاری استایل های CSS است.
وقتی که شما یک استایل را برای یک عنصر والد تعریف می کنید ، عناصر فرزند نیز همان استایل را دریافت می کنند. به عنوان مثال ، اگر ما یک استایل رنگ را در یک لیست نامرتب اعمال کنیم ، موارد لیست فرزند هم همان استایل ها را نشان می دهند.
<head>
<style>
ul {color: red;}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
نحوه ارائه این کد؛
.code-sample-ul {color: red;}
• Item 1
• Item 2
اما تمام ویژگی های والد به عناصر فرزند منتقل نمی شود. مرورگرها برخی از خصوصیات را به عنوان خصوصیاتی غیر قابل وراثت تلقی می کنند. حاشیه ها (Margins) یکی از خاصیتهایی است که از والد به عنصر فرزند منتقل نمی شود.
قانون دوم CSS که تعیین می کند چه قوانینی برای هر تگ HTML اعمال شود، قانون خاصیت پذیری است.
قوانین CSS استایل انتخابگرهای خاص تر را بر آنهایی که کمتر خاص هستند در اولویت قرار می دهد. همانطور که گفتیم سه انتخابگر (selectors) متداول (تگ عناصر) ، (کلاسها) و (شناسه ها) هستند.
عامل دیگری که برخاصیت پذیری تأثیر می گذارد مکان نوشتن استایل های CSS است. استایل های درون خطی که با ویژگی style نوشته شده باشند سایر استایل های داخلی یا خارجی را نمی پذیرند.
روش دیگر برای افزایش خاصیت انتخابگر استفاده از مجموعه ای از تگ ها، کلاس ها و شناسه ها برای مشخص کردن تگی است که می خواهید آدرس دهی کنید. به عنوان مثال اگر می خواهید موارد لیست نشده را در یک لیست با یک کلاس ” example-list” موجود در یک div با شناسه “example-div” مشخص کنید ، می توانید از انتخابگر زیر برای استایل دهی استفاده کنید؛
div#example-div > ul.example-list > li {styles here}
اگرچه این یکی از راههای ایجاد یک انتخابگر بسیار خاص است اما توصیه می شود استفاده از این نوع انتخابگرها محدود باشد زیرا پردازش آنها نسبت به انتخابگرهای ساده زمان بیشتری می برد.
پس از درک نحوه وراثت و خاصیت پذیری می توانید تگ های موجود در یک صفحه وب را با درجه دقت بالایی مشخص کنید.
یک بار دیگر به کدهای نوشته شده در جلسات قبل نگاهی بیندازید؟ به چه صورت نوشته شده اند؟ پشت سر هم و در یک خط یا آبشاری و با نظم خاص زیر هم؟
سوال اینجاست که تفاوت این دو استایل نوشتن در CSS چیست؟
در واقع این دو هیچ تفاوتی در عمل با یکدیگر ندارند و تنها به خوانایی بهتر کمک می کنند. وقتی شما یک دستور CSS را به صورت خطی می نویسید، خوانایی کمتری دارد و پیدا کردن عناصر و ویژگی ها در آن برای خواننده کمی دشوار است. اما مزیت این نوع نوشتن این است که نوشته فشرده می شود یعنی فایل شما حداقل حجم را خواهد داشت.
در مقابل نوشتن زیر هم یا همان آبشاری حجم بیشتری را اشغال می کند، اما از خوانایی بهتری برخوردار است.
نتیجه این که در عمل هیچکدام از این سبک های نوشتاری CSS با یکدیگر تفاوت ندارند و یک نتیجه حاصل میشود.
مثال زیر نحوه ی نوشتن دستورات به صورت آبشاری است که باعث خوانایی بیشتر می شود.
ul.example-list li
{
list-style-type: disc;
color: red;
text-decoration: black underline double;
padding: 10px;
}
حال همین کد را به صورت فشرده می نویسیم؛
ul.example-list li{list-style-type: disc;color: red;text-decoration: black underline double;padding: 10px; }
در مواقعی که بخواهیم فایل ها کم حجم باشند تا سرعت لود بهتری داشته باشیم از فایل فشرده استفاده می کنیم اما برای توسعه و ویرایش حالت آبشاری مناسب است.
منبع؛ www.html.com
