یک عنوان مقاله شایسته و چشم نواز می تواند توجه و بازدیدکنندگان را به سایت جلب کند. این یکی از مهمترین مولفه ها در بهینه سازی سئو یک پروژه اینترنتی است. در این پست به شما خواهم گفت که هدرهای h1، h2، h3، h4، h5، h6 چیست و چگونه آنها را بنویسید. علاوه بر این، با عنوان اصلی صفحه - عنوان آشنا خواهید شد.

اما بیایید در مورد همه چیز به ترتیب صحبت کنیم.

عنوان چیست

بنابراین، عنوان- آی تی برچسب ویژهدر ابتدای کد html قرار دارد و به طور خلاصه محتوا را توضیح می دهد یک صفحه خاصسایت. در باره عنوان عنواندر این مقاله حجیم تر و مفصل تر است.

V کد منبععنوان اصلی به این صورت است:

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

عنوان h1 چیست؟

عنوان H1- اینها چندین عبارت ساختار یافته هستند که تقریباً کل معنای مطالب ارائه شده در آنها تعبیه شده است. به عبارت دیگر، این مهمترین عنوان در ابتدای صفحه است.

همان مجموعه کلمات خاص برای عنوان در عنوان h1 جوملا ایجاد می شود. در کد منبع اینگونه به نظر می رسد:

چه کسی یک فریلنسر است و چگونه می توان یکی شد

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

مشخص می شود که موتور جوملا، با این حال، مانند بقیه CMS ها، کار با سایت را بسیار ساده می کند، زیرا هنگام ایجاد هدر، نیازی به ویرایش کد html نیست.

بقیه هدرها مستقیماً در آن ایجاد می شوند ویرایشگر متن... بسته به پنل و مجموعه عناصر فعال، انتخاب شده است عملکرد خاص، که در ویرایشگر متن JCE به آن "پاراگراف" گفته می شود. با حرکت دادن نوار لغزنده، می توانید مشاهده کنید که تمام عناوین موجود در اینجا از h1 تا h6 ارائه شده است.

نحوه نوشتن عنوان h1 و عنوان

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

1. کلید واژه ها... از نظر موتورهای جستجو، یک کتاب خوش نوشته بسیار امیدوارکننده تر و جذاب تر به نظر می رسد اگر در ابتدای عنوان و h1 کلماتی را بنویسید که جواب می دهند. پرس و جوهای کلیدی... چگونه آنها را تشخیص می دهید؟ برای این کار یک سرویس آنلاین ویژه wordstat.yandex.ua وجود دارد.

2. خوانایی... شما نمی توانید فقط بروید و کلمات کلیدی را در یک عنوان قرار دهید. متن باید طبیعی و خوانا باشد، در غیر این صورت موتورهای جستجو این ترفند را به عنوان هرزنامه در نظر می گیرند. هنگام نوشتن عنوان h1 و عنوان، سعی کنید قرار دهید کلید واژه هاتا حد امکان به شروع آنها نزدیک است. عناوین h1، h2، h3 موضوع دیگری است ... آنها را می توان با کلمات موضوعی خاصی رد کرد و رقیق کرد.

3. بدون برداشت... برای اینکه صفحات سایت در رتبه بالاتری قرار گیرند نتایج جستجو، v کد htmlهیچ عنوان تکراری نباید وجود داشته باشد. برای بررسی صفحات، کافی است سایت را در مرورگر باز کنید و کلیدهای داغ Ctrl + U و سپس Ctrl + F را فشار دهید. در کادر جستجو، h1 را بنویسید و تمام کاراکترهای موجود با پس زمینه زرد برجسته می شوند.

4. طول... 70 کاراکتر در تگ عنوان مجاز است زیرا مقدار زیادفقط به سادگی در قطعه جا نمی شود.

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

7. علائم جداییتوصیه می شود استفاده نکنید.

استفاده صحیح از تگ های h2 - h6

سرفصل های h2 - h6 به جهت گیری در متن ارائه شده کمک می کند و مطالب را در نظر خوانندگان و ربات های جستجو جذاب تر می کند. بنابراین، هنگام ایجاد آنها قوانین سختگیرانه ای وجود دارد که عبارتند از:

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

از نویسنده:مشخصات ماژول شبه عناصر CSS سطح 4 رفتار شبه عناصر موجود را روشن می کند و موارد جدیدی را ارائه می دهد. با این حال، تنها تعداد کمی از شبه عناصر جدید در مرورگرهای اخیر پشتیبانی می‌کنند.

امروز در مورد شبه عناصر زیر صحبت خواهیم کرد:

:: Before - محتوای تولید شده را قبل از محتوای عنصر درج می کند

:: after - محتوای تولید شده را بعد از محتوای عنصر درج می کند

:: حرف اول - حرف اول یک عنصر را انتخاب می کند

:: first-line - اولین خط یک عنصر را انتخاب می کند

:: انتخاب - متن انتخاب شده توسط مکان نما را سبک می کند

از این میان عناصر انتخابی :: first – letter، :: first – line و :: بر محتوایی که در منابع گنجانده شده است تأثیر می گذارد. :: قبل و :: بعد از شبه عناصر، از طرف دیگر، محتوایی را در سند وارد کنید که در منابع نیست. بیایید نگاهی دقیق تر به تمام شبه عناصر بیندازیم.

توجه: نحو تک دونقطه

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

:: قبل و :: بعد از شبه عناصر

اکثر شبه عناصر به شما امکان می دهند محتوایی را انتخاب کنید که قبلاً در منبع سند وجود دارد، اما توسط زبان (به عبارت دیگر، HTML شما) مشخص نشده است. با این حال، :: قبل و :: بعد از کار متفاوت است. این شبه عناصر محتوای تولید شده را به درخت سند اضافه می کنند. محتوای تولید شده در منبع HTML وجود ندارد، اما نمایش داده می شود.

چرا از محتوای تولید شده استفاده کنیم؟ برای مثال می توانید علامت گذاری کنید فیلدهای مورد نیازفرم ها را با افزودن محتوا پس از برچسب ها:

/ * برای برچسب مرتبط با فیلد مورد نیاز اعمال می شود * / .required :: after (محتوا: "(ضروری)"؛ رنگ: # c00؛ اندازه قلم: 0.8em؛)

در قسمت فرم الزامی باید استفاده کنید ویژگی HTMLضروری. زیرا این اطلاعاتاز قبل در DOM موجود است، :: قبل و :: بعد به عنوان کمک کننده عمل کنید. این محتوای انتقادی نیست، بنابراین نیازی به اضافه کردن آن به منبع ندارید.

توجه: محتوای تولید شده و قابلیت دسترسی

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

یکی دیگر از کاربردهای :: قبل و :: بعد اضافه کردن یک پیشوند یا پسوند به محتوا است. فرم بالا می تواند از متن کمکی مانند شکل زیر استفاده کند:

متن کمکی خود را با استفاده از :: before و :: after در جفت کروشه قرار می دهیم.

متن راهنما :: قبل (محتوا: "(";) .helptext :: بعد (محتوا: ")"؛)

نتیجه

شاید بیشترین راه مفیدموارد استفاده :: قبل و :: بعد - پاکسازی عناصر شناور. نیکلاس گالاگر این تکنیک را (که بر اساس کار تیری کوبلنتس ساخته شده است) در پست خود با عنوان "هک جدید میکرو کلینفیکس" معرفی کرد:

/ * برای پشتیبانی از اینترنت اکسپلورر<= 9 используйте:before и:after */ .clearfix::before, .clearfix::after { content: " "; /* Обратите внимание на пробел между кавычек. */ display: table; } .clearfix::after { clear: both; }

کلاس clearfix را به هر عنصری که باید بعد از عنصر floated پاک شود اضافه کنید.

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

هشدار: یک شبه عنصر در هر انتخابگر

در این لحظهفقط یک شبه عنصر برای هر انتخابگر مجاز است. یعنی ورودی مانند p :: first-line :: before نادرست است.

ایجاد جلوه های تایپوگرافی با: حرف اول

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

توجه: حرف اول و رها کردن

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

سبک های زیر اولین حرف بزرگ را به تمام پاراگراف های p در سند اضافه می کنند:

p :: حرف اول (فونت-خانواده: serif؛ وزن قلم: پررنگ؛ اندازه قلم: 3em؛ سبک فونت: مورب؛ رنگ: # 3f51b5؛)

از اسکرین شات می بینید که :: حرف اول ارتفاع خط خط اول را تغییر می دهد اگر به عنصر مقدار ارتفاع خط بدون واحد داده شود. V در این موردهمه تگ های p یک مقدار ارتفاع خط 1.5 را از تگ بدنه به ارث می برند.

سه راه برای کاهش این مشکل وجود دارد:

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

تنظیم ارتفاع خط با واحدهای :: حرف اول – شبه عنصر.

تنظیم ارتفاع خط در واحدهای بدنه یا والد :: حرف اول.

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

در مورد ما، اجازه دهید ارتفاع خط برای p :: حرف اول را به 5 کاهش دهیم (و ویژگی های موجود در فایل را بازنویسی کنیم، از ویژگی قلم کوتاه استفاده می کنیم):

p :: حرف اول (فونت: پررنگ مورب 3em / 0.5 serif؛ رنگ: # 3f51b5;)

نتیجه را می توان در زیر مشاهده کرد. توجه داشته باشید که ما همچنین باید حاشیه پایین هر پاراگراف p را تنظیم کنیم تا کاهش ارتفاع خط توسط p :: حرف اول را جبران کنیم.

برای ایجاد دراپ‌کاپ‌ها کمی بیشتر از CSS نیاز است. برخلاف اولین حروف بزرگ، متن مجاور در اطراف دراپ کلاپ جریان دارد. یعنی باید float را اضافه کنیم: left; به سبک های ما ما همچنین حاشیه های بالا، راست و پایین را اضافه می کنیم:

p :: حرف اول (قلم: پررنگ مورب 3em / 0.5 serif؛ سبک فونت: مورب؛ رنگ: # 607d8b؛ شناور: چپ؛ حاشیه: 0.2em 0.25em 0.01em 0;)

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

مگر اینکه از px یا rem برای تنظیم ابعاد، حاشیه و ارتفاع خط استفاده کنید، استایل دادن به حرف اول :: در همه مرورگرها بسیار دشوار خواهد بود.

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

"Lorem ipsum dolor sit amet، consectetur adipiscing elit." Fusce odio leo، sollicitudin vel mattis eget، ...

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce odio leo، sollicitudin vel mattis eget، iaculis sit ...

در حال حاضر، مرورگرها تگ q را به عنوان علامت نقل قول ارائه می کنند که در یک زبان خاص استفاده می شود، که باز و بسته می شود. با این حال، همه مرورگرها چنین گیومه هایی را به یک اندازه تشخیص نمی دهند. در فایرفاکس 42 (به زیر مراجعه کنید)، Safari 8 یا بیشتر نسخه های اولیه:: حرف اول فقط نقل قول آغازین را تغییر می دهد.

در کروم، اپرا و یاندکس، نقل قول آغازین تگ q و حرف اول پاراگراف استایلی ندارند. در زیر یک اسکرین شات در کروم است.

اینترنت اکسپلورر سبک ها را هم برای علامت نقل قول ابتدایی و هم برای حرف اول پاراگراف اعمال می کند. زیر را ببینید.

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

اشکالات مرورگر هنگام استفاده از :: حرف اول

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

در فایرفاکس 39 و نسخه های قبلی، برخی از کاراکترها باعث می شوند فایرفاکس از قانون :: حرف اول چشم پوشی کند: -, $, ^, _, +, `, ~,>,<.>

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

توجه: اشکالات در مرورگرهای Blink

برخی از نسخه‌های مرورگر Blink قانون حرف اول :: را اجرا نمی‌کنند اگر والد ویژگی نمایشی را روی خط یا جدول تنظیم کرده باشد. این باگ در کروم 42، اپرا 29 و یاندکس 15 است. این اشکال در کروم 44 برطرف شده است، اما انتشار آن تا زمانی که این کتاب در دستان شما نباشد منتشر نخواهد شد. ساده ترین راه حل این است که ویژگی های display: inline-block، display: block، یا display: table-cell خواص را به والد اضافه کنید.

ایجاد افکت های تایپوگرافی با :: first-line

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

همانطور که در زیر نشان داده شده است می توانید انتهای خط اول را با br یا hr فشار دهید. متأسفانه، این همیشه کار نمی کند. اگر عنصر شما فقط می تواند 72 کاراکتر را در خود جای دهد، تگ br بعد از نویسه 80 هیچ تاثیری بر شبه عنصر خط اول :: نخواهد داشت. شما فقط یک خط شکسته عجیب و غریب خواهید داشت.

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

محتوای تولید شده اضافه شده از طریق :: before در خط اول مطابق شکل زیر نمایش داده می شود.

اگر متن تولید شده به اندازه کافی طولانی باشد، خط اول را کاملا پر می کند. با این حال، اگر نمایش: بلوک را اضافه کنید (به عنوان مثال، p :: قبل (محتوا: '!!!'؛ نمایش: بلوک;))، آنگاه محتوا کل خط اول را پر می کند.

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

رابط های سرگرم کننده با :: انتخاب

شبه عنصر انتخاب :: به شبه عناصر به اصطلاح "برجسته" اشاره دارد که در مشخصات ماژول شبه عناصر CSS سطح 4 تعریف شده است. این شبه عنصر برجسته قبلاً بخشی از مشخصات انتخابگر سطح 3 بود و تنها یکی است. در مرورگرها پشتیبانی می شود.

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

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

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

ماژول Pseudo-Elements همچنین شامل کلاس های شبه :: spelling-error و :: grammar-error است. هنگامی که آنها اجرا می شوند، می توانیم متن را با خطاهایی که در فرهنگ لغت مرورگر بررسی شده است، استایل کنید.

عناصر شبه به شما امکان می دهند سبک عناصری را که در درخت عنصر سند تعریف نشده اند تنظیم کنید و همچنین محتوایی را تولید کنید که در کد منبع متن نیست.

نحو استفاده از شبه عناصر به شرح زیر است.

انتخابگر: شبه عنصر (توضیح قوانین سبک)

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

فو: حرف اول (رنگ: قرمز)
.foo: خط اول (سبک فونت: ایتالیک)

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

: بعد از

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

مثال 16.1. کاربرد: پس از

HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

صید شیر در صحرا به روش نسبت طلایی.

روش صید شیر نیروی ساده و بی رحمانه است.

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

برنج. 16.1. افزودن متن به پاراگراف با: after

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

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

: قبل از

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

مثال 16.2. استفاده از: قبل

HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx 4

• چبوراشکا
• کروکودیل گنا
• شاپوکلیاک
• موش لاریسا

نتیجه مثال در زیر نشان داده شده است (شکل 16.2).

برنج. 16.2. تغییر ظاهر نشانگرها با: قبل

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

هر دو: after و: before فقط برای عناصری که محتوا دارند نتیجه می‌دهند، بنابراین افزودن به انتخابگر img یا ورودی چیزی خروجی نخواهد داشت.

: حرف اول

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

Drop cap یک حرف اول بزرگ شده است که خط پایه آن یک یا چند خط کمتر از خط پایه متن اصلی است. بیرون زده اولیه - بزرگ شده نامه شکستهکه خط پایه آن با خط مبنا متن اصلی است.

بیایید به مثالی از ایجاد یک حرف اول نام بیرون زده نگاه کنیم. این مستلزم افزودن شبه عنصر: حرف اول به انتخابگر P و تنظیم سبک اولیه دلخواه است. به ویژه اندازه متن را افزایش دهید و رنگ متن را تغییر دهید (مثال 16.3).

مثال 16.3. کاربرد: حرف اول

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

نتیجه مثال در زیر نشان داده شده است (شکل 16.3).

برنج. 16.3. ایجاد حروف اول برآمده

این مثال فونت، اندازه و رنگ حرف اول هر پاراگراف متن را تغییر می دهد.

: خط اول

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

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

مثال 16-4 استفاده از شبه عنصر خط اول را در یک پاراگراف از متن نشان می دهد.

مثال 16.4. خط اول متن را انتخاب کنید

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

برنج. 16.4. نتیجه اعمال شبه عنصر: خط اول

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

سوالات برای بررسی

1. کدام شبه عنصر به شما امکان می دهد متن را به ابتدای جمله اضافه کنید؟

1. : بعد از
2. : قبل از
3. : خط اول
4. : متن اول
5. : حرف اول

2. استایل زیر چه کاری انجام می دهد؟

OL LI: حرف اول (
رنگ: قرمز؛
}

1. رنگ حرف اول یک مورد لیست گلوله‌دار را تغییر می‌دهد.
2. رنگ حرف اول یک مورد لیست شماره گذاری شده را تغییر می دهد.
3. رنگ خط اول را در لیست گلوله ای تغییر می دهد.
4. رنگ خط اول را در لیست شماره گذاری شده تغییر می دهد.
5. رنگ متن کل لیست را تغییر می دهد.

3. کدام انتخابگر غلط املایی دارد؟

1. p.new:قبل
2. خلاصه: خط اول
3. p.new.back: پس از
4. div: قبل از: حرف اول
5. الف: شناور: قبل از

پاسخ ها

2. رنگ حرف اول یک آیتم فهرست شماره گذاری شده را تغییر می دهد.

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

انتخاب کنندگان نوادگان

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

A (تزیین متن: هیچ؛)

و وقتی به پیوندهای زیرخط دار نیاز داریم، اما فقط زمانی که در تگ هستند، چه کار کنیم

ما می‌توانیم یک کلاس جداگانه ایجاد کنیم و آن را به پیوندهایی که می‌خواهیم اختصاص دهیم، اما واقعاً اینطور نیست راه درست، که نیاز به سرمایه گذاری اضافی در زمان و مکان در کد HTML دارد. استفاده از انتخابگرهای نسل (انتخابگرهای زمینه) و نوشتن بسیار ساده تر است:

P a (تزیین متن: زیر خط بکشید؛)

به عبارت ساده، ما اکنون نشان دادیم که همه پیوندها که در برچسب ها هستند

باید زیر خط کشیده شود. و این قانون برای همه لینک های دیگر صدق نمی کند.

• جدآن تگ نامیده می شود که شامل تگ های دیگر می شود. در نمودار بالا، html جد سر و بدن و head به نوبه خود جد عنوان و اسکریپت است. تگ بدن جد h1، h2 و p است.
• نسلبرچسبی نامیده می شود که در یک یا چند تگ قرار دارد. به عنوان مثال، تگ های سر و بدن از نوادگان هستند تگ html، عنوان و اسکریپت فرزندان برای head و html هستند، تگ‌های h1، h2 و p برای هر دو body و html و span از p، body و html هستند.
• والدینعنصری نامیده می شود که یک سطح نسبت به دیگری بالاتر است. در طرحواره، والد در رابطه با سر و بدن html است. برچسب سر - والد برچسب های عنوانو فیلمنامه تگ body والد h1، h2 و p است. و تگ p والد span است.
• شرکت فرعیبه ترتیب به عنصری گفته می شود که در زیر قرار دارد عنصر والد... تگ های h1، h2، p فرزندان بدن هستند. اما در عین حال تگ دهانهتنها فرزند p است.
• پرستاری، یا خواهر و برادر عناصری هستند که والد مشترک دارند. احتمالاً قبلاً حدس زده اید که برچسب های سر و بدن خواهر و برادر هستند. همچنین تگ های h1,h2,p در مجاورت یکدیگر قرار دارند.

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

بدنه Html p a (); بدن p a (); p a ();

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

/ * برای کلاس ها * / .blogcontent a (رنگ: آبی؛) / * برای شناسه ها * / #mobilenav a (اندازه قلم: 12px؛)

شبه طبقات و شبه عناصر

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

با کمک کلاس‌های کاذب در CSS، می‌توانید استایلی را برای عناصر موجود در یک صفحه وب تنظیم کنید که در صورت انجام برخی اقدامات کاربر اعمال می‌شود. شبه عناصر از این جهت متفاوت هستند که می توانند سبک محتوای ناموجود و همچنین عناصر مشخص نشده را تعریف کنند.

شبه کلاس های CSS محبوب

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

• : link - این شبه کلاس سبک پیوندهایی را که کاربر هنوز دنبال نکرده است را مشخص می کند.
• : بازدید شده - این یکی، برعکس، سبک را برای پیوندهای قبلاً بازدید شده اعمال می کند.
• : شناور - سبک عنصر را زمانی که مکان نما روی آن معلق است را تعیین می کند (نه تنها برای پیوندها قابل اعمال است).
• : فعال - استایل را تنظیم می کند لینک فعال(یعنی در لحظه کلیک بر روی آن)؛
• : فوکوس - هنگام فوکوس روی عنصر، سبک را به آن اعمال می کند (به عنوان مثال، هنگام قرار دادن مکان نما در نوار جستجو).
• : not () - این شبه کلاس مفید به شما امکان می دهد فقط عناصری را انتخاب و استایل دهید که حاوی انتخابگر مشخص شده در پرانتز نیستند.

شبه کلاس های CSS چگونه نوشته می شوند؟ شما باید یک سبک با نام عنصر مورد نیاز + نام شبه کلاس اضافه کنید. مثال:

A: پیوند (رنگ: قرمز؛) a: شناور (رنگ: # 26A65B؛) a: بازدید شده (رنگ: #CCC؛)

سبک نوشتاری می گوید که پیوندهای منظم و بازدید نشده باید باشند قرمز a: پیوند (رنگ: قرمز؛)، پیوند در شناور باید تغییر رنگ به دیگری a: شناور (رنگ: # 26A65B؛)و لینک بازدید شده باید داشته باشد رنگ سوم: بازدید شده (رنگ: #CCC؛).

شبه عناصر محبوب CSS

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

• :: after - همراه با ویژگی content استفاده می شود و به شما امکان می دهد داده های لازم را بعد از محتوای عنصر نمایش دهید.
• :: قبل - عملکردی مشابه عملکرد قبلی را انجام می دهد، فقط داده ها را نمایش می دهد جلومحتوای عنصر؛
• :: انتخاب - این شبه عنصر را مرورگرها فقط در صورت استفاده از دو دونقطه تشخیص می دهند و به شما امکان می دهد رنگ و پس زمینه متن انتخاب شده توسط کاربر را تنظیم کنید.
• :: حرف اول - برای تغییر سبک کاراکتر اول در متن یک عنصر استفاده می شود.
• :: first-line - برای تغییر سبک خط اول متن در یک عنصر استفاده می شود.

نمونه ای از استفاده از شبه عناصر:

Blockquote :: قبل (محتوا: "" ";) blockquote :: after (محتوا:" "";) blockquote :: انتخاب (رنگ: # C8F7C5؛ رنگ پس زمینه: # 1E824C؛)

ما یک سبک برای نقل قول های طولانی نوشتیم که در ابتدا و انتهای محتوای برچسب، نقل قول های استخوان ماهی را اضافه می کند.

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

نتیجه گیری

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

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

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

با استفاده از شبه عناصر در CSS، می توانید عناصری را در صفحه ای استایل دهید که به وضوح در ساختار سند مشخص نشده اند.

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

چیست؟

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

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

شبه کلاس ها انتخابگرهایی هستند که بر عناصر موجود در یک سند تأثیر می گذارند. عناصر شبه معمولاً برای تنظیم و تغییر ناحیه ای که در ابتدا در فایل اصلی وجود نداشت استفاده می شود. به عبارت ساده، شبه عناصر، نواحی جدیدی از صفحه را که در نشانه گذاری HTML نبودند، تعریف می کنند، و شبه کلاس ها، وضعیت اشیاء را تحت شرایط خاصی تعریف می کنند.

بعد از: بعد

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

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

برای ایجاد چنین موقعیتی، باید کد زیر را به شیوه نامه آبشاری اضافه کنید:

در اینجا، کلمه new نام کلاس جدید را تعیین می کند، بنابراین قبل از پاراگراف مورد نیاز در نشانه گذاری HTML، باید وارد کنید: class = "new". نام کلاس باید بین پرانتز تگ افتتاحیه ظاهر شود. اگر همه چیز به درستی انجام شود، پس از پایان پاراگراف در صفحه مرورگر، کتیبه "چیزی جدید" ظاهر می شود.

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

قبل از: قبل

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

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

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

حماسه حماسی: اول

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

این شبه عنصر CSS دو ویژگی دارد - خط و حرف:

• حرف- حرف اول قطعه متنی که به آن اضافه می شود را تغییر می دهد. بنابراین، یک drop cap را تشکیل می دهد - عنصری که در آن خط پایه چندین خط زیر متن اصلی است. برای تنظیم این پارامتر در یک شیوه نامه آبشاری، باید مشخصه هایی را برای پاراگراف تنظیم کنید. برای مثال، پ: حرف اول (***)- و در حال حاضر بین براکت ها تمام پارامترهای لازم مانند رنگ، فونت، اندازه را نشان می دهد. اگر فقط برای پاراگراف اول نیاز باشد یک drop cap ایجاد شود، یک کلاس جدید ایجاد می شود (درست مانند مثال با جدید: بعد).
• خط- این موقعیت به طور کامل خط اول پاراگراف را تغییر می دهد. در صورت نیاز به برجسته کردن اطلاعات مهم، استفاده از آن در نشریات علمی بسیار راحت است. مانند نمونه های دیگر نوشته شده است. اما نکته مهمی که در اینجا باید به خاطر داشت این است که شبه عنصر یک جمله را برجسته نمی کند، بلکه یک رشته را برجسته می کند. بسته به اینکه کاربر از چه مرورگری استفاده می کند، خط اول آنها ممکن است طولانی تر یا کوتاه تر باشد، بنابراین مهم است که مطمئن شوید این انتخاب مضحک به نظر نمی رسد. برای این موارد است که CSS شبه خط ایجاد شد.

خط جدید

در واقع، این عنصر به ندرت استفاده می شود، زیرا با موفقیت با برچسب جایگزین می شود
... با این حال، شرایطی وجود دارد که لازم است خطوط شکست را با شبه عناصر مشخص کنید. برای این منظور، می توانید از همان بعد استفاده کنید. برای این کار کد زیر را بنویسید: بعد (محتوا: "\ A"؛ فضای سفید: pre;)... نام کلاس باید بین پرانتز تگ افتتاحیه وارد شود، به محض بسته شدن، یک خط شکسته به دنبال آن ایجاد می شود.

این گزینه هنگام ساخت محتوای خوانا زمان بیشتری می برد و اگر نیازی به کار با مرورگرهای ناشناخته غیرعادی نیست، بهتر است خود را به برچسب محدود کنید.
.

نحو شبه کلاس

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

همه شبه کلاس ها با یک نحو ساده و آزمایش شده در شیوه نامه آبشاری نوشته می شوند:

• انتخابگر: شبه کلاس (ویژگی های سبک: رنگ، اندازه، تورفتگی، موقعیت و غیره)

این کلاس ها را می توان به سه گروه اصلی تقسیم کرد:

• آنهایی که وضعیت عنصر را تعیین می کنند.
• آنهایی که به شبه عناصر مربوط می شوند.
• کلاس های ساختگی که زبان محتوا را تعریف می کنند.

شبه کلاس ها و حالت عنصر

بیایید نگاهی بیندازیم که شبه کلاس ها چه می توانند باشند. اولین زیرگونه با تغییر در وضعیت یک عنصر بسته به حالت آن در یک لحظه خاص مشخص می شود. این مانند مثال بالا است: اگر پیوند دنبال شود، رنگ آن تغییر می کند. این شامل شبه کلاس های زیر است:

• :فعال.اگر این کلاس شبه را اعمال کنید، وقتی روی یک قطعه جداگانه کلیک کنید، فعال می شود. این خود را به عنوان یک تغییر رنگ، افزایش اندازه، یا یک انیمیشن ظاهر می شود.
• :ارتباط دادن... عمدتاً برای پیوندهایی اعمال می شود که کاربر هنوز از آنها بازدید نکرده است. آنها بدون تغییر باقی می مانند.
• : تمرکز... اغلب برای اسناد متنی، زمانی که کاربر با قرار دادن مکان نما روی فیلد، می تواند رنگ متن را تغییر دهد. این گاهی اوقات برای تصاویر نیز استفاده می شود. به عنوان مثال، تصویر سایه دار نمایش داده می شود، اما با کلیک کردن، رنگ طبیعی به دست می آید.
• :شناور... زمانی که کاربر فقط ماوس را روی آن می‌برد شی خاص، می تواند رنگ یا شکل را بدون نیاز به کلیک تغییر دهد.
• :ملاقات کرد... اساساً این شبه کلاس برای پیوندهای بازدید شده است که به طور پیش فرض رنگ خود را به بنفش تغییر می دهند.

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

به طور خاص برای شبه عناصر CSS

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

• ب: فرزند اول (رنگ: قرمز؛)

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

همچنین : بچه اولبرای حذف تورفتگی در پاراگراف اول و سپس به جای استفاده از رنگ: قرمز؛نیاز به نوشتن دارد text-indent: 0;و B را با P جایگزین کنید (تگی که مسئول ابتدای پاراگراف است نیز مشخص شده است).

زبان محتوا

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

• نام کلاس: زبان (زبان) (ویژگی های متن (رنگ و غیره))

در مورد موقعیت "زبان" ، مطابق با هنجارهای پذیرفته شده تعیین شده است. به عنوان مثال، انگلیسی - en، روسی - ru، آلمانی - de، و غیره. به لطف این شبه کلاس، می توانید سبک متن خارجی را در کل سند تغییر دهید.

نتیجه گیری

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