جستجو برای:
  • دوره ها
    • حساب کاربری
    • سبد خرید
  • مقالات
 
نارنجک
0

ورود و ثبت نام

دسته بندی‌ دوره‌ها
  • صفحه اصلی
  • دوره ها
    • دوره مقدماتی HTMLCSS
    • دوره پروژه محور php
    • دوره مقدماتی برنامه نویسی
  • مقالات
    • آموزش پی اچ پی
    • آموزش لاراول
    • آموزش جاوا اسکریپت
    • آموزش HTML
    • آموزش CSS
    • آموزش وردپرس

وبلاگ

نارنجک مقالات کل دسته بندی ها آموزش CSS سلکتورها در CSS

سلکتورها در CSS

۱۳۹۹/۰۸/۰۷
ارسال شده توسط سالار حقیقت نیا
آموزش CSS ، کل دسته بندی ها ، مقالات
337 بازدید
سلکتورها در CSS

در مقاله قبل فهمیدیم CSS چیه و با CSS آشنا شدیم در این مقاله می خواهیم با مهم ترین سلکتورها در CSS آشنا شویم.

فهرست محتوا پنهان
1 سلکتور چیست ؟
2 انتخاب بر اساس اسم تگ
3 انتخاب بر اساس id تگ
4 انتخاب بر اساس class تگ
5 ویژگی های سلکتورها در CSS

اگر با سینتکس CSS آشنایی ندارید حتما این مقاله را بخوانید: CSS چیست به زبان ساده

سلکتور چیست ؟

برای استایل دادن به یک تگ خاص HTML احتیاج داریم که بتوانید آن تگ را انتخاب کنیم و سپس آن را استایل دهی کنیم با استفاده از سلکتورها در CSS می توانیم تگ مورد نظر را انتخاب کرده و استایل مورد نظر خود را به آن تگ بدهیم روش های مختلفی برای انتخاب یک تگ HTML وجود دارد که در ادامه با آنها آشنا می شویم.

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

انتخاب بر اساس اسم تگ

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

<p> نارنجک </p>
p {
 text-align: center;
 color: red;
}

انتخاب بر اساس id تگ

هر تگ HTML می تواند یک id خاص داشته باشد و با استفاده از این id می توانیم آن تگ را انتخاب و سپس استایل دهی کنیم برای انتخاب یک تگ با استفاده از id در CSS باید قبل از id علامت # را بگذاریم.

از یک id در HTML فقط برای یک تگ می توان استفاده کرد id ها در HTML برای هر تگ باید خاص باشند.

<p id="route" > نارنجک </p>
#route {
  text-align: center;
  color: green;
}

انتخاب بر اساس class تگ

ما می توانیم برای هر تگ HTML یکی کلاس تعریف کنیم اما این کلاس همانند id مختص به یک تگ نیست و می توان آن را برای هر تگ دلخواه استفاده کرد برای انتخاب یک تگ با استفاده از class در CSS باید قبل از class علامت . را بگذاریم

<p class="route" > نارنجک </p>
.route { text-align: center; color: green; }

یک تگ می تواند چند کلاس هم داشته باشد.

<p class="route route2" > نارنجک </p>
.route { text-align: center; color: green; }
.route2 { color: red; }

برای انتخاب کردن تمام عناصر HTML از علامت * استفاده می کنیم

* { text-align: center; color: green; }

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

h1 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}
h1, p {
  text-align: center;
  color: red;
}

اگر می خواهید یک تگ که فرزند تگ دیگری است را انتخاب کنید می توانید به صورت زیر عمل کنید در مثال زیر تگ p انتخاب شده است که فرزند یا درون تگ div است.

div p { text-align: center; color: red; }

ویژگی های سلکتورها در CSS

سلکتور hover: که برای زمانی استفاده می شود که موس را روی یک عنصر خاص HTML می برید در مثال زیر تگ a در حالت عادی آبی است اما زمانی که موس روی آن برود قرمز می شود.

a { color: blue; }   /// در حالت عادی آبی است

a:hover { color: red; }   ///  زمانی که موس روی آن برود قرمز می شود

سلکتور active: که برای زمانی استفاده می شود که روی یک عنصر خاص کلیک می کنید و با برداشت دستتان از روی موس از بین می رود.

a { color: blue; } /// در حالت عادی آبی است 

a:active { color: red; } /// زمانی که کلیک کنید قرمز می شود و با برداشتن کلیک آبی

سلکتور focus: که برای زمانی استفاده می شود که روی یک عنصر خاص کلیک می کنید و با برداشت دستتان از روی موس از بین نمی رود.

a { color: blue; } /// در حالت عادی آبی است

 a:active { color: red; } /// زمانی که کلیک کنید قرمز می شود و با برداشتن کلیک قرمز می ماند

سلکتور (nth-child(n: که با استفاده از آن می توانید n امین تگ از نوع خود را انتخاب کنید کافیه به جای n عدد مورد نظر خود را بنویسید برای مثال اگر می خواهید سومین div را انتخاب کنید می توانید مانند کد زیر عمل کنید.

div:nth-child(3) { color: blue; }

 

سلکتورهای بسیاری در زبان CSS وجود دارد که در این مقاله ما با مهم ترین آن ها آشنا شدیم امیدوارم این مقاله هم براتون مفید بوده باشه.

4.8 / 5 ( 5 امتیاز )
اشتراک گذاری:
برچسب ها: cssآموزش CSSآموزش selector در CSSسلکتورها در CSSطراحی سایتطراحی وب

مطالب زیر را حتما مطالعه کنید

توابع در php

توابع در php

در این مقاله از سری مقالات آموزش PHP سایت نارنجک، با هم درمورد توابع در php...
data types در جاوا اسکریپت

data types در جاوا اسکریپت انواع داده

بعد از آشنایی با متغیرها نوبتِ یادگیری انواع داده یا data types در جاوا اسکریپت...
ساختار برنامه در لاراول

ساختار برنامه ‌در لاراول

در این مقاله از سری مقالات آموزش Laravel سایت نارنجک، ساختار برنامه ‌در لاراول رو با...
کاربرد Attribute در HTML

کاربرد Attribute در HTML

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

عملگرها در جاوا اسکریپت

بعد از آشنایی با متغیر ها در زبان جاوا اسکریپت اولین چیزی که هرکسی باید...
حلقه‌ها در زبان php

حلقه‌ها در زبان php

در این مقاله از سری مقالات آموزش PHP سایت نارنجک، با هم حلقه‌ها در زبان php...
قدیمی تر عملگرها در جاوا اسکریپت
جدیدتر کاربرد Attribute در HTML

دیدگاهتان را بنویسید لغو پاسخ

جدیدترین مقالات
  • توابع در php ۱۳۹۹/۰۸/۱۶
  • data types در جاوا اسکریپت انواع داده ۱۳۹۹/۰۸/۱۶
  • ساختار برنامه ‌در لاراول ۱۳۹۹/۰۸/۱۱
  • کاربرد Attribute در HTML ۱۳۹۹/۰۸/۱۰
  • سلکتورها در CSS ۱۳۹۹/۰۸/۰۷
درباره نارنجک

ما در نارنجک به دنبال آموزش حرفه ای و پروژه محور شما هستیم. آموزش های بی‌نظیری که شما را از هر آموزش دیگری بی نیاز می‌کند.

  • info@narenjak.com
دسترسی سریع
  • مقالات
  • دوره ها
  • حساب کاربری
  • تماس با ما
  • درباره ما
تمامی حقوق برای سایت نارنجک محفوظ می باشد.

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت