Czasami wydaje się, że aby przetrwać we współczesnym świecie, musisz wiedzieć, jak tworzyć witryny. Nawet szkoły uczą podstaw HTML. Ale stworzenie jakościowego zasobu to za mało. Musisz znać podstawy kaskadowych arkuszy stylów, w tym pseudo-klas i pseudoelementów CSS.
Co to jest?
Zgodnie z tajnym prawem wszystkie style, które webmaster wpisuje w znaczniki CSS, są używane dla tych elementów struktury, które można zobaczyć w kodzie źródłowym. Istnieją jednak grupy elementów, które nie są zapisane w dokumencie HTML, ale muszą również określać style.
Na przykład w pliku HTML nie ma tagu, który byłby odpowiedzialny za projektowanie wielkich liter nowego akapitu lub regionu, który znajduje się przed danym elementem. Tagi nie mogą wyświetlać linków ani zmieniać obrazu, gdy kursor myszy do niego prowadzi. Aby utworzyć te i wiele innych wartości, istnieją selektory CSS: pseudo-klasy i pseudo-elementy. Pseudo klasy są nazywane selektorami, które wpływają na istniejące elementy dokumentu. Pseudoelementy zwykle pytają i zmieniają obszar, który pierwotnie brakowało w pliku źródłowym. Mówiąc najprościej, pseudoelementy określają nowe strony, które nie znajdowały się w znacznikach HTML, a pseudoklasy określają stan obiektów w określonych warunkach.
Po: po
Pierwszą rzeczą, na którą należy zwrócić uwagę jest pseudo elementy CSS przed i po, ponieważ każdy szanujący się zasób wykorzystuje je do poprawy wyglądu, czytelności i atrakcyjności witryny. Te elementyZapewnij możliwość dodawania nowych obszarów, napisów i stylów przed lub po dokumencie źródłowym.
Każdy prawdopodobnie przynajmniej raz widział na stronie ogłoszenia o publikacjach, po których stały słowa: "Nowość", "Nowy" lub "Szok", "Ulubione", "Najlepsze", "Super », Itp. Obiekty te zostały określone za pomocą CSS po pseudoelementu. Aby utworzyć tę pozycję, musisz dodać następujący kod do kaskadowego arkusza stylów:
W tym miejscu słowo new określa nazwę nowej klasy, dlatego przed wpisaniem wymaganego akapitu HTML tag: class = "new". Nazwa klasy powinna znajdować się między nawiasami otwierającego tagu. Jeśli wszystko zostanie wykonane poprawnie, po zakończeniu akapitu na stronie przeglądarki pojawi się "coś nowego".
Oczywiście, w przykładzie podanym prosty skrypt do etykiet, ale nikt nie powiedział, że nie można zmieniać rozmiar, kolor i pozycjonowanie. Wszystkie niezbędne parametry można wprowadzić do klasy new po charakterystyce treści. Oddziel je średnikiem, na końcu zamknij nawias klamrowy.
Przed: przed
ma niemal identyczne cechy psevdoэlement CSS wcześniej. Z jedną niewielką różnicą: ma on na celu dodanie niezbędnych elementów przed obiektem. Zapisuje się to w taki sam sposób jak po, tylko ze słowem wcześniejszym. Przed następnym akapicie tekstu, można dodać słowa, które przyciągają uwagę, ale można po prostu umieścić tekst na obrazie Unicode lub elementu. Na przykład otwierające zakładki lub wcięcia. Aby przetłumaczyć to w praktyce, aby dodać do CSS-markup nowej klasy i ustawić wymaganą charakterystykę. Najprostszy sposóbrozwiązanie będzie wyglądać następująco:
Aby wprowadzić wcięcia na końcu dokumentu, musisz utworzyć pseudo-klasę po treści i zamiast zawartości: otwórz zawartość zapisu: zamknij, odpowiednio, aby zmienić pozycjonowanie. Jeśli w pseudoklasie przed wcięciem od lewego pola, to w klasie po nim powinno być z prawej strony. Możesz również dodawać obrazy (na przykład te same cytaty) w znacznikach, a tekst nie będzie już wyglądał jak przenośny arkusz.
Epicka saga: pierwsza
Najpierw pseudoelementowy CSS jest bardzo popularny w tworzeniu nowych projektów. W szczególności dotyczy projektów z tematami rozrywkowymi i baśniowymi, a także zasobów internetowych o charakterze historycznym i naukowym. Ten pseudoelement CSS ma dwie cechy - linię i literę:
Letter - zmienia pierwszą literę fragmentu tekstu, do którego został dodany. W ten sposób tworzy literę - element, w którym linia podstawowa jest o kilka linii niżej w stosunku do głównego tekstu. Aby ustawić ten parametr na kaskadowy arkusz stylów, musisz określić charakterystykę akapitu. Na przykład P: first-letter {***} - i już w nawiasach określa wszystkie niezbędne parametry, takie jak kolor, czcionka, rozmiar. Jeśli potrzebujesz tylko utworzyć pierwszą literę dla pierwszego akapitu, tworzymy nową klasę (tak jak w przykładzie z nowym: po).
Linia - ta pozycja całkowicie zmienia pierwszy wiersz akapitu. Jest bardzo wygodny w użyciu w publikacjach naukowych, jeśli chcesz podkreślić ważne informacje. Jest rejestrowany w taki sam sposób jak inne przykłady. Ale tutaj ważne jest, aby pamiętać, że pseudoelement nie oferuje propozycji, alesama linia. W zależności od tego, z jakiej przeglądarki korzysta użytkownik, jego pierwsza linia może być dłuższa lub krótsza, dlatego ważne jest, aby ten wybór nie wyglądał głupio. W takich przypadkach utworzono pseudoelement CSS linii.
Nowa linia
W rzeczywistości element ten jest rzadko używany, ponieważ z powodzeniem zastępuje znacznik .Istnieją jednak sytuacje, w których konieczne jest określenie podziału linii z pseudoelementami. Do tych celów możesz użyć tego samego po. W tym celu zapisuje się następujący kod: after {content: "A"; white-space: pre;}. Nazwa klasy musi zostać wstawiona między nawiasami otwierającego tagu zaraz po jego zamknięciu, po nim i nastąpi po linii podziału. Ta opcja zajmuje więcej czasu na skonstruowanie czytelnej treści, a jeśli nie ma potrzeby pracy z nieprawidłowo nieznanymi przeglądarkami, lepiej jest ograniczyć znacznik .
Składnia pseudoklasy
Jak już wspomniano, pseudoklasy określają stan elementów, z którymi użytkownik wchodzi w interakcje. W przeciwieństwie do pseudoelementu CSS, który definiuje niewidzialną strukturę charakterystyki, wyimaginowane klasy są zorientowane na czynniki behawioralne. Aby być jaśniejszym, możemy podać mały przykład. Załóżmy, że witryna zawiera listę przydatnych linków, użytkownik przegląda ją, odczytuje informacje, ale po pewnym czasie napotyka na zawartość, która już została zauważona. Właśnie poszedł na tę stronę, ponieważ istnieje wiele linków i nie są one różne. Aby temu zapobiec, webmasterzy dodają taką pseudoklasęzmienia kolor odwiedzanych linków, wtedy użytkownik będzie dokładnie wiedział, co czytał i gdzie jeszcze nie przeszedł.
Wszystkie pseudo w tablicy CSS prosty i sprawdzonej składnię:
Rozważmy na zamówienie, które może być pseudolosowa. Dla pierwszego podgatunku zmiana stanu elementu zależy od jego stanu w danym momencie. To było w powyższym przykładzie: jeśli link jest skrzyżowany, to zmieni kolor. Należą do nich następujące pseudoklasy:
: aktywne. Jeśli zastosujesz tę pseudoklasę, to po kliknięciu myszą nad oddzielnym fragmentem stanie się aktywny. Będzie to dotyczyć zmiany koloru, zwiększenia rozmiaru lub pojawienia się animacji.
: link. Zwykle dotyczy linków, których użytkownik jeszcze nie odwiedził. Pozostają niezmienione.
: skupienie. Najczęstszym zastosowaniem dla dokumentów tekstowych, gdy ustawienie użytkownika nad polem można zmienić kolor tekstu. Czasami używane do zdjęć. Na przykład obraz jest zacieniony, ale po kliknięciu uzyskuje naturalny kolor.
: hover. Kiedy użytkownik po prostu umieszcza mysz na określonym obiekcie, może zmienić kolor lub kształt i nie musi klikać.
: odwiedzone. Ww zasadzie ta pseudoklasa jest przeznaczona dla odsyłaczy, które domyślnie zmieniają kolor na fioletowy.
Początkujący błędnie zakładają, że te pseudoklasy służą wyłącznie do celów referencyjnych, ale przy odpowiednim pragnieniu i wyobraźni można zmienić dowolny element strony.
Specjalnie dla pseudoelementu CSS
Ta grupa selektorów zawiera pseudoklasy, które mogą zmieniać pseudoelementy. Następująca pseudoklasa to: first-child. W kaskadowym arkuszu stylów musisz utworzyć nową klasę dla: first-child i określić kolor tekstu lub jego rozmiar. Wynik będzie wyglądał następująco:
B: first-child {color: red;}
Jest to najczęściej robione, gdy konieczne jest przydzielenie fragmentów tekstu pogrubioną czcionką i tylko początek akapitu powinien być inny. Dlatego klasa nazywa się tak samo jak tag, który jest odpowiedzialny za pogrubienie tekstu. Jeśli zastosujesz go w praktyce, to dzięki pseudoklasie tylko pierwszy wyróżniony fragment pogrubiony będzie miał czerwony kolor, inne słowa będą standardową czernią.
Ponadto: pierwszy-dziecko jest używany do usuwania wcięć w pierwszym akapicie, a następnie zamiast koloru: czerwony; będzie musiał napisać wcięcie: 0; i B do zastąpienia przez P (wskazany jest również znacznik odpowiadający początkowi akapitu).
Język treści
Pseudo-klasa: lang dotyczy głównie tekstów napisanych w różnych językach. Na przykład, jeśli artykuł zawiera cytaty w oryginalnym języku, wówczas dla nich można umieścić osobne cechy. Składnia tego klastra będzie wyglądać następująco:
Nazwa klasy: język (język){charakterystyka tekstu (kolor, czcionka, rodzaj itp.)}
W odniesieniu do pozycji "język" wskazuje się zgodnie z przyjętymi zasadami. Na przykład angielski - en, rosyjski - ua, niemiecki - de, itp. Dzięki tej pseudoklasie możesz zmienić styl obcojęzycznego tekstu w całym dokumencie.
Wnioski
Pseudo-klasy CSS i pseudoelementy są jednym z tych pytań dotyczących kaskadowania arkuszy stylów, które powodują trudności w zrozumieniu. Jednak nie ma tu nic skomplikowanego, najważniejsze - zrozumienie, że pseudoklasą jest pewien stan, który jest wykonywany w uprzednio uzgodnionych warunkach. Na przykład po najechaniu myszą lub kliknięciu. Pseudoelement jest niezależną częścią dokumentu, który nie jest częścią znaczników HTML, ale może mieć swój własny styl. Można nawet powiedzieć, że jest to wirtualny HTML. Jeśli spojrzysz na sytuację po takiej stronie, wszystko stanie się niezwykle proste i zrozumiałe, ale dzięki takiej wiedzy możesz zacząć tworzyć witryny.
