استایل دادن به کمک CSS

292

0

استایل دادن به کمک CSS

این پست بخشی از مسیر متخصص CSS است. اگر به این مسیر علاقه مندید اینجا کلیک کنید.

این پست بخشی از مسیر متخصص HTML است. اگر به این مسیر علاقه مندید اینجا کلیک کنید.

همانطور که می دانید با کمک های 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>

خروجی مثال بالا به شکل زیر خواهد بود:

خروجی Inline 
استایل دادن به کمک CSS : خروجی Inline

همانطور که مشاهده می کنید، استایل های مربوط به هر عنصر را در داخل تگ ابتدایی آن و درون دابل کوتیشن” ” ذکر کرده ایم. بسیاری از برنامه نویس ها از این شیوه استفاده نمی کنند؛ زیرا در صورت افزایش تعداد خط های کد ها و بیشتر شدن تعداد استایل های هر عنصر، خوانایی کد به شدت پایین می آید.

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 قرار می دهیم.

خروجی Internal 
خروجی Internal

همانطور که در تصویر مشخص است استایل ها به متن اعمال شده اند.

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” رسیدیم. اگر تمایل دارید دیگر آموزش های ما در رابطه با طراحی سایت را مشاهده کنید؛ اینجا کلیک کنید.

چنانچه ابهام یا سوالی داشتید؛ می توانید در بخش نظرات مطرح نمایید. خدا نگه دارتان.

مهندس محسن صادق نژاد

دبیر | مهندس نرم افزار دانشگاه شهید رجایی

2سال در کنار تاتژن

اشتراک
اطلاع از
guest
0 Comments
Inline Feedbacks
View all comments