З дапамогай CSS , можна лёгка ўсталяваць колер тэксту ў дакуменце. Калі вы хочаце абзацы на старонцы, каб быць аказаны ў пэўным колеры, вы проста паказаць, што ў вашых знешняй табліцы стыляў, а браўзэр будзе адлюстроўваць тэкст у гэтым абраным колеры. Што адбываецца тады, калі вы хочаце змяніць колер толькі адно слова (ці, магчыма, усяго некалькі слоў) у абзацы тэксту? Для гэтага вам трэба будзе выкарыстоўваць ўбудаваны элемент, як тэг.
У канчатковым рахунку, змяніць колер аднаго слова або невялікай групы слоў у сказе лёгка з дапамогай CSS, а тэгі сапраўдныя HTML, так што не турбуйцеся пра гэта быць які - то хак. Пры такім падыходзе, вы таксама пазбегнуць выкарыстання састарэлых тэгаў і атрыбутаў, як «шрыфт», які з'яўляецца прадуктам якая пайшла HTML эпохі.
Гэты артыкул прызначана для пачаткоўцаў вэб-распрацоўнікаў, якія, верагодна, знаёмыя з HTML і CSS. Гэта дапаможа вам даведацца, як выкарыстоўваць HTML-тэгі і CSS, каб змяніць колер пэўнага тэксту на вашых старонках. Гэта, як гаворыцца, ёсць некаторыя недахопы гэтага метаду, які я разгледжу ў канцы гэтага артыкула. На дадзены момант, чытайце далей, каб даведацца крокі, каб змяніць гэтую колер тэксту! Гэта вельмі лёгка і займае каля 2 хвілін.
Крок за крокам інструкцыі
- Адкрыйце вэб-старонку, якую вы хочаце абнавіць ў вашым каханым тэкставым рэдактары HTML. Гэта можа быць праграма , як Adobe Dreamweaver ці проста тэкставы рэдактар , напрыклад Нататнік, Notepad ++, TextEdit і г.д.
- У дакуменце, знайсці словы, якія вы хочаце адлюстроўвацца іншым колерам на гэтай старонцы. Для гэтага ўроку, дазваляе выкарыстоўваць некаторыя словы, якія знаходзяцца ў большым абзацы тэксту. Гэты тэкст будзе утрымлівацца ў thetag пары. Знайсці адзін з двух слоў, колер якіх вы хочаце змяніць.
- Змесціце курсор перад першай літарай у слове або групе слоў, якія вы хочаце змяніць колер. Памятаеце, што калі вы выкарыстоўваеце WYSIWYG рэдактар , як Dreamweaver, вы працуеце ў «прагляд кода» Rigth ў цяперашні час.
- Хай абгарнуць тэкст, колер якога мы хочам змяніць з дапамогай тэга, у тым ліку атрыбуту класа. Увесь пункт можа выглядаць наступным чынам: Гэта тэкст, які факусуюць на ў сказе.
- Мы проста выкарысталі убудаваны элемент ,, каб даць, што канкрэтны тэкст на «кручок», які можна выкарыстоўваць у CSS. Наш наступны крок, каб перайсці на наш знешні файл CSS, каб дадаць новае правіла.
- У нашым файле CSS, давайце дадамо:
- .focus-тэкст {
- колер: # F00;
- }
- Гэта правіла ўстаноўлена, што ўбудаваны элемент, то, каб адлюстраваць у чырвоным колеры. Калі б мы мелі папярэдні стыль, які ўсталёўвае тэкст нашага дакумента да чорнага, гэты ўнутраны стыль прывядзе тэкст пядзі быць засяроджаны на і вылучаецца з іншым колерам. Мы маглі б таксама дадаць іншыя стылі да гэтага правіла, магчыма, зрабіць тэкст курсівам або тлустым шрыфтам, каб падкрэсліць яго яшчэ больш?
- Захавайце старонку.
- Праверце старонку ў вашым любімым вэб - браўзэры , каб убачыць змены ў сілу.
- Варта адзначыць, што ў дадатак да, некаторыя вэб-спецыялісты аддаюць перавагу выкарыстоўваць іншыя элементы, такія як у або тэг пар. Гэтыя пазнакі выкарыстоўваюцца як для «тоўсты» і «Курсіў» адмыслова, але былі састарэлымі і замененыя і. Тэгі па-ранейшаму працуюць у сучасных браўзэрах, таму шматлікія вэб-распрацоўшчыкі выкарыстоўваюць іх як убудаваныя гакі для кладкі. Гэта не самы горшы падыход, але калі вы хочаце, каб пазбегнуць якіх-небудзь састарэлых элементаў, я прапаную прытрымлівацца з тэгам для гэтых відаў патрэбаў стайлінгу.
Парады і рэчы, якіх трэба сцерагчыся
Хоць гэты падыход выдатна падыходзіць для невялікіх патрэбаў стайлінгу працуе, як калі вам трэба змяніць толькі адзін невялікі фрагмент тэксту ў дакуменце, ён можа хутка выйсці з-пад кантролю. Калі вы выявілі, што ваша старонка завалена ўбудаванымі элементамі, усе з якіх маюць унікальныя класы, якія вы выкарыстоўваеце ў файле CSS, вы можаце рабіць гэта няправільна, памятаеце, чым больш з гэтых тэгаў, якія знаходзяцца ў вашай старонцы, тым цяжэй яго хутчэй за ўсё, будзе сцвярджаць, што старонка ісці наперад. Акрамя таго, добры вэб - тыпаграфікі рэдка мае што шмат варыянтаў колеру і г.д. па ўсёй старонцы!