CSS Powrót do podstaw Wyjaśnienie terminologii
CSS lub arkusze stylów kaskadowych uzupełniają język reguł projektowania naszej sieci. Artyści na całym świecie codziennie używają CSS do tworzenia, organizowania i kodowania zestawów zasad dotyczących podstawowych układów stron internetowych. Stało się to najpopularniejszym językiem do projektowania front-end i zapewnia niesamowite możliwości dzięki najnowszej wersji CSS3. Ale co właściwie oznacza ten kod??
Sam język został w pełni opracowany od kilku lat. Zamieszanie może wynikać głównie z nieporozumień i nadużyć podobnych terminów. CSS wprowadza wiele nowych koncepcji do stołu. Omówimy niektóre z najpopularniejszych terminów do opanowania jako guru CSS.
Dlaczego warto specjalizować się w CSS?
To pytanie zostało postawione wcześniej, a nawet wchodząc w 2011 r. Widzimy te same rezultaty. CSS to niezawodny język, który nie lubi skryptów i programowania. To język stylów, a dokładniej kod używany do opisywania zachowania strony internetowej.
Za pomocą CSS możemy bezpośrednio manipulować atrybutami z poszczególnych elementów HTML. Na wszystkie bloki, akapity, łącza i obrazy mogą wpływać reguły CSS. Udoskonalenie semantyki prezentacji dla Internetu zawsze było ogromnym krokiem. To jest główny powód, dla którego CSS jest nadal wiodącym graczem dla projektantów - nikt nie stworzył nic lepszego!
Właściwości i wartości
To najprostszy sposób na włamanie do CSS. Cały kod dzieli się na dwie czynności: wybór elementu, aby zastosować projekty i co należy zastosować. Ten ostatni jest tworzony za pomocą par właściwości / wartości.
Jako przykład kolor czerwony; to bardzo prosta para właściwości / wartości. Właściwość, której użyliśmy, jest kolor co pozwala nam przejść w jakimkolwiek akceptowalnym wartość zmienić kolor tekstu. Może to być również kod koloru w formacie szesnastkowym lub RGB (czerwony-zielony-niebieski). Wielokrotnie projektanci nie wspominają o idei wartości, ponieważ może to wprowadzać w błąd.
Właściwości i wartości to naprawdę jeden pomysł. Każda deklaracja własności wymaga wartości, a wartości same w sobie są bez znaczenia. Istnieje wiele dokumentacji online, która opisuje wiele różnych właściwości i ich wpływ na elementy HTML. Polecam zakup książki referencyjnej CSS z dowolnego pobliskiego księgarni. Są dość tanie i zawierają większość potrzebnych informacji.
Wartości selektora
Selektory są potrzebne do wypełnienia całej linii kodu CSS. Oto, co deklarujemy, aby ustawić, jakiego typu element kierujemy. Istnieje wiele selektorów, a wielu jest tak zawiłych, że przeciętny projektant nie potrzebuje umiejętności. Sprawdź dokumenty selektora W3, jeśli chcesz dowiedzieć się więcej.
Najprostszym sposobem rozpoczęcia definiowania stylu jest użycie gołych elementów jako selektorów właściwości. Oznacza to manipulowanie kodem głównym, takim jak str dla akapitów, div dla dywizji, a nawet ciało i html może być używany do manipulowania całym dokumentem strony internetowej. Poniżej znajduje się krótki przykład stylizacji wszystkich elementów akapitu.
p font-family: Arial, sans-serif; kolor: # 222; waga czcionki: pogrubiona;
To, co daje rzeczywistą wagę CSS, to to, jak dokładne może być strzelanie do selektora. Najlepszym sposobem realizacji stylów docelowych są dwie metody znane jako klasy i ID. Są to powszechne pomysły w HTML, w których można ustawić dowolny element tak, aby posiadał identyfikator i wartość klasy poprzez atrybuty. Następnie za pomocą CSS łatwo jest zastosować style do tego konkretnego bloku.
p # firstpar font-size: 14px; / * style akapit z identyfikatorem „firstpar” * / p.comment font-size: 1.0em; line-height: 1.3em; / * style akapitów z klasą „komentarz” * /
Jednostki długości i wartości
Często te terminy się mieszają, a nie wielka niespodzianka. Wartości wyjaśniono wcześniej jako miejsce docelowe, którego używamy do opisania właściwości. Jednostki długości są również wartościami w tym sensie, że są używane do opisu właściwości.
Różnica polega na tym, że te wartości wymagają danych liczbowych i dlatego muszą zwrócić pewną formę jednostek. Piksele (px) są najbardziej rozpowszechnione i mogą być używane do większości rzeczy: szerokość / wysokość, rozmiar czcionki, dopełnienie / marginesy, aby wymienić tylko kilka.
Poza tymi, możesz zobaczyć procenty (%) używane często przez układy płynów. Przy ustawianiu wartości szerokości na procent kompilator przyjmie 100% za całą szerokość przeglądarki internetowej. Daje to projektantom dużą precyzję podczas stosowania stylów do struktur układu, a nawet typografii stron.
Blok deklaracji
Teraz, po połączeniu wszystkich tych terminów, jesteśmy w stanie omówić kluczową ideę arkuszy stylów. Bloki kodu służą do wyznaczania obszarów tematycznych i określania szczegółów elementu. Na przykład poniżej znajduje się wiersz kodu prostego kontenera nawigacyjnego:
div # nav display: block; szerokość: 100%; padding: 3px 6px; margin-bottom: 20px;
Najprostszym sposobem wyświetlenia tego kodu jest wyodrębnienie właściwości jeden po drugim. Programiści CSS wykorzystali bloki kodu, aby złamać każdą właściwość na własnej linii. Ten program nie tylko zajmuje dużo więcej miejsca, ale także ogranicza możliwość “przejrzeć” Twój arkusz, aby znaleźć dokładnie to, czego potrzebujesz.
Lepszym sposobem na rozbicie bloków kodu jest oddzielenie zwiniętych elementów na własne po osiągnięciu progu. Ta liczba jest osobista i będzie się różnić między programistami. Jest to punkt krytyczny, w którym logika nakazuje mu głupie trzymać wszystko na jednej linii, głównie ze względu na czytelność.
Poniżej zapisałem przykład bloku właściwości nawigacyjnych. Ta praktyka utrzymuje głębsze elementy w tym samym miejscu, więc edytowanie wszystkich elementów nawigacji jest znacznie prostsze.
div # nav display: block; szerokość: 100%; padding: 3px 6px; margin-bottom: 20px; div # nav ul list-style: none; Blok wyświetlacza; div # nav ul li float: left; margines prawy: 10px; rozmiar czcionki: 12px; div # nav ul li a color: # 0f0f0f; dekoracja tekstowa: brak; wyświetlacz: blok śródliniowy; padding: 2px 5px;
Możliwe ulepszenia z CSS2 / CSS3
W nagłówkach gazet ostatnio dyskutowano o niesamowitych korzyściach płynących z CSS3. Ale co naprawdę zmieniony w języku? Wyraźnie stary kod będzie działał bez zarzutu. Pokazuje to przynajmniej pełną kompatybilność wsteczną między kompilatorami (zawsze dobrą rzeczą).
Główne różnice są głównie związane z nowymi właściwościami. Umożliwiają one renderowanie zaokrąglonych rogów i efektów cienia w przeglądarce. CSS3 oferuje również nowe narzędzia do opisywania kolorów w dokumencie. HSL (Hue-Saturation-Lightness) to najnowszy dodatek do HSLA, który zawiera kanał alfa w celu zmniejszenia krycia.
Selektory atrybutów to ogromny krok naprzód w odniesieniu do stylizacji prostych znaczników. Za pomocą tego stylu kodu można kierować na konkretną nazwę elementu, która zawiera atrybuty o określonych wartościach. Są one najczęściej przydatne podczas pracy ze znacznikami, takimi jak XML, gdzie nie ma standardowych zasad projektowania do manipulowania węzłami. Poniższy przykład to stosunkowo prosty pomysł:
div [attrib ^ = "1"] / * style tutaj * /
Powyższy kod jest częścią biblioteki selektorów CSS. Wpłynie to na wszystkie elementy div z atrybutem “attrib” który również posiada wartość “1”. Jeśli jest to nadal mylące, odwołaj się do poniższego przykładu, aby wyjaśnić. Teoretycznie te dwa selektory powinny wykonywać te same czynności.
p [id ^ = "primary"] / * styles * / p # primary / * styles * /
Wniosek
Po rozbiciu kilku najbardziej zagubionych terminów CSS wydaje się chodzić po parku. Język jest bardzo intuicyjny, a początkujący mogą rozpocząć projektowanie w ciągu pierwszych kilku godzin pod ręką. To sprawia, że CSS jest tak popularny wśród twórców stron internetowych.
Zalety CSS3 dopiero zaczęły obowiązywać. W ciągu ostatnich kilku lat ewoluujące trendy internetowe pokażą nam, jak bardzo mamy kontrolę nad projektowaniem stron internetowych. CSS jest obecnie dumny jako dominujący język stylizacji stron internetowych. Ćwiczenie nawet w podstawowych umiejętnościach na poziomie średniozaawansowanym może przynieść obfite doświadczenie projektowe i dalszą wiedzę.
