Како нацртати квачицу/квачицу користећи ЦСС

Kako Nacrtati Kvacicu Kvacicu Koristeci Css



Квачица или симбол квачице могу се нацртати у ХТМЛ-у у различитим облицима и бојама користећи различите ЦСС особине. Да бисте нешто нацртали кроз код, потребно је да подесите вредности параметара за тај облик кроз нека својства стила као што је „ висина ”, “ ширина ”, “ боја ”, “ граница “, итд.

Овај чланак ће показати следеће приступе:

Метод 1: Цртање симбола квачице/квачице помоћу ЦСС својстава

Да бисте нацртали симбол квачице, први услов је да визуализујете како ће ознака квачице изгледати на крају јер се може креирати у било којој боји или облику. Ово ће бити боље разумети уз помоћ примера.







Пример
На пример, програмер жели да нацрта једноставну квачицу зелене боје користећи својства ЦСС стила и прикаже је у центру интерфејса. У ХТМЛ коду је потребно креирати „ <див> ” елемент контејнера са „ ид ” или „ класа ”:



< див ид = 'квачица' >< / див >

У горњој ХТМЛ изјави, „ див ” елемент је додат са ИД-ом декларисаним као „ квачица ”.



Док стилизујете елемент користећи ЦСС својства, додајте „ ид ” селектор да упућује на ХТМЛ елемент, а затим наведе својства унутар њега:





#квачица
{
трансформисати: ротирати ( 45 дег ) ;
висина : 45пк;
ширина : 20пк;
маргин-лефт: педесет %;
бордер-боттом: 9пк чврста тамноцрвена;
бордер-ригхт: 9пк чврста тамноцрвена;
}

Горњи елемент ЦСС стила има следећа својства:

  • трансформисати: ротирати (45 степени) ” ротира равне вертикалне и хоризонталне линије на начин да чини облик симбола квачице.
  • висина ” својство поставља висину симбола крпеља на „ 45пк ”.
  • ширина ” својство чини симбол “ 20пк ” широк.
  • маргин-лево ” својство поравнава симбол квачице са средиштем интерфејса веб странице.
  • Након тога, „ граница-дно ' и ' граница-десно ” својства постављају тежину ивице обе линије на „ 9пк ” и дефинише „ даркивегреен ” боја за обе линије које чине потпуни симбол квачице.

Ово ће створити једноставну квачицу или симбол зелене боје приказан у центру интерфејса веб странице “ 45пк “високо и” 20пк ” широк:



Метод 2: Уметање квачице/квачице помоћу Уницоде знакова

Постоје и неки Уницоде знакови који аутоматски убацују симболе квачице у излаз без потребе за стилизовањем и дефинисањем вредности параметара за њих. На пример, Уницоде карактер “ У+2713 ” помаже у додавању једноставног симбола квачице у излаз. Слично, Уницоде карактер “ У+2713 ” помаже уметању белог тешког симбола квачице у излаз. Да бисте научили како да додате ове Уницоде знакове у ХТМЛ документ кроз комплетан водич, кликните овде .

Закључак

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