20 полезни CSS съвети за начинаещи

В старите времена зависи много от разработчиците и програмистите, които да помогнат за актуализирането на уебсайта, дори когато това е само незначително. Благодарение на CSS и неговата гъвкавост, стиловете могат да се извличат независимо от кодовете. Сега, с някои основни познания за CSS, дори и начинаещ може лесно да промени стила на уебсайт.

Независимо дали се интересувате да вземете CSS, за да създадете свой собствен уебсайт, или просто да промените изгледа и да се почувствате малко - винаги е добре да започнете с основите, за да получите по-силна основа. Нека да разгледаме някои CSS Съвети мислехме, че може да е полезно начинаещи. Пълен списък след скок.

1. употреба reset.css

   Когато става въпрос за визуализиране на CSS стилове, браузърите като Firefox и Internet Explorer имат различни начини да ги обработват. reset.css нулира всички основни стилове, така че започва с истински празни нови стилове.

   Ето няколко често използвани reset.css рамки - Yahoo Reset CSS, CSS Reset на Ерик Майер, Триполи

2. Използвайте краткия CSS

   Стесните CSS ви дават по-кратък начин на писане на вашите CSS кодове и най-важното - прави кода по-ясен и по-лесен за разбиране.

   Вместо да създавате CSS като този

   .header цвят на фона: #fff; background-image: url (image.gif); фон-повторение: не се повтаря; фонова позиция: горе вляво; 

   Тя може да бъде подведена на следното:

   .header background: #fff url (image.gif) не се повтаря горе вляво

   | Повече ▼ - Въведение в стенографията на CSS, Полезни свойства на CSS

3. разбиране клас и документ за самоличност

   Тези два селектора често бъркат начинаещите. В CSS, клас е представена от точка "." докато документ за самоличност е хеш "#" документ за самоличност се използва в стил, който е уникален и не се повтаря, клас от другата страна може да се използва повторно.

   | Повече ▼ - Клас спрямо ИД | Кога да се използва Клас, ИД | Прилагане на Клас и ИД заедно

4. Силата на

5. a.k.a списък с връзки, е много полезно, когато те се използват правилно с
   или
   , особено в стила на навигационното меню.

   • забравям , опитвам

     Едно от най-големите предимства на CSS е използването на

     за постигане на пълна гъвкавост по отношение на стила.

     не са подобни

     , където съдържанието е „заключено“ в рамките на a

     клетката. Това е безопасно да се каже най-много оформления са постижими с използването на и правилното оформяне, може би освен масивното таблично съдържание. | Повече ▼ - Масите са мъртви, Таблици Vs. CSS, CSS срещу таблици CSS инструменти за отстраняване на грешки Винаги е добре да получите незабавен преглед на оформлението, докато променяте CSS, той помага за по-добро разбиране и отстраняване на грешки в CSS стилове. Ето някои безплатни CSS инструменти за отстраняване на грешки, които можете да инсталирате в браузъра: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar и Firebug. Избягвайте излишни селектори Понякога вашата CSS декларация може да бъде по-проста, което означава, ако откриете, че кодирате следното: ul li … ol li … таблица tr td … Те могат да бъдат съкратени до просто li … td … Обяснение: ще съществува само вътре или и и ще бъде само вътре така че наистина не е необходимо да ги поставяте отново. познаване !важно Всеки стил, маркиран с !важно ще бъде използвано независимо, ако под него има правило за презаписване. .страница цвят на фона: синьо! важно; фон цвят: червен; В примера по-горе, фон-цвят: син ще бъде адаптиран, защото е маркиран с !важно, дори когато има фон-цвят: червен; под него. !важно се използва в ситуация, в която искате да принудите стил, без да го презапишете, но може да не работи в Internet Explorer. Заменете текста с изображението Това е обичайна практика да се замени заглавие от текстово заглавие към изображение. Ето как го правите. h1 text-indent: -9999px; фон: url ("title.jpg") не се повтаря; ширина: 100px; височина: 50px; Обяснение: текст-тире: -9999px; хвърля заглавието на текста извън екрана, заменен от изображение, декларирано от заден план: … с фиксиран широчина и височина. Разберете CSS позициониране Следващата статия ви дава ясна представа за използването на CSS позициониране - позиция: … | Повече ▼ - Научете CSS позициониране в десет стъпки CSS @import срещу Има два начина за извикване на външен CSS файл - съответно използване @import и . Ако не сте сигурни кой метод да използвате, ето няколко статии, които да ви помогнат да решите. | Повече ▼ - Разлика между @import и връзката Проектиране на формуляри в CSS Уеб формите могат лесно да бъдат проектирани и персонализирани с CSS. Следните статии ви показват как: | Повече ▼ - Форма без таблица, Форма градина, Стилът е още по-голям Вдъхновете се Ако се оглеждате за добре проектиран CSS-базиран уебсайт за вдъхновение, или просто да разглеждате, за да намерите някакъв добър потребителски интерфейс, ето един сайт на CSS витрина, който препоръчваме: CSS Remix CSS Beauty CSS Elite CSS Mania CSS изтичане Дръжте CSS кодовете чисти Ако вашите CSS кодове са объркани, ще завършите с кодиране в объркване и ще ви е трудно да преглеждате предишния код. Като начало можете да създадете правилно отстъп, да ги коментирате правилно. | Повече ▼ - 12 Принципи за поддържане на Вашия Код чист, Форматиране на CSS кодове онлайн Измерване на типографията: пиксела срещу ем Имате проблем с избора кога да използвате измервателна единица пиксела или ем? Следващите статии могат да ви дадат по-добро разбиране за типографските единици. Таблица за съвместимост на CSS браузъри Всички знаем, че всеки браузър има различни начини за представяне на CSS стилове. Добре е да имате справка, диаграма или списък, който показва цялата съвместимост на CSS за всеки браузър. CSS таблица за поддръжка: # 1, # 2, # 3, # 4. Дизайн на многоколонки в CSS Имате проблем с подравняването на лявата, средната и дясната колона? Ето някои статии, които биха могли да помогнат: В търсене на Светия Граал Изкуствени колони Основни причини, поради които вашите CSS колони са объркани Малки кутии (примери) Многоколонни оформления излизат от кутията Абсолютни колони Вземете безплатни редактори на CSS Специализираните редактори винаги са по-добри от бележник. Ето някои, които препоръчваме: | Повече ▼ - Прост CSS, Notepad ++, Редактор на стил CSS Разбиране на видовете медии Когато декларирате CSS, има няколко вида медии . печат, прожекция и екран са няколко от най-често използваните типове. Разбирането и използването им по подходящ начин позволява по-добра достъпност за потребителите. Следващата статия обяснява как да се справим с типовете CSS Media. | Повече ▼ - CSS и медийни типове, W3 Видове медии, CSS медийни типове, CSS2 медийни типове 20 Полезни iPhone приложения за разработчици и дизайнери 20 Полезни SVG инструменти за по-добра графика 20 ултра леки и елегантни шрифтове за уеб дизайнери Следваща статия 20 Полезни добавки за страничната лента на Firefox Предишна статия 20 Полезни приложения за извличане на най-доброто от Instagram