20 Essential CSS Triki Każdy projektant powinien wiedzieć
Ten jest dla absolutnie początkujących. Kiedy nauczysz się, jak działa model pudełkowy i jak unieść te pudełka, pora poważnie traktować swój CSS. W tym celu przygotowaliśmy ogromną listę porad, trików, technik i okazjonalnego, brudnego hacka, które pomogą Ci zbudować pożądany projekt.
CSS może być trudny i powinieneś. A teraz, w szczególnej kolejności, (prawie) wszystko, co musisz wiedzieć:
1. Absolutne pozycjonowanie
Jeśli chcesz kontrolować, gdzie w danym momencie żywi się nasz element, bezwzględne pozycjonowanie jest kluczem do tego. Jeśli uważasz, że Twoja przeglądarka jest jedną dużą ramką ograniczającą, to pozycjonowanie absolutne pozwala ci dokładnie kontrolować, gdzie w tym polu pozostanie element. Użyj górnej, prawej, dolnej i lewej strony, wraz z wartością pikseli, aby kontrolować, gdzie element pozostaje.
position:absolute;top:20px;right:20pxPowyższy CSS ustawia pozycję elementu, aby utrzymać 20 pikseli od górnej i prawej krawędzi przeglądarki. Możesz także użyć pozycjonowania absolutnego wewnątrz elementu div.
2. * + selektor
* Pozwala wybrać wszystkie elementy danego selektora. Na przykład, jeśli użyłeś * p, a następnie dodałeś do tego style CSS, zrobiłoby to to dla wszystkich elementów w twoim dokumencie z
etykietka. Ułatwia to kierowanie na części witryny na całym świecie.
3. Zastępowanie wszystkich stylów
To powinno być używane oszczędnie, ponieważ jeśli zrobisz to dla wszystkiego, na dłuższą metę będziesz miał kłopoty. Jeśli jednak chcesz zastąpić inny styl CSS dla konkretnego elementu, użyj ! Important po stylu w twoim css. Na przykład, jeśli chciałbym, aby nagłówki H2 w określonej sekcji mojej witryny były czerwone, a nie niebieskie, użyłbym następującego kodu CSS:
.section h2 { color:red !important; }4. Centrowanie
Centrowanie jest trudne, ponieważ zależy od tego, co próbujesz wyśrodkować. Rzućmy okiem na CSS przedmiotów, które mają być wyśrodkowane na podstawie treści.
Tekst
Tekst wyśrodkowany za pomocą text-align: center; . Jeśli chcesz to po obu stronach, użyj lewej lub prawej zamiast środka.
Zadowolony
Element div (lub dowolny inny element) można wyśrodkować, dodając do niego właściwość bloku, a następnie stosując automatyczne marginesy. CSS wyglądałby tak:
#div1 {display: block;margin: auto;width: anything under 100%}Powodem, dla którego ustawiłem "coś poniżej 100%" dla szerokości, jest to, że jeśli byłby on w 100% szeroki, to gdyby był pełnowymiarowy i nie wymagałby centrowania. Najlepiej mieć stałą szerokość, np. 60% lub 550 pikseli itp.
5. Wyrównanie w pionie (dla jednego wiersza tekstu)
Użyjesz tego w menu nawigacji CSS, prawie mogę to zagwarantować. Kluczem jest, aby wysokość menu i wysokość linii tekstu były takie same. Widzę tę technikę bardzo często, kiedy wracam i edytuję istniejące strony internetowe dla klientów. Oto przykład:
.nav li{line-height:50px;height:50px;}6. Efekty zawieszania
Służy do przycisków, linków tekstowych, sekcji bocków witryny, ikon i innych elementów. Jeśli chcesz, aby coś zmieniło kolory, gdy ktoś najedzie na niego myszką, użyj tego samego CSS, ale dodaj : najedź na nią i zmień stylizację. Oto przykład:
.entry h2{font-size:36px;color:#000;font-weight:800;}.entry h2:hover{color:#f00;}Zmienia kolor twojego znacznika h2 z czarnego na czerwony, gdy ktoś się nad nim unosi. Wspaniałą rzeczą przy użyciu: hover jest to, że nie musisz ponownie zadeklarować rozmiaru czcionki ani wagi, jeśli się nie zmienia. Zmienia tylko to, co określisz.
Przejście
W przypadku efektów hover, takich jak w menu lub na obrazkach w witrynie, nie chcesz, aby kolory były zbyt szybko przyciągane do wyniku końcowego. Idealnie chcesz złagodzić zmiany stopniowo, w tym miejscu wkracza właściwość przejścia.
.entry h2:hover{color:#f00;transition: all 0.3s ease;}To sprawia, że zmiana trwa ponad .3 sekundy, zamiast natychmiastowego przyciągania do koloru czerwonego. To sprawia, że efekt zawisu jest przyjemniejszy dla oka i mniej wstrząśnięty.
7. Stany połączenia
Te style są pomijane przez wielu projektantów i tak naprawdę powodują problemy z użytecznością wśród użytkowników. Pseudo-klasa : link kontroluje wszystkie linki, które jeszcze nie zostały kliknięte. Pseudo klasa odwiedzone obsługuje style wszystkich już odwiedzonych linków. Mówi to odwiedzającym witrynę, gdzie już byli w Twojej witrynie, i gdzie jeszcze nie odkryli.
a:link { color: blue; }a:visited { color: purple; }8. Łatwa zmiana rozmiaru obrazów w celu dopasowania
Czasami pojawia się szczypta, w której obrazy muszą pasować do określonej szerokości, a jednocześnie skalować proporcjonalnie. Prostym sposobem na to jest użycie maksymalnej szerokości, aby sobie z tym poradzić. Oto przykład:
img {max-width:100%;height:auto;}Oznacza to, że największym obrazem może być kiedykolwiek 100%, a wysokość jest automatycznie obliczana na podstawie szerokości obrazu. W niektórych przypadkach konieczne może być określenie szerokości na 100%.
9. Kontroluj elementy sekcji
Korzystając z powyższego przykładu obrazka, jeśli chcesz kierować tylko obrazy określonej sekcji, np. Bloga, użyj klasy do sekcji blogu i połącz ją z rzeczywistym selektorem. Umożliwi to wybranie tylko obrazów sekcji blogu, a nie innych obrazów, takich jak logo lub ikony mediów społecznościowych, ani obrazów w innych sekcjach witryny, takich jak pasek boczny. Oto, jak wyglądałby CSS:
.blog img{max-width:100%;height:auto;}10. Bezpośrednie dzieci
Chciałbym wiedzieć o tym, kiedy zacząłem używać CSS. To zaoszczędziłoby mi tyle czasu! Użyj >, aby wybrać bezpośrednie elementy potomne elementu. Na przykład:
#footer > aSpowoduje to wybranie i stylizację wszystkich aktywnych elementów łącza, które znajdują się bezpośrednio pod identyfikatorem Footer. Nie wybierze niczego poza aktywnym elementem ani niczego innego zawartego w stopce, jak zwykły tekst. Działa to również doskonale z elementami nawigacyjnymi najwyższego poziomu.
Konkretne elementy potomne
Uwierzcie mi, jest to przydatne, gdy tworzy się listy stylów. Musisz tylko policzyć ile elementów w dół jest elementem, który chcesz nadać styl, a następnie zastosować ten styl.
li:nth-child(2) {font-weight:800;color: blue;text-style:underline;}Powyższy styl CSS jest skierowany do drugiego elementu na liście i powoduje, że jest pogrubiony, podkreślony i niebieski. Dodaj "n" po liczbie w nawiasie i możesz kierować się na co drugi element listy. Wyobraź sobie, że możesz stylizować każdą inną linię w układzie tabeli w celu łatwego czytania. CSS będzie:
li:nth-child(2)11. Zastosuj CSS do wielu klas lub selektorów
Załóżmy, że chcesz dodać identyczną ramkę wokół wszystkich obrazów, sekcji blogu i paska bocznego. Nie musisz pisać tego samego dokładnego CSS 3 razy. Po prostu wypisz te przedmioty, oddzielając je przecinkami. Oto przykład:
.blog, img, .sidebar {border: 1px solid #000;}Niezależnie od tego, czy jesteś projektantem stron internetowych od lat, czy dopiero zaczynasz, nauka tworzenia stron internetowych we właściwy sposób może wydawać się skalistą, niekończącą się podróżą. Gdy już zawęzisz języki, których chcesz się nauczyć, musisz nauczyć się i doskonalić swoje umiejętności.
Bez względu na to, czego się nauczyłeś, CSS jest jedną z tych podstawowych, ale zniewalających umiejętności, które musisz opanować. Nie musi to być jednak trudne, szczególnie jeśli znasz kilka przydatnych i mniej znanych technik CSS, aby wykonać zadanie.
12. box-sizing: border-box;
Jest to ulubione wśród wielu projektantów stron internetowych, ponieważ rozwiązuje problem paddingu i problemów z układem. Zasadniczo, gdy ustawisz pole na określoną szerokość i dodasz do niego dopełnienie, dopełnienie powiększy rozmiar pola. Jednak przy rozmiarach pudełek: border-box; jest to zanegowane, a pola pozostają takie, jakie mają być.
13.: wcześniej
Ten CSS jest selektorem, który pozwala wybrać element CSS i wstawić treść przed każdym elementem z określoną klasą zastosowaną do niego. Załóżmy, że masz stronę internetową, na której chcesz znaleźć konkretny tekst przed każdym tagiem H2. Będziesz nam to ustawienie:
h2:before {content: "Read: "; color: #F00;}Jest to bardzo przydatne, zwłaszcza jeśli używasz czcionki ikon. Możesz umieścić ikony przed niektórymi elementami i zastosować je globalnie.
14.: po
Podobnie jak w przypadku selektora: before, można użyć: after, aby wstawić zawartość globalnie do określonych elementów. Praktycznym zastosowaniem byłoby dodanie "czytaj więcej" po każdym fragmencie na blogu. Oto, jak byś to zrobił.
p:after{content: " -Read more… ";color:#f00;}
15. zawartość
content to własność CSS, która przydaje się, kiedy musisz wstawić element, który chcesz kontrolować. Najczęściej używanym przeze mnie zastosowaniem jest wstawianie ikony z czcionki ikony w określonym miejscu. W powyższych przykładach widać, że należy zawijać tekst, który chcesz wstawić w cudzysłowie.
16. Resetowanie CSS
Różne przeglądarki mają domyślne ustawienia CSS, więc konieczne jest ich zresetowanie, abyś miał równe, spójne pole gry. Pomyśl o tym, jak budować dom, i czy budujesz na zboczu góry, na piaszczystej plaży, czy na środku zalesionego terenu, chcesz, żeby fundament był równy.
Ta metoda resetowania CSS wyznacza standardową podstawę dla wszystkich twoich stron internetowych, dając im spójność w punkcie początkowym CSS. Usuwa niechciane obramowania, zadane marginesy, dopełnienie, wysokości linii, style na listach itp. Eric Meyer stworzył taki, który działa dobrze .
17. Spadki
Każdy uwielbia kapsle. Przypomina nam tradycyjną drukowaną książkę i jest świetnym sposobem na rozpoczęcie strony z treścią. Ten pierwszy duży list naprawdę przyciąga twoją uwagę. Istnieje prosty sposób na utworzenie inicjału wpuszczanego w css, a to za pomocą pseudo elementu:: first letter. Oto przykład:
p:first-letter{display:block;float:left;margin:3px;color:#f00;font-size:300%;}To, co to robi, ustawia literę na 3 x rozmiar innych liter. Ustawia 3 piksele wokół litery, aby zapobiec nakładaniu i ustawia kolor litery na czerwony.
18. Wymuszaj, aby tekst był cały pisany, pisany małymi literami lub pisany wielkimi literami
Absurdem byłoby pisać całą sekcję we wszystkich wersjach. Wyobraź sobie, że musisz wrócić i naprawić to później, gdy zmieni się format strony internetowej lub zostanie ona zaktualizowana. Zamiast tego użyj następujących stylów CSS, aby wymusić tekst do określonego formatowania. Ten css jest kierowany na znacznik tytułu h2.
- h2 {text-transform: wielkie litery; } - wszystkie czapki
- h2 {text-transform: małe litery; } - wszystkie małe litery
- h2 {text-transform: capitalize; } - kapitalizuje pierwszą literę każdego słowa.
19. Wysokość pionowego ekranu
Czasami chcesz, aby sekcja wypełniała cały ekran, bez względu na rozmiar ekranu. Możesz to kontrolować za pomocą vh lub widoku wysokości. Liczba przed nim jest procentowa, więc jeśli chcesz, aby wypełniła 100% przeglądarki, ustawisz ją na 100. Możesz ustawić ją na wartość podobną do 85%, aby pomieścić stałe menu nawigacyjne.
Utwórz klasę dla kontenera i zastosuj ilość vh, którą chcesz. Jedną z rzeczy, które trzeba poprawić, jest wartość zapytania o media dla określonych ekranów lub orientacji, takich jak telefony w trybie portretu. Wyobraź sobie rozciąganie obrazu krajobrazu w celu dopasowania do trybu portretu. To po prostu nie wyglądałoby dobrze.
.fullheight { height: 85vh; }20. Stylowe łącza telefoniczne
Jeśli masz łącze, które łączy się z numerem telefonu, gdy użytkownik dotknie go na swoim telefonie, możesz mieć problemy z jego stylizacją za pomocą tradycyjnego aktywnego selektora linków. Zamiast tego użyj następującego pliku CSS:
a[href^=tel] { color: #FFF; text-decoration: none;}