آموزش css (سی اس اس ) به زبان ساده و 3 گام اولیه شروع آن

css (سی اس اس) به ما اجازه می دهد تا ویژگی های سبک مانند رنگ پس زمینه، اندازه فونت، عرض، ارتفاع و موارد دیگر را با عناصر HTML خود مرتبط کنیم. در آغاز راه یادگیری css همراه نادین سافت باشید تا با 3 گام اولیه شروع آن آشنا شوید.

آموزش css (سی اس اس) به زبان ساده

یک صفحه وب بدون (CSS (Cascading Style Sheets (سی اس اس) مانند یک کیک بدون فر است. یک کیک بدون فر هدف خود را برآورده می کند اما اشتها آور به نظر نمی رسد!

HTML مانند CSS (سی اس اس) از نظر فنی یک زبان برنامه نویسی نیست. بنابراین به شما اجازه نمی دهد که اقداماتی را انجام دهید، CSS (سی اس اس) به شما این امکان را می دهد که سبک هایی را به HTML اضافه کنید. کاری که شما باید انجام دهید این است که ببینید چگونه استایل های این زبان را با عناصر HTML خود مرتبط کنید.

3 گام اولیه شروع یادگیری CSS (سی اس اس)

1. The CSS selector برای شناسایی عنصر یا عناصر HTML مورد استفاده قرار می گیرد که شما می خواهید سبک موردنظر خود را بر روی آن اعمال کنید.

2. The CSS property name در واقع سبک خاصی را که شما می‌خواهید به عناصر HTML منطبق با آن اضافه کنید مشخص می کند.

3. The CSS property value مقدار ویژگی سبکی را که می خواهید اعمال کنید مشخص می کند.

در این قسمت مثالی از نحوه ترکیب این قطعات برای تنظیم رنگ و اندازه قلم یک پاراگراف برای شما عزیزان آورده شده است:

p {
  color: red;
  font-size: 12px;
}

یادگیری css (سی اس اس) را از کجا شروع کنیم؟

1. حرف p نشان دهنده ی <p> (پاراگراف) تگ HTML است. این بدان معناست که تگ <p> در صفحه وب اعمال می شود.

2. شما باید مشخص کنید که چه سبک هایی را می خواهید برای همه تگ در صفحه وب خود اعمال کنید.

3. در این قسمت شما جفت‌هایی از ویژگی‌ها و مقادیر این زبان را پیدا می‌کنید که با یک دونقطه از هم جدا شده‌اند. این ویژگی ها شامل ( “رنگ” و “اندازه قلم”) هستند که در سمت چپ قرار دارند. مقادیر این ویژگی ها نیز شامل ( “قرمز” “12px”) بوده و در سمت راست هستند. نقطه ویرگول در قسمت پایانی به هر جفت از این ویژگی ها/مقادیر قرار می گیرد.

4. حالا شما می توانید متوجه شوید که چگونه این زبان کار می کند. هر یک از این قطعه های کد این زبان که در بالا معرفی کردیم به مرورگر می‌گوید که از حروف قرمز با اندازه ۱۲ پیکسل برای تمام متن‌هایی که در داخل تگ‌ها قرار می‌گیرند استفاده کند.

5. حالا یک صفحه HTML می داند که شامل این سبک های این زبان است. بنابراین شما می توانید تگ HTML را وارد کنید. معمولاً سبک‌های این زبان در فایل‌های جداگانه از HTML ایجاد می‌شوند. این بدان معنی است که شما نیاز به راهی برای وارد کردن آنها به فایل های HTML خود دارید تا مرورگر بداند که این سبک ها وجود دارند.

حالا شما این عناصر را در بخش فایل‌های HTML قرار می‌دهید که این امکان را می‌دهد فایل‌های CSS خارجی را برای وارد کردن مشخص کنید:

<head>

    <title>My Page Title</title>

    <link rel="stylesheet" type="text/css" href="/home/style.css">

</head>

چرا باید css (سی اس اس) را یاد بگیریم؟

این زبان برای تعریف سبک‌های مختلف برای صفحات وب شما از جمله طراحی، طرح‌بندی و تغییرات نمایش برای سیستم های گوناگون و در اندازه‌های مختلف استفاده می‌شود. تعاریف سبک ها معمولاً در فایل‌های خارجی آن ذخیره می‌شوند. شما می توانید ظاهر کل یک وب سایت را با تغییر تنها یک فایل تغییر دهید!

که در این قسمت برای نمونه یک قسمت از نحوه کار با CSS (سی اس اس) برای شما عزیزان آورده شده است.

body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}

جمع بندی

css (سی اس اس) در واقع زبانی است که برای استایل دادن به یک صفحه وب می توانید از آن استفاده کنید. 3 گام شروع یادگیری آن را در این مقاله از نادین سافت برای شما عزیزان ارائه کردیم. توصیه می کنیم 5 اصل یادگیری این زبان را که در این مقاله به آن اشاره شده است به طور کامل مطالعه کنید.

منبع

https://www.freecodecamp.org/news/how-to-learn-programming#7-tackle-some-css

آموزش css (سی اس اس ) به زبان ساده و 3 گام اولیه شروع آن