Span Tag және CSS көмегімен сөздің түсін өзгерту

CSS арқылы мәтіндегі мәтіннің түсін қою оңай. Егер бетіңіздегі параграфтардың белгілі бір түспен көрсетілуін қаласаңыз, онда сіздің сыртқы стиліңізде браузер таңдалған түске мәтінді көрсететін болады. Мәтіннің параграфының ішінде бір сөздің (немесе бірнеше сөздердің болуы мүмкін) түсін өзгерту керек болғанда не болады? Ол үшін тег сияқты кірістірілген элементті пайдалану қажет.

Сайып келгенде, сөйлемдегі бір сөздің немесе сөздердің кішкене топтарының түсін өзгерту CSS арқылы оңай және тегтер жарамды HTML болып табылады, сондықтан бұл қандай да бір хак болып табылатындығына алаңдамаңыз. Осындай тәсілмен, ескірген HTML дәуірінің өнімі болып табылатын «қаріп» сияқты атрибуттар мен атрибуттарды пайдаланудан аулақ боласыз.

Бұл мақала веб-әзірлеушілерді, ең алдымен, HTML және CSS-ке жаңадан бастауға арналған. Бұл сіздің беттеріңіздегі нақты мәтіннің түсін өзгерту үшін HTML тегтерін және CSS-ті пайдалану әдістерін үйренуге көмектеседі. Айта кету керек, бұл әдіс бойынша кейбір кемшіліктер бар, олар осы мақаланың соңында жазылады. Осы мәтін түсін өзгерту үшін қадамдарды үйрену үшін қазір оқыңыз! Бұл өте оңай және шамамен 2 минут қажет.

Қадамдық нұсқаулық

  1. Таңдаулы HTML редакторында жаңарту қажет веб-бетті ашыңыз. Бұл Adobe Dreamweaver сияқты бағдарлама немесе Блокнот, Блокнот ++, TextEdit және т.б. сияқты қарапайым мәтіндік редактор болуы мүмкін.
  2. Құжатта сіз беттің басқа түсінде көрсетілетін сөздерді табыңыз. Осы оқулық үшін мәтіннің үлкен параграфына енетін кейбір сөздерді пайдалануға мүмкіндік береді. Бұл мәтін thetag жұбында болады. Түсіндіргіңіз келетін екі сөздің бірін табыңыз.
  3. Жүгіргіні сөзді немесе сөз тобындағы түсі өзгерткіңіз келетін бірінші әріптен бұрын қойыңыз. Есіңізде болсын, Dreamweaver сияқты WYSIWYG редакторын пайдаланып жатсаңыз, сіз қазір «код көрінісінде» құқықты жұмыс істеп жатырсыз.
  4. Сыныптың атрибутын қамтитын түспен тегтің көмегімен өзгерткісі келетін мәтінді орап көрейік. Бүкіл абзац келесідей болуы мүмкін: Бұл сөйлемдегі мәтінге бағытталған.
  5. Біз бұл мәтінді CSS-де қолдануға болатын «ілгекті» беру үшін кірістірілген элементті ғана пайдаландық. Келесі қадам - ​​жаңа ережені қосу үшін сыртқы CSS файлына өту.
  1. Біздің CSS файлымызда мыналарды қосайық:
    1. .focus-text {
    2. түсі: # F00;
    3. }
    4. مور
  2. Бұл ереже қызыл түспен көрсетілетін кірістірілген элементті орнатады. Егер біздің құжаттың мәтінін қара етіп орнататын бұрынғы стилі болса, бұл кірістірілген стилі ұзын мәтінді назар аударып, әртүрлі түстермен ерекшелендіреді. Бұл ережеге басқа стильдер қосуға болады, мүмкін, мәтінді курсивпен немесе батыл ету үшін оны одан да көп атап көрсету керек пе?
  3. Бетті сақтаңыз.
  4. Өзгерістерді көру үшін сүйікті веб-браузердегі бетті тексеріңіз .
  5. Айта кетейік, кейбір веб-кәсіпқойлар немесе тегтер жұптары сияқты басқа элементтерді пайдаланатындығын ескеріңіз. Бұл тегтер «батыл» және «курсив» үшін арнайы қолданылған, бірақ олар ескіріп, ауыстырылды. Тегтер әлі де қазіргі заманғы браузерлерде жұмыс істейді, дегенмен, көптеген веб-әзірлеушілер оларды сызықтық стилі ілгегі ретінде пайдаланады. Бұл нашар көзқарас емес, бірақ ескірген элементтерден аулақ болғыңыз келсе, мен осындай сәндеу қажеттіліктеріне арналған жапсырмамен жабысып қалуды ұсынамын.

Кеңестер мен нәрселерді көру

Бұл тәсіл кішігірім сәндеуге қажет болса да, мысалы, құжатта тек бір кішігірім мәтінді өзгерту қажет болса, ол тез арада бақылаудан шыға алады. Егер сіздің бетіңіз кірістірілген элементтермен қоршалған болса, олардың барлығы CSS файлыңызда пайдаланатын бірегей сыныптары бар болса, сіз оны қате жасай аласыз, Есте сақтаңыз, сіздің беттегі осы тегтердің көбі қаншалықты қиын болса бұл бетті алға қарай жалғастыра беруі мүмкін. Сонымен қатар, жақсы веб-типографиясы сирек түсі көптеген нұсқалары бар және т.б. бар.