3. Utwórz pola formularza

Element tworzy większość pól formularzy. Atrybuty elementu różnią się w zależności od typu pola, które element jest używany do tworzenia.

Za pomocą stylów CSS możesz zmienić rozmiar czcionki, typ czcionki, kolor i inne właściwości tekstu, a także dodać obramowanie, kolor tła i obraz tła. Szerokość pola jest określona przez właściwość szerokość.

4. Pola wprowadzania tekstu

Element ... używany zamiast elementu gdy trzeba utworzyć duże pola tekstowe. Tekst wyświetlany jako wartość oryginalna jest umieszczany wewnątrz znacznika. Wymiary pola ustawia się za pomocą atrybutów cols - wymiary poziome, wiersze - wymiary pionowe. Wysokość pola można ustawić za pomocą właściwości height. Wszystkie rozmiary są obliczane na podstawie rozmiaru jednego znaku czcionki o stałej szerokości.

Kot

7. Przyciski

Element ... tworzy klikalne przyciski. W przeciwieństwie do utworzonych przycisków ( , , , ), wewnątrz elementu możesz umieścić treść - tekst lub obraz.

Aby poprawnie wyświetlić element

Różne przeglądarki muszą określić atrybut type, na przykład .

Przyciski umożliwiają użytkownikom przesłanie danych do formularza, wyczyszczenie zawartości formularza lub wykonanie innej akcji. Możesz tworzyć obramowania, zmieniać tło i wyrównywać tekst na przycisku.

8. Pola wyboru i przyciski opcji w formularzach

Pola wyboru w formularzach ustawia się za pomocą konstrukcji , a przełącznik - za pomocą .

Pola wyboru, w przeciwieństwie do przycisków radiowych, można ustawić na kilka w jednym formularzu. Jeśli dla pól wyboru określono zaznaczony atrybut, to po załadowaniu strony pola wyboru w odpowiednich polach formularza będą już zaznaczone.

Element używane podczas implementowania zaznaczenia za pomocą przycisków opcji i pól wyboru. Możesz wybrać żądany element, klikając po prostu powiązany z nim tekst. Aby to zrobić, musisz umieścić wewnątrz elementu .

CSS oferuje twórcom stron internetowych ogromne możliwości projektowania stron HTML. Początkującemu będą wydawać się skomplikowane, ale jeśli je dokładnie i metodycznie zrozumiesz, technologia arkuszy stylów zostanie pokonana, a układ strony internetowej nie będzie już sprawiał trudności. Jedna z niezastąpionych właściwości CSS - wyściółka. Służy do ustawiania pól bloków stron HTML.

Co to są bloki?

Witryna zbudowana jest z cegieł - bloków. Ponadto każdy element, niezależnie od jego zawartości, musi mieć kształt prostokąta. Oznacza to, że wszystkie obrazy i napisy są przez twórcę mentalnie zamykane w „pudełkach”, aranżując je w formie strony internetowej.

Najczęściej bloki są określane za pomocą tagów

,

-

,

. Do każdego takiego elementu stosowane są właściwości CSS: wyściółka, margines, granica, szerokość i inni. Szerokość bloku prostokąta jest określona przez właściwość szerokość, wówczas każdy element jest ozdobiony polami, które są wyznaczane za pomocą atrybutu granica. Wreszcie komponent strony może mieć zewnętrzne marginesy lub dopełnienie - margines, oddzielając go od innego bloku.

Składnia właściwości dopełnienia CSS

Twórcy Cascading Style Sheets udostępnili kilka opcji zapisu atrybutu do ustawiania pól. Istnieje osiem różnych sposobów utworzenia pustego obszaru wewnątrz bloku! Poniższa tabela przedstawia przykłady każdej opcji i krótkie ich wyjaśnienie.

Przykład użycia	Wyjaśnienie
wypełnienie: 15pikseli;	Jeśli po atrybucie następuje pojedyncza liczba, oznacza to, że element będzie miał równe marginesy ze wszystkich stron. Nagrywać pikseli zakłada, że ​​wartość jest podana w pikselach. Oznacza to, że ostatecznie blok będzie miał pola o wielkości 15 pikseli.
wypełnienie: 18px 36pikseli;	Pierwsza z dwóch liczb wskazuje, że marginesy pionowe będą miały 18 pikseli, marginesy boczne będą dwukrotnie większe - 36 pikseli.
wypełnienie: 6px 12px 18pikseli;	Środkowa liczba to wartość marginesów po bokach (lewego i prawego), pozostałe dwie to marginesy pionowe. W tym przypadku pierwsza liczba (6 px) odnosi się do marginesu górnego, a ostatnia (18 px) dolnego.
dopełnienie: 6 px 12 px 18 px 36 px;	Formularz rekordu właściwości CSS wyściółka, który zawiera cztery liczby, umożliwia ustawienie marginesów ze wszystkich stron bloku. Wartości liczbowe są nanoszone sekwencyjnie na górny margines, a następnie zgodnie z ruchem wskazówek zegara w prawo, dół i lewo.
dopełnienie po lewej stronie: 14 px;	Postscriptum lewy mówi samo za siebie - margines zostanie ustawiony tylko na lewo od elementu.
dopełnienie po prawej: 14 pikseli;	Podobnie jak w przypadku poprzedniej opcji zapisu - pole zostanie utworzone tylko po prawej stronie bloku.
górna część dopełnienia: 14 px;	Wpis definiuje pole na górze.
dopełnienie-dół: 14 px;	Wpis definiuje poniższe pole.

Należy zauważyć, że domyślne wypełnienie w CSS wynosi zero. Atrybut ten nie jest dziedziczony, to znaczy musi być ustawiony dla każdego bloku. Oprócz zwykłych i zrozumiałych pikseli, szerokość pustej przestrzeni wokół bloków jest również podawana w jednostkach względnych. Przykładowo w powyższych przykładach możesz wpisać 5% - w rezultacie szerokość pola zostanie obliczona automatycznie przez przeglądarkę.

Jak korzystać z nieruchomości?

Omówiliśmy już formularze umożliwiające wpisanie atrybutu, ale jak go używać na stronie HTML? Pierwsza opcja jest bardziej „piękna”, gdy wszystko, co dotyczy technologii CSS, nie jest napisane w HTML, ale jest umieszczone w osobnym pliku z odpowiednim rozszerzeniem.

Drugą opcją jest zapis bezpośrednio do tagu<styl>. CSS wyściółka w tym przypadku określa się to następująco:

< divstyl="wypełnienie: 22pikseli">

Projektant układu wybiera sposób zapisania atrybutu. W każdym razie musisz znać wszystkie sposoby wykorzystania właściwości do definiowania pól, aby w razie potrzeby z niej skorzystać.

W tym rozdziale omówimy pola (właściwość margines) i dopełnienie (właściwość wyściółka) element. Te dwie właściwości są do siebie bardzo podobne, ale nadal są to dwie zupełnie różne właściwości.

Rozumiemy te pojęcia...

Pole ( margines) - Jest to odległość od zewnętrznej krawędzi elementu do krawędzi okna przeglądarki lub elementu nadrzędnego... cóż, do granicy bloku, w którym zagnieżdżony jest nasz element.

Akapit ( wyściółka) - Nazywają odległość od wewnętrznej granicy elementu do jego zawartości tekstu, obrazów, tabel..

Na rysunku wyraźnie widać te odległości, a także przestrzeń zajmowaną przez krawężnik ( granica) nie powinniśmy o nim zapominać.

Odległości margines I wyściółka są wskazane:

• pikseli- W pikselach lub innych prawidłowych jednostkach miary CSS.
• % - W procentach.
• automatyczny- Rozmiar marginesów i wcięć jest automatycznie obliczany przez przeglądarkę.

Spróbujmy zrobić to samo, co pokazano na rysunku, używając bloków

i właściwości CSS.

Spróbuj zmienić wartości właściwości margines I wyściółka i zrozumiesz o co chodzi.. i jeśli już jest jasne, idziemy dalej..

Możliwe wartości marginesów i dopełnienia.

W powyższym przykładzie przypisanie właściwości margines I wyściółka za pomocą jednej wartości określiliśmy marginesy i wypełnienie elementu ze wszystkich czterech stron. Aby określić różne rozmiary marginesów i dopełnienia dla każdej strony elementu, należy określić dwa, trzy lub cztery argumenty oddzielone spacją. Co więcej, w zależności od liczby wartości, wynik będzie inny.

Oto przykłady:

margines: 5 pikseli; - jedna wartość.
Jedna wartość — marginesy są takie same ze wszystkich stron.

margines: 5px 40px; - dwa znaczenia.
Pierwsza wartość — ustawia marginesy od górnej i dolnej granicy.

margines: 5px 40px 20px; – trzy znaczenia.
Druga wartość - Ustawia marginesy od lewej i prawej krawędzi elementu.

margines: 5px 40px 20px 1px; -cztery znaczenia.
Pierwsza wartość - Ustawia margines od górnej krawędzi elementu.
Druga wartość - Ustawia margines od prawej krawędzi elementu.
Trzecia wartość - Ustawia margines od dolnej krawędzi elementu.
Czwarta wartość - Ustawia margines od lewej krawędzi elementu.

Z wyściółka sprawa opiera się na tej samej zasadzie co w przypadku margines, dopełnienie od wewnętrznych granic elementu do treści przyjmuje rozmiary w zależności od liczby argumentów i ich wartości.

Rozumiejąc myśli w sensie znaczenia, warto myśleć o tym, co nie do pomyślenia!

Margines i dopełnienie właściwości podrzędnych.

Właściwości CSS margines I wyściółka są podstawowe i mają wiele właściwości podrzędnych.

U margines Ten:

• górny margines- Margines od górnej granicy elementu nadrzędnego,
• margines-lewy- Margines od lewej krawędzi elementu nadrzędnego,
• prawy margines- Margines od prawej krawędzi elementu nadrzędnego,
• margines-dół- Margines od dolnej krawędzi elementu nadrzędnego.

I wyściółka odpowiednio:

• wyściółka- Wcięcie od górnej krawędzi elementu do jego zawartości,
• dopełnienie-lewe- Wcięcie od lewej krawędzi elementu do jego zawartości,
• dopełnienie-prawe- Wcięcie od prawej krawędzi elementu do jego zawartości,
• wyściełane dno- Wcięcie od dolnej krawędzi elementu do jego zawartości.

No cóż, myślę, że to jasne... jeśli zachodzi potrzeba określenia wcięcia lub marginesu z jednej strony elementu, lepiej skorzystać z jednej z powyższych właściwości.

Rozumiejąc myśli w sensie znaczenia, warto myśleć o tym, co nie do pomyślenia!

Niewiele osób wie, jak wiele musimy wiedzieć, aby wiedzieć, jak mało wiemy!

Marginesy i dopełnienie to jedne z głównych elementów projektu witryny internetowej i istnieje kilka wskazówek, których należy przestrzegać w tym zakresie.

Unikaj krótkich, a tym bardziej zerowych dopełnień od treści do krawędzi elementu, szczególnie w przypadku bloków tekstowych. Tekst z małymi marginesami i wcięciami jest trudny do odczytania i lepki.

Należy przestrzegać zasad proporcjonalności i współmierności marginesów i wcięć zarówno dla pojedynczego elementu, jak i całej strony (kompozycji elementów) jako całości.

Jednym ze sposobów na skupienie uwagi odwiedzającego stronę na potrzebnym Ci miejscu jest zastosowanie większych niż zwykle wcięć – taki kontrast zmusi widza do spojrzenia i zwrócenia uwagi na „specjalne” miejsca w tekście.

W poprzednim rozdziale wspomnieliśmy o właściwościach CSS, takich jak margines i dopełnienie. Teraz przyjrzymy się im bardziej szczegółowo i zastanowimy się, czym się od siebie różnią i jakie mają cechy.

Można tworzyć odstępy pomiędzy elementami w taki czy inny sposób, ale jeśli dopełnienie to wcięcie od zawartości do krawędzi bloku, to margines to odległość od jednego bloku do drugiego, czyli przestrzeń międzyblokowa. Zrzut ekranu pokazuje wyraźny przykład:

Dopełnienie oddziela zawartość od krawędzi bloku, a margines tworzy przerwy pomiędzy blokami

Jak widać marginesy i dopełnienie CSS różnią się od siebie, chociaż czasami bez spojrzenia na kod nie da się określić, która właściwość służy do ustawienia odległości. Dzieje się tak, gdy brakuje ramki lub tła bloku treści.

Istnieją następujące właściwości umożliwiające ustawienie marginesu lub dopełnienia w CSS po każdej stronie elementu:

Wyściółka:

• górna część wyściółki: oznaczający;
• dopełnienie po prawej stronie: oznaczający;
• wyściółka na dole: oznaczający;
• dopełnienie po lewej stronie: oznaczający;

Pola:

• górny margines: oznaczający;
• prawy margines: oznaczający;
• margines-dół: oznaczający;
• margines po lewej stronie: oznaczający;

Wartości można podawać w dowolnych jednostkach CSS - px, em, % itp. Przykład: margines-górny: 15px.

Jest też bardzo wygodna rzecz, np skrót od marginesu i dopełnienia CSS. Jeśli chcesz ustawić marginesy lub dopełnienie na wszystkich czterech stronach elementu, nie musisz koniecznie zapisywać właściwości dla każdej strony osobno. Wszystko staje się prostsze: dla marginesu i dopełnienia możesz określić 1, 2, 3 lub 4 wartości jednocześnie. Liczba wartości określa sposób dystrybucji ustawień:

• 4 wartości: dopełnienie ustawiane jest dla wszystkich stron elementu w następującej kolejności: góra, prawo, dół, lewa: dopełnienie: 2px 4px 5px 10px;
• 3 wartości: dopełnienie ustawiane jest najpierw dla górnej strony, następnie jednocześnie dla lewej i prawej strony, a następnie dla dołu: dopełnienie: 3px 6px 9px;
• 2 wartości: dopełnienie ustawiane jest najpierw jednocześnie od góry i od dołu, a następnie jednocześnie dla lewej i prawej strony: dopełnienie: 6px 12px;
• 1 wartość: ustawione jest równe wypełnienie dla wszystkich stron elementu: dopełnienie: 3px;

Te same zasady dotyczą właściwości marginesu CSS. Pamiętaj, że możesz także użyć wartości ujemnych dla marginesu (na przykład -3px), co czasami może być całkiem przydatne.

Zwiń margines

Wyobraźmy sobie sytuację: dwa elementy blokowe znajdują się jeden na drugim i przypisane są im pola marginesów. Górny blok jest ustawiony na margines: 60px, a dolny blok jest ustawiony na margines: 30px. Logiczne byłoby założenie, że dwa sąsiadujące ze sobą pola dwóch elementów po prostu się zetkną, w wyniku czego odstęp między blokami będzie wynosić 90 pikseli.

Jednak sprawy mają się inaczej. Faktycznie w takiej sytuacji następuje efekt zwany zawaleniem, gdy z dwóch sąsiednich pól elementów wybierany jest największy rozmiar. W naszym przykładzie ostateczna przerwa między elementami będzie wynosić 60 pikseli.

Odległość między blokami jest równa większej z wartości

Zwijanie marginesu działa tylko dla górnego i dolnego marginesu elementów i nie dotyczy marginesów po prawej i lewej stronie. Ostateczna wartość luki jest obliczana w różny sposób w różnych sytuacjach:

• Gdy obie wartości marginesu będą dodatnie, wynikowy rozmiar marginesu będzie równy większej wartości.
• Jeśli jedna z wartości jest ujemna, to aby obliczyć rozmiar pola, musisz uzyskać sumę wartości. Na przykład przy wartościach 20px i -18px rozmiar pola będzie wynosić:
  20 + (-18) = 20 – 18 = 2 piksele.
• Jeżeli obie wartości są ujemne, moduły tych liczb są porównywane i wybierana jest liczba o większym module (a więc mniejsza z liczb ujemnych). Przykład: musisz porównać wartości pól -6px i -8px. Moduły porównywanych liczb wynoszą odpowiednio 6 i 8. Wynika z tego, że 6 -8. Wynikowy rozmiar pola wynosi -8 pikseli.
• W przypadku, gdy wartości są podane w różnych jednostkach CSS, są one konwertowane na jedną, po czym są porównywane i wybierana jest większa wartość.
• Rozmiar marginesu dla elementów potomnych określa się w jeszcze ciekawszy sposób: jeśli element potomny ma większy margines niż jego rodzic, to ma on pierwszeństwo. W takim przypadku rozmiary górnego i dolnego marginesu elementu nadrzędnego będą takie same, jak te określone dla elementu podrzędnego. W takim przypadku nie będzie dystansu pomiędzy rodzicem a dzieckiem.