استایل دادن به کمک CSS
مهندس محسن صادق نژاد
این پست با مسیر متخصص CSS مرتبط است. مشاهده مسیر (Roadmap)
این پست با مسیر متخصص HTML مرتبط است. مشاهده مسیر (Roadmap)
همانطور که می دانید با کمک های HTML می توانیم ساختار کلی یک صفحه وب را پیاده سازی کنیم. برای استایل دادن و زیباتر کردن آن باید از CSS کمک بگیریم. در ادامه به آموزش استایل دادن به کمک CSS می پردازیم. پس تا انتها همراه ما باشید.
احتمالا این قیاس را شنیده اید که دستورات نوشته شده با HTML را به اسکلت یک ساختمان تشبیه می کنند و برای ریزه کاری و موارد زیبایی سراغ CSS می روند.
برای استفاده از CSS به سه شیوه Inline , Internal , External می توان عمل کرد که در ادامه به بررسی آنها می پردازیم.
استایل دادن به کمک CSS : روش اول Inline
در شیوه اینلاین (Inline) ویژگی هایی که قصد اعمال آنها به عنصر مربوطه را در صفحه داریم در تگ مختص همان عنصر ذکر می شود.
به مثال زیر توجه کنید:
<!DOCTYPE html> <html> <body> <h1 style="color:blue;">tutsxen ACADEMY</h1> <p style="color:red; font-size:25pt;">tutSxen.com</p> </body> </html>
خروجی مثال بالا به شکل زیر خواهد بود:
همانطور که مشاهده می کنید، استایل های مربوط به هر عنصر را در داخل تگ ابتدایی آن و درون دابل کوتیشن” ” ذکر کرده ایم. بسیاری از برنامه نویس ها از این شیوه استفاده نمی کنند؛ زیرا در صورت افزایش تعداد خط های کد ها و بیشتر شدن تعداد استایل های هر عنصر، خوانایی کد به شدت پایین می آید.
Internal
روش دوم استایل دهی اینترنال ( Internal ) می باشد. در این شیوه در تگ head صفحه HTML خود تگ style را قرار می دهیم و استایل های خود را در آن ذکر می کنیم.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>Tutsxen ACADEMY</h1>
<p>tutsxen.com</p>
</body>
</html>
همانطور که در بالا مشاهده می کنید. استایل های مورد نیاز خود را در بخش head و در درون تگ style قرار می دهیم.
همانطور که در تصویر مشخص است استایل ها به متن اعمال شده اند.
External
شیوه سوم رایج ترین شیوه استفاده از CSS می باشد که اغلب طراحان سایت از این روش برای استایل دهی به صفحه خود استفاده می کنند.
در این شیوه یک فایل دیگر با پسوند .css ایجاد کرده و با کمک تگ لینک فایل html صفحه و فایل style.css را بهم لینک می کنند.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> </body> </html>
دقت کنید که تگ لینک باید بین تگ head صفحه HTML ما باشد. در قسمت href تگ link باید آدرس فایل CSS که ایجاد کرده ایم را بدهیم. در بخش اول نیز باید stylesheet قرار بدهیم.
به انتهای آموزش جذاب “استایل دادن به کمک CSS” رسیدیم. اگر تمایل دارید دیگر آموزش های ما در رابطه با طراحی سایت را مشاهده کنید؛ اینجا کلیک کنید.
چنانچه ابهام یا سوالی داشتید؛ می توانید در بخش نظرات مطرح نمایید. خدا نگه دارتان.
مهندس محسن صادق نژاد
دبیر | مهندس نرم افزار دانشگاه شهید رجایی