✅ Listy i menu w CSS3

Spisie treści

W celu tworzyć dynamiczne menu dla naszych stron internetowych Obecnie bardzo często programuje się w HTML5, a następnie nadaje mu osobisty wygląd CSS3 że jest to język oparty na arkuszach stylów, to znaczy kod, który nadaje kształt, kolor i strukturę naszej stronie, jest umieszczany w osobnym pliku zakodowanym poza samą stroną, którą piszemy.

Przede wszystkim zobaczymy, jak tworzyć listy, bo przecież menu to lista stylizowana tak, aby była wyraźnie bardziej elegancka. W ten sposób jesteśmy ustrukturyzowani w html jako lista linków, a następnie umieszczamy spersonalizowany wygląd już z CSS3.

Istnieją dwa rodzaje list, uporządkowane i nieuporządkowane. Jeśli zamierzamy użyć listy do późniejszej konfiguracji menu, najprawdopodobniej użyjemy listy nieuporządkowanej, jednak zobaczymy opcje.

Tworzone są dokładnie tak samo, jedyna różnica tkwi w zastrzeżonym słowie, które dla zamówionych będzie

Kod HTML wygląda następująco:


Pierwszy element
Drugi element
Trzeci element


Pierwszy element
Drugi element
Trzeci element

1. Pierwszy element
2. Drugi element
3. Trzeci element

Lub dokładnie to samo bez liczby porządkowej najpierw:

Pierwszy element
Drugi element
Trzeci element

W HTML istnieją pewne formaty wstępne, kiedy tworzymy listę, to znaczy jest pewien margines, kolor czcionki, punktor, dopełnienie itp. który pojawia się domyślnie podczas tworzenia naszej listy. Złą rzeczą jest to, że wizualnie nie wygląda to zbyt dobrze, dobrą rzeczą jest to, że bardzo łatwo jest to zmienić według własnych upodobań dzięki CSS.

Zaczniemy od przyjrzenia się różnym rodzajom winiet, które możemy umieścić w naszym menu. Domyślnie każda pozycja na liście jest poprzedzona czarnym kółkiem. Możemy jednak umieścić kwadraty, puste kółka lub obrazek z naszego pliku.

Kod do modyfikacji punktora w CSS3 jest następujący:

 #menu {list-style-type: square;}

Aby zmodyfikować margines za pomocą przykładowego menu, jest to tak proste, jak użycie tego kod w CSS3:

 #menu {margines: 0px;}

 #menu {margines: 0px; wypełnienie: 2px; }

Kod CSS3

 #menu {obramowanie: 2px;}

Oprócz grubości obramowanie to pole, które ma wiele możliwości, możemy wybrać styl, kolor, gradient… i zobaczymy kilka opcji.

Styl obramowania
Począwszy od stylu krawędzi, styl obramowanianajczęściej używane możliwości to:

NicTo, co robi, to usunięcie samej krawędzi. Jest to opcja domyślna, więc normalnie, gdy tworzymy listy dla naszych menu, nie pojawią się żadne obramowania, chyba że tego określimy.

SolidnyTo jest krawędź, której można używać najczęściej. Jest to ciągła granica w kolorze czarnym.
UkrytyO ukryte to kolejna opcja, w której nie wizualizujemy żadnych krawędzi, ponieważ są one ukryte. Jednak dla celów programistycznych istnieje. Służy do oddzielania granic innymi sąsiednimi komórkami lub tabelami, nawet jeśli nie chcemy, aby była widoczna gruba granica.
GrzbietPostawimy tę przewagę, jeśli chcemy, aby wyróżniała się od reszty. Sprawia, że granica wydaje się być umieszczona o jeden poziom nad resztą na ekranie.
PoczątekPodobnie jak poprzednia, jest to wystająca krawędź, jednak nie wydaje się być poziomem ponad powierzchnią ekranu niż to, co niesie w środku.
RowekW przeciwieństwie do kalenicy z tym stylem obramowania wydaje się, że element jest zatopiony pod resztą.
WstawkaW taki sam sposób jak Groove, ta krawędź nie wydaje się być zapadnięta, ale w rzeczywistości znajduje się o jeden poziom poniżej reszty.
KropkowanyZa pomocą tego stylu generujemy ramkę utworzoną przez przerywaną linię, domyślnie czarną i spacje.
PodwójnieJak mówi samo słowo, jest to podwójna granica, utworzona przez dwie ciągłe czarne linie oddzielone spacją.

przerywanyJest to specjalny rodzaj obramowania podobny do kropkowanego, z tą różnicą, że punkty stają się większymi liniami, czyli jest to rodzaj linii przerywanej.

Podobnie jak w przypadku obramowania, w stylu obramowania możemy zdefiniować obramowanie jednej strony, zarówno górnego, dolnego, jak i wszystkich. Jeśli zapiszemy tylko jedną wartość, zostanie ona umieszczona na wszystkich krawędziach, a jeśli zapiszemy dwie opcje zamiast jednej, pierwsza dotyczy górnej i dolnej krawędzi, a druga boków.

Teraz zdefiniowaliśmy granicę, rozmiar i styl, jednak menu pozostaje bardzo proste i niezbyt ładne wizualnie. Możemy chcieć menu pionowe, ponieważ są one tworzone domyślnie, ale jeśli chcemy, aby były poziome, musimy dodać słowo kluczowe float, aby każdy element na liście znajdował się obok następnego.

Wyjaśniam to nieco bardziej szczegółowo, każdy element listy, który zakodowaliśmy za pomocą „li” domyślnie zachowuje się jak element blokowy, czyli po umieszczeniu generuje łamanie linii i uniemożliwia wstawienie kolejnego elementu u jego boku. Jeśli chcemy umieścić każdy element naszej listy obok poprzedniego, musimy wyeliminować to zachowanie blokowe.

W tym celu kod będzie następujący:

 #menu {styl-listy: brak; margines: 0px; wypełnienie: 0; } #menu li {margines: 2px; wypełnienie: 2px; obramowanie: pełne 2px; pływak: lewy; }

menu poziome

Teraz, jeśli chcemy, aby nasza lista działała jak menu i przekierowywała nas tam, gdzie chcemy, musimy dodać link do naszych elementów. To bardzo proste. W naszym kodzie w html dodajemy:


Pierwszy element
Drugi element
Trzeci element

Na koniec zobaczymy niektóre opcje wyglądu.

Właściwości tekstu
SzerokośćJeśli chcemy umieścić stałą szerokość. Na przykład szerokość: 100 pikseli;
Tekst-dekoracjaJeśli chcemy, aby tekst naszego elementu był w jakiś sposób ozdobiony. Możliwości jest wiele, ale niektóre z najczęstszych to:

podkreślać: jeśli chcemy, żeby wszystko było podkreślone
nadpisać: tak samo jak podkreślenie wstawia linię w całym tekście, ale tym razem zamiast poniżej powyżej.
migać: Utwórz tekst, który świeci, miga jak światło z przerwami.
linia przez: Napiszemy tę opcję, jeśli chcemy, aby nasz tekst został przekreślony.
Żaden: jest to nadmiarowość, ponieważ domyślnie tekst ma tę wartość, bez żadnych dekoracji. Czasami jednak przyda się, jeśli chcemy wrócić do początkowej opcji po użyciu efektu za pomocą zasobu o nazwie hover, który zobaczymy później.

Wyrównanie tekstuJest to kierunek, w którym będzie publikowana zawartość naszych elementów blokowych, uważaj, a nie sam tekst, który zobaczymy później z właściwością direction. Opcje są bardzo proste: lewo, jeśli chcemy, aby tekst szedł od lewej, prawo, jeśli chcemy, aby tekst szedł od prawej do lewej, środek, jeśli chcemy, aby tekst był wyśrodkowany i justowanie, jeśli chcemy, aby tekst był wyjustowany.

KierunekZa pomocą tej opcji zdefiniujemy kierunek tekstu, który piszemy, w tym przypadku są tylko dwie opcje:

ltr: który jest domyślnie wyświetlany w przeglądarkach, ponieważ z wyjątkiem niektórych języków, w których jest pisany od prawej do lewej, zwykle pisze się od lewej do prawej, co definiuje tę opcję.
rtl: jest to inny możliwy kierunek tekstu, od prawej do lewej, którego użyjemy, jeśli chcemy na przykład pisać teksty arabskie.

Wcięcie tekstuTo, że pochodzi z wcięcia lub tabulacji, jest właściwością, która odpowiada za ustalenie tego kryterium w pierwszym wierszu naszych elementów blokowych, a także w tabelach. Istnieją trzy opcje:

mierzyć
odsetek
dziedziczyć

W nich, jeśli użyjemy procentu, będziemy odnosić się do szerokości elementu, w którym się znajduje.
Również we wszystkich możemy użyć dodatnich lub ujemnych liczb dowolnej jednostki miary, która istnieje dla CSS3, pikseli, ems …

Przekształcenie tekstuOstatnia właściwość związana z tekstem, który zobaczymy, ma związek z wielkimi i małymi literami:

skapitalizować: przy tej opcji tylko pierwsza litera każdego słowa będzie wyświetlana wielkimi literami.
duże litery: wyświetla cały tekst wielkimi literami.
małe litery- Wyświetla cały tekst małymi literami.
Żaden: pozostawia tekst bez zmian. To ten, który pojawia się domyślnie.

Odstępy między wyrazamiChociaż nie zajmuje się bezpośrednio tekstem, robi to na przestrzeni, którą zostawiamy między słowami. Jego wartości mogą być „normalne” lub prawidłową miarą. Jeśli umieścimy miarę, jej wartość jest dodawana do normalnej miary, czyli tej, która jest domyślna.

Teraz przejdźmy do właściwości czcionki.

Właściwości czcionki
CzcionkaTa właściwość jest najbardziej kompletna ze wszystkich związanych z czcionką i ma kilka opcji, jeśli chodzi o jej użycie. Po pierwsze, możesz zacząć od jednej, dwóch, trzech lub żadnej z wartości „styl czcionki”, „wariant czcionki” i „waga czcionki”.

Następnie musimy podać rozmiar litery z "font-size" opcjonalnie z odstępami podanymi przez "line-height" i zawsze kończąc na typie rodziny czcionek "font-family". Na koniec będziesz musiał podać jedną z następujących wartości:

podpis- W przypadku przycisków lub list rozwijanych, czyli kontrolek i pól formularzy.
menu: jeśli zamierzamy skonfigurować rozwijane menu lub inne rodzaje menu.
Ikona: dla tekstów wyświetlanych pod ikonami.
skrzynka pocztowa- W przypadku okien dialogowych, wyskakujących okienek błędów, wyskakujących okienek informacji itp.
status-baA: dla pasków stanu okna.
mały napisn - Dla małych pól formularza i kontrolek.

We właściwości czcionki użyliśmy kilku innych opcji, których jeszcze nie widzieliśmy i które wyjaśnimy poniżej:

Styl czcionkiZa jego pomocą zdefiniujemy styl czcionki. Wartości, które może mieć to „normalne”, czyli domyślne, „kursywa”, jeśli chcemy, aby nasza litera była kursywa, czyli kursywa; lub „ukośny”, jeśli chcemy mieć ukośną literę, która jest rodzajem kursywy, w której pochylone są tylko znaki, a nie wszystkie jak kursywą.

Wariant czcionkiWykorzystamy go do ustalenia warianty czcionek i mamy tylko dwie opcje, "normalną", która jest tą, która jest dostępna domyślnie, i wariant "małych kapitalików", zwany także kapitalikami, który sprawia, że wielkie litery wyglądają tak samo jak małe.

Grubość czcionkiJest to jedna z najczęściej używanych właściwości, ponieważ wraz z nią możemy kontrolować grubość liter (uważaj, to nie to samo, co rozmiar każdej litery, którą zobaczymy później). Liczbowo ma 9 opcji, które są setkami od 100 do 900, czyli 100, 200, 300, 400, 500, 600, 700, 800 i 900. Są też zapisane wartości, czyli „normalne”, czyli 400 , „pogrubienie”, które odpowiada 700 i które nazwalibyśmy pogrubieniem i co ciekawe, nie pojawiło się w stylu czcionki, ale tutaj. Są też wartości „pogrubienie” czy „jaśniejsze” a czasem inne takie jak „średni” czy „ciężki”, które są przypisane do wartości liczbowych w zależności od ilości grubości jaką ma czcionka.

Rozmiar czcionkiZ tą właściwością, jeśli będziemy kontrolować rozmiar czcionki. Dostępne są cztery wartości: „rozmiar bezwzględny”, „rozmiar względny”, „jednostka procentowa” i „jednostka miary”. Istnieje wiele bezwzględnych i względnych jednostek miary zdefiniowanych w CSS, takich jak em, który jest najczęściej używany w tej właściwości, np. px,%, in, cm, mm, pt lub pc. Oprócz tych miar jest kilka słów, które działają i mogą być używane, takie jak xx-small dla najmniejszego, x-small, mały, średni, duży, x-large lub xx-large dla największego. Te sześć słów odpowiada rozmiarom różnych tagów tytułowych HTML

do

i są to bezwzględne rozmiary miar, więc zawsze będą wyglądać tak samo, niezależnie od przeglądarki lub rozdzielczości ekranu. Słowa „mniejszy” i „większy” mogą być również używane jako miary względne, które będą zależeć od rozmiaru czcionki elementu, który go zawiera.

Wysokość liniiJest już zdefiniowany we właściwościach tekstu.
Rodzina czcionekPowszechnie używana nieruchomość, którą my pozwala wybrać krój lub czcionkę. Najpierw umieszczamy nazwę czcionki lub krój pisma, a opcjonalnie mogą być po niej inne nazwy czcionek w przypadku, gdy nasza przeglądarka lub system nie ma pierwszego lub go nie obsługuje. Nie ma domyślnego typu czcionki, ponieważ zależy on od naszej przeglądarki, chociaż bardzo powszechnym jest "Times New Roman". Niektóre ogólne wartości typów czcionek mogą być „szeryfowe”, gdy zawarte są niektóre czcionki, takie jak Times New Roman, Garamond, Georgia lub Cambria; „Sans-serif” i jego rodzaje Verdana, Arial, Tahoma, Helvetica lub Futura. „Monospace” i jego przykłady między innymi Courier New czy Monaco. I "fantazja" z typami Comic sans lub Impact. Oczywiście do wyboru jest znacznie więcej krojów pisma.

Odstępy między literamiDzięki temu możemy kontrolować odstępy między literami, i działa dokładnie tak samo, jak jego odpowiednik właściwości tekstu z odstępami między wyrazami, z wartościami „normalnymi” i prawidłową miarą.

KolorWreszcie zobaczymy właściwość koloru, który chcemy umieścić w naszym tekście. Domyślnie jest czarny. Kolor można wybrać na kilka sposobów, jednym z nich jest 17 różnych kolorów: aqua, czarny, czerwony, żółty, niebieski, fuksja, zielony, limonkowy, pomarańczowy, szary, bordowy, oliwkowy, granatowy, fioletowy , srebrny, turkusowy i biały.

Inną opcją jest umieszczenie koloru Procent RGB, jest to po prostu określenie trzech wartości procentowych odpowiadających kolorom czerwonym ®, zielonym (G) i niebieskim (B):

 kolor: rgb (22%, 76%, 14%); (Trzy procenty nie muszą dawać 100%)

Innym sposobem jest dziesiętny RGB który działa dokładnie tak samo jak procent RGB, ale zamiast wstawiać trzy wartości w procentach, są one wstawiane jako wartości dziesiętne: