مثالی ساده برای شروع ساخت صفحه وب با HTML
CSS یک زبان برنامه نویسی ظاهری است که برای استایل دهی به عناصر نوشته شده به زبان HTML یا سایر زبان های نشانه گذاری استفاده می شود. CSS مخفف عبارت انگلیسی Cascading Style Sheets و به معنی صفحات استایل آبشاری است. با استفاده از CSS می توانید خصوصیات ظاهری مانند رنگ، فونت، اندازه، ترازبندی، حاشیه و … را برای هر عنصر در صفحه وب تعیین کنید. CSS دارای چندین نسخه و ویژگی است که با پشتیبانی مرورگرها متفاوت هستند. منبع
برای یادگیری CSS شما باید ابتدا با HTML آشنا باشید. سپس می توانید از منابع مختلف آنلاین یا چاپی برای آموزش CSS استفاده کنید. برخی از منابع آموزشی رایگان CSS عبارتند از:
- سرفصل های آموزش CSS در وب سایت میزفا که به صورت مقاله ای و گام به گام CSS را توضیح می دهد.
- دوره آموزش CSS به زبان ساده و سریع در وب سایت وب استاریست که به صورت تصویری و پروژه محور CSS را آموزش می دهد.
- دوره آموزش صفر تا صد CSS و HTML در وب سایت روکسو که به صورت رایگان، پروژه محور و فارسی CSS و HTML را آموزش می دهد.
زبان برنامه نویسی CSS دارای کاربردهای متعددی است که به طراحی و زیباسازی صفحات وب کمک می کند. برخی از کاربردهای CSS عبارتند از:
- تعیین ارتفاع و عرض، رنگ، فونت، حاشیه، ترازبندی و سایر خصوصیات ظاهری عناصر صفحات وب.
- طراحی سایت رسپانسیو یا واکنش گرا که بتواند در دستگاه های مختلف با اندازه های متفاوت نمایش داده شود.
- جداسازی اطلاعات محتوا (HTML) از اطلاعات ظاهری (CSS) که باعث افزایش سرعت، انعطاف پذیری و قابلیت نگهداری سایت می شود.
- اضافه کردن جلوه های زیبایی مانند گرادینت، شفافیت، سایه، تبدیلات، انتقالات و انیمیشن ها.
- استفاده از شبه کلاس ها و شبه عناصر برای تعریف استایل های مخصوص برای حالات خاص عناصر.
ساخت صفحه وب با CSS
برای طراحی یک صفحه وب زیبا با CSS شما باید ابتدا یک ساختار HTML برای صفحه خود داشته باشید. سپس باید با استفاده از دستورات CSS ویژگی های ظاهری عناصر HTML را تعیین کنید. برای این کار شما می توانید از روش های مختلفی برای اضافه کردن CSS به HTML استفاده کنید. مثلا می توانید CSS را درون خطی (inline)، داخلی (internal) یا خارجی (external) نوشته و به HTML متصل کنید. همچنین می توانید از انتخابگر های مختلف برای هدف گیری عناصر مورد نظر خود استفاده کنید. مثلا می توانید از انتخابگر عنصر، کلاس، آیدی، صفت، شبه کلاس و شبه عنصر استفاده کنید. بعد از اینکه ویژگی های ظاهری عناصر را تعیین کردید، می توانید با استفاده از جلوه های زیبایی مانند گرادینت، شفافیت، سایه، تبدیلات، انتقالات و انیمیشن ها صفحه خود را جذاب تر کنید. البته باید به این نکته توجه داشته باشید که همه مرورگر ها از همه ویژگی های CSS پشتیبانی نمی کنند و بعضی از آن ها نیاز به پیشوند خاص دارند. پس قبل از استفاده از یک ویژگی جدید، بهتر است سازگاری آن را با مرورگر های مختلف بررسی کنید. مطالب بیشتر را اینجا بخوانید
اضافه کردن CSS به HTML
برای اضافه کردن CSS به HTML شما می توانید از سه روش زیر استفاده کنید:
- روش درون خطی (inline): در این روش شما می توانید ویژگی های ظاهری یک عنصر را با استفاده از صفت style در تگ HTML آن عنصر تعیین کنید. مثلا:
“`html
<p style=”color: blue; font-size: 20px;”>این یک پاراگراف آبی رنگ با اندازه فونت 20 پیکسل است.</p>
“`
- روش داخلی (internal): در این روش شما می توانید ویژگی های ظاهری چندین عنصر را با استفاده از تگ style در بخش head صفحه HTML تعیین کنید. مثلا:
“`html
<head>
<style>
p {
color: blue;
font-size: 20px;
}
h1 {
color: red;
text-align: center;
}
</style>
</head>
“`
- روش خارجی (external): در این روش شما می توانید ویژگی های ظاهری تمام صفحات وب سایت خود را با استفاده از یک فایل CSS جداگانه تعیین کنید. برای این کار شما باید فایل CSS خود را با پسوند .css ذخیره کنید و سپس با استفاده از تگ link در بخش head صفحه HTML به آن متصل کنید. مثلا:
“`html
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
“`
CSS دارای چهار نسخه می باشد که عبارتند از:
- CSS1: این نسخه اولین نسخه CSS می باشد که در سال 1996 معرفی شد و دارای ویژگی های ابتدایی مانند تعیین رنگ، فونت، حاشیه و پس زمینه بود. این نسخه اکنون منسوخ شده است و پیشنهاد نمی شود از آن استفاده کنید.
- CSS2: این نسخه در سال 1998 معرفی شد و دارای ویژگی های جدیدتری مانند تعیین ارتفاع و عرض، موقعیت، جدول ها، پرینت و مدیا کوئری بود. این نسخه همچنان پشتیبانی می شود اما برخی از ویژگی های آن توسط نسخه های جدیدتر جایگزین شده اند.
- CSS3: این نسخه در سال 2012 معرفی شد و دارای ویژگی های پیشرفته تری مانند گرادینت، شفافیت، سایه، تبدیلات، انتقالات، انیمیشن ها، فلکس باکس، گرید و رسپانسیو بود. این نسخه در حال حاضر رایج ترین و محبوب ترین نسخه CSS می باشد و توسط بسیاری از مرورگر ها پشتیبانی می شود.
- CSS4: این نسخه در حال توسعه است و دارای ویژگی های جدیدتر و قوی تری خواهد بود. برخی از ویژگی های آن عبارتند از: تغیر رنگ، فانکشن ها، سلکتور های جدید، کاستوم پروپرتی ها، کانتینر کوئری و غیره.
اطلاعات خوبی بود
اطلاعات خوبی بود . درمورد روش های یادگیری هم توضیح بدید لطفا