97 Views
2018 Apr 05Trainingtechnology
img

سلام خدمت دوستان و همراهان همیشگی ای دانش ،با سری آموزش های CSS همراه شما عزیزان هستیم.در این جلسه قصد داریم به مبحث توضیحات و انتخاب گرها در CSS بپردازیم.


توضیحات یا comment ها در CSS

گاهی اوقات نیاز است توضیحی را در کدهای CSS به کار ببریم تا اگر زمانی سند خود را به شخص دیگری دادیم یا حتی پس از مدتی آن را بررسی کردیم بتوانیم تشخیص دهیم که هر قسمت از کد ها مربوط به چه بخشی است.در آموزش HTML نیز به این مبحث پرداختیم چون برای طراحان وب بسیار امر مهمی در زمینه طراحی قالب است.یک توضیح CSS با علامت */ شروع شده و با علامت /*به اتمام می رسد.این توضیحات کاملا توسط مرورگرها نادیده گرفته می شود.مثال:

 

نکته:توضیحات را می توان در هرجایی از کدهای CSS به کار برد.


انتخاب گرها یا selector ها در CSS

تقریبا 90 درصد اهمیت CSS به خاطر وجود انتخاب گرهاست.شما با کمک این انتخاب گرها می توانید عناصر و المان های HTML را انتخاب کنید و به آن ها استایل بدهید.این المان ها را می توان بر اساس شناسه(ID) ، کلاس(class)،نوع (type) و صفت(attribute) پیدا و انتخاب کرد.اما انواع انتخاب گرها:

1- انتخاب گر المان(the element selector)

این انتخاب گر در واقع المان را بر اساس نام مربوط به آن انتخاب می کند.مثلا می توان کلیه عناصر p صفحه یا h1 صفحه یا a صفحه را استایل دهی کرد.مثال:

با انتخاب المان p در کد بالا تمامی عناصر p دو مشخصه وسط چین و رنگ قرمز را به خود می گیرند.

2-انتخاب گر شناسه(id selector)

در بخش آموزش html قسمت نوزدهم کامل به توضیح خصوصیت ID پرداختیم.این خصوصیت را می توان به تمام المان های html به جز یک تعداد محدودی نسبت داد.کاربرد این خصوصیت زمانیست که بخواهیم به آن تگ استایل مخصوص به خود را بدهیم.در واقع این شناسه یا ID مانند اثر انگشتی عمل می کند که برای هر تگ اختصاصی است.یعنی ما نمی توان از یک شناسه یا ID در بیش از یک جا استفاده کنیم.خب زمانی که یک شناسه یا ID را به یک تگ نسبت می دهیم به راحتی می توانیم با انتخاب گر شناسه به آن استایل های مورد نیاز خود را بدهیم.برای انتخاب یک شناسه کافیست یک # را قبل از نام آن شناسه به کار ببریم.مثال: 

در تصویر بالا شناسه test را به عنصر p نسبت دادیم و سپس با یک # قبل از نام آن ، آن عنصر را انتخاب کردیم.

نکته:هیچگاه یک شناسه را با عدد آغاز نکنید.اما می توانید در مکان های دیگر از اعداد استفاده کنید.

3-انتخاب گر کلاس(class selector)

در بخش آموزش html قسمت نوزدهم کامل به توضیح خصوصیت class پرداختیم.این خصوصیت را نیز می توان به تمامی عناصر html نسبت داد.تفاوت این خصوصیت با شناسه یا ID این است که شما می توانید بارها و بارها از یک class در یک سند html استفاده کنید.زمانی که یک class را به یک المان نسبت می دهیم به راحتی می توانیم آن را در کدهای CSS انتخاب کنیم و استایل مورد نیاز خود را  به آن بدهیم.برای انتخاب یک class کافیست قبل از نام آن یک (.) قرار دهیم.مثال:

همانطور که در مثال بالا مشاهده می کنید ، ما از یک class در دو تگ متفاوت استفاده کردیم و به راحتی آن را در css انتخاب کردیم و استایل مورد نیاز خود را به آن دادیم.

نکته:هیچگاه یک class را با عدد آغاز نکنید.اما می توانید در مکان های دیگر از اعداد استفاده کنید.


انتخاب چند المان

شاید بخواهید همزمان به چند المان یک استایل خاص را نسبت دهید.برای این کار کافیست ما بین هر المان یک (,) ویرگول لاتین قرار دهید.مثال:

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

css

اموزش css

طراحی وب

آموزش طراحی وب

طراحی قالب وب