Szerokość wejściowa CSS
Kaskadowe arkusze stylów używają kilku właściwości do stylizowania dowolnej zawartości HTML. Jednym z podstawowych efektów, które są używane, jest zwiększenie wymiaru zawartości tylko w dowolnym określonym kierunku (e.G., Szerokość i wysokość.) W tym artykule omówiono właściwość szerokości, która jest przemieszczeniem w oryginalnym rozmiarze zawartości w kierunku poziomym.
Pole wejściowe:
Podczas tworzenia formularza na stronie internetowej często używamy różnych pól tekstowych, aby uzyskać dane wprowadzone do tego pola przez użytkownika. Odbywa się to według typu wejściowego pola „tekst”. Użyjemy właściwości szerokości, aby zwiększyć rozmiar pól wejściowych HTML.
Przykład 1:
Ten przykład obejmie przykładową implementację pola tekstowego zadeklarowanego w korpusie HTML wraz z wbudowanym CSS. Winline CSS jest rodzajem CSS, który jest deklarowany wewnątrz znacznika HTML ciała. Najpierw zadeklarujemy proste pole tekstowe za pomocą właściwości szerokości bezpośrednio w znaczniku typu wejściowego. Ten kod będzie miał część ciała bezpośrednio w kodzie, ponieważ nie ma potrzeby używania sekcji głównej. Wewnątrz ciała nakładany jest kolor tła.
Wypełniając formularz online, musisz zauważyć, że mały tekst jest zapisywany na bok z polem tekstowym lub polem tekstowym. Ten tekst opisuje cel pola tekstowego i typ tekstu, do którego powinien wprowadzić użytkownik. Na przykład nazwa, wiek i adres to wymagane pola tekstu. Te nazwy wszystkich pól są znane jako etykieta. W HTML określony znacznik etykiety służy odpowiednio do deklarowania etykiety dla każdego pola tekstowego.
| 1 | < label for = "name"> Wprowadź wartość: |
Ten znacznik używa nazwy pola tekstowego, do którego należy i pojawi się, zanim określone pole zostanie ogłoszone na stronie internetowej. Następnie wymieniono nazwę etykiety. Następnie zadeklarujemy zawartość pola tekstowego. Gdy piszemy tekst, pole wejściowe jest zapisywane lub pobierane przez system. Typ wejścia, używając jego identyfikatora, będzie tekstem o nazwie pola.
| 1 |
Trzecia właściwość w tym znaczniku należy do CSS. Właściwość szerokości jest dodawana z instrukcją stylu, aby dodać poziomy wymiar pola tekstowego. Odbywa się to przez szerokość.
Zapisz ten kod w edytorze tekstu z rozszerzeniem HTML, aby wyświetlić stronę internetową tego kodu w dowolnej przeglądarce. Otwórz ten kod z opcją w przeglądarce.
Zobaczysz, że powstaje proste pole tekstowe z etykietą. Określona szerokość jest podana do pudełka, w przeciwnym razie miałby niewielki obszar do przyjęcia danych wejściowych.
Tę koncepcję można również wykonać za pomocą oddzielnego kodu stylu w części głównej, aby kod był łatwo zrozumiały. Ten typ CSS, w którym styl jest dodawany osobno w sekcji głowy, jest znany jako wewnętrzny CSS. Odbywa się to przy użyciu ID i klas dla określonego znacznika, na którym chcemy dodać efekt. Na przykład klasa „HELO” jest tworzona, aby dodać szerokość do pola wejściowego.
| 1 2 3 4 5 6 7 8 9 |
Nazwa tej klasy „HELO” zostanie dodana do znacznika wejściowego jako odniesienie, aby dodać wszystkie właściwości do tego pola tekstowego typu wejściowego.
| 1 |
Podczas wykonywania tworzone jest to samo pole tekstowe.
Przykład 2: selektor CSS
W przeciwieństwie do poprzedniej koncepcji deklarowania właściwości szerokości do pola tekstowego jako wbudowanego i wewnętrznego CSS poprzez zjawisko klasy, istnieje inna funkcja, która służy do zastosowania dowolnego efektu do zawartości HTML. To jest selektor CSS. Ten selektor jest inny dla każdej zawartości HTML. Deklaracja selektora odbywa się również jak wewnętrzne CSS wewnątrz znacznika stylu w sekcji głównej.
| 1 2 3 4 5 | Wejście [type = "text"] Szerokość: 200px; |
Odbywa się to za pomocą wejścia do słowa kluczowego wewnątrz nawiasów. Wspomniany jest typ wejściowy, który określa deklarację pola tekstowego. Wewnątrz tej deklaracji stosuje się szerokość pola.
Wewnątrz ciała nie ma potrzeby dodawania żadnej nazwy klasy ani dalszych szczegółów w celach informacyjnych. Kiedy deklarujemy typ wejściowy tworzenia pole tekstowej, jest on automatycznie podłączony do znacznika stylu wewnątrz sekcji głównej.
Przykład 3:
Jest inny przykład zastosowania szerokości do pola tekstowego. Odbywa się to przy użyciu znacznika stylu wewnątrz znacznika zawartości wejściowej HTML oraz dalszego dodawania marginesu i wyściółki do pól tekstowych, aby ulepszyć właściwość szerokości. Właściwość szerokości jest stosowana tylko do jednego pola tekstowego, gdy drugi zawiera ustawienia domyślne. To pokaże różnicę w deklarowaniu pola typu odbiorczego tekstu z stylem szerokości i bez. Teraz zacznijmy od kodu nadwozia HTML, aby opracować działanie znacznika w stylu szerokości.
Po pierwsze, wewnątrz ciała, ogłosiliśmy nagłówek. Następnie użyj kontenera Div na stronie internetowej. Główną funkcją tego pojemnika jest dodanie do niego zawartości HTML z określonym wyrównaniem, aby utrzymać je we właściwym miejscu. Wewnątrz znacznika użyj znacznika etykiet, aby dodać nazwę. Następnie użyj znacznika wejściowego dla pola tekstowego i dodaj do niego rozmiar 10. Różnica w rozmiarze i szerokości polega na tym, że szerokość powiększa pole tekstowe w pikselach. Podczas gdy rozmiar jest również używany do zwiększenia wymiarów dowolnego obiektu, ale dotyczy on powiększeń pionowych i poziomych.
Zrób sobie przerwę przez
etykietka. Następnie ponownie użyj innego pola tekstowego dla danych. Dodaj pole wejściowe typu danych, aby użytkownik mógł dodać tylko datę zgodnie z formatem. Powstanie również symbol kalendarza, który jest wbudowaną cechą.
W części CSS dodaje się czcionkę do etykiety. A do pola wejściowego użyliśmy właściwości marginesu i wyściółki.
| 1 2 3 4 5 6 7 | Wejście Margines: 7px; Wyściółka: 2px; |
Podczas wykonania zobaczysz, że atrybut rozmiaru powiększył ogólny rozmiar pola tekstowego nazwy. Podczas gdy właściwość szerokości zwiększyła rozmiar poziomego.
Wniosek:
Szerokość wejściowa CSS to funkcja używana do zwiększenia rozmiaru pól typu wejściowego, pola te to pola tekstowe, obszary tekstowe i pola wyboru. Użyliśmy pól tekstowych do opracowania działania właściwości szerokości w CSS wbudowanym i wewnętrznym CSS. Wyjaśniono również różnicę między rozmiarem a funkcją szerokości. Własność szerokości odgrywa główną rolę w wyrównaniu formy, zachowując taką samą wartość stosunku szerokości dla wszystkich pól tekstowych.