سلام بر شما
جلسه سیزدهم آموزش HTML5 رو با آشنایی بیشتر شما با زبان CSS ادامه می دیم. در این جلسه شما نحوه استفاده از از زبان CSS رو آموزش ببینید و از این به بعد یه دستی به روی فایل ها و کدهای HTML بندازین. نکته اینکه که بدون CSS نمی تونید در دنیای امروزی کدنویسی کنید بنابراین حتما این جلسه رو به صورت جدی مطالعه کنید.
اولین نکته اینکه CSS مخفف کلمات Cascading Style Sheets هست. در زبان برنامه نویسی HTML برای اضافه کردن کدهای CSS به فایل های HTML سه راه وجود داره:
1. کدهای درون خطی: یعنی در هر تگ با استفاده از خصوصیت style دستورات CSS رو اضافه کنین.
2. کدهایی داخلی: بین تگ <style> که خود این تگ در داخل تگ <head> قرار می گیره کدهای CSS اضافه بشه.
3. کدهای خارجی: در این روش فایل های خارجی که در آدرس دیگه ای هستند فراخوانی می شوند.
بهترین راه برای اضافه کردن دستورات CSS به فایل HTML سومین راه است ولی ما در آموزش ها از راه دوم استفاده می کنیم چون ساده تر و راحت تر هست.
سینتکس CSS
در زبان CSS برای کدنویسی دستورات از فرمول زیر استفاده می شود:
element { property:value ; property:value }
element نام المان HTML و property دستور CSS و هم چنین value مقدار دستور CSS هست.
CSS درون خطی
از این روش معمولا برای کدنویسی دستور برای یک تگ و یا تعداد معدودی از تگ ها استفاده می شود. در واقع این روش همانن روش خصوصیت style است که معمولا هر تگی قبول می کند. برای مثال:
<h1 style="color:blue">This is a Blue Heading</h1>
CSS داخلی
این روش معمولا برای دستورات CSS ای استفاده میشه که دستورات عمومی اون صفحه هستند. توجه داشته باشید که در واقع فقط برای اون صفحه هستند و اگه بخوایین تو تمام صفحات از کدهای CSS استفاده کنیم از روش سوم استفاده می کنیم. در این روش شما یه تگ با نام <style> در داخل تگ <head> ایجاد می کنین و داخل تگ <style> دستورات CSS رو مینویسین. برای مثال:ک
<!DOCTYPE html> <html> <head> <style> body {background-color:lightgrey} h1 {color:blue} p {color:green} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
CSS خارجی
آخرین و بهترین روش برای طراحی وب امروزی! زمانی که شما میخوایین کدهای CSS زیادی رو به صفحات زیادی اضافه کنین در واقع از این روش استفاده می کنین. در این روش شما میتوانید با تغییر یک دستور تاثیر این تغییر را در کل سایت ببینید. برای فراخوانی فایل خارجی CSS در داخل تگ <head> از تگ <link> استفاده می کنیم. برای روشن تر شدن موضوع به مثال زیر توجه کنید:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
خب برای این جلسه کافی هست. این جلسه فراخوانی و در واقع استفاده از دستورات CSS رو بهتون آموزش دادیم. در جلسه بعد نیز وارد مبحث خود دستورات CSS میشیم و با برخی از دستورات CSS آشنا خواهید شد.
ممنون – آی وحید