برنامه نویسی

بخش 🚀 دانش CSS خود را تقویت کنید[1 of 2]

ek3nk4r 2023-07-09

0 44 خواندن این مطلب 4 دقیقه زمان میبرد

بخش 🚀 دانش CSS خود را تقویت کنید[1 of 2]

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

فهرست مطالب

معرفی

👋 به این وبلاگ خوش آمدید. این وبلاگ برای مبتدیانی است که به تازگی سفر توسعه وب را شروع کرده اند یا حرفه ای هایی که می خواهند خود را اصلاح کنند CSS دانش ما نکات اساسی را یاد خواهیم گرفت CSS. بیایید شروع کنیم 🚀. یک چیز دیگر برای این وبلاگ من یک وب سایت ایجاد کرده ام که برای هدف نمایش به من کمک می کند.

CSS

CSS مخفف the برگه های سبک آبشاری، که به ما کمک می کند تا وب سایت خود را سبک کنیم. مثلا رنگ پس زمینه، رنگ فونت، اندازه فونت و غیره

چگونه CSS را به وب سایت خود اضافه کنیم؟

ما در اینجا سه گزینه داریم

CSS درون خطی
CSS داخلی
CSS خارجی

بیایید زمان نگاهی به هر یک از اینها بیاندازیم.

CSS درون خطی

این CSS است که برای خاص اعمال می شود HTML عنصر با کمک ویژگی های HTML. اگر با این اصطلاحات آشنا نیستید به شما توصیه می کنم که وبلاگ قبلی من را بخوانید.

بیایید به کد نگاه کنیم.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title>
  </head>
  <body>
    <h1 style="color: red;">Hello world</h1>
  </body>
</html>

متوجه می شوید که ما چگونه از آن استفاده می کنیم ویژگی سبک در h1 عنصر به رنگ فونت را تغییر دهید به قرمز

شما به وب‌سایتی که من برای نمایش قبل از این کد ایجاد کرده‌ام نگاه کنید، به عنوان مثال استایل درون خطی و بعد از استایل.
قبل از سبک
بعد از استایل

CSS داخلی

CSS داخلی CSS است که در داخل نوشته شده است <style>...</style> برچسب ها
توجه داشته باشید: شما باید شامل style درون head برچسب زدن مثلا

  <head>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>

بیایید زمان بررسی کد کامل را ببینیم.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>

در اینجا می توانید به وب سایت زنده نگاه کنید. خواهید دید که هیچ تفاوتی بین این وب سایت زنده و قبلی وجود ندارد. زیرا ما همان کار را انجام می دهیم اما به شیوه ای متفاوت.

توجه داشته باشید: در اینجا ما استفاده می کنیم h1{//code } این است tag selector که در حال انتخاب است h1 عنصر یا برچسب HTML. در ادامه بیشتر به آن خواهیم پرداخت این وبلاگ.

CSS خارجی

نام خود توضیحی است. در این روش در حال ایجاد یک مجزا هستیم CSS فایل مثلا styles.css و بنویسید CSS کد و پیوند دهید HTML در فایل CSS قرار دهید و همه چیز به خوبی کار می کند.

ما می توانیم فایل CSS خارجی را به این شکل به HTML پیوند دهیم.

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

بیایید زمان مشاهده کدها باشد

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>

styles.css

h1 {
    color: red;
}

وب سایت زنده

توجه داشته باشید: 🤨 index.html و styles.css باید در همان سطح سلسله مراتب فایل باشد.

وقت آن است که به انتخابگرهای CSS نگاه کنیم

ما متداول ترین انتخابگرهای مورد استفاده در CSS را پوشش می دهیم. اگر می خواهید اطلاعات بیشتری کسب کنید، این جا کلیک کنید

انتخابگر عنصر
انتخابگر کلاس
انتخابگر شناسه

ما در حال نوشتن تمام کدهای زیر هستیم styles.css فایل .😇

انتخابگر عنصر

این انتخابگر به ما کمک می کند تا عنصر HTML را به سادگی با استفاده از آن انتخاب کنیم element or tag نام.
مثلا
index.html

<html>
  <head>
    <title>Hello world</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>

styles.css

h1 {
    color: red;
}

وب سایت زنده

این کد CSS در حال انتخاب است `h1` عنصر

انتخابگر کلاس

انتخابگر کلاس برای انتخاب عنصر توسط آن استفاده می شود class name. در عنصر باید a را تعریف کنیم attribute تحت عنوان class و در CSS فایل باید نام کلاس را بر اساس انتخاب کنیم . مثلا .heading.

توجه داشته باشید: 🤨 یک عنصر HTML ممکن است نام‌های کلاس متفاوتی داشته باشد

index.html

<html>
  <head>
    <title>Hello world</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1 class="heading">Hello world</h1>
  </body>
</html>

styles.css

.heading {
    color: red;
}

وب سایت زنده

انتخابگر شناسه

همانند انتخابگر کلاس id انتخابگر عنصر را با آن انتخاب می کند id name و در CSS فایل باید نام شناسه را بر اساس انتخاب کنیم # مثلا #main-heading.

index.html

<html>
  <head>
    <title>Hello world</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1 class="heading" id="main-heading">Hello world</h1>
  </body>
</html>

styles.css

.heading {
    color: red;
}

#main-heading{
   color: blue;
}

وب سایت زنده

توجه داشته باشید:

🤨 یک عنصر HTML باید نه متفاوت دارند – متفاوت ID نام ها نام شناسه باید برای عناصر مختلف منحصر به فرد باشد
در مثال مشاهده خواهید کرد که رنگ نهایی خواهد بود blue زیرا اولویت از id selector بالاتر از class selector.