CSS wyłączone

CSS wyłączone

Arkusz stylów kaskadowych jest ważną częścią tworzenia i projektowania strony internetowej. „Wyłączone” to selektor w CSS i jest używany w znacznikach, aby wyłączyć elementy HTML. Ten selektor jest stosowany do formularzy HTML, w tym pola tekstowe, przyciski, pola wyboru itp. W tym artykule zobaczymy, w jaki sposób funkcja wyłączona jest stosowana do różnych elementów w HTML.

Wyłączone pole tekstowe

Pole tekstowe to sekcja, w której użytkownik wprowadza jego dane wejściowe, które ma być przechowywane na stronie internetowej. To pole tekstowe jest opracowywane jako włączone pole tekstowe, aby uzyskać wartość od użytkownika. Ale w niektórych przypadkach, aby ograniczyć dane wejściowe użytkownika w odniesieniu do dowolnej etykiety lub informacji użytkownika, może być konieczne wyłączenie niektórych pól tekstowych. W tym przykładzie zobaczymy, w jaki sposób pole tekstowe można wyłączyć za pośrednictwem HTML i CSS.

Rozpoczynamy kod z sekcją Head. Tytuł jest przekazywany na stronę internetową, nad którą pracujemy. Następnie używamy znacznika stylu, aby dodać wszystkie właściwości stylizacji do zawartości, którą tworzymy w ciele HTML. Oprócz prostego pola wyłączonego tekstu, używamy również dodatkowych elementów, aby łatwo rozwinąć działanie i funkcjonalność wyłączonych i włączonych elementów.

W znaczniku stylu mamy najpierw włączone pole tekstowe wejściowe. Tworzymy trzy pola tekstowe w części HTML-DWO są włączone, a trzeci jest wyłączony. Typ wejściowy pola to „tekst”. Oznacza to, że zaakceptuje tylko tekst. Tak więc używamy tagów CSS dla włączonych pola tekstowego.

1
Wejście [type = tekst]: włączony

To stylizuje tylko te pola tekstowe, które są ustawione na włączenie. Stosujemy jasnoszary jako kolor tła do obu pola. Podobnie, po włączonym polu tekstowym, CSS jest zadeklarowane dla wyłączonego pola tekstowego. Aby odróżnić niepełnosprawne pole tekstowe od włączonego, kolor tła jest ciemnosym, a kolor czcionki jest ustawiony na biały.

Aby zastosować pewne efekty na wszystkich polach, włączone lub wyłączone, używamy tylko słowa „wprowadzania”. W ten sposób style są stosowane do wszystkich trzech pól tekstowych. Pierwszym efektem jest margines. Ta funkcja „marginesu” to przekroczony obszar kształtu. Na przykład prostokątne pole tekstowe ma brzeg 10 pikseli z górnego kierunku. Oznacza to, że w górnym kierunku pole ma 10 pikseli w górę.

1
2
3
wejście
margines: 10px;

Podobnie, po marginesie, granica kształtu jest również stosowana z rozmiarem granicy i koloru, który jest ustawiony jako brązowy. W przypadku rozmiaru tekstu wprowadzonego w polu tekstowym, aby tekst był łatwy do czytelny, ustawiamy rozmiar czcionki na 16 pikseli.

1
2
3
4
5
granica: 1px Solid Brown;
Rozmiar czcionki: 16px;

Kolejną funkcją używaną w CSS jest cała zawartość tworzona w ciele HTML, aby pojawić się na środku strony internetowej. Po prostu używamy znacznika dla ciała. Wynika to z faktu, że zawartość jest tworzona w sekcji ciała tagów HTML. Ponieważ cała zawartość jest w typu tekstu, po prostu używamy wyrównania tekstu do centrum.

1
2
3
4
5
Ciało
Text-Align: Center;

Wzdłuż pola tekstowego znajduje się nagłówek lub etykieta, która jest podana do zademonstrowania celu pola tekstowego lub które dane mają być wprowadzane w polu tekstowym. Ta etykieta jest również stylizowana przez CSS. Waga czcionki jest właściwością stosowaną do tekstu, aby była albo odważna, kursywna itp. Tutaj wybraliśmy wagę jako odważną.

1
Font-Weight: Bold;

Teraz, kierując się w kierunku sekcji ciała HTML, nagłówek jest podawany za pomocą

etykietka. Ponieważ pola tekstowe i przyciski są częścią formularza, tag jest tutaj stosowany. Deklarujemy pojedynczy znacznik dla pola włączonego tekstu.

1
2
3


Etykieta jest podana jako „wiek”. Pole tekstowe jest zadeklarowane przez typ wejściowy. Wartość to sekcja zawierająca nazwę lub symbol zastępczy do noszenia dowolnego słowa wyświetlanego na polu tekstowym.
Tag dotyczy przerwy, która przełącza się na następny wiersz. Teraz niepełnosprawne pole tekstowe jest zadeklarowane za pomocą etykiety „Adres”. Po dostarczeniu tekstu wejściowego deklarujemy „wyłączone”, aby po pole tekstowe wyłączone.

1

Następnie ciało forma jest zamknięte. Tagi HTML są również zamknięte.

Kiedy wykonamy plik w przeglądarce, zobaczysz, że wyjście wygląda jak załączony obraz. Wszystkie trzy etykiety wraz z pola tekstowe są wyświetlane. Dwa z nich są włączone, a trzeci jest wyłączony. Cała stylizacja CSS, którą zrobiliśmy, są stosowane do treści. Pole wyłączone jest ciemne do rozróżnienia między włączonym a wyłączonym.

Teraz zobaczymy, jak działa ten formularz. Możemy wprowadzić wartości do dwóch pierwszych pól, ponieważ są one włączone. Nazwa i wiek są wprowadzane na pola.

Teraz widzimy pole tekstowe wyłączone. Zobaczysz, że nie można go edytować, jak na poprzednich polach.

Obszar tekstowy wyłączony

Użyjemy obszaru tekstu, aby był wyłączony jak w polu. Wszystkie kody głowy i korpus HTML są stosowane w ten sam sposób. Nowy przycisk funkcji jest stylizowany w ciele. Obejmuje to kolor, wysokość i szerokość przycisku.

Wewnątrz sekcji ciała HTML powstaje obszar tekstu. Definiujemy wiersze i kolumny, aby utworzyć określony prostokąt w celu pisania. Słowo „wyłączone” jest dodawane do znacznika, aby wyłączyć działanie obszaru tekstu.

1

Oprócz tego dodajemy przycisk do strony; nie będzie wyłączony. Następnie formularz jest zamknięty po znaczniku.

Gdy strona internetowa jest wykonywana w przeglądarce, obszar tekstu jest tworzony z domyślną instrukcją, która została dostarczona, gdy użyliśmy znacznika obszaru tekstu wewnątrz nadwozia HTML. Nie można tego edytować ani usunąć z powodu pracy niepełnosprawnej.

Wniosek

Wyłączone jest funkcją używaną do wyłączenia niektórych działań zawartości HTML. Mówiąc o jego przykładzie, jest on stosowany do formularza. Widzieliśmy głównie, że podczas wypełniania dowolnego formularza na stronie internetowej niektóre pola nie mogą być edytowane zgodnie z potrzebami naszego kwalifikowalności. Odbywa się to poprzez wyłączenie tego pola. Wyjaśniliśmy dwa elementy, które można wyłączyć w znacznikach HTML i CSS, które są pola tekstowe i obszar tekstu. Oba elementy są częścią znacznika formularza, więc tworzenie pola tekstowego i obszaru tekstu są wykonywane wewnątrz znacznika formularza. W przeciwnym razie tylko tekst pojawi się na stronie internetowej.