Существует множество советов по разработке веб-разметки CSS, и начинающие друзья часто с ними не знакомы. По одной-двум небольшим проблемам может потребоваться много времени, чтобы разобраться. Хотя этот аспект уже много раз упоминался в документах 52CSS.com, многие друзья до сих пор допускают ошибки по этим вопросам. Давайте сегодня рассмотрим эти методы CSS. Возможно, вы не до конца их понимаете. Вы можете поискать на 52CSS.com, чтобы расширить свои знания.
1. Тег ul по умолчанию имеет значение заполнения в Mozilla, но в IE значение имеет только поле.
2. Один и тот же селектор класса может появляться в документе неоднократно, но селектор идентификатора может появляться только один раз. Используйте и класс, и идентификатор для определения метки в CSS. Если определения повторяются, определение, сделанное селектором идентификатора, является допустимым, поскольку вес идентификатора больше, чем вес класса.
3. Дурной способ настройки совместимости (IE и Mozilla):
Новички могут столкнуться с такой ситуацией: атрибут одной и той же метки отображается нормально, если в IE ему присвоено значение A, но в Mozilla для нормального отображения необходимо установить значение B, иначе они поменяются местами.
Временное решение: селектор {имя свойства: B !important; имя свойства: A} иногда может не работать. Вы можете найти больше решений для ошибок на 52CSS.com.
4. Если между группой вложенных тегов требуется некоторый интервал, оставьте его атрибуту поля тега, расположенного внутри, вместо определения заполнения тега, расположенного снаружи.
5. Для значка перед тегом li рекомендуется использовать фоновое изображение вместо изображения в стиле списка.
6. ИЭ не может отличить отношения наследования от отношений отца и сына. Все они являются отношениями наследования.
7. Добавляя селекторы в свои теги, не забудьте добавить комментарии к селекторам в CSS. Вы поймете, почему вы это делаете, когда позже измените свой CSS. Также предостережение: не сходите с ума.
8. Если вы установите темное фоновое изображение и яркий текстовый эффект для метки. На этом этапе рекомендуется установить более темный цвет фона для вашей метки. Поскольку изображения теряются, текст остается читаемым.
9. Определяя четыре состояния ссылки, обратите внимание на порядок: Ссылка посещена, наведите курсор на активную.
10. Пожалуйста, используйте фон для изображений, которые не имеют ничего общего с содержанием. Всегда не забывайте отделять презентацию от содержания.
11. Определенный цвет может быть сокращенно #8899FF=#89F.
12. Таблицы по-прежнему полезны в некоторых аспектах. Когда вы сталкиваетесь с таблицей данных, не ненавидьте ее.
13. <script> не имеет атрибута языка и должен быть написан следующим образом: <script type="text/javascript">
14. Идеальная однопиксельная схематическая таблица (может пройти тест в IE5, IE6, IE7 и FF1.0.4 или выше)
таблица {граница-коллапс: свернуть }; td { граница: # 000 сплошной 1 пиксель } |
15. Отрицательные значения полей могут играть роль в относительном позиционировании, когда метка использует абсолютное позиционирование. Когда страница отображается в центре, атрибут left:XXpx не подходит для слоев, использующих абсолютное позиционирование. Хорошая идея — разместить этот слой рядом с меткой, которую нужно расположить относительно, а затем использовать отрицательные значения для полей.
16. При использовании абсолютного позиционирования значение поля можно использовать для позиционирования относительно собственного положения, которое отличается от позиционирования таких атрибутов, как верхний и левый относительно края окна. Преимущество абсолютного позиционирования в том, что оно позволяет другим элементам игнорировать его существование.
17. Если текст слишком длинный, измените длинную часть на многоточие и отобразите его: недопустимо в IE5 и FF, но может быть скрыто, допустимо в IE6.
| <DIV STYLE="ширина: 120 пикселей; высота: 50 пикселей; граница: 1 пиксель сплошной синий; переполнение: скрыто; переполнение текста: многоточие"> <NOBR>Например, есть строка текста, которая настолько длинная, что ее невозможно отобразить в таблице в одну строку.</NOBR> |
18. Если могут возникнуть проблемы с дублированием текста, вызванные комментариями в IE, вы можете изменить комментарии на:
<!–[if !IE]>Поместите сюда свой комментарий…<![endif]–> |
19. Как вызывать внешние шрифты с помощью CSS
грамматика:
| @font-face {font-family:name;src:url(url);sRules} |
Ценить:
имя: имя шрифта. любое возможное значение атрибута font-family url(url): укажите файл шрифта OpenType, используя абсолютный или относительный URL-адрес. sRules: определение таблицы стилей |
20. Как центрировать текст в текстовом поле формы по вертикали?
Если использование высоты строки и групп высот не имеет эффекта в FF, можно определить верхнее и нижнее отступы для достижения желаемого эффекта.
21. Небольшие проблемы, на которые следует обратить внимание при определении тега A:
Когда мы определяем a{color:red;}, он представляет стили четырёх состояний A. Если мы хотим определить состояние, в котором находится мышь, просто определите a:hover. Остальные три состояния находятся в A. определенный стиль. Если определен только один a:link, не забудьте определить остальные три состояния!
22. Не все стили нужно сокращать:
Если p{padding:1px 2px 3px 4px} определен перед таблицей стилей, в последующий проект добавляется другой стиль с верхним отступом 5 пикселей и нижним отступом 6 пикселей. Нам не обязательно писать p.style1{padding:5px 6px 3px 4px}. Его можно записать как p.style1{padding-top:5px;padding-right:6px;} Вам может показаться, что такой вариант не так хорош, как исходный, но задумывались ли вы об этом? Метод повторно определяет стиль. Кроме того, вам не нужно выяснять, каковы исходные значения нижнего и левого заполнения! Если предыдущий стиль P изменится в будущем, стиль p.style1, который вы определили, также изменится.
23. Чем больше веб-сайт, тем больше стилей CSS будет. Прежде чем начать, проведите полную подготовку и спланируйте, включая правила именования. Разделение блоков страниц, внутренняя классификация стилей и т. д.
24. Усечение китайских символов фиксированной ширины: переполнение: скрыто; text-overflow: ellipsis; white-space: nowrap; (Однако он может обрабатывать только усечение текста в одной строке, а не в нескольких строках.) (IE5 и выше) FF не может, Оно только прячется.
Если вы многого не понимаете, не беда. Запишите эти навыки и часто заходите на 52CSS.com, чтобы проверить их. Вы обязательно что-нибудь получите. Вы также можете ввести интересующий вас контент в поле поиска слева для поиска. Вы можете оставлять комментарии и добавлять советы по CSS.