Myślę, że "poradnik" ten, choć nie jestem pewna czy to nie za mocne słowo, myślę, że warto zacząć od wyjaśnienia, czym jest ten cały HTML i dlaczego razem z CSS'em tworzą nierozerwalną całość.
HTML, czyli w ogromnym uproszczeniu - język strony. Tak jak my używamy do siebie słów, tak i w języku HTML za pomocą poszczególnych komend ustawiamy dane elementy. Nie będę się rozwodzić nad budową strony od początku, ponieważ jest to tutaj totalnie niepotrzebne, lecz opowiem o rzeczach, które wydaje mi się, są rzeczami, mogącymi się przydać do upiększania postów. Zacznijmy od słynnych divów i spanów, bo w sumie od nich się wszystko zaczyna.
DIV -
element blokowy, czyli taki, który zajmuje całą linijkę. Gdy dodamy do niego
poszczególne cechy z CSS'a jego cechy zajmą całą linię, a nie tylko tekst, który potencjalnie chcielibyśmy zmodyfikować. Do tego służą spany, ale o nich później. Divy służą bardziej do pozycjonowania aniżeli samego zmieniania wyglądu, ponieważ jest wiele cech, które zadziałają tylko w divach, jak chociażby text-align. W spanach to nie zadziała, bo jest to cecha wyłącznie divów, zaś np. color, czy background-color, zadziałają już w obu przypadkach, ok, lecimy do spanów!
poszczególne cechy z CSS'a jego cechy zajmą całą linię, a nie tylko tekst, który potencjalnie chcielibyśmy zmodyfikować. Do tego służą spany, ale o nich później. Divy służą bardziej do pozycjonowania aniżeli samego zmieniania wyglądu, ponieważ jest wiele cech, które zadziałają tylko w divach, jak chociażby text-align. W spanach to nie zadziała, bo jest to cecha wyłącznie divów, zaś np. color, czy background-color, zadziałają już w obu przypadkach, ok, lecimy do spanów!
SPAN -
element liniowy, czyli krótko mówiąc układający się w linii. Możemy dodać kilka spanów po sobie a elementy w nich zawarte ułożą się w jednej linii (wyjątkiem jest dodanie br'a pomiędzy spanami, czyli tzw. "break-line", czyli po prostu przechodzimy do następnej linii - tak jak za pomocą entera, lub opcja druga - po prostu skończyła nam się długość wiersza i automatycznie następne spany są przerzucane do następnej linii.). Spanów korzysta się najczęściej do modyfikacji pojedynczych słów, co poniżej przedstawię.
PRZYKŁADY UŻYCIA ELEMENTÓW BLOKOWYCH DIV
Element1
Element2
Jak widzimy na powyższym - element zajął całą linijkę, a następny element pojawił się dopiero w następnym wierszu. Oczywiście możemy złamać tę zasadę, przez dodanie float lub display (w zależności od przewidywanego efektu) ale o tym może później.PRZYKŁADY UŻYCIA ELEMENTÓW LINIOWYCH SPAN
Element 3 Element2
Elementy nie zostały przełamane przez br'a więc są obok siebie. Do spanów nie możemy dodać szerokości ani text-align, ponieważ po prostu to nie zadziała.
Reasumując - w podstawach języka html rozróżniamy 2 typy elementów - div'y i span'y. Divy to elementy blokowe, spany elementy liniowe. Div'y stosujemy do np. do zmodyfikowania nagłówków (przez możliwość dodania text-align), zaś span'y do modyfikacji pojedynczych wyrazów. Ok. Mamy to? Mamy to! Lecimy dalej. A gdzie? Do krainy kaskadowych arkuszy styli.
CSS, czyli kaskadowe arkusze styli. A z polskiego na nasze - dzięki tym arkuszom styli możemy nadawać efekty wyglądu. Do takich najpopularniejszych selektorów należy chyba width i height, czyli szerokość i wysokość, które są nawet stosowane w html'u, jednak lepiej stosować to jako element css'a.
Generalnie mamy wiele selektorów, ale ja dziś powiem tylko o selektorach elementów, ażeby czacha nie wybuchła (bo przyznam, moja się mocno nagrzała, gdy to poznawałam). Klas i id nie będę Wam pokazywała póki, a pokaże wam ogólne stylowanie.
Tak jak wspomniałam - tekst możemy modyfikować za pomocą divów i spanów. To już wiecie. Ale jak dodać tam właściwość?
Teoretycznie width i height można dodać po prostu do div'a, tzn.:
Ale możemy to zrobić w o wiele łatwiejszy sposób, który da nam od razu o wiele więcej możliwości, a konkretniej:
Generalnie budowa CSS'a jest dość prosta (a przynajmniej tak mi się wydaje :D), ponieważ dodajemy do div'a lub span'a po prostu "style" i wpisujemy style jakie chcemy osiągnąć.
Do podstawowych "efektów" możemy zaliczyć przede wszystkim color, font-size, background oraz padding. Cóż to takiego? Po kolei.
COLOR- tym selektorem określamy kolor tekstu, i NIE, nie ma text-color, nie wiem konkretnie dlaczego, ale wydaje mi się, że po prostu jest to łatwiejsze do zapamiętania i skraca o kilka literek kod, a uwierzcie, że jest to ważne - im krótszy kod - tym szybciej się ładuje strona. Kolor podajemy w systemie słownym HTML lub systemie #, która daje nam więcej możliwości. Polecam używać color pickera.
FONT-SIZE - tym selektorem możemy zmienić wielkość liter. Blogger oferuje nam zmniejszanie - owszem, ale musimy się dostosować do ustawień bloggera...
BACKROUND - background, z angielskiego tło, jest tłem naszego tekstu. Zasada stosowania jest taka sama jak w przypadku selektora color, możemy dać kolor słownie, z #, ale także dochodzi tu RGB czyli red-green-blue, także polecam używać color pickera a nie skakać na chybił-trafił. W background'ie możemy dodawać też obrazki, ale o tym może kiedy indziej.
PADDING - padding, czyli "wyściółka", a tak na serio - wypełnienie. Polecam zapoznać się z modelem box'u, pomoże Wam to zrozumieć różnicę pomiędzy padding'iem a margin'em. Padding wypełnia od środka i jak już mogliście zobaczyć (no chyba, że nikt nie zauważył, hehe) tło nie przylega do słówka "padding" tak jak w przypadku background'a. To zasługa paddingu. Padding możemy używać ogólnie lub pojedynczo - np. pionowo/poziomo lub na każdą z stron inna wartość.
Z innych dodatków możemy dodać text-shadow, border, font-variant i wiele, wiele innych.
Spodobał Wam się post? Chcielibyście więcej? Podzielcie się swoją opinią i przemyśleniami w komentarzu!
Do napisania! Ahoj!
NX Team
NX Team
Czekam na kolejną część! A poza tym super blog! <3
OdpowiedzUsuń