ویژگی های Css انتخابگرهای ویژگی CSS و انواع آنها

3. یکی از چندین مقدار مشخصه

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

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

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

{
رنگ: قرمز؛
اندازه فونت: 150%;
}
...

تلفن ما: 777-77-77

آدرس ما: خیابان مسکو سووتسکایا 5

نتیجه زیر را دریافت خواهید کرد:

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

4. خط فاصله در مقدار ویژگی

یک خط فاصله در مقادیر شناسه و کلاس مجاز است. برای اتصال یک سبک به عناصری که مقادیر مشخصه آنها ممکن است حاوی خط فاصله باشد، می توانید از ساختار زیر استفاده کنید:

[ویژگی|=مقدار] (سبک)
انتخابگر[ویژگی|="مقدار"] (سبک)

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

{
رنگ: قرمز؛
اندازه فونت: 150%;
}
...

• بند 1


• نقطه 2


• نکته 3


• نقطه 4

نتیجه:

در مثال، قانون style فقط برای آن دسته از عناصر لیست که نام کلاس آنها با مقدار شروع می شود اعمال می شود "منو- ".

5. مقدار مشخصه با متن خاصی شروع می شود

اگر مقدار مشخصه برچسب با یک مقدار خاص شروع شود، این انتخابگر سبک را برای یک عنصر تنظیم می کند. ممکن است دو گزینه وجود داشته باشد:

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

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

آ(
رنگ: سبز؛
font-weight:bold;
}
...

نتیجه:

مثال نشان می دهد که چگونه پیوندهای خارجی و پیوندهای داخلی را به طور متفاوت نمایش دهید. پیوندهای خارجی همیشه با رشته "http://" شروع می شوند. بنابراین، در انتخابگر نشان می‌دهیم که استایل فقط برای پیوندهایی اعمال می‌شود که دارای ویژگی هستند hrefبا معنا شروع می شود http://.

6. مقدار مشخصه با متن خاصی به پایان می رسد

یک سبک را به عناصری که مقدار مشخصه آنها با متن مشخص شده ختم می شود پیوند می دهد. دارای نحو زیر است:

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

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

IMG (
حاشیه: 5 پیکسل قرمز جامد.
}
...

تصویر GIF

فرمت تصویر png

نتیجه:

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

7. مقدار مشخصه شامل رشته مشخص شده است

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

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

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

IMG (
حاشیه: 5 پیکسل قرمز جامد.
}
...

عکس از پوشه گالری

عکس از یک پوشه دیگر

نتیجه:

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

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

انتخابگر[attribute1="value1"][attribute2="value2"] (سبک)

علاوه بر این، اجازه دهید در مورد انتخابگرهای ویژه CSS به شما یادآوری کنم:

• با استفاده از نمادهای "+" و "~" تشکیل می شود.
• نماد ">" استایل های css را به آن متصل می کند شرکت های تابعهبرچسب ها;
• سمبل<пробел>انتخابگرهای زمینه را تولید می کند.

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

همین، دوباره می بینمت.

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

بله، و طبق معمول به شما می گویم - اگر در آن مهارت دارید، حتی سعی نکنید همه چیزهایی را که در زیر نوشته شده حفظ کنید. :) شما باید یک چیز را از این درس به خاطر بسپارید - آنچه در پاراگراف اول نوشته شده است. بقیه را فقط باید بفهمید و بفهمید. بنابراین.

نحو انتخابگر صفت

برای اعمال سبک‌ها به عناصر با ویژگی خاص، باید این ویژگی را در براکت مربع مشخص کنید.

[صفت] ( دارایی: ارزش; ...)

برای اینکه استایل ها بر روی عناصری اعمال شوند که نه فقط یک ویژگی خاص، بلکه یک ویژگی با یک مقدار خاص دارند، باید علامت مساوی (=) را بعد از ویژگی و این مقدار بنویسید که می تواند در گیومه قرار گیرد.

[ویژگی = "ارزش"] ( دارایی: ارزش; ...)

برخی از ویژگی ها می توانند مقادیر متعددی داشته باشند که با فاصله از هم جدا شده اند (به عنوان مثال، ویژگی rel یا class یک تگ، که کمی بعد به آن خواهیم پرداخت). بنابراین، برای تنظیم سبک برای عناصری که دارای یکی از مقادیر یکسان در ویژگی ها هستند، باید علائم ~= (تقریباً برابر) را بعد از ویژگی قرار دهید و سپس مقدار مورد نیاز را بنویسید.

[ویژگی~=مقدار"] ( دارایی: ارزش; ...)

گزینه چهارم برای ویژگی هایی در نظر گرفته شده است که مقدار آنها ممکن است شامل چندین کلمه باشد که با خط فاصله از هم جدا شده اند (مثلاً همان کلاس). و به شما این امکان را می دهد که استایل ها را برای همه عناصری که کلمه اول آنها در مقدار مشخصه یکسان است اعمال کنید. به عنوان مثال، class="block-left" و class="block-right". همان بخش در اینجا بلوک است، بنابراین می توان از آن به عنوان یک مقدار استفاده کرد.

[ویژگی|="مقدار"] ( دارایی: ارزش; ...)

روش پنجم استایل‌ها را به عناصری متصل می‌کند که مقادیر ویژگی‌های آنها با همان متن شروع می‌شود. به عنوان مثال، src= "images/bird.png" و src= "images/cat.jpg". در اینجا همان قسمت تصاویر/ یا تصاویر یا تصویر و غیره است. این قسمت یکسان است که به عنوان مقدار ثبت می شود.

[ویژگی^=مقدار"] ( دارایی: ارزش; ...)

مشابه پنجم، اما در اینجا انتخاب بر اساس بخشی از متن است که برعکس، با مقادیر ویژگی به پایان می رسد. فرض کنید src= "image/bird.png" و src= "picture/dog.png" . واضح است که قسمت png. در اینجا یکسان است.

[خصیصه$="value"] ( دارایی: ارزش; ...)

اگر لازم است عناصری را انتخاب کنید که مقادیر مشخصه آنها قسمت یکسانی از متن دارند و فرقی نمی کند مقادیر کجا هستند، از این روش استفاده می شود. برای مثال، href= "http://site/css/" و href= "http://www.site/html/". اینجا همان قسمت "سایت" است. بنابراین، برای مثال، می توانید تمام لینک های منتهی به یک سایت خاص را انتخاب کنید.

[ویژگی*="ارزش"] ( دارایی: ارزش; ...)

متأسفانه اینترنت اکسپلورر 6.0 اصلاً انتخابگرهای ویژگی را درک نمی کند.

مثالی از استفاده از انتخابگرهای ویژگی در CSS

نتیجه در مرورگر

اگر یک ویژگی خاص مشخص شده باشد، سبک را برای یک عنصر تنظیم می کند. معنای آن در این مورد مهم نیست.

نحو

[<атрибут>] (شرح قوانین سبک) E[<атрибут>] (شرح قوانین سبک)

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

تعیین ها

مثال

در ادامه قانون معروف مورفی که می گوید: اگر مشکلی پیش بیاید، قطعاً اتفاق خواهد افتاد.، می توانیم مشاهدات خود را معرفی کنیم: پس از اینکه یک صفحه وب در یک مرورگر به درستی نمایش داده شد، معلوم می شود که در مرورگر دیگری به درستی نمایش داده نمی شود.

نتیجه مثال در شکل نشان داده شده است. 1.

برنج. 1. تغییر سبک یک عنصر بسته به استفاده از ویژگی عنوان

در این مثال رنگ متن داخل ظرف تغییر می کند وقتی صفت title به آن اضافه شود. توجه داشته باشید که نیازی به تکرار خصوصیات سبک برای انتخابگر q نیست، زیرا آنها از انتخابگر q به ارث رسیده اند.

مشخصات

هر مشخصات از چندین مرحله تایید می گذرد.

• توصیه - مشخصات توسط W3C تایید شده است و به عنوان یک استاندارد توصیه می شود.
• توصیه نامزد ( توصیه احتمالی) - گروه مسئول استاندارد از رسیدن به اهداف خود راضی است، اما برای اجرای استاندارد از جامعه توسعه کمک می خواهد.
• توصیه پیشنهادی توصیه پیشنهادی) - در این مرحله سند برای تایید نهایی به شورای مشورتی W3C ارائه می شود.
• پیش نویس کاری - نسخه بالغ تر یک پیش نویس که برای بررسی جامعه مورد بحث و اصلاح قرار گرفته است.
• پیش نویس سردبیر ( پیش نویس سرمقاله) - نسخه پیش نویس استاندارد پس از ایجاد تغییرات توسط ویراستاران پروژه.
• پیش نویس ( پیش نویس مشخصات) - اولین نسخه پیش نویس استاندارد.

سلام، خوانندگان عزیز! در نشریه امروز ما به بررسی اصول CSS ادامه خواهیم داد و توضیحاتی را به شما ارائه خواهم داد انواع مختلف انتخابگرهای ویژگی، و محاسبات نظری را می توان با اقدامات عملی، با استفاده از ابزارهای داخلی همه مرورگرهای محبوب (- در مورد مفهوم مرورگر و مقایسه بهترین مرورگرهای وب)، که به طور مفصل در مورد آن نوشتم، پشتیبانی کرد.

قبل از هر چیز می خواهم از شما خوانندگان عزیز به دلیل غیبت طولانی مدت عذرخواهی کنم، اما این امر دلایلی دارد. اولاً، من برای مدت طولانی در یک زمان مشغول چندین پروژه بودم که زمان زیادی را به خود اختصاص داد. ثانیاً، من روی بهبود قابلیت استفاده (در مورد قابلیت استفاده با جزئیات و جزئیات) وبلاگ کار مثمر ثمری انجام دادم، تصاویر را تا حد امکان بهینه کردم، کیفیت آنها را بهبود دادم و در عین حال وزن آنها را به میزان قابل توجهی کاهش دادم که قطعاً باید در ارتقاء وبلاگ تأثیر بگذارد. منبع در آینده در مثبت ترین راه، و به طور کلی، در حال حاضر تاثیر می گذارد.

کارهای مفید زیادی انجام شد؛ قطعاً تمام مراحلی را که انجام دادم به تفصیل در انتشارات بعدی به شما خواهم گفت. خوب، و سوم، من با برقراری ارتباط نزدیک با دوستان و خانواده در تعطیلات کریسمس و سال نو، بار مثبت دریافت کردم. ضمناً از این فرصت استفاده کرده و در سال جدید برای همه خوانندگان وبلاگ آرزوی سلامتی، موفقیت، عشق و بهروزی خانواده دارم! چنین آرزوهایی اگر از ته دل باشند هرگز دیر نمی شوند.

و اکنون به آرامی مستقیماً به موضوع انتشار امروز می روم. به شما یادآوری می کنم که قبلاً در نظر گرفته ایم. امروز ما به مطالعه این بخش مهم از دوره های Cascading Style Sheets (CSS) و بیایید با انتخابگرهای ویژگی و انواع مختلف آنها آشنا شویم.

قبل از شروع ارائه مطالب، می خواهم یک بار دیگر به شما یادآوری کنم که موضوعات و دامنه مقالات توسط من بسیار دقیق کار شده است و در درجه اول برای مبتدیان طراحی شده است. اما من رد نمی کنم که وب مسترهای باتجربه نیز چیز مفیدی برای خود پیدا کنند. بنابراین، کسانی که در آینده می خواهند هنگام ویرایش یا حتی ایجاد وب سایت خود از ابتدا در هزینه و زمان خود صرفه جویی کنند، به هیچ وجه نباید از مطالعه سبک های CSS غافل شوند، به خصوص که من سعی می کنم مطالب را به وضوح، در دسترس و همراه با بسیار فشرده ارائه کنم. .

امیدوارم بابت این انحراف کوچک مرا ببخشید؛ مهم و کاملا بجا بود، مطمئنم. اکنون به گوسفندان خود باز می گردم، یعنی انتخابگرهای صفت، که تغییرات متعدد آنها را در زیر به تفصیل ارائه خواهم کرد. با این حال، ابتدا باید مقدماتی را انجام دهید، زیرا درس حجیم خواهد بود و از همه مهمتر، بلافاصله پس از هر نقطه از تئوری می توانید همه چیز را در طول مقاله در عمل آزمایش کنید. شیفته؟

در واقع، ساده است. توسعه مدرن فناوری های وب، انجام چنین کارهایی را به راحتی و به سادگی ممکن می سازد. منظورم استفاده از ابزاری مثل فایرباگ برای فایرفاکس است که در ابتدای پست به آن اشاره کردم. با این حال، من قبلاً در مورد آن با جزئیات کافی نوشته ام، بنابراین در این مقاله از ابزار مشابه دیگری برای مرورگر محبوب Google Chrome استفاده خواهم کرد (اطلاعات بیشتر در مورد آن).

این ابزار در حال حاضر به صورت بومی در آخرین نسخه های کروم تعبیه شده است. به هر حال، همه محبوب ترین مرورگرها دارای پسوندهای داخلی مشابه هستند، از جمله Opera (مانند). بنابراین، ابتدا هر صفحه از هر منبعی (شما می توانید وب سایت خود را داشته باشید) در Google Chrome (ترجیحا آخرین نسخه) باز کنید.

عنصری را در صفحه وب انتخاب می کنیم (مثلاً یکی از پاراگراف های مقاله امروز را انتخاب می کنم) و کلیک راست می کنیم. از منوی زمینه، "View element code" را انتخاب کنید (یک جایگزین این است که به سادگی کلید F12 را روی صفحه کلید خود فشار دهید). پنجره ای شبیه به پنجره Firebug در پایین ظاهر می شود که سبک های CSS در سمت چپ و سبک های CSS در سمت راست قرار دارند.

به نظر من، بارزترین مثال برای کار کردن انتخابگرهای ویژگی با تغییرات مختلف، ویژگی عنوان (با برچسب عنوان اشتباه نشود) است که محتوا را تعریف می کند. راهنمای ابزار. اگر مطالعه کردید، نقش تگ را تصور کنید بخشکه ماده اصلی ساخت وب سایت های مدرن است.

در صورت تمایل می توانید با کلیک بر روی آیکون مثلثی مشکی سمت چپ، div ها را یکی یکی باز کنید تا به تگ ها برسید. پ، که محتوای آن به صورت متن تقسیم شده به پاراگراف (یا پاراگراف که همان چیزی است) در صفحه نمایش داده می شود.

یک فضای احاطه شده توسط یک قاب ظاهر می شود که در آن می توانید ویرایش کنید، یعنی حذف، تغییر یا اضافه کردن متن:

در این پنجره ویرایش، سه پاراگراف را با اعمال ویژگی title به تگ p می نویسیم، که یک راهنمای ابزار را راه اندازی می کند. به عنوان مثال، مانند این:

1. یک پاراگراف (یا یک پاراگراف، که همان چیزی است، یادآوری می کنم) که محدوده زمانی به روز رسانی وردپرس را توضیح می دهد:

2. پاراگراف اطلاعاتی درباره افزونه ها (افزونه ها):

3. پاراگراف در مورد عدم وجود طولانی مدت به روز رسانی افزونه:

بنابراین، ما هر سه پاراگراف را در قسمت ویرایش در پنجره ابزار توسعه وارد کرده ایم. برای تایید تغییرات انجام شده، کافیست کلیک چپ کنید و متن هر سه پاراگراف دقیقاً در همان جایی که باید باشد در صفحه وب ظاهر می شود.

همانطور که می بینید، متن راهنمای ابزار کاملاً با مقدار ویژگی عنوان یکسان است (برای هر پاراگراف این مقدار متفاوت است). چارچوب HTML برای آزمایش‌های ما ایجاد شده است، اکنون اجازه دهید مستقیماً به نحوه تغییر ظاهر آنها با استفاده از ویژگی‌های CSS برویم.

انتخابگر صفت ساده و انتخابگر ویژگی با مقدار

یک انتخابگر ویژگی ساده، سبک را برای یک عنصر تنظیم می کند اگر یک ویژگی خاص به برخی از برچسب ها داده شود (برای مثال ما این تگ pو ویژگی عنوان) و مقدار ویژگی در این مورد خاص بی اهمیت است. سینتکس CSS به شکل زیر خواهد بود:

نام خصیصه در پرانتز محصور شده است و فاصله بین نام انتخابگر و ویژگی مجاز نیست. نمودار بالا دو مورد استفاده را نشان می دهد: با و بدون تعیین نام انتخابگر.

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

همانطور که می توانید تصور کنید، ویژگی های CSS برای هر عنصر، از جمله تگ پاراگراف p، در سند style.css تنظیم شده است. اجازه دهید یک بار دیگر به شما یادآوری کنم که برای تثبیت عملی تئوری، از یک ابزار ویرایش عالی html و CSS استفاده می‌کنیم که در آن سه پاراگراف در سمت چپ پنجره اضافه کردیم که هر کدام ارزش عنوان خاص خود را دارند.

ما تغییراتی را در کدهای html و CSS "در حال پرواز" در هر صفحه کاملاً هر منبعی ایجاد می کنیم (اگر راحت تر است می توانید از یکی از صفحات وبلاگ من استفاده کنید). این مزیت چنین ابزارهایی است که همه مرورگرهای محبوب دارند که حتی شخصی که وب سایت خود را ندارد می تواند آزمایش کند و تمرین لازم را انجام دهد.

بنابراین، پس از افزودن پاراگراف ها، متن آنها باید در صفحه وب ظاهر شود (فقط در طول درس عملی صفحه را دوباره بارگذاری نکنید، در غیر این صورت نتایج تغییراتی که ایجاد کرده اید از بین می رود). در مرحله بعد، باید یک قانون CSS برای یک انتخابگر ساده بنویسید. برای انجام این کار، در سمت راست ابزار وب مستر، روی پیوندی که به سندی با سبک های CSS (مثلاً فایل style.css) منتهی می شود، کلیک کنید:

بیایید یک قانون CSS برای انتخابگر ویژگی ساده بنویسیمبه روش زیر:

P (رنگ: سبز؛ )

بیایید آن را درست به انتهای فایل style.css در پنجره ویرایش ابزار توسعه دهنده اضافه کنیم:

پس از چنین ویرایشی، متن تمام پاراگراف ها سبز می شود، زیرا هر یک از آنها دارای یک ویژگی عنوان هستند که باعث یک راهنمای ابزار می شود.

همانطور که قبلا ذکر شد، مقدار عنوان در این مورد مهم نیست، زیرا در قانون CSS مشخص نشده است. به علاوه. اکنون انتخابگر ویژگی را با مقدار اعمال کنیدو بیایید ببینیم متن هر سه پاراگراف آزمایشی چگونه تغییر می کند. سینتکس برای نوشتن یک قانون CSS در این مورد به صورت زیر خواهد بود:

برای انجام این کار، یک مقدار به عنوان اضافه کنید:

P (رنگ: سبز؛ )

بلافاصله اولین پاراگراف آزمایش شده سبز می شود، بقیه بدون تغییر باقی می مانند. ویژگی های CSS پاراگراف استاندارد برای این منبع حفظ می شود:

در زیر به چندین گزینه دیگر برای استفاده از انتخابگر ویژگی نگاه خواهیم کرد.

یک انتخابگر ویژگی با مقداری حاوی متن مشخص شده و یکی از چندین مقدار مشخصه

ممکن است اتفاق بیفتد که سبک‌های CSS باید روی یک برچسب با یک ویژگی خاص اعمال شوند که مقدار آن حاوی متن، یک کلمه یا حتی بخشی از یک کلمه باشد. در این حالت، سینتکس برای نوشتن یک قانون CSS به صورت زیر خواهد بود:

عملگر "*" به این معنی است که اگر مقدار مشخصه حاوی یک کلمه یا بخشی از آن باشد و اصلاً مهم نباشد که در چه مکان (ابتدا، وسط یا پایان) باشد، این قانون سبک برای با این ویژگی تگ کنید. بیایید تحقیقات عملی را ادامه دهیم. اجازه دهید مطالب سه پاراگراف و معنای عنوان هر یک از آنها را یادآوری کنم:

نسخه جدید وردپرس حداکثر تا آوریل 2013 منتشر خواهد شد.

افزونه WordPress One Seo Pack دارای عملکردهای اضافی است که می توانید آنها را در وب سایت رسمی پیدا کنید.

افزونه WP Tuner بیش از یک سال است که به روز نشده است، بنابراین استفاده مداوم از آن نامناسب است.

بیایید یک قانون سبک مطابق با نحو ارائه شده در بالا ایجاد کنیم (شما می توانید آنچه را که قبلاً در آنجا نوشته شده بود، در قسمت سمت چپ پنجره ابزاری که استفاده می کنیم جایگزین کنید:

P (رنگ: سبز؛ )

بلافاصله پس از ویرایش، می بینید که متن همه پاراگراف ها سبز می شود، زیرا مقدار ویژگی عنوان هر یک از آنها حاوی "Word" به عنوان بخشی از کلمه "Wordpress" است.

گاهی اوقات اتفاق می افتد که چندین مقدار مشخصه مشخص می شود که با یک فاصله از هم جدا شده اند. این کاملاً برای هر برچسبی صدق می کند، به عنوان مثال، ظرف div، که می تواند شامل چندین کلاس (کلاس) با مقادیر مختلف باشد که در این مورد ویژگی ها هستند.

اما ما به بررسی مثال با تگ p و ویژگی title ادامه خواهیم داد، زیرا بصری ترین است، به خصوص برای مبتدیان. علاوه بر این، با آزمایش بر روی اشیاء مشابه، می توانید به وضوح تفاوت زمانی را ببینید با استفاده از تغییرات مختلف انتخابگر ویژگی.

برای اعمال یک سبک خاص به یکی از مقادیر مشخصه که با فاصله از هم جدا شده است، می توانید از عملگر "~" استفاده کنید. نحو نوشتن به صورت زیر خواهد بود:

در رابطه با همان پاراگراف‌هایی که در نشریه امروز در نظر گرفته‌ایم، قانون سبک زیر را تعریف می‌کنیم که کلمه Wordpress را در مقدار ویژگی مشخص می‌کند:

P (رنگ: سبز؛ )

اکنون متن پاراگراف اول و سوم سبز رنگ می شود، زیرا فقط برای این پاراگراف ها مقدار ویژگی عنوان حاوی کلمه "وردپرس" است که با فاصله از بقیه متن جدا شده است. متن پاراگراف دوم ثابت می ماند. چرا، از آنجایی که عنوان شامل وردپرس نیز می شود؟ بله، زیرا این کلمه در معنی عنوان پاراگراف دوم نه با فاصله، بلکه با خط فاصله «-» از هم جدا شده است.

بنابراین، ما فهمیدیم که اعمال عملگر "~" برای یک قطعه متن که با یک فاصله از هم جدا شده است اعمال می شود. یعنی به یکی از چندین مقدار یک ویژگی خاص که با فاصله از یکدیگر جدا می شوند. در مورد ما، هنگام استفاده از ویژگی title، مقادیر جدا شده با فاصله، کلمات جداگانه در مقدار عنوان هستند.

فووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووون بیایید جلوتر برویم و به چند مورد دیگر از استفاده از انتخابگرهای ویژگی نگاه کنیم. صبور باشید، چیز زیادی باقی نمانده است، اگرچه به نظر من وقتی بتوانید اصول نظریه را در عمل آزمایش کنید، همه چیز باید جالب باشد.

انتخابگرهای CSS: مقدار مشخصه با یک متن خاص شروع می شود، با متن خاص پایان می یابد و یک خط فاصله در مقدار ویژگی

ما در چارچوب درس نظری و عملی خود پیش می رویم، اختصاص داده شده به انتخابگرهای ویژگی CSS. از آنجایی که این پست بسیار طولانی است، اجازه دهید یک بار دیگر به شما یادآوری کنم که ما در حال بررسی یک مثال با سه پاراگراف هستیم که با استفاده از تگ p و ویژگی عنوان (tooltip) مستقیماً در قسمت ابزار ویرایش آنلاین در مرورگر Google Chrome تشکیل شده است. این ابزار به طور خاص با فشار دادن کلید F12 نامیده می شود.

نسخه جدید وردپرس حداکثر تا آوریل 2013 منتشر خواهد شد.

افزونه WordPress One Seo Pack دارای عملکردهای اضافی است که می توانید آنها را در وب سایت رسمی پیدا کنید.

افزونه WP Tuner بیش از یک سال است که به روز نشده است، بنابراین استفاده مداوم از آن نامناسب است.

حال بیایید به چند تغییر دیگر از انتخابگر ویژگی نگاه کنیم، یعنی زمانی که مقدار مشخصه با یک متن خاص شروع می شود، با یک متن خاص به پایان می رسد، و زمانی که مقدار مشخصه حاوی خط فاصله است.

تمام این ظرافت ها در استفاده از گزینه های مختلف برای مقادیر مشخصه ها به شما این امکان را می دهد که یک سیستم واقعاً انعطاف پذیر برای طراحی صفحات وب سایت ایجاد کنید. حال بیایید به اثر عملگر "^" نگاه کنیم، که نشان می دهد مقدار ویژگی حاوی متن یا کلمه ای است که مقدار ویژگی تگ داده شده را شروع می کند. کمی گیج شده؟ حالا همه چیز را خواهید فهمید. ابتدا، زمانی که مقدار مشخصه با یک متن خاص شروع می شود، نحوی را برای نوشتن یک قانون سبک ارائه می کنم:

گام بعدی این است که یک قانون CSS جدید بنویسیم، دوباره در رابطه با پاراگراف های تجربی ما:

P (رنگ: سبز؛ )

مجدداً، به صورت آنلاین، هنگام استفاده از ابزاری برای ویرایش کدهای html و CSS، می بینیم که این بار متن پاراگراف اول و دوم رنگ سبزی پیدا کرده است و متن پاراگراف سوم سبک یک پاراگراف معمولی را حفظ کرده است:

این به این دلیل است که مقدار ویژگی عنوان هر دو پاراگراف اول با کلمه "وردپرس" شروع می شود. این کلمه در عنوان بند سوم نیز وجود دارد، اما نه در آغاز. برای تقویت این موضوع، زمانی که استفاده از عملگر "^" راحت باشد، مثال دیگری می زنم.

CSS یک ابزار قدرتمند برای توسعه وب است. این به ما امکان می دهد تقریباً تمام ایده ها و ایده های خود را زنده کنیم.

یکی از مزیت های مهم CSS این است که می توان استایل ها را برای همه عناصر از یک نوع صفحه اعمال کرد. برای استفاده موثر از این ویژگی، باید درک خوبی از آن داشته باشید انتخابگرهای CSS. انتخابگر دقیقاً همان چیزی است که یک قانون برای آن اعمال می شود.

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

انتخابگر جهانی

یک انتخابگر جهانی سبک تمام عناصر سند را مشخص می کند. با یک ستاره (*) نشان داده شده است. به عنوان مثال، این مشخص می کند که همه عناصر قرمز خواهند بود:

* (رنگ: قرمز؛)

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

هنگام نوشتن سبک برای یک سند HTML، عناصر تگ های HTML (h1، p، img، a، body...) هستند. مثلا:

H1 (فونت-خانواده: Verdana؛ اندازه قلم: 12 پیکسل؛ رنگ: #666؛ )

در این حالت، تمام عناوین سطح اول سند با فونت Verdana، اندازه 12 پیکسل و رنگ خاکستری خواهند بود.

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

این انتخابگر به شما امکان می دهد بدون توجه به نوع عنصر، یک سبک را اختصاص دهید. اما برای اینکه آنها کار کنند، باید چند یادداشت به کد HTML اضافه کنید، یعنی ویژگی class با مقداری که هنگام ایجاد قانون CSS از آن استفاده خواهید کرد.

فرض کنید باید چند تصویر را در یک صفحه قاب کنید. این تصاویر دارای ویژگی کلاس هستند. مثلا:

و در فایل style قانون را می نویسیم:

Border_img (حاشیه: 1px جامد #00f;)

این کلاس را می توان برای بسیاری از عناصر صفحه و نه لزوماً فقط برای تصاویر اعمال کرد. می توانید چندین کلاس را به طور همزمان به یک عنصر HTML اعمال کنید که با فاصله نوشته شده اند:

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

همچنین به شما این امکان را می دهد که بدون توجه به نوع عنصر، یک سبک را اختصاص دهید. اما بر خلاف انتخابگر کلاس، فقط یک بار در یک سند قابل استفاده است. با نماد هش (#) نشان داده شده است. تگ دارای ویژگی id است. مثلا:

انتخابگرهای صفت

برای انتخاب عناصر بر اساس ویژگی های آنها و همچنین مقادیر این ویژگی ها استفاده می شود.

برای انتخاب یک عنصر با ویژگی آن، صرف نظر از مقدار این ویژگی، از ساختار زیر استفاده کنید: [خصیصه] . به عنوان مثال، ما باید تصاویری را با یک قاب قرمز که دارای مجموعه ویژگی alt هستند علامت گذاری کنیم. ما این کار را انجام می دهیم:

img (حاشیه: 1 پیکسل قرمز ثابت؛)

شما فقط می توانید برچسب هایی را انتخاب کنید که ویژگی های آنها معنای خاصی دارند. به عنوان مثال، شما باید این قانون را برای همه تگ ها با یک ویژگی type که مقدار آن متن است اعمال کنید - اندازه متن 16 پیکسل است. این کار به صورت زیر انجام می شود:

(اندازه قلم: 16 پیکسل؛)

اگر می خواهید عناصری را انتخاب کنید که ویژگی کلاس آنها حاوی کلمه img باشد، از کد زیر استفاده کنید:

(حاشیه: 5 پیکسل؛)

اگر نیاز به انتخاب ویژگی دارید که مقدار آن با مقداری متن شروع می شود:

(رنگ:#009);

اگر شما نیاز به انتخاب ویژگی دارید که مقدار آن با متنی به پایان می رسد:

(اندازه فونت: 10 پیکسل؛)

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

(رنگ پس زمینه:#0cc؛)

انتخابگرهای نسل (انتخابگرهای زمینه)

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

انتخابگرهای عنصر خواهر و برادر

برای انتخاب عناصر همسایه که در یک سطح قرار دارند و والد مشابهی دارند، این کار را انجام دهید:

برای انتخاب عناصر, واقع شدهدر یک سطح، با داشتن یک والدین این کار را انجام می دهیم.