css چیست و چه کاربردی دارد

css چیست و چه کاربردی دارد

لینک کوتاه آموزش: https://www.nonevisan.ir/c/7656d

اگر سایت را به بدن یک انسان تشبیه کنیم منطق سایت که مثلا بررسی میکند آیا کاربر ثبت نام کرده یا نه اجزای درون بدن انسان میشود و چشم , گوش , بینی و دیگر اندام که از بیرون مشاهده میشوند css هستند اگر بخواهیم بیشتر بررسی کنیم css طرح و دیزاین یک سایت است در ادامه با ما همراه باشید تا بیشتر درباره اینکه css چیست اطلاعات کسب کنید

d13adb5b-e46c-452f-b278-a9ab6a53efb1.jpg

این آموزش فاقد ویدئو آموزشی است

css چیست

همانطور که گفتم با css میتوانید سایت خود را دیزاین کنید و سایت را زیبا کنید برای مثال فکر کنید میخواهید یک کلمه که بهش لینک دادید رو رنگی کنید پس از css استفاده میکنید اینجا قابلیت color به کار شما میاید بزارید با ذکر نمونه ای بهتون نشون بدم

<p style="color:red">Ali</p>

در متن بالا یک تگ قرار دادم که اسم Ali را روی صفحه نشان میدهد اما برای اینکه بتونم بهش css بدم اول یدونه فاصله گذاشتم و بعد کلمه style را زدم و رنگ متن رو قرمز کردم حالا شما خیلی کار ها میتوانید بکنید مثلا اگه موس رفت روی کلمه رنگش عوض بشه و دیگر کارها که باید بتونید با کنار هم گذاشتن این قابلیت یک قالب خوش و زیبا طراحی کنید تا کاربر را جذب کند

 

به چند روش میتوان به یک تگ css داد

روش اول:

اولین شکلی که میتوانید css را روی یک بخش اعمال کنید این است که جلوی خود تگ بنویسید مثل کدی که من بالا زدم بزارید یه مثال دیگه براتون بیارم تا بهتر متوجه بشید

<p style="background-color:blue">Nonevisan</p>

در این یکی کد که روی صفحه Nonevisan را چاپ میکند style دادیم که بک گراند متن آبی شود

 

روش دوم:

در یک بدنه html تگی وجود دارد به نام head که شما میتوانید در اون بخش css بنویسید بزارید با مثالی بهتر بهتون بگم

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

کد های بالا یک سند استاندارد html هست که متشکل از html , head و body است حالا در روش دوم شما یک تگ در body که ایجاد بکنید دیگه جلوش css نمیدید بلکه css را در تگ head میدهید برای مثال

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
}PInBody.
       ;color: red
        }
    </style>
</head>
<body>
    <p class="PInBody">Mahdi</p>
</body>

</html>

اگر به مثال بالا دقت کنید دیگه style در خود تگ p قرار ندارد بلکه در بخش تگ head خود جدا شده در اینجا باید به تگی که میخواهد css بگیرد class بدهید و یک نام مناسب انتخاب کنید و در style یک نقطه بزارید و بعد اسم کلاس دقیقا مثل مثال بالا بعدش میتونید دیگه css های خود را اعمال کنید

 

روش سوم:

این روش که بهترین روش برای css دادن به تگ ها است به این شکل است که اصلا style را در صفحه html ندهیم بلکه یک صفحه جدا برای css ها ایجاد کنیم بزارید با یک مثال بهتر بهتون توضیح بدم

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p class="PInBody">Mahdi Zare</p>
</body>

</html>

 

}PInBody.
;color: red
}

این روش در یک بخش مشابه روش دوم است اونم اینه که بازهم به تگی که میخواهد css بگیرد باید کلاس بدید اگر دقت کنید الان دیگه کد ها دو بخش هستند کد اول مثل همیشه یک صفحه html است که یک تگ p درونش قرار گرفته ولی کد بعدی بخشی از یک صفحه دیگر است یعنی html و css جدا شده اند و دیگر هر دو در یک صفحه نیستند طبق مثال بالا به تگ p کلاس دادیم و در یک فایل جدا css را اعمال کردیم حالا فکر کنید نمیخواهید کلاس بدهید و مثلا میخواهید همه ی تگ های p قرمز شوند اینجا میتونید به جای کلاس دادن بگید که همه ی تگ های p رو مثلا آبی کنه بزارید براتون مثالی بیاورم

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>Mahdi Zare</p>
</body>
</html>

 

}p
;background-color: orange

}

در این روش حتی اگه 1000 تاهم تگ p داشته باشید همشون css میگیرند برای مثال من در کد بالا گفتم همه ی تگ های p بک گراند نارنجی بگیرند در اینجا مثل کلاس دیگه اول نقطه ( . ) نمیزاریم و فقط اون تگی که میخواهیم css بگیره رو مثل بالا مینویسیم و css را اعمال میکنیم

 

نکته کلیدی که اینجا وجود دارد علامتی به این شکل ( ; ) در پایان همه ی کد ها وجود دارد که همون نقطه ویرگول یا در اصطلاح سی می کالن هستش و باید پایان هر کد css خود بدهید تا کد ها را تفکیک کند بزارید براتون یک مثال بیارم

}p
;background-color: orange
;color: red
;text-decoration: pink

}

در مثال بالا 3 تا کد نوشتم که همه css هستند اما نکته این است که پایان همشون سی می کالن وجود دارد تا از هم جدا بشن به این نکته حتما دقت بکنید دوستان عزیز زیرا اگه این علامت رو نزارید css هایی که نوشته اید کار نمی کند

امیدوارم از این آموزش لذت برده باشید در صورت هرگونه مشکل وارد بخش مدرسین شوید و به شماره من پیام دهید تا پاسخگوی سوالات شما عزیزان باشم خدانگهدار

دنبال کردن ما در تلگرام