20 przydatnych wskazówek CSS dla początkujących

Dawniej polegamy na programistach i programistach, którzy pomagają aktualizować witrynę, nawet jeśli jest to tylko niewielka wersja. Dzięki CSS i jego elastyczności style można wyodrębniać niezależnie od kodów. Teraz, dzięki pewnej podstawowej znajomości CSS, nawet początkujący może łatwo zmienić styl strony internetowej.

Niezależnie od tego, czy interesuje Cię zbieranie CSS, aby stworzyć własną stronę internetową, czy po prostu poprawienie wyglądu bloga i jego trochę poczucia - zawsze dobrze jest zacząć od podstaw, aby zyskać silniejszą podstawę. Spójrzmy na niektóre Porady CSS pomyśleliśmy, że mogą być przydatne początkujący. Pełna lista po skoku.

1. Posługiwać się reset.css

   Jeśli chodzi o renderowanie stylów CSS, przeglądarki takie jak Firefox i Internet Explorer mają różne sposoby ich obsługi. reset.css resetuje wszystkie podstawowe style, więc zaczynasz od prawdziwych nowych pustych arkuszy stylów.

   Oto kilka powszechnie używanych reset.css ramy - Yahoo Reset CSS, Reset CSS Erica Meyera, Trypolis

2. Użyj skrótu CSS

   Skrócony CSS zapewnia krótszy sposób pisania kodów CSS, a co najważniejsze - sprawia, że ​​oczyszczanie kodu jest łatwiejsze i łatwiejsze do zrozumienia.

   Zamiast tworzyć CSS w ten sposób

   .header background-color: #fff; background-image: url (image.gif); powtórz tło: nie powtarzaj; pozycja tła: górny lewy; 

   Może to być skrót:

   .header background: #fff url (image.gif) no-repeat top left

   Więcej - Wprowadzenie do CSS Stenografia, Przydatne skrócone właściwości CSS

3. Zrozumienie Klasa i ID

   Te dwa selektory często mylą początkujących. W CSS, klasa jest reprezentowany przez kropkę „.” podczas ID jest hashem „#” ID jest używany w stylu, który jest wyjątkowy i nie powtarza się, klasa po drugiej stronie można ponownie użyć.

   Więcej - Klasa a ID | Kiedy używać klasy, ID | Łączne stosowanie klasy i identyfikatora

4. Moc

5. Lista linków a.k.a jest bardzo przydatna, gdy jest poprawnie używana
   lub
   , szczególnie do stylu menu nawigacyjnego.

   • Zapomnieć , próbować

     Jedną z największych zalet CSS jest wykorzystanie

     aby osiągnąć całkowitą elastyczność w zakresie stylizacji.

     są niepodobne

     , gdzie zawartość jest „zablokowana” w ciągu

     komórka. Można śmiało powiedzieć najwięcej układy są osiągalne za pomocą i właściwa stylizacja, no może oprócz masowej zawartości tabelarycznej. Więcej - Stoły są martwe, Tabele vs. CSS, CSS a tabele Narzędzia do debugowania CSS Zawsze dobrze jest uzyskać natychmiastowy podgląd układu podczas ulepszania CSS, pomaga lepiej zrozumieć i debugować style CSS. Oto kilka darmowych narzędzi do debugowania CSS, które możesz zainstalować w swojej przeglądarce: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar i Firebug. Unikaj zbędnych selektorów Czasami twoja deklaracja CSS może być prostsza, co oznacza, że ​​jeśli kodujesz: ul li … ol li … table tr td … Można je skrócić do zwykłego li … td … Wyjaśnienie: będzie istnieć tylko wewnątrz lub i i będzie tylko w środku więc nie ma potrzeby ponownego ich wkładania. Porozumiewawczy !ważny Dowolny styl oznaczony symbolem !ważny zostaną użyte niezależnie, jeśli poniżej znajduje się zasada nadpisywania. .strona kolor tła: niebieski! ważny; kolor tła: czerwony; W powyższym przykładzie, kolor tła: niebieski zostanie zaadaptowany, ponieważ jest oznaczony !ważny, nawet gdy jest kolor tła: czerwony; pod tym. !ważny jest używany w sytuacji, w której chcesz wymusić styl bez nadpisywania go, ale może nie działać w Internet Explorerze. Zastąp tekst obrazem Jest to zwykle praktyka zastępowania tytuł z tytułu opartego na tekście do obrazu. Oto jak to robisz. h1 wcięcie tekstu: -9999px; background: url ("title.jpg") no-repeat; szerokość: 100px; wysokość: 50px; Wyjaśnienie: wcięcie tekstu: -9999px; wyrzuca tytuł z ekranu, zastępując obraz zadeklarowany przez tło: … ze stałą szerokość i wysokość. Zrozumieć pozycjonowanie CSS Poniższy artykuł zapewnia jasne zrozumienie korzystania z pozycjonowania CSS - pozycja: … Więcej - Dowiedz się o pozycjonowaniu CSS w dziesięciu krokach CSS @import vs Istnieją 2 sposoby wywołania zewnętrznego pliku CSS - odpowiednio za pomocą @import i . Jeśli nie masz pewności, której metody użyć, oto kilka artykułów, które pomogą Ci podjąć decyzję. Więcej - Różnica między @importem a linkiem Projektowanie formularzy w CSS Formularze internetowe można łatwo projektować i dostosowywać za pomocą CSS. Poniższe artykuły pokazują, jak: Więcej - Forma bez stołu, Formularz Garden, Stylizowanie jeszcze większej liczby form sterujących Zainspirować się Jeśli szukasz inspirującej strony opartej na CSS lub po prostu poszukujesz jakiegoś dobrego interfejsu użytkownika, oto kilka witryn CSS, które polecamy: CSS Remix CSS Beauty CSS Elite CSS Mania CSS Przeciek Utrzymuj kod CSS w czystości Jeśli twoje kody CSS są nieuporządkowane, skończysz z kodowaniem w nieładzie i trudnym określeniem poprzedniego kodu. Na początek możesz stworzyć odpowiednie wcięcia, odpowiednio je skomentować. Więcej - 12 zasad zachowania kodu w czystości, Formatuj kody CSS online Pomiar typografii: px vs em Masz problem z wyborem, kiedy użyć jednostki miary px lub em? Poniższe artykuły mogą zapewnić lepsze zrozumienie jednostek typografii. Tabela zgodności przeglądarek CSS Wszyscy wiemy, że każda przeglądarka ma różne sposoby renderowania stylów CSS. Dobrze jest mieć odniesienie, wykres lub listę, która pokazuje całą kompatybilność CSS dla każdej przeglądarki. Tabela wsparcia CSS: # 1, # 2, # 3, # 4. Zaprojektuj wielokolumny w CSS Masz problem z prawidłowym wyrównaniem lewej, środkowej i prawej kolumny? Oto kilka artykułów, które mogą pomóc: W poszukiwaniu Świętego Graala Sztuczne kolumny Najważniejsze powody, dla których twoje kolumny CSS są pomieszane Litte Boxes (przykłady) Układy wielokolumnowe wychodzą z pudełka Kolumny absolutne Zdobądź darmowych edytorów CSS Dedykowane edytory są zawsze lepsze niż notatnik. Oto kilka rekomendujemy: Więcej - Prosty CSS, Notatnik ++, Edytor CSS stylu Zrozumienie typów mediów Istnieje kilka typów nośników podczas deklarowania CSS za pomocą . drukowanie, projekcja i ekran to tylko niektóre z najczęściej używanych typów. Zrozumienie i używanie ich w odpowiedni sposób umożliwia lepszą dostępność dla użytkownika. Poniższy artykuł wyjaśnia, jak postępować z typami mediów CSS. Więcej - CSS i typy mediów, W3 Typy mediów, Typy mediów CSS, Typy mediów CSS2 20 przydatnych aplikacji na iPhone dla programistów i projektantów 20 Przydatne narzędzia SVG dla lepszej grafiki 20 ultra lekkich i eleganckich czcionek dla projektantów stron internetowych Następny artykuł 20 przydatnych dodatków do paska bocznego Firefox Poprzedni artykuł 20 przydatnych aplikacji, aby jak najlepiej wykorzystać Instagram