15 шпаргалок по CSS, которые сохранят время и нервы

Страница

Библиотека программиста

1 009 записей Показать все записи

По стопам лучших: микросервисная архитектура в разрезе

Использовать микросервисную архитектуру или нет? Разбираемся с плюсами и минусами, внутренней коммуникацией, принципами и заблуждениями.

А какой тип архитектуры используете вы?

Свой успешный бизнес: на чём зарабатывают пользователи Hacker News?

Хотите начать собственный бизнес, но не решаетесь? Держите 7 историй из жизни: пользователи Hacker News делятся секретами успеха и трудностями своего дела.

А вы пытались начать собственное дело? Что из этого вышло?

IDE Eclipse: за и против от ведущих программистов

Пробовали писать код в Eclipse? Расскажем, какие преимущества и недостатки продвинутые программисты нашли в IDE и кому она будет полезна.

А какой у вас опыт разработки в Eclipse?

Подборки книг по разным темам

Подборка книг по PHP для программистов любого уровня
https://proglib.io/p/php-books/

149 лучших книг по геймдеву и смежным областям
https://proglib.io/p/best-gamedev-books/

Deep Learning: 15 лучших книг по глубинному обучению
https://proglib.io/p/deep-learning-books/

Как писать ужасный код: делимся опытом

Со всех утюгов трубят о хорошем коде. Чушь! Забудь. Учись писать неподдерживаемый код: это классное вложение в будущее себя любимого, ведь ты будешь востребован, как никто!

Были ли у тебя на практике примеры ужасного кода? Делись в комментариях

Шпаргалка CSS

Шпаргалка по языку CSS (cheat sheet CSS)

Многие учащиеся в школах, колледжах и вузах изучают язык CSS. Для этих людей написал небольшую шпаргалку по CSS, возможно она вам поможет во время контрольных или экзаменов.

Что такое CSS

CSS (Cascading Style Sheets) — каскадные таблицы стилей.

CSS — это язык форматирования, с помощью него можно изменять внешний вид HTML-тегов страницы, управляя их цветом, размерами, положением и другими характеристиками.

Язык CSS создан для того, чтобы вебмастера при создании сайта могли разделять его логическую структуру (HTML-теги) от внешнего вида. С помощью языка HTML создаётся структура (каркас) страницы, а с помощью языка CSS, оформляется внешний вид страницы.

Схема CSS-кода

Схема CSS-кода выглядит следующим образом:

Основной частью CSS-кода, являются CSS-свойства , вот некоторые из них:
color: — цвет шрифта,
background-color: — фон элемента,
font-size: — размер шрифта,
text-align: — выравниевание текста,
margin: — внешний отступ и т.д.

Внедрение CSS

Внедрить CSS-код в HTML-документ, можно тремя способами:
1. С помощью тегов (влияет на одну страницу) ,
2. C помощью атрибута style=» » (влияет на один тег) ,
3. C помощью тега
(тег link ссылается на внешний .css файл, влияет на весь сайт) .

Селекторы в CSS

Селектор (селекция) — выборка HTML-тегов страницы.

В качестве селектора могут выступать:
Имя тега: p , h1 , a (выборка HTML-тегов по имени) ,
Имя класса: .имяКласса (выборка HTML-тегов по значению атрибута ) ,
Имя уникального идентификатора: #имяУникальногоИдентификатора (выборка HTML-тегов по значению атрибута ) .

Одному и тому же HTML-тегу, можно назначить несколько имён классов.

Имена классов и уникальных идентификаторов могут состоять из любых букв английского алфавита, чисел, знаков дефиса — и подчеркивания _ , но начинаться имя должно с буквы.

Универсальный селектор: * (выборка всех HTML-тегов страницы) ,
Селектор атрибута: [атрибут] < >(выборка HTML-тегов по атрибуту) ,
Селектор атрибута и значения: [атрибут=»значение»] < >(выборка HTML-тегов по атрибуту и значению) .

Взаимоотношения селекторов:
Контекстные селекторы: селектор селектор < >(выборка HTML-тегов потомков) ,
Дочерние селекторы: селектор > селектор < >(выборка дочерних HTML-тегов) ,
Соседние селекторы: селектор + селектор < >(выборка соседних (братских, сестринских) HTML-тегов) .

Напишите, чтобы вы еще хотели видеть в шпаргалке по CSS?

Как посоветуете создать шпаргалку по HTML и CSS?

Прежде всего наверное нужно придумать: на какие группы разделить CSS.

Можно на 3 логических, но не знаю насколько это будет потом удобно читать:

CSS по сути это ведь просто селектор+свойство+значение

  1. создайте значит топ 30 селекторов
  2. потом топ свойств
  3. и топ значений

(ведь нет никакого смысла в часто используемую шпаргалку добавлять что-то вообще экзотическое из языка CSS, или решить стоит-ли наоборот добавлять туда только менее известные вам селекторы, свойства, или значения (потому-что известные итак давно известны))

Также можно на другие группы разделить, интуитивно-визуального «характера», обычного восприятия, например:

  1. фон
  2. границы
  3. шрифт
  4. поля
  5. .

Или придумать на какие ещё группы можно поделить это, кроме визуальной составляющей или основополагающей

Таблица стилей CSS в удобном виде

Таблица стилей CSS, если уж брать само определение, это язык описания внешнего вида документа. То есть за структуру страницы отвечает HTML, а за всё оформление именно таблицы стилей CSS. Я собрал здесь информацию, которая позволит Вам свободно использовать таблицу стилей. Я не буду писать о том, как необходимо ее знать, потому что и так понятно — без нее Вы не сможете привести сайт в более менее нормальный вид. Если кто-то только начинает изучать CSS стили, то этих материалов хватит чтобы начать изучение CSS.

1. Базовые вещи

Начну с самых основ. Когда я начинал вести этот сайт, я написал небольшие уроки по изучению таблиц стилей CSS. Уроки хорошо подойдут как для тех кто только начинает, так и для тех кто уже кое-что знает, чтобы освежить свои знания. Там всё оформлено в картинках и на реальных примерах.

Маленькое отступление: когда я сам начинал изучать тему сайтостроения, я выучил практически все HTML теги и они меня не сильно вдохновили. Но после того как я начал изучать таблицу стилей CSS и пробовать применять каждое из свойств — мне это так сильно понравилось (я бы не создал смурфика на css, если бы мне это не нравилось). Я увидел что можно делать просто поразительные вещи только с помощью CSS. Это не язык программирования, который нужно учить месяцами. Таблицу стилей можно освоить за одну (максимум за две) недели.

Конечно, Вы не изучите абсолютно все свойства и их значения, да это и не нужно! Вам нужно знать лишь основы, чтобы Вы начали применять и использовать в своих проектах. Одним важным нюансом является то, что нужно СРАЗУ же применить свойство, которое Вы только что узнали, на реальном примере. Пусть это будет Ваш собственный сайт или же простой HTML сайт — нет разницы. Важно то, чтобы Вы своими руками попробовали написать и увидели результат.

У меня на сайте есть очень много примеров в которых используется CSS. Только категория CSS и категория CSS3 вместе содержат более 100 уроков! Когда Вы будете знать хотя бы основы, тогда Вы сможете смело менять и применять все примеры из уроков.

2. Шпаргалки CSS и CSS3

Ну вот изучили Вы основы и через пару дней всё с «успехом» забыли и, наверное, думаете что это не Ваше и всё сложно. Хочу Вас сразу немного подбодрить — я сам не знаю всех свойств CSS. Но что мне мешает посмотреть их в интернете?

Правда пока зайдешь в Яндекс или Google, потом наберешь тот запрос, который нужен. А если еще и не выдаст в поиске то что нужно. Так можно потратить очень много времени но так и не найти то, что действительно искал.

К счастью, хорошие люди составили очень полезные шпаргалки, которые не раз меня выручали. Достаточно один разобраться где что находится и затем поиск нужных свойств не составляет никаких трудностей.

Краткая шпаргалка для CSS (v2), где можно найти все самые основные свойства. Отлично подойдет для начинающих.

Подробная шпаргалка для всех свойств CSS3. Подойдет как для начинающих, так и для опытных веб-мастеров и веб-дизайнеров.

Мастер Йода рекомендует:  Stack Overflow обновила зарплатный калькулятор для разработчиков

Это просто незаменимые материалы при верстке и разработке дизайна сайта. Время на то, чтобы отвлекаться и искать в интернете описание свойств уменьшается во много раз.

Правда, как Вы понимаете, чем больше верстаешь сайты или занимаешься дизайном, тем меньше приходится заглядывать в эту подсказку, так как в памяти постоянно остаются все необходимые свойства. Но всё же иметь под рукой этот набор шпаргалок будет не лишним.

Это как в школе: даже если не пользуешься шпаргалкой, но с ней всё равно как-то на душе спокойнее �� .

Дополнение к уроку — HTML шпаргалки

Помимо CSS шпаргалок также есть HTML шпаргалки. Если забыли какой-нибудь тег, Вы всегда их можете подсмотреть в такой HTML шпаргалке. Ссылка на скачивание появится после того как Вы нажмете на одну из кнопок социальных сетей ниже этого видео.

Вывод

Если Вы начинающий, и только осваиваете азы CSS, то Вам отлично подойдут мои уроки по CSS. Материал в них изложен кратко и Вам нужно лишь повторить своими руками то, что о чем урок. А также более опытные веб-мастера смогут освежить свои знания быстро просмотрев все уроки. Также Вы можете скачать шпаргалки CSS и CSS3, которые помогут Вам не забыть основные свойства и всегда будут под рукой, в случае чего Вы можете быстро посмотреть и вспомнить необходимую информацию.

Шпаргалки для верстальщиков

Сегодняшняя статья будет полезна для верстальщиков, html-кодеров, фронт-энд девелоперов и т.п. Вобщем, для всех тех людей, которые работают с html/css кодом, для всех тех, кто превращает картинки дизайнеров в рабочие сайты.
В этой подборке мы собрали ссылки на лучшие шпаргалки в PDF, PNG и других удобных форматах. Эти шпаргалки позволяют быстро вспомнить кодовый синтаксис и облегчить вашу работу, если вы работаете с HTML/xHTML, CSS, и JavaScript (включая MooTools и jQuery). Надеемся, что вы найдёте для себя что-то полезное. Если у вас есть другие шпаргалки, которых нет в нашем списке, то можете поделиться ими в комментариях.

Шпаргалка по CSS

Шпаргалка по правилам css. Будет полезна как начинающим верстальщикам веб-сайтов, так и практикующим, ибо все мы иногда что-то забываем.

Если вы не упражняетесь ежедневно по 6-8 часов кряду, выписывая хитроумные, либо простые правила файла стилей CSS, то наверняка иной раз просто забываете, как пишется тот или иной селектор или свойство. Я и сам часто забываю.

Да вот взять, хотя бы, дурное английское слово width (ширина), или height (высота). Не знаю как другим, а я до сих пор стараюсь запомнить такие слова так, как они пишутся. То есть буквально «видтх» «хейгхт». Ибо ошибка чревата жуткими последствиями.

Согласитесь, что это не слишком удобно. Если вдруг позабыл, то приходится лезть в разные книги и выискивать там правило. На такой случай я однажды просто взял, да и выписал все, наиболее часто встречающиеся, правила и свойства на отдельный лист и распечатал его. Можно, конечно, просто оставить его на Рабочем столе в виде вордовского файла. Это кому как удобнее.

Здесь я выписал то, чем сам пользуюсь постоянно. Надеюсь, кому-нибудь это также пригодится.

Свойства шрифта в CSS

font-family: Verdana, Arial, sans-serif; — для шрифтов без засечек
font-family: “Times New Roman”, Georgia, serif; — для шрифтов с засечками

font-style: normal; — нормальный.
font-style: italic; — наклонный.

font-weight — normal или bold. Соответственно, нормальный либо жирный.

Пример: font-weight: bold;

font-size — размер шрифта. Указывается обычно либо в процентах, либо в относительных величинах em, либо в пикселях px.

font-size: 120%; или
font-size: 1.2em; или
font-size: 14px;

Свойства текста в CSS

text-align — выравнивание текста. Значения могут быть следующие: left, right, center, justify. Последний — это равномерное распределение слов в строке.

text-indent — «красная строка». Указывается либо в % либо в пикселях.

line-height — высота строки. Весьма полезная фишка, когда надо выровнять разнокалиберный шрифт.

letter-spacing — расстояние между буквами. Тоже очень полезное правило. Позволяет «сжать» буквы в слове и делает заголовки более аккуратными. Можно использовать отрицательные значения.

Например letter-spacing: -5px;

Свойства цвета и фона в CSS

color — цвет шрифта. Задается шестнадцатиричным числом вида #000000. При одинаковых числах в парах можно делать сокращенную запись #000.

но color: #f4f5f7; — обязательны все шесть чисел.

background — фон. Если мы не используем какую-либо картинку в качестве фона, то задаем так же, как и цвет для шрифта:

При использовании изображения в качестве фона:

background: #333 url(images/bg.gif) no-repeat center left; — без повтора, по центру(относительно вертикали), слева.

background: #333 url(images/bg.gif) no-repeat top right; — без повтора, вверху, справа.

background: #333 url(images/bg.gif) no-repeat bottom right; — без повтора, внизу, справа.

background: #333 url(images/bg.gif) repeat-x; — с повтором по горизонтали.

background: #333 url(images/bg.gif) repeat-y; — с повтором по вертикали.

Свойства рамки в CSS

border — рамка. Имеет толщину, цвет, фактуру и местоположение. Обычно пишется таким образом:

border: #333 solid 1px; — запись означает, что рамка темно-серого цвета, сплошная, толщиной в 1 пиксель.

Другие значения фактуры: dotted — точечная, dashed — пунктирная, double — двойная (у этой толщина должна быть никак не меньше 3 пикселей, иначе выйдет одинарная).

Местоположение рамки также легко обозначить в правилах:

border-top — вверху
border-bottom — внизу
border-right — справа
border-left — слева

Можно задать цвет или толщину рамки сразу для всех 4 сторон объекта. Например:

border-color: #ccc #f4f5f7 #333 #000; — означает, что цвет верхней рамки светло-серый #ccc, справа #f4f5f7, снизу #333, слева #000.

Точно так же можно задать и толщину.

Свойства списков в CSS

Задается свойство следующей строкой:

У маркированного списка маркеры могут быть следующего вида:

disc — круг
circle — окружность
square — квадрат
none — отсутствует

либо, если мы хотим использовать свой рисунок маркера, то так:

Понятно, что картинка bullet.gif уже должна существовать в папке с вашим сайтом.

Для нумерованных списков можно также задать различное отображение номеров:

lower-roman — римские цифры в нижнем регистре
upper-roman — то же, но в верхнем регистре
none — отсутствует.

list-style-position — положение маркеров по отношению к строчкам. По-умолчанию маркеры вынесены влево и могут выбиваться за пределы блока. Для устранения этого пишем так:

Данную шпаргалку по CSS распечатать и съесть повесить на стену! 🙂

background-position

Поддержка браузеров

IE Opera Chrome Firefox Safari
IE до 7.0 (включ.) не поддерживает значение inherit + + + +

Пример

Как позиционировать фоновое изображение:

Описание и использование

Свойство background-position задает стартовую позицию фонового изображения.

Примечание: для правильной работы данного свойства в Firefox и Opera, свойство background-attachment должно быть «fixed».

15 лучших приемов CSS, чтобы сделать вашу жизнь легче

CSS был запущен в 1997 году для помощи разработчикам веб-сайтов в проектировании и создании привлекательных веб-страниц. Каскадные таблицы стилей (CSS) — это тип языка, используемый для изменения формата и внешнего вида написанных документов. Существуют различные типы CSS, которые широко используются и поддерживаются всеми браузерами.

Когда вы начинаете использовать CSS, то сталкиваетесь с рядом трудностей. Но существуют полезные приемы, совершенствующие процесс CSS от начала и до конца, и позволяющие получить действительно грамотный код.

3 основных типа таблиц стилей CSS

Встроенный (Inline) — код вписывается в тег документа и оказывает влияние только на него.

Внедренны й (Embedded) — код «внедрен» в заголовок документа. Он влияет только на страницу, в которую «внедрен».

Внешний (External) — таблицы стилей создаются в отдельном документе. Затем они связываются с другими веб документами и оказывают влияние на любой связанный с ними документ.

Существуют 15 лучших приемов работы с CSS.

Соблюдение определенного порядка требует затрат, но дает положительный эффект. Это особенно важно при использовании CSS. Вместо того, чтобы записывать коды в том хаотическом порядке, в каком они пришли вам на ум, гораздо лучше организовать хранение кодов по определенной схеме.

Начинать следует с наиболее общих и менее важных пунктов, продвигаясь к более важным. Такой подход создает логическую структуру, облегчающую будущие редактирования CSS. Использование простых схем и структур полезно не только для будущих редактирований, но также и для будущих разработчиков.

Мастер Йода рекомендует:  9 простых шагов для тех, кто хочет стать тимлидом

Избегайте встроенных CSS

Хотя встроенные CSS полезны для некоторых применений, по некоторым специфическим причинам их следует избегать. Одним из главных доводов является то, что встроенные стили не отделяют контент от конструкции. Это делает проектирование и развитие затруднительным. Другой довод — этот стиль труднее поддерживать.

При необходимости внесения изменений в код встроенного стиля, эти изменения должны будут сделаны на каждой странице, где он содержится. И, наконец, встроенные стили CSS не просты в понимании и увеличивают размер страницы.

Разделяйте контент от дизайна

Одним из главных доводов в пользу использования CSS является раздельное хранение кодов и HTML — это облегчает верстальщику их нахождение и обслуживание. Это хорошее решение, особенно учитывая тот факт, что верстальщик веб-сайта не обязательно является и разработчиком его контента.

Дата, заголовок и подпись

Когда возникает необходимость выяснить что-то о CSS, комментарии, расположенные в верхней части кода, могут быть реально полезными. Особенно при проектировании тем и шаблонов для других. Также является хорошей практикой добавление кода образца цвета в начало кода. Это сэкономит массу времени для редактирования и изменений. Не нужно будет выяснять код цвета. Все, что нужно сделать — скопировать его.

Сохраняйте библиотеку шаблонов

Если какая-то структура часто используется, почему бы не сохранить ее копию? Это позволило бы в аналогичной ситуации в следующий раз не начинать все с нуля. Для этого извлеките все коды, которые не являются общими, и сохраните файл как шаблон CSS для дальнейшего использования.

Используйте сокращения CSS

Для быстрой загрузки таблицы стилей и сохранения времени используйте сокращения при кодировании CSS. Этот хороший прием кодирования CSS сделает таблицу стилей аккуратной и понятной.

Вам следует написать это:

Используйте полезные приемы именований

Как уже отмечалось ранее, одним из лучших доводов для использования CSS является возможность отделения стилей от контента. CSS действительно упрощает перепроектирование сайта без затрагивания HTML. Если элементы названы так, что их трудно будет отличить в будущем, то это создаст вам некоторые трудности и дополнительную трату времени. Необходимо использовать простые, но в тоже время понятные именования соответствующих элементов. Не в коем случае не называйте столбец как «столб-левый», так как при последующих операциях можно перепутать где находится часть кода, отвечающая за контент, а где непосредственно за верстку.

Используйте дефис вместо подчеркивания

При использовании старых версий браузеров CSS сбоит или не работает вовсе, если используются подчеркивания. Использование дефиса вместо подчеркивания приводит к лучшей совместимости с ранними версиями браузеров и к меньшим сбоям.

Один из лучших приемов CSS, делающих вашу жизнь легче — использовать короткую запись там, где возможно. Всегда ищите способы, чтобы сгруппировать похожие элементы, которые могли бы использовать те же самые размер шрифта, поля и цвет. Имейте четкое представление того, как CSS будет интерпретировать эти короткие пути. Порядок его просмотра подобен движению часовой стрелки от 12 — верх, право, низ и потом влево.

Более эффективно, чем это:

Избегайте использования действительно больших изображений

Использование больших изображений в качестве фона веб-страницы будет увеличивать время загрузки страницы. Хорошим решением будет использовать небольшие изображения, и если возможно, замостить ими с помощью возможностей CSS, где это необходимо.

Избавляйтесь от излишеств кода

Использование некоторых из приведенных выше советов действительно поможет сократить размер таблицы стилей. Это приведет к более быстрой загрузке страницы. Кроме того, меньшая по размеру таблица стилей легче для сопровождения и обновления. Всегда удаляйте излишние коды и объединяйте, где возможно.

Другой прием для уменьшения таблицы — не определять ноль как единицу измерения. Если поле должно быть установлено на 0, то нет необходимости писать 0px или 0cm. CSS поймет, что 0 есть ноль, независимо от единицы измерения.

Если при компиляции кода возникают ошибки, то необходимо затратить время на их поиск и исправление. Для экономии времени используйте программу W3C CSS Validator, помогающую обнаружить некоторые самые распространенные ошибки в CSS. Это бесплатное и очень удобное средство.

Используйте функцию Reset CSS

Используя Reset CSS, можно будет избежать несоответствия разных браузеров. На практике это важно для удаления полей, которые несовместимы, также как и других несовместимостей атрибутов, что приводит к тому, что веб-страницы выглядят по-разному на разных браузерах. С помощью функции Reset CSS вы добьетесь единообразия страниц при использовании различных браузеров.

Пишите сначала для Gecko, а потом настраивайте для IE и Webkit

Обычно, если CSS правильно работает для Gecko браузеров (Netscape, Firefox Mozilla, Camino, Flock), весьма вероятно, что он будет нормально работать с другими браузерами — IE and Webkit (Safari, Chrome). Для экономии времени и нервов при попытках выяснения ошибок в кодировании, лучше начинать с написания CSS для Gecko браузеров.

Хорошей привычкой будет хранить отдельно друг от друга специфичные для браузеров таблицы стилей, включая JavaScript, условные комментарии и коды со стороны сервера, необходимые для этого.
Метод отлично подходит для избежания хакерских атак на основные таблицы стилей.
Это крайне необходимо также для поддержания управляемости CSS.

В использовании CSS есть много преимуществ. Он не только позволяет сделать страницы быстро загружаемыми, но и при использовании приведенных выше 15 лучших приемов CSS делает легче не только вашу жизнь, но и проектирование и редактирование тем и шаблонов. Применение CSS дает преимущества при работе с Google. Поисковик придает больший вес контенту, находящемуся в верхней части HTML-документа. Когда «пауки» поисковых систем сканируют HTML веб-сайта, они просматривают контент, идущий первым. Используя CSS, легко создать схему, где первым появляется контент, а затем следует остальной исходный код страниц.

Применение CSS создает больше гибкости в проектах, шаблонах и темах и дает больше общедоступности, что является перспективным методом в веб-проектировании. Общедоступность означает, что в конце концов все больше людей смогут смотреть веб-сайты без всяких проблем, вызванных устаревшими методами их построения. Использование CSS не только делает жизнь легче сейчас, но и будет помогать этому в будущем.

Данная статья является переводом 15 Best CSS Practices to Make Your Life Easier подготовленная командой проекта «Сайтостроение от А до Я».

Реферат: Памятка по CSS

При верстке сайта с помощью CSS вы обязательно наткнетесь на множество проблем. И всякий раз вы будете биться головой об стену в попытках обойти очередной глюк. Данный документ призван облегчить вам процесс разработки, и служит кратким справочником, к которому вы можете обращаться всякий раз, когда столкнетесь с непреодолимым препятствием.

Если у вас есть что добавить к этому документу, оставьте свой комментарий здесь.

Данный документ переведен на французский, немецкий, испанский, итальянский, венгерский, финский, русский, японский и китайский языки.

Что-то не так? Проверьте код валидатором!

При отладке своего кода вы сэкономите уйму времени и нервов, если в первую очередь проверите его валидатором. Чаще всего проблемы с компоновкой страницы вызваны неверным XHTML или CSS.

Создавайте и тестируйте свой CSS-код сначала в современных «продвинутых» браузерах, и лишь затем — в остальных, но не наоборот

Если вы тестируете сайт в некачественном браузере, ваш код начинает зависеть от неправильного отображения этим браузером. Когда настанет время проверить сайт в браузерах, верно поддерживающих стандарты, вы наверняка огорчитесь увиденным. Таким образом, начните с передовых браузеров, а потом добавляйте к коду трюки для менее удачных. Таким образом ваш код с самого начала будет соответствовать стандартам, и вам не придётся слишком много «колдовать» для поддержки других браузеров. Сегодня самыми передовыми браузерами являются Mozilla, Safari, или Opera.

Удостоверьтесь, что желаемый эффект действительно существует.

Существуют расширения CSS, специфичные для конкретных браузеров, но не входящие в официальную спецификацию каскадных таблиц. Если вы пытаетесь применить свойство filter или отформатировать внешний вид полосы прокрутки, знайте — вы используете специфичный код, работающий только в IE. Если валидатор вдруг пишет вам, что ваш код не соответствует спецификации, скорей всего это из-за того, что в нем присутствует такое специфические расширение, и оно не будет работать в других браузерах.

Применяя плавающие блоки, убедитесь в том, что они не мешают соседям

«Плавающие блоки» коварны, и они не всегда ведут себя так, как ожидается. Если вдруг получилось так, что плавающий блок вылезает за пределы содержащего его элемента, или же он ведет себя не так, как вы хотите — удостоверьтесь в корректности того, чего вы хотите добиться. Обратитесь за подробностями к руководству Эрика Мейера.

Поля (margins) всегда «сворачиваются». Пользуйтесь вместо них отступами (padding) или границами

Если у вас вдруг появляется пустое пространство там, где оно вам не нужно, или наоборот — нету свободного пространства там, где оно вам нужно, это скорей всего происходит из-за полей (margins), которые имеют привычку «сворачиваться». AndyBudd в своей статье описывает этот глюк и дает советы, как его избежать.

Старайтесь не задавать элементу одновременно отступ/границу И фиксированную ширину

IE5 неправильно реализует блочную модель CSS, из-за чего ваша страница может превратиться в кашу. Существует несколько уловок обойти этот глюк, но лучше всего вообще с ним не связываться: задавайте нужный отступ в родительском элементе, а фиксированную ширину — в дочернем.

Как избежать мелькания чистого HTML в IE

Если вы используете внешнюю таблицу стилей, подключая ее с помощью директивы @import, то рано или поздно вы заметите, что IE успевает «сверкнуть» на экране неформатированным HTML прежде, чем применит к нему стили. Эту проблему можно решить следующим образом.

Не используйте min-width в IE

Он не поддерживает это свойство. Но он рассматривает width как min-width в некоторой степени, поэтому с помощью небольшого фильтра для IE, вы можете получить точно эффект min-width в IE.

Если что-то не так, уменьшите ширину

Иногда из-за погрешностей округления сложение вида 50% + 50% даёт в итоге что-нибудь типа 100.1%. Это приводит к тому, что заботливо созданная вами вёрстка «расползается» в некоторых браузерах. Лечится просто: уменьшайте ширину с 50% до 49% или даже 49,9%.

IE показывает все не так, как надо?

Возможно, вы напоролись на знаменитый «Peekaboobug», особенно если баг проявляется при наведении курсора на ссылку. Смотрите решение в статье «Позиция — это наше всё!»

Будьте осторожны, задавая стили для «якорей»

Помните о порядке описания ссылок.

Задавая псевдоклассы для ссылок, делайте это всегда вот в таком порядке: Link, Visited, Hover, Active (запомните этот порядок с помощью слов «LoVe/HAte»). Любые другие комбинации не работают так, как надо. Если требуется использовать также и псевдокласс :focus, то порядок описания будет таким: Link, Visited, Hover, Focus, Active (LVHFA для запоминания чего Мэтт Холи придумал фразу «LordVader’sHandleFormerlyAnakin»)

Помните о правиле «TRouBLEd» для границ.

Значения для границ, полей (margins) и отступов (padding) сокращённо описываются в таком порядке: по часовой стрелке в направлении Top, Right, Bottom, Left (верхнее, правое, нижнее, левое). Таким образом, запись margin: 0 1px 3px 5px; означает, что верхней границы нет, левая равна пяти пикселям ну и так далее.

Явно указывайте единицы измерения у ненулевых значений

Спецификация CSS требует указывать единицы измерения для всех величин, связанных с размерами, отступами или шрифтами (единственное исключение — line-height, как это ни странно). Поведение отдельных браузеров в ситуациях, когда единицы измерения не указаны, может быть совершенно неожиданным. Что касается ноля, то ноль есть ноль независимо от того, измерять ли его пунктами, пикселями или чем-то ещё. Единицы измерения для него не нужны. Пример: padding: 0 2px 0 1em;

Тестируйте различные размеры шрифта

«Продвинутые» браузеры типа Mozilla и Opera позволяют менять размер шрифта вне зависимости от единиц, в которых он задан. У некоторых пользователей непременно шрифты будут настроены так, что их размер в браузере окажется меньше или больше вашего. Пытайтесь оптимизировать ваш код под максимально возможный диапазон размеров шрифта.

Не забывайте о прописных и строчных буквах

Некоторые броузеры строго относятся к регистру букв. Если вы назвали свой класс «homePage», старайтесь и в стилевых таблицах использовать в точности такое же имя, так как в строгих броузерах (таких как Mozilla) имя «homepage» не эквивалентно «homePage».

Тестируйте, включив стили в код страницы; публикуйте в Сети, убрав стили во внешний файл.

Работая со стилями, размещёнными в HTML-коде страницы, вы не столкнетесь с возможными ошибками при тестировании, связанными с кэшированием. Это особенно важно при работе с некоторыми браузерами на Mac-платформе. Но не забудьте перед переносом сайта в сеть вынести все стили во внешний файл и подключить его через @import или
.

Работая над ошибками позиционирования, добавьте блокам чёткие границы

Универсальное правило типа div может сослужить огромную службу при поиске ошибок позиционирования. Но добавив границы для отдельных элементов, вы сможете точно определить места, где блоки налазят друг на друга или же где появляется лишнее пустое пространство, что не всегда легко обнаружить.

Не используйте одинарных кавычек в описаниях путей для изображений

Задавая путь к фоновому изображению, откажитесь от навязчивого желания заключить его в кавычки. В них нет необходимости, кроме того, IE5 для Mac на этих кавычках просто заклинит.

Не подключайте пустые внешние файлы стилей в надежде заполнить их «когда-нибудь в будущем»

IE5 для Mac заклинит на пустом файле, и время загрузки страницы возрастёт. Вместо этого поместите в файл хотя бы одно стилевое правило (или даже просто комментарий) — и MacIE снова вернется к жизни.

Кроме того, есть некоторые аспекты теории, которые не относятся напрямую к функциональности вёрстки, но, тем не менее, их следует соблюдать при разработке:

Упорядочьте свой CSS файл

Сопровождайте каждую группу стилевых правил своим комментарием, группируйте сходные по смыслу селекторы, определите для себя правила наименования селекторов и следуйте им неукоснительно, визуально «отбивайте» селекторы пробелом (рекомендуем использовать именно пробел, а не табуляцию — это условие кроссплатформенности) и соблюдайте порядок свойств.

Именуйте классы и идентификаторы, исходя из их назначения, а не внешнего вида

Создав класс .smallblue и решив впоследствии поменять в нём текст на большой и красный, вы тем самым перечеркнёте смысл его названия. Вместо этого используйте классы типов .copyright и .pullquote. (опираясь на функциональное назначение класса)

Полагайтесь на CSS-фильтры лишь как на самое последнее средство

CSS-хаки и фильтры позволяют выборочно применять стили (или не применять — и такое бывает) к различным элементам. Избегайте применения их по любому поводу, пытайтесь найти более кроссбраузерные решения. Это порой здорово сохраняет нервы и время. На всякий случай вот огромный список CSS-фильтров.

Чем легче CSS-файл, тем меньше требуется времени на его загрузку. По возможности группируйте селекторы, полагайтесь на наследование свойств, и уменьшайте объем текста, используя короткую запись свойств.

Применяя методы замены изображений, не забывайте о доступности

Классический метод замены изображения «FIR» создает проблемы при чтении страниц голосовыми браузерам, и в случаях, когда пользователь отключил загрузку изображений. Однако этому методу есть альтернативы.

15 шпаргалок по CSS, которые сохранят время и нервы

Виртуальный мир является своеобразным Alter Ego мира реального…

Шпаргалка по CSS

Пользуясь тем, что данную шпаргалку можно свободно распространять, я сделал себе копию перевода пояснения к ней и копию самой шпаргалки – как для своего личного пользования, так и для пользователей городского интернета. Короче говоря, смотрим текст ниже.

Список свойств

Синтаксис

Селекторы

Псевдо-селекторы

Псевдо-селекторы используются для определения стилей элементов, которые либо не существуют, либо находятся в определенном состоянии. В данном разделе представлен их список.

Пожалуйста, обратите внимание, что я не упомянул в списке псевдо-селекторы :before и :after. Я посчитал, что информация о них слишком сложна, чтобы включать ее в данный список и при этом сохранить удобство работы с ним.

Медиа-типы

Блочная модель

Единицы измерения

Наследуемые свойства

Наследование — это еще одна тема, с которой постоянно возникают проблемы, не только у новичков, но и опытных разработчиков. Элемент, расположенный внутри другого элемента, получает те же свойства, что и его родитель. Например, если вы определите шрифт для элемента

Ну, теперь, когда вы разобрались с тем, что написано в шпаргалке, распечатайте ее.

Мастер Йода рекомендует:  10 рисков для безопасности вашего приложения
Добавить комментарий
Название: Памятка по CSS
Раздел: Рефераты по информатике, программированию
Тип: реферат Добавлен 11:16:36 27 января 2005 Похожие работы
Просмотров: 248 Комментариев: 15 Оценило: 5 человек Средний балл: 4.6 Оценка: неизвестно Скачать