استایل دار کردن المان های HTML با CSS
CSS مخفف Cascading Style Sheets است به معنای ورق های استایل آبشاری.
سی اس اس توضیح میدهد که چگونه المان های اچ تی ام ال بر روی صفحه برگه یا هر رسانه دیگر نمایش داده شوند.
سی اس اس کار های بسیار مفیدی انجام میدهد. میتواند قالب بندی صفحات مختلفی را در آن واحد انجام دهد.
سی اس اس میتواند به سه روش به المان های اچ تی ام ال اضافه شود:
- Inline یا “در خط” با استفاده از خاصیت style در المان های اچ تی ام ال
- Internal یا داخلی با استفاده از یک المان <style> در قسمت <head>
- External یا خارجی با استفاده از یک فایل سی اس اس خارجی
معمول ترین راه در اغلب اوقات برای اضافه کردن سی اس اس نگه داشتن استایل در پرونده های جداگانه سی اس اس است. (معمولا با نام style.css و یا styles.css)
به هر حال ما اینجا از روش های اینلاین و داخلی استفاده میکنیم چون برای تشریح ساده تر بوده و برای شما آسان تر است تا خودتان امتحان کنید.
نکته: شما میتوانید درباره سی اس اس موارد بیشتری را در آموزش های سی اس اس ما بیاموزید.
استفاده از CSS به صورت inline یا در خط
یک سی اس اس در خط یا همان اینلاین استفاده میشود تا یک استایل منحصر به فرد را بر یک المان اچ تی ام ال اعمال کند.
یک سی اس اس درخط از خاصیت style در یک المان اچ تی ام ال استفاده میکند.
این مثال، رنگ یک متن را آبی تنظیم میکند:
استفاده از کد های اینلاین css سریع است، ولی به علت اینکه این سبک سی اس اس به دیگر المان ها قابل اطلاق نیست، حجم کار را بالا می برد.
استفاده از CSS به صورت internal یا داخلی
یک سی اس اس داخلی استفاده میشود تا برای یک صفحه اچ تی ام ال یک سبک را مشخص کند.
یک سی اس اس داخلی در یک المان <style> در قسمت <head> یک برگ اچ تی ام ال، معمولا تعریف میشوند. گرچه می توان از این تگ در هر نقطه از صفحه استفاده کرد.
مثال:
استفاده از CSS به صورت external یا خارجی
یک برگ استایل سی اس اس خارجی برای تعریف استایل تعداد زیادی از صفحات اچ تی ام ال استفاده میشود.
با یک برگ استایل خارجی شما میتوانید ظاهر کلی یک وب سایت را با تغییر فقط یک فایل عوض کنید.
برای استفاده از یک برگ استایل خارجی یک لینک به آن را در قسمت <head> صفحه اچ تی ام ال قرار دهید. (در هر نقطه دیگر نیز می توانید این کار را انجام دهید)
مثال:
یک برگ استایل خارجی میتواند در هر ویرایشگر متنی نوشته شود.
پرونده نباید هیچگونه کد اچ تی ام ال داشته باشد و باید با پسوند .css ذخیره شود.
در اینجا شکل style.css را می بینید:
در ادامه به معرفی برخی از property های معمول برای استفاده در CSS خواهیم پرداخت.
تعیین فونت در CSS
مولفه color سی اس اس رنگ متن مورد استفاده را تعریف میکند.
مولفه font-family در سی اس اس فونت مورد استفاده را تعریف میکند.
مولفه font-size در سی اس اس اندازه متن مورد استفاده را تایین میکند.
مثال:
تعییین خط حاشیه border در CSS
مولفه حاشیه در سی اس اس یک حاشیه در اطراف یک المان اچ تی ام ال قرار میدهد.
مثال:
تعییین پدینگ padding در CSS
مولفه padding در سی اس اس فاصله بین متن و حاشیه را تایین میکند.
مثال:
تعیین margin در CSS
مولفه margin در سی اس اس یک فاصله در خارج حاشیه ی border قرار میدهد.
مثال:
استفاده از خاصیت id برای ارتباط المان با CSS
برای تعریف یک استایل خاص برای یک المان مخصوص یک خاصیت id به المان اضافه کنید :
سپس با id مخصوص یک استایل را برای المان مشخص کنید:
مثال:
نکته: id یک المان باید در کل صفحه منحصر به فرد باشد زیرا انتخابگر id استفاده میشود تا id منحصر به فرد را برای یک المان پیدا کند.
اگر می خواهید یک نشانه برای چند المان بگذارید، باید از خاصیت class در المان ها استفاده کنید.
استفاده از خاصیت class برای ارتباط المان با CSS
برای تعریف استایل به نمونه های خاص از المان ها یک خاصیت class به المان اضافه کنید:
سپس یک استایل برای المان با class مشخص تعریف کنید.
مثال:
مرجع های خارج از سایت برای css های external
برگه های استایل خارجی میتوانند باید یک url کامل یا یک مسیر مرتبط به صفحه فعلی رجوع داده شوند.
این مثال از یک url کامل استفاده میکند تا به یک برگه استایل style sheet لینک شود:
مثال:
این مثال به یک برگه استایل واقع در خود وب سایت و پوشه html لینک شده است.
مثال:
این مثال لینک میشود به یک برگه استایل style sheet که درپوشه ای که خود سایت هست قرار دارد:
مثال:
در مورد مسیر های فایل ها در فصل مسیر فایل اچ تی ام ال بیشتر میخوانیم.
در ادامه آموزش گام به گام زبان HTML، مطلب آموزش HTML – فصل نهم: لینک ها را مطالعه کنید.
