Како променити боју текста ваше веб странице помоћу ЦСС -а

Контрола над вашом веб страницом важан је елемент веб дизајна. У идеалном свету требало би да можете да промените сваки аспект дизајна ваше веб локације без компромиса око готовог производа.

Наравно, међутим, веб локације често могу бити тврдоглаве. Није увек могуће постићи жељене резултате без урањања у свет ЦСС -а. Хајде да погледамо како можете да промените боју текста помоћу ЦСС -а на својој веб страници да бисте добили идеју о томе како помоћу ЦСС -а можете постићи више.

Промена боје текста веб странице помоћу ЦСС -а

ЦСС је пажљиво осмишљен како би дизајнерима дао моћ над пројектима њихових веб страница. Невероватно је лако променити боју текста помоћу ЦСС -а на вашој веб локацији; потребно вам је само једно правило да бисте то урадили.

боја: плава;

Наравно, ЦСС правила сама по себи не функционишу добро. Морате их упарити са класама елемената, ИД -овима и идентификаторима како бисте били сигурни да веб прегледачи знају на шта се стил односи. Можете видети примере коришћења овог правила са насловом Х1, параграфом П и дугметом испод.

х1 {боја: плава; }
п {боја: црвена; }
дугме {боја: црвена; }

Ово би требало да вам пружи основно разумевање шта треба учинити да бисте променили боју текста ваше веб странице помоћу ЦСС -а. Обично је потребно више од овога, посебно ако желите да дате различите боје различитом тексту на својој веб локацији.

Повезан: Модел ЦСС кутије објашњен примерима

Проналажење праве ЦСС класе

Пре него што промените одређени текст на својој веб локацији, морате знати како да га идентификујете у свом ЦСС -у. Већина веб прегледача има скуп алата који су дизајнирани да помогну програмерима и вероватно је да онај који користите има нешто што се зове Инспекторе. Ово се може користити за завиривање у ХТМЛ и други код који гради веб страницу.

Отварање инспектора

Отварање инспектора је различито у сваком од прегледача на тржишту. У наставку смо покрили прегршт најпопуларнијих прегледача како бисмо вам дали почетак:

• Гоогле Цхроме: ЦТРЛ + Схифт + Ц. или Тачке менија > Више алата > Алати за програмере
• Мицрософт ивица: ЦТРЛ + Схифт + Ц. или Тачке менија > Више алата > Алати за програмере
• Мозилла Фирефок: ЦТРЛ + Схифт + Ц. или Тачке менија > Више алата > Алати за веб програмере
• Аппле Сафари: Преференцес > Адванцед > Прикажите мени за развој на траци са менијима и онда Развити > Прикажи веб инспектора

Проналажење правог стила ЦСС текста

Може вас збунити када први пут отворите Инспецтор у свом прегледачу. Биће много ствари које можда не разумете, али за сада не морате да бринете о овоме. Потребно је само да пронађете назив стила текста који покушавате да промените.

На пример, ми ћемо пронаћи и променити стил ЦСС текста који се користи за главно заглавље у одељку Програмирање МакеУсеОф. Овај процес можете започети прегледом елемента који треба променити.

• Гоогле Цхроме: Десни клик > Прегледајте
• Мицрософт ивица: Десни клик > Прегледајте
• Мозилла Фирефок: Десни клик > Прегледајте или П
• Аппле Сафари: Десни клик > Прегледати елемент

Ово ће учинити да се прозор ваше конзоле/инспектора фокусира на елемент који покушавате да промените. У Цхроме -у, Сафари -у, Едге -у и Фирефок -у требало би да видите одељак са ознаком Стилови који садржи сав ЦСС код за елемент који прегледавате.

Такође би требало да видите свој ХТМЛ елемент истакнут у окну поред овога. Ово се може користити за утврђивање класе или ИД елемента који мењате. У нашем случају, гледамо главни наслов Х1 на нашој страници и он припада класи која се зове .листинг-титле.

У овом тренутку можете тестирати стил ЦСС текста који ћете додати својој веб локацији. Горњи део одељка ЦСС стила у конзоли веб локације може се користити за примену правила на одређени елемент који сте циљали. Наравно, ово није трајно.

Повезан: Како изградити прилагодљиву навигациону траку помоћу ХТМЛ -а и ЦСС -а

Додавање новог ЦСС -а

Сада је време да додате нови ЦСС на своју веб локацију. Начин на који то радите зависиће од врсте платформе веб локације коју користите, а опције као што је Схопифи захтевају проширења која ће вам омогућити додавање ЦСС -а без промене датотека.

Како год додали свој ЦСС код, морате се уверити да је исправан. Коришћење ЦСС правила у стилу текста није превише тешко, али може бити фрустрирајуће када не можете да схватите како да промените боју текста. За наш пример, ово је код који бисмо морали да додамо нашој веб страници.

.листинг-титле {
боја: плава;
}

Шта ако се боја текста не промени?

Када уредите ЦСС датотеку, требало би да видите промену коју сте извршили чим освежите страницу. Међутим, није увек тако једноставно. ЦСС може бити сложенији него што људи очекују и можда ћете у овој фази морати учинити више.

• Пражњење кеш меморије: Веб локације често користе кеширање да би скратиле време учитавања. Предмеморија вас можда спречава да видите промене веб локације, па је морате испразнити када уносите промене у ЦСС.
• Више у стилском листу: ЦСС секвенцијално учитава стилове, а то значи да ће прва правила у вашој табели стилова бити она која се приказују на вашој веб локацији. Померање стилова може бити добар начин да им се да предност над осталим стиловима.
• Коришћење важних ознака: Ова следећа опција се не сматра најбољом праксом и најбоље је резервисана када немате другог избора. Својим ЦСС стиловима текста можете додати важну ознаку да бисте им дали предност у односу на све остале стилове, а то се види испод:

.листинг-титле {
боја: плава! важно;
}

Остали стил текста ЦСС Забава

ЦСС је невероватно моћан алат који вам даје приступ мноштву различитих опција када радите са текстом и другим елементима на својој веб локацији. Ово не престаје само са бојом текста ЦСС -а, а можете и учитавати текст када одлучите да научите мало ЦСС -а. У наставку можете пронаћи још неколико основних правила стила ЦСС текста:

• Величина фонта: Ово мења величину текста на вашој веб локацији, на пример, фонт-сизе: 12пк;
• Тежина фонта: Тежина се односи на дебљину фонта, при чему је подебљана велика тежина, а танак текст мали, нпр. Тежина фонта: 400;
• Поравнање текста: Ово мења поравнање текста са којим радите, на пример, тект-алигн: ригхт;
• Текст-сенка: Ово вам омогућава да додате сенку у текст са низом атрибута, нпр. Текстуална сенка: 2пк 2пк 3пк црна;
• Трансформација текста: Ово мења велика и мала слова текста са којим радите, на пример, текстуална трансформација: велика слова;
• Декорација текста: Ово вам омогућава да у текст додате подвлаке, цртице и друге украсе, на пример, украшавање текста: подцртавање;

Ово је само гребање по површини онога што можете учинити са стиловима текста у ЦСС -у. На вебу постоји много водича који вам могу помоћи у овом процесу, и увек је добра идеја да направите мало истраживања на почетку.

Повезан: Како променити текст ваше веб странице помоћу својства породице фонтова ЦСС

Сазнајте више од боје текста ЦСС -а

Вежба, експеримент и покушај и грешка најбољи су начини за учење алата попут ЦСС -а. Стилски листови могу изгледати застрашујуће када први пут почнете да радите са њима, али са њима је невероватно лако радити након што проведете неко време са њима.

10 једноставних примера ЦСС кода које можете научити за 10 минута

Треба вам помоћ са ЦСС -ом? Испробајте ове основне примере ЦСС кода за почетак, а затим их примените на своје веб странице.

Прочитајте следеће

О аутору