Jak obiecałem wcześniej, w tym samouczku dowiesz się, jak wyrównać poziomo zawartość dowolnego znacznika HTML na stronie bez użycia przestarzałego atrybutu align. Jak można się domyślić, ponownie użyjemy stylów (CSS), a raczej naszego ulubionego atrybutu stylu.
Tak więc, aby wyrównać zawartość elementu HTML, musisz przypisać jedną z następujących wartości do atrybutu style:
- wyrównanie tekstu:środek- Wyrównaj każdą linię do środka elementu, takiego jak akapit.
- wyrównanie tekstu:do lewej- Każda linia jest wyrównana z lewą stroną elementu (jest to ustawienie domyślne).
- text-align:do prawej- Każda linia jest dociskana prawa strona.
- text-align:justify- Natychmiastowe wyrównanie do lewej i prawej strony elementu. Wyjaśni. Zazwyczaj element, taki jak akapit, ma jedną stronę tekstu zawsze płaską, a drugą stronę „rozdartą”, ponieważ długości linii są nieco inne. A kiedy używamy wartości text-align:justify , to każda linia jest równomiernie rozłożona na szerokość. W razie potrzeby przeglądarka dodaje dodatkowe spacje między słowami, a pierwsze i ostatnie słowo wiersza jest zawsze dociskane do odpowiednich stron, dzięki czemu blok jest równy po obu stronach.
Przykład wyrównania treści tagów
Tytuł centrum.
Środkowy akapit.
Wynik w przeglądarce
Tytuł centrum.
Tekst akapitu jest wciśnięty po prawej stronie.
Środkowy akapit.
Ogólnie rzecz biorąc, wyrównanie w poziomie dotyczy tylko znaczników bloków i komórek tabeli (więcej o tym później). Chociaż z drugiej strony, nawet jeśli spróbujesz, nie będziesz w stanie zastosować go do wbudowanego (inline). Czemu? Pamiętasz, jak niedawno dowiedzieliśmy się, że szerokość elementu śródliniowego jest równa jego zawartości? W związku z tym okazuje się, że ta sama treść po prostu nie ma gdzie się dopasować, a przeglądarka po prostu zignoruje twoją "sztukę". :)
Praca domowa.
- Utwórz nagłówek artykułu, dwie jego sekcje i jedną podsekcję w pierwszej sekcji. I niech tytuł artykułu znajduje się na środku strony.
- Ustaw czcionkę dla całej strony na Arial, a wszystkie nagłówki na Times i niech będą pisane kursywą.
- Ustaw kolor tekstu tytułu artykułu na #FF6600, sekcje na #6600FF i pozostaw podsekcję bez zmian.
- Napisz jeden akapit pod każdym nagłówkiem, a tekst każdego z nich powinien zajmować co najmniej trzy wiersze podczas przeglądania w przeglądarce.
- Wyrównaj drugi akapit do środka, trzeci do prawej, a czwarty do obu.
Aby wybrać żądane elementy wejściowe za pomocą typu „pole wyboru”, możesz użyć selektora ':pole wyboru'. Przykład:
gdzie treser- handler, który jest wywoływany, gdy wystąpi zdarzenie zmiany
Praca z obiektem wywołań zwrotnych jQuery: korzystanie z listy wywołań zwrotnych
Obiekt Callbacks w jQuery umożliwia utworzenie czegoś w rodzaju listy wywołań zwrotnych, które zostaną wykonane po wywołaniu metody narzędzia fire(). W tym przypadku podczas wywoływania metody fire() można przekazać jakiś argument, który będzie używany przez każdą funkcję zwrotną. Jak to działa, przeanalizujemy teraz na kilku przykładach.
Łapiemy utratę ostrości. Metoda blur() w jQuery
Metoda blur() w jQuery pozwala przypisać handler do konkretnego elementu na stronie, który zostanie wywołany, gdy tylko zniknie fokus z tego elementu. Początkowo wydarzenie to dotyczyło głównie elementów formularzy - jednak tagów wejściowych najnowsze wersje przeglądarki są w stanie obsłużyć to zdarzenie dla prawie wszystkich rodzajów elementów DOM.
Wstaw zawartość przed zawartością wybranego obiektu. Metoda before() w jQuery
Metoda before() w jQuery umożliwia wstawienie określonej zawartości lub obiektów przed zawartością każdego z zestawu określonych obiektów.
Składnia metody jest prosta:
| 1 | .przed(treść, ) |
Druga odmiana:
| 1 | .before(funkcja) |
jQuery. attr() metoda. Jak uzyskać lub dodać atrybut do elementu?
jQuery ułatwia dostęp do atrybutów żądanego elementu, pobierając jego wartość lub odwrotnie, ustawiając go i modyfikując. Do takich manipulacji używana jest metoda attr().
Metoda .appendTo() w jQuery. Dodawanie treści na końcu elementów
Metoda appendTo() zasadniczo wykonuje to samo zadanie, co metoda append(). Zasadniczo różnica polega tylko na składni. Jeśli dla append() określamy żądany selektor dodając do niego tę metodę, gdzie wskazujemy w nawiasach, co dokładnie należy dodać na końcu zawartości określonego obiektu, to dla appendTo() należy dodać nie jest już w nawiasach jako parametr metody, ale tuż przed samą metodą jako obiektem, na którym wywoływana jest metoda appendTo(). Różnicę lepiej zrozumie poniższy przykład.
jQuery .animate() Metoda: animuj obrazy, tekst i cokolwiek
Metoda .animate() pozwala tworzyć efekty animacji wykorzystując właściwości css samych obiektów. Metoda ma dwie odmiany o różnej liczbie przekazanych parametrów
Konwersja wideo za pomocą Movavi
Ostatnio, aby dobrze wykorzystać czas, jaki zajmuje droga do i z pracy, staram się wcześniej wgrywać na telefon bardziej przydatne filmy. Telefon jest na Androidzie, a ostatnio napotkał problem, gdy smartfon z jakiegoś powodu odmówił odtwarzania wideo w formacie AVI. Czy odtwarzacz jest słaby, czy specyfika systemu operacyjnego – nie wiem. Jednak długo nie trzeba było rozwiązywać problemu: znalazłem w sieci dość funkcjonalny konwerter wideo, który jest w stanie nie tylko przekonwertować go z jednego formatu na inny, ale także przygotować plik uwzględniający cechy Twojego urządzenia. Tutaj krótki opis jak korzystać z tego wspaniałego programu.
Wiele elementów tekstowych na stronie internetowej musi być wyśrodkowanych. Głównie nagłówki. Zobaczmy, jak to się robi w wyrównanie CSSśrodkowy tekst.
właściwość text-align
Odpowiada za to właściwość text-align, która ma cztery wartości:
- Do lewej - wyrównanie tekstu do lewej krawędzi elementu, w którym się znajduje
- Do prawej — wyrównane do prawej, ale kierunek tekstu pozostaje taki sam
- Centrum - w centrum. Właśnie tego potrzebujemy. Nic opcje dodatkowe nie trzeba ustawiać - przeglądarka sama umieści tekst dokładnie na środku na różnych rozdzielczościach ekranu
- Wyjustuj - wyjustuj, gdy słowa w każdym wierszu są rozciągnięte tak, aby zajmowały całą jego szerokość
Na przykład mamy dowolny tekst o tytule:
nagłówek
Aby wyrównać nasz nagłówek (h1) do środka, musimy napisać to:
H1(
Wyrównanie tekstu: do środka
}
Właściwość wyrównuje nie tylko zwykły tekst, ale także wszystkie elementy śródliniowe. Na przykład obraz jest domyślnie elementem wbudowanym, więc ta reguła również będzie miała na niego wpływ.
Text-align nie działa jak właściwość float. Jeśli text-align zostanie zastosowany do bloku z tekstem, to blok nie straci swojego zachowania. Tekst w nim zostanie naciśnięty, a nie sam blok. Zauważ, że różni się to od właściwości float, która wysyła cały element w prawo lub w lewo.
Kontynuujemy nauka HTML. W tym samouczku przyjrzymy się nagłówkom stron HTML, czym są nagłówki, jak ich poprawnie używać i kiedy można ich używać. Przeanalizujemy również akapity, abyś mógł już wypełnić swoją stronę tekstem, ale co najważniejsze, zrób to dobrze.
Jeśli nie przeczytałeś pierwszego artykułu, znajdziesz go tutaj:
Skoro jesteś na tej lekcji, chcesz dalej studiować temat budowania witryn. Z pomocą tych lekcji będziesz miał podstawowe zrozumienie tego, co to jest.
A co jeśli potrzebujesz więcej wiedzy i chcesz być może nawet pracować w tym obszarze? Lepiej znaleźć kursy specjalistyczne. Nie ma zbyt wielu dobrych w RuNet, w których szkoli się programistów front-end. Podobał mi się program szkoleniowy, który Netology ma w kursie „”. Skillbox ma również dobry program w kursie „”.
Jeśli studiujesz tworzenie stron internetowych, to z profesjonalistami.
Teoria i praktyka — akapity i nagłówki strony HTML
Dzisiaj porozmawiamy o akapitach i nagłówkach. Zacznijmy prosto - od akapitów i ich zastosowania.
Akapitów na stronie
Podam teraz przykład kodu, w którym będzie obecny znacznik akapitu.
Pamiętasz już podstawową strukturę z pierwszej lekcji. Tam zdemontowaliśmy podstawy i przyjrzeliśmy się, czym jest HTML. Dlatego skupimy się na tym, co znajduje się między tagami. .
Kiedy piszesz dowolny tekst na stronie, niezależnie od tego, czy jest to tylko akapit, czy mała linia wyjaśniająca pod obrazem, musisz umieścić ten tekst wewnątrz tagu.
W kolejnych lekcjach zobaczysz proces formatowania tych akapitów. Teraz powinieneś zrozumieć, że nie możesz umieścić tagu na stronie bez tagu. Ponieważ w przyszłości trudno będzie zastosować jakiś indywidualny styl dla tej konkretnej części tekstu.
Spróbuj napisać kilka akapitów. Umieść kilka akapitów w tagu, a niektóre zostaw bez niego. I natychmiast zobaczysz różnicę. Ponieważ jeśli napiszesz akapit wewnątrz tego znacznika, to od razu będzie miał wcięcia. Przejdźmy teraz do nagłówków HTML strony.
Nagłówki HTML na stronę
W Dokument HTML jest semantyka. Nie mówię o technologii HTML5 i jej nowych tagach. Tutaj przeanalizujemy tylko te najbardziej podstawowe, abyś mógł szybko opanować podstawy HTML. Semantyka oznacza, że nagłówki, akapity, tabele itd. nie powinny być tworzone przy użyciu tego samego znacznika. Można to zrobić, ale technologia HTML jest bardziej zróżnicowana i istnieją odpowiednie znaczniki do różnych sytuacji. Aby swobodnie pracować z kodem HTML, wystarczy opanować podstawowe znaczniki.
Napisałem to małe wprowadzenie do tego, że w przypadku akapitów konieczne jest użycie znanego już tagu. Ale w przypadku nagłówków używane są znaczniki, które zaczynają się od angielskiej litery „H”.
Oto cała lista nagłówków, których możesz użyć:
Niektóre z tych tagów są używane znacznie częściej. Są to tagi takie jak h1, h2 lub h3. Jeśli ktoś zna już CSS, to rozumie, że nagłówek HTML Nagłówek strony h3 może być wystylizowany w taki sposób, aby również wyglądał jak h1 lub h2. Ale znaczenia, które niosą, choćby dla Optymalizacja SEO, są drastycznie różne. Z reguły te liczby wewnątrz tagów należy rozumieć jako poziom ważności tego lub innego nagłówka HTML. Dlatego konieczne jest dokładne przestudiowanie tych elementów, a następnie Wyszukiwarki Twoje artykuły zostaną zauważone.
Dopóki nie przejdziemy do CSS, zobaczysz style nagłówków, które są domyślnie ustawione w przeglądarkach. Jeśli wstawisz te tagi jeden po drugim i wpiszesz w nich jakiś tekst, zobaczysz:
W przypadku robotów wyszukiwania ważne jest również stosowanie nagłówków na stronie. Istnieją pewne zasady, które możesz przeczytać w naszej książce -.
Po przestudiowaniu wszystkiego od razu przechodzimy do kodu i próbujemy napisać wszystko własnymi rękami. To najszybszy sposób na opanowanie dowolnego języka programowania. Ale technologia HTML jest znacznie lżejsza niż jakikolwiek język programowania, więc każdy może ją rozgryźć. W ten sposób lepiej zapamiętasz tagi.
Samouczek wideo — tytuł strony w formacie HTML? (ćwiczyć)
Wizualne wideo na przykładzie pracy z tymi tagami:
Praca domowa
D/W: na przykład napisz krótki tekst, który będzie składał się z 5-7 akapitów i 2-3 różnych nagłówków.
