Htmlcss — Помогите решить проблему HTML и CSS

Содержание

Почему вам пригодятся знания HTML и CSS, даже если вы думаете, что это не так

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

Если для моего проекта нужен будет сайт, то я найму дизайнера и всё будет хорошо. Так?

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

Разве всё остальное не сделает за меня CMS?

Не всегда. Для какой-нибудь из ваших потребностей вы можете не найти пункта в панели управления CMS. Невозможно реализовать настройки абсолютно для всего через «админку» — туда обычно выводят только самые необходимые и часто используемые настройки.

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

Но ведь для этого придётся много всего выучить?

Да, для этого придётся потратить какое-то время на изучение основ языка разметки HTML и язык описания таблицы стилей CSS. Это можно сделать эффективно, например, пройдя курс «Веб-мастер», который предлагает 5 месяцев обучения и 2 месяца командной стажировки в крупных IT-компаниях и проектах.

Причем учить можно и эффективно, и бесплатно — например, с интенсивом «Основы веб-разработки».

Хорошо. Но ведь если мне не нужен сайт, то не нужен и HTML?

Это не совсем так. Веб-интерфейс — самый универсальный способ взаимодействия с пользователем. Благодаря развитию современных браузеров, он одинаково хорошо отображается и на Android, и на компьютере, и на iPad. Поэтому зачастую для приложений, которым требуется поддержка на многих платформах, выбирается именно веб-интерфейс — на десктопе он может отображаться в виде обособленного приложения, а на других платформах — в виде браузерного приложения. Так, например, модуль Qt WebKit позволяет создавать интерфейс клиентского приложения с использованием техники разработки веб-интерфейсов.

Мой проект не связан с веб-технологиями. Мне всё ещё нужно уметь верстать?

Не обязательно. Но, например, с помощью фреймворка Electron для Node.js можно разрабатывать и обычные десктоп-приложения, используя только веб-технологии. Это очень удобно: одни и те же навыки подойдут для любых целей.

А эти знания будут востребованы на рынке труда? Стоит ли тратить время?

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

HTML Стили — CSS

Стилизация HTML с CSS

CSS означает каскадные таблицы стилей.

CSS описывает, как HTML-элементы должны отображаться на экране, бумаге или на других носителях.

CSS экономит много работы. Он может контролировать расположение нескольких веб-страниц все сразу.

CSS можно добавлять к элементам HTML тремя способами:

  • Встроенный — с помощью атрибута Style в элементах HTML
  • Internal -с помощью

HTML5 и CSS3 — начнём верстать. Часть 1

Из серии статей «HTML5 и CSS3 – наступает время пользоваться»

Продолжение статьи Чем нас радует CSS3

Теперь мы готовы к тому, чтобы запачкать наши руки в типографской краске. Почувствуйте себя верстальщиком в типографии середины 20-го века. Ритмичный шум печатных станков, запах свежей печати, щелчки задвигаемых на своё место латунных буковок. Большие рулоны девственно чистой газетной бумаги, ожидающие получить на себя порцию тиражной информации. И вы, сидящий за наборным станком, укладываете в нужное место информационный блок …

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

Для выполнения заданий вам потребуются (будет повод обновиться):

Программное обеспечение или ресурс Требуемая версия
Notepad++, или любой текстовый редактор,
который не добавляет лишнего
в начало файла с кодировкой utf-8
Mozilla Firefox
Opera
Chrome
4+
11.10+
11+

Если интересно, вы можете проверить на сколько ваш веб-браузер поддерживает стандарт HTML5. Пройдите по ссылке http://html5test.com, там вы увидите баллы, сумма которых формируется по количеству поддерживаемых пунктов из стандарта. На момент написания статьи, на моей машине (Ubuntu10.10), Opera11.10 набирала 258 баллов, а FireFox4 всего лишь 240. Интересно, что у вас?

В этом тьюториале, мы:

  • создадим с вами страницу по стандарту HTML5
  • воспользуемся новыми семантическими элементами,
  • немного порисуем,
  • проверим как выводится видео на нашей странице,
  • проверим работу новых элементов формы.

Для работы нам будет достаточно создать один HTML-файл index.html и один CSS-файл styles.css. В странице по ходу выполнения заданий появятся скрипты, так что будьте готовы, к тому что ваш браузер предупредит вас об этом. Нужно будет разрешить выполнение скриптов на странице.

Готовим каркас страницы

Браузер должен знать страницу в лицо! Если вы не расскажите ему кто она такая и откуда, то он включит режим совместимости и вам придётся гадать — “как слово ваше отзовётся” в браузере клиента. Чтобы до такого не дошло, вам необходимо записывать в самом начале страницы правильный тип документа, соответствующий коду страницы.

Видимо, услышав мольбы верстальщиков, парни из W3C сжалились, и для стандарта HTML5 сделали коротенький тег . Любая веб-страница, поддерживающая последний стандарт, должна начинаться с него. А помните как было раньше … publictransitional или strict … ещё и адрес файла описания типа документа, ну ооочень длинно.

Приступим. Создайте себе папку на рабочем столе, в ней будет лежать наша сладкая парочка HTML и CSS файлы. Создайте простой текстовый файл index.html, в кодировке utf-8. Эта кодировка символов уже давно стала стандартной для всех не англоязычных текстов.

Первая строка — пишем тип документа.
Вторая — открываем главный тег всего документа html и указываем параметр lang, записав там базовый язык страницы — русский.
Переходим к заголовку.
Первое что укажем — кодировка символов документа.
Затем заголовок, для окна браузера.
Потом, не долго думая, подключим файл стиля.
И, под конец, добавим пустой контейнер тела документа.

Всё что мы здесь описали есть в листинге №1:

Листинг 1. Базовая структура документа HTML5

Обращаем ваше внимание на то, что большинство тегов теперь стали не такими длинными как ранее. Тегу больше ничего не нужно кроме lang. Для метатега достаточно написать charset. Кроме того, для тега link не нужно указывать type.

Каркас готов, но страницу в браузер нам пока рано выставлять. Идём далее — семантические элементы страницы.

Делаем разметку контента

Разместим на каркасе семантические блоки

Теперь давайте поточнее определимся с тем, что у нас будет размещаться на странице. Будем исходить из следующего: нам нужно по максимуму использовать новые семантические элементы HTML5.

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

Нормальный сброс

Расскажите про ресеты и нормалайзы, что лучше использовать? — просят наши зрители Андрей, Сергей и Юрий. Знаете, это как отвёртка и молоток — что лучше? Все хороши. Давайте копнём глубже — к самой сути проблемы, которую они по-разному решают.

HTML хорош тем, что вы набросали тегов и всё — они сразу выглядят. И во всех браузерах всё примерно одинаково: чёрным Таймсом по белому body, да с синими ссылками. Эх, красота! Но в том и дело, что почти: точные стили для всех элементов хоть и рекомендованы сегодня в HTML5, но в каждом браузере свои.

В HTML 4 было всего 78 строк стилей по умолчанию, вроде head < display: none >или text-decoration: underline для ссылок. В WebKit, Chrome и Firefox сегодня около 1000 строк стилей, в которые смело можно снаряжать археологическую экспедицию. Но мы не будем, у нас и так дел хватает.

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

Звёздочка выбирает все элементы, а дальше начинается: margin: 0, padding: 0, border: 0, Джофри, Серсея, Фрей и все остальные свойства, которые мешают вам жить. Способ довольно варварский: не только потому, что выбирает элементы, которым ничего не нужно сбрасывать, но и потому, что некоторые стили лучше не трогать, иначе всё развалится — например, элементы форм.

Следующей попыткой сделать из HTML стерильный набор кубиков, стал CSS Reset из Yahoo UI, который сбрасывал стили только там, где это было нужно. Ещё большую популярность получил Reset CSS Эрика Мейера, сделанный по мотивам Yahoo UI. Эти ресеты не только сбрасывали отступы, но и приводили к единому значению размер и семейство шрифта, выравнивание для текста и другие свойства.

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

Эти ресеты никогда не были чистыми сбросами браузерных стилей: нет-нет, да назначались цвета, выравнивание, начиналась борьба за кроссбраузерность. В итоге все проекты несли печать предпочтений конкретных авторов. Самым нейтральным из ресетов до сих пор остаётся Reset CSS Мейера, но даже он убрал вредный :focus < outline: 0 >— и правильно сделал.

Многих ресеты раздражали: для внутренних блоков с содержимым приходилось восстанавливать стили не только для списков, но и базовых текстовых элементов вроде strong, em, code и других. У Yahoo даже был CSS Base, который назначал правильные базовые стили. После ресета, который отменял неправильные. Почему бы и нет.

Николас Галлахер и Джонатан Нил зашли с другой стороны: вместо того, чтобы сбрасывать примерно одинаковые браузерные умолчания, они подробно изучили все различия и проблемы — и сделали Normalize.css. Он делает везде одинаково и решает много проблем по пути.

С Normalize вам снова приходится убирать отступы со списков. Многих это провоцирует использовать элементы попроще, но будьте внимательны — это чревато диватозом. Зато Normalize берёт на себя сложности оформления элементов форм, поведение мобильных браузеров и много мелких багов.

Видите? Совсем другую задачу решает проект. Я на днях видел сайт, на котором после Normalize.css подключают Reset CSS, чтобы оставить нормализацию, но при этом получить нейтральный конструктор. Это конечно глупости, которые приводят к распуханию глобальных стилей. Уж лучше собрать свой гибрид — кода там всего ничего.

Благо Normalize.css дотошно документирован: у каждого свойства стоит объяснение зачем оно нужно. В сомнительных местах, которые не нормализуют, а назначают более подходящие (по мнению авторов) умолчания — стоят пометки. Это помогает не просто слепо копировать его из проекта в проект, а использовать только нужные части.

Представьте, что вы в рамках проекта делаете модуль, который потом будет использоваться на другом сайте. У вас есть Normalize, а у них? Или наоборот: на ваш проект приходит сторонний модуль — а там нет Normalize и всё подогнано под браузерные баги, ну или особенности. Или даже есть Normalize, но другой версии. Так себе модульность получается.

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

Коллекция статей, уроков и примеров по HTML и CSS

Коллекция статей, уроков и примеров по HTML и CSS

Основы HTML5

Основы CSS

Типовые блоки сайта и элементы интерфейса

Полезные инструкции

Bootstrap 4 — Сборка проекта с помощью Gulp

Bootstrap — Carousel (карусель)

Bootstrap 3 — Dropdown (выпадающий список)

Bootstrap 4 — Сетка

Слайдер для сайта на CSS и JavaScript

Скрипт звёздного рейтинга для сайта

Bootstrap 3 DateTimePicker — Календарь для input

MODX — Форма обратной связи (FormIt)

JavaScript — Создание объектов. Прототипы и наследование

Изменить css класс блока и сохранить выбор в куки

Немного о CSS для начинающих

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

Один из таких ресурсов – всевозможные вебинары крупных разработчиков и IT-компаний, среди которых, на мой взгляд, особого внимания заслуживает школа разработчиков Яндекса, лекции которой я периодически изучаю и делаю для себя пометки.

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

Существует огромное количество ресурсов, которые стоит изучить и прочитать. В первую очередь, конечно, необходимо читать и изучать основные спецификации (например, здесь https://www.w3.org/Style/CSS ). Тут вам потребуется знание английского языка, с ним гораздо проще понимать и вникать в стандарты как CSS, так и HTML. Хотя там и бывают иногда переведённые отрывки на русском языке, но лучше все же изучать английский. Также в помощь сайт https://www.webplatform.org , куда заливается множество описаний спецификаций, в формате Вики, или же сайт http://stackoverflow.com , где можно задать вопросы знатокам, на которые ответят оперативно, скорее всего, в тот же день. Лично меня не раз выручал сайт htmlbook.ru, который сейчас медленно, но верно переезжает на новый домен https://webref.ru , но это скорее справочник по свойствам и значениям, где тоже, кстати, можно задать вопрос, и обычно ребята там оперативно друг другу подсказывают. И, конечно, этот сайт очень полезен в процессе практики, когда у вас хоть тресни, но что-то не работает — часто помогают, и проблема разрешается. Также довольно мощный ресурс по самостоятельному обучению — https://htmlacademy.ru/ .

Вообще, на мой взгляд, вёрстка – это довольно социально-коммуникабельная отрасль, где в команде можно выполнить работу гораздо качественнее и быстрее, нежели по одиночке. Многие загвоздки решаются коллективно, потому что кто-то из команды обязательно уже сталкивался с той или иной проблемой.

Также сейчас огромное количество специализированной литературы, обучающей в том числе. Лично я учусь в основном по книгам серии Head First, и самый первый опыт в создании сайта я получила, следуя руководству этого издания www.headfirstlabs.com/books/hfhtml. И уже в качестве дополнения изучала такие книги, как http://www.ozon.ru/context/detail/id/3881079 , http://www.ozon.ru/context/detail/id/24493075 .

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

Теория, это конечно, полезно и без нее ну никуда, но без постоянной практики трудно научиться делать что-то действительно стоящее.

Сейчас есть большое количество таких сайтов, «песочниц». На них приходишь, там есть что-то вроде textarea, куда вводишь свой код, и он моментально отображается на экране. То есть не нужно вбивать все в редакторе, обновлять браузер и так по кругу – правишь-обновляешь. Здесь сразу применяешь свойство и видишь, как оно работает. Примеры сайтов http://cssdesk.com , http://dabblet.com , http://jsbin.com , https://jsfiddle.net – как видно из названия, они предназначены не только для CSS, но и для HTML/JS. Если интересно, о последнем можете почитать здесь https://habrahabr.ru/post/126910 . Кстати, не пренебрегайте Хабром https://habrahabr.ru/interesting , здесь тоже много полезной информации. А таком сайте, как http://codepen.io вы можете поделиться своим кодом другими ( http://www.internet-technologies.ru/articles/article_1663.ht. — вот руководство по последнему, если интересно).

2.2. Браузерные инструменты или свойства разработчика

Если песочницы отлично выполняют свою функции потыкать/поиграть/попробовать, то, когда вы будет делать свой проект, то, конечно, захотите что-то подправить именно в нем, и посмотреть, как эти изменения работают в браузере. Для каждого браузера есть свои инструменты. Если кто-то не знает, то работает это так: открываем любую страницу, правой кнопкой мыши щелкаем — далее «Просмотреть код», и видим внизу или слева открывшееся окно. Нажав на любой элемент слева, видим его в окне браузера. Справа же есть все css-свойства, примененные к этому элементу, и если мы хотим что-то быстренько посмотреть-поменять, то прямо в свойствах разработчика меняем, или вообще отключаем свойство, и смотрим результат.

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

2.3. Редакторы кода.

Ну, это наш основной инструмент практики. В общем то, редакторы могут быть любыми. Начиная от банального Notepad+ и заканчивая такими мощными штуками как Sublime Text, DreamViewer, Web Storm. Отчасти, все эти редакторы похожи по принципу работы, главное, чтобы редактор поддерживал подсветку синтаксиса или какие-то сниппеты/автодополнения, которые могут облегчить вам работу. Важно также, чтобы редактор поддерживал автообновление страниц, чтобы сразу видеть изменения в браузере. Имеют механизм «живого обновления» страницы такие приложения, как Live Reload, Code Kit, Grunt. Чтобы определиться, что подходит лично вам для разработки, стоит самим покопаться в многообразии средств и выбрать то, что больше всего удовлетворяет вашим потребностям.

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

Самые известные из них – SASS, LESS, Stylus, Roole. SASS, пожалуй, самый старый из них и распространенный. LESS – самый простой и имеет меньше всего возможностей. Но начинать с препроцессоров, пожалуй, не стоит. Имеет смысл писать чистый CSS, смотреть, как он работает (можно в «песочницах», чтобы не заморачиваться первое время), но позже стоит посмотреть и попробовать препроцессоры и выбрать для себя тот, который вам нравится и подходит вам по задачам.

Существует огромное количество фреймворков, т.е. готовых наборов CSS и HTML, написанных и в том числе с помощью препроцессоров. Например, «бутстрапы» (самый известный из них – Twitter Bootstrap) — наборы уже готовых классов с CSS-свойствами, чтобы быстренько сделать какую-то определенную страничку, которая выглядит нормально и стандартно. При подключении файлов фрэймворков в проекте мы можем использовать определённые в них классы и сниппеты разметки, которые будут работать по уже описанным правилам и иметь установленный внешний вид (например, кнопки, поля ввода, таблицы и пр.). Таким образом мы экономим время, например, на описание расположения блоков дизайна, их размеров в зависимости от разрешения, внешний вид полей формы, кнопок и их состояния. Фреймворков очень много, и начинать с них тоже не советуется, поскольку код в них довольно специфичен и заточен под определенные задачи. Лучше делать свой код и учиться на своих ошибках, нежели копипастить код из готовых фреймворков.

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

Просьба к опытным товарищам Пикабу — не ругайте сильно, если мои рекомендации в чём то ошибочны. Критикуя — предлагай! Буду рада конструктивной критике и я, и наверняка те, кому полезна эта статья.

Урок 39 Основа языка CSS: это должен знать каждый блоггер

CSS (Cascading Style Sheets, каскадные таблицы стилей) – язык, позволяющий управлять внешним видом блога. Язык не так сложен для изучения, но мне хватает мизерных знаний по CSS. Изучение основы CSS позволит Вам вполне уверенно “владеть” дизайном Вашего блога.

За внешний вид блога на WordPress отвечает файл style.css, находящийся в папке темы. И, как Вы, наверное, поняли, если захотите поменять шрифт или, к примеру, цвет фона нужно открыть style.css текстовым редактором Notepad++, найти нужную строку, изменить данные и сохранить. Результатом будет изменение внешнего вида блога.

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

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

Теория по CSS

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

Шрифт

font-size — размер шрифта (font-size: размер шрифта в пикселях (px), в процентах (%) и т. д.)

font-family – шрифт для элемента (font-family: имя_шрифта)

font-weight – толщина шрифта (font-weight: bold или normal и т. п.)

font-style – стиль шрифта (font-style: normal (нормальный) или italic (курсив) и т. п.)

font – объединение всех свойств для шрифта (font: стиль_шрифта (необязательно) размер семейство)

Размер

width – ширина элемента (width: значение в пикселях, процентах и т.п.)

height – высота элемента (аналогично width)

max-width – максимальная ширина элемента (по аналогии)

min-width – минимальная ширина элемента (так же как и width)

max-height – максимальная высота элемента;

min-height – минимальная высота;

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

text-align – горизонтальное выравнивание (text-align: по центру (center) или по ширине (justify) или по левому краю (left) и т. д.)

vertical-align – вертикальное выравнивание;

line-height – высота строки (line-height: в пикселях (px), в процентах (%) и т.д.) Также можете использовать множитель: например, значение 1.5 означает полуторный интервал между строками:

color – цвет текста (color: цвет). Цвета могут задавать по-разному:

  1. используя название (red, green, white и т.д.);
  2. по шестнадцатеричному значению, перед кодом не забудьте ставить символ решетки – #

Тут я задал цвет черного цвета. Узнать какой код соответствует цвету, Вы можете скачав программу HTMLCol. Она очень удобна, я давно ею пользуюсь и Вам советую ее скачать, так как в будущем она нам еще пригодится.

letter-spacing – увеличение / уменьшение расстояния между буквами (letter-spacing: значение (в пикселях и т.п.) | normal – нормальный интервал):

text-transform – выбор написания слова заглавными/строчными буквами (text-transform: lowercase (все буквы будут строчными) | uppercase (все символы будут заглавными)

background – фон страницы (background: [background-attachment || background-color || background-image || background-position || background-repeat], ни одно свойство не обязательное, поэтому можно использовать лишь то, что необходимо):

Выше приведен пример, где задан цвет фона, затем идет путь к фоновому изображению и по вертикали.

background-position – стартовая позиция фона страницы (background-position: [left | center | right | проценты | значение] || [top | center | bottom | проценты | значение]):

background-color – цвет фона (background-color: цвет);

background-attachment – фон страницы фиксированное или прокручивается вместе с “ползунком” (background-attachment: fixed | scroll)

background-image – изображение фона (background-image: url(путь к файлу)):

background-repeat – повторение фонового изображения (background-repeat: no-repeat | repeat | repeat-x | repeat-y )

Позиции

float — определение выравнивания объекта (float: left | right)

Выше приведен пример обтекания по правому краю.

visibility – возможность сделать любой объект видимым или невидимым (visibility: visible | hidden):

Границы

border – рамка (граница) элемента (толщина стиль цвет_рамки):

  • solid – сплошная рамка
  • dotted – точечная
  • dashed – пунктирная

Остальные виды рамок, которые перечислены ниже, работают аналогичным способом.

border-top – верхняя рамка

border-right – правая рамка

border-bottom – нижняя рамка

border-left – левая рамка

Отступы

margin – величина отступа (сверху, справа, снизу и слева соответственно);

margin-top – верхний отступ;

margin-right – правый отступ;

margin-bottom – нижний отступ;

margin-left – левый отступ;

padding – свойства поля (сверху, справа, снизу и слева соответственно);

padding-top – верхнее поле

padding-right – правое поле

padding-bottom – нижнее поле

padding-left – левое поле

Псевдоклассы

:hover – стиль объекта при наведении мышкой (элемент:hover < . >)

:visited – стиль посещенной ссылки (A:visited < . >)

Более подробно изучить язык CSS Вы можете на htmlbook.ru

Практика по CSS

Итак, что же делать, если Вы вдруг решили поработать со шрифтом блога? Я предпочитаю делать следующее:

  1. Открываю блог, используя Mozilla Firefox и внутри нее подгружаю FireBug
  2. Нажимаю на стрелочку и выбираю объект на блоге (подробнее как это делать я рассказывал в предыдущем уроке)
  3. В правой части FireBug ищу код, который отвечает за шрифт (напомню это font-family):
  4. Как видите, в моем случае по умолчанию стоит шрифт Georgia. Честно, мне он не нравится. Пожалуй, я поставлю Tahoma. Для этого я просто дописываю слово Tahoma как первое слово после font-family:
  5. Размера шрифта я оставил 12px. Изменения в Firefox видны сразу, если меня все это устраивает, я просто открываю файл style.css нахожу там 14ую строку (в каком файле искать ее и в какой строке я указал стрелкой на рисунке выше). И в этой 14ой строке (вернее до куда она протягивается) дописал шрифт, который мне нужен (т. е. Tahoma):
  6. Сохранил файл и обновил на сервере. В результате теперь в статьях у меня стоит шрифт Tahoma.

Аналогичным образом Вы можете изменить, что угодно на блоге. Использование дополнения FireBug для Firefox делает редактирование CSS очень удобной. Не нужно 50 раз редактировать style.css, обновлять на сервере и смотреть нравится ли так.

Поэтому для редактирования CSS, сначала смотрите изменения в Firebug, только потом изменяете в style.css и обновляете на сервере. Таким образом, Вы сэкономите кучу времени.

Мелкие изменения, которые я совершил на демонстрируемом блоге (если Вы активный читатель уроков WordPress, Вы знаете адрес того блога):

  1. Поменял шрифт в статьях с Georgia на Tahoma (как это сделать показал выше);
  2. Изменил цвет наведения на ссылки:
    1 прямоугольник был, и отвечает за цвет ссылки h1..
    2 прямоугольник я добавил: просто скопировал с первого и изменил следующее:
    3 – добавил двоеточие и слово hover, т.е. означает, что поменял стиль ссылки при наведении на него;
    4 – изменил цвет ссылки.

Пожалуй, все. Будет еще пару уроков по изменению дизайна, по доработке, потом пойдут очень интересные уроки по дальнейшей жизни блога. Извиняюсь за то, что долго не писал, просто, являясь студентом, не находил времени на блог (сами понимаете – запара �� ).

Планирую с 1 июня улучшить качество уроков, да и всего блога в целом. Будут интересные конкурсы, также хочу попробовать записать видеоуроки. Еще в планах разработать собственный уникальный шаблон для WPnew.ru, чтобы он был более быстрым и по дизайну характеризовал меня.

В общем, летом я активно буду заниматься своими блогами, так что, обязательно подпишитесь на RSS или на электронный ящик в форме, который расположен ниже. Вы же не хотите пропустить ничего интересного? ��

HTML и CSS

Этот раздел сайта полностью посвящен двум языкам создания сайта, а именно HTML и CSS. Здесь вы сможете поэтапно изучить языки, узнать все от основ до самых сложных моментов.

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

В данном разделе размещены уроки по стандартам языка HTML5 и CSS3, соответственно, если же будут какие либо более новые версии данных языков, они так же будут отражены в новых уроках этого раздела, и вы обязательно узнаете как сделать сайт html css.

1. Что такое html и css

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

2. Первая страница на html

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

3. Оформление CSS таблицы

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

4. Селекторы CSS

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

5. html работа с текстом

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

6. CSS работа с текстом (Часть 1)

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

7. CSS работа с текстом (Часть 2)

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

8. Html вставка изображения

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

9. CSS свойства изображения

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

10. Создание гиперссылок html

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

11. Создание таблицы в html

Таблицы в html это один из достаточно больших разделов, при этом, достаточно интересный, так как их используют достаточно часто, а раньше вообще делали верстку сайта с помощью таблиц.

12. CSS стилизация таблиц

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

Нашли ошибку в тексте.
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

помогите решить проблему

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

выложи нормальную верстку, а не 26 мб! =)

так это и есть верстка :)

я уже с ней нормально намучался, доделывал после другого верстальщика.
ему нужно было из флеш сделать html css, но он бросил это дело. пришлось мне доделывать :(

Для отправки комментария вам необходимо авторизоваться.

Animista is a place where you can play with a of ready to use CSS animations, tweak them and download only those you will actually use.

Html/css — Помогите решить проблему HTML и CSS

Перевод статьи Debugging CSS с сайта benfrain.com, опубликовано на css-live.ru с разрешения автора — Бена Фрейна.

Опыта в отладке CSS у меня хоть отбавляй. Чужой код и мой собственный. Мобильные плотформы и десктопные браузеры. Всё от старых версий Internet Explorer до последних ночных сборок WebKit. Работая с людьми, я понял, что далеко не у всех налажен процесс отладки CSS.

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

А вот и мой собственный подход.

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

В целом, я делю процесс отладки на три этапа:

  • Оценка и быстрые решения
  • Локализация и воспроизведение
  • Причины и исправление

Давайте рассмотрим каждый этап, а после быстренько разберём одну CSS-проблему для примера.

Оценка и быстрые решения

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

Вот некоторые из распространённых подводных камней, которые наверняка известны любому опытному CSS-разработчику:

  • странный пробел вокруг изображения? Задайте ему display: block (изображение по умолчанию строчное, поэтому учитываются пробелы).
  • элемент неправильно ведёт себя в потоке? Вероятно, где-то установлено обтекание (float).
  • абсолютно позиционированный элемент не появляется или находится в неправильном месте или за другим элементом? Скорее всего, вы забыли установить position родительскому элементу, или случайно создали контекст наложения z-index с помощью transform или opacity .
  • псевдоэлемент не отображается? Скорее всего нужно добавить любое значение свойству content.

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

Более опытные разработчики уже знают, каких проблем можно ждать от этих особенностей CSS, и поэтому для них это «баги», с которыми можно быстро справиться. Они моментально распознают баг, в отличие от разработчиков с куда меньшим объёмом CSS-знаний. Важно понимать, что одним разработчикам быстрее понадобится переключиться на отладку по «методике», чем другим.

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

Вместо этого, в сложных ситуациях стоит определить проблемную область и буквально скопировать разметку из DOM, а после переходить к следующему этапу отладки: локализация и воспроизведение.

Полезный совет: инструменты разработчика в большинстве браузеров позволяют выбрать оборачивающий элемент и скопировать этот блок HTML-кода. В инструментах разработчика Chrome с выбранным в DOM элементом это выглядит так: «Copy > Copy OuterHTML».

Локализация и воспроизведение

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

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

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

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

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

Разметка?

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

Первое, что нужно сделать — и не пропускайте этот шаг — это проверить валидность разметки. Даже если валидатор укажет проблемы, которые нас не заботят (например, мета-теги), мы убедимся, что разметка не нарушена каким-либо образом. Задача найти пропущенные закрывающие теги, атрибуты без кавычек, и всё то, что может помешать браузеру парсить контент. Используйте для этого валидатор W3C (а лучше новую проверку разметки Майка Смита — прим. перев.).

Как только валидность разметки проверена, полезно «избавиться» от лишних браузерных стилей. Вот так:

Прежде всего, замените все элементы в разметке на div-ы (для блочных элементов) и span-ы (для строчных), а после проверьте, что элементы выбираются в CSS только по классу. Возможно, ещё потребуется поменять все перегруженные селекторы типа a.link на просто .link .

Благодаря нейтральной разметке мы удаляем любые браузерные стили/поведение по умолчанию для определённых заковыристых HTML-элементов, представляющих проблему. Особенно это касается элементов формы (как мы увидим в нашем примере).

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

Причины и исправления

Допустим, упрощение разметки ничего не изменило. Тем не менее проблема локализована и стабильно воспроизводима Теперь стоит проверить локализованный участок в других браузерах. Та же проблема всплывает в Chrome, Internet Explorer, Safari и Firefox? Если нет, кто из них понимает правильно? Если ошибка всплывает только в одном браузере, то стоит поискать среди известных багов для этого браузера.

Это известная проблема с браузером Х или конкретной версии браузера Х? Баг скоро исправят? Известны ли обходные пути, не влияющие на другие браузеры? В крайнем случае, можете добавить в код ветку с исправлением бага для нужного браузера?

Еще бывает, что требуется «безвредный» хак. Например, недавно у меня был случай, где абсолютно позиционированный блок визуально должен был размещаться в конце другого блока. left: 100% помогло везде кроме Internet Explorer (и его мобильных эквивалентов для Windows Phone 8, 8.1 и 10). В этом браузере между блоками образовался промежуток. Это походило на проблему субпиксельного рендеринга, поэтому изменение значения на 99.99% побороло Internet Explorer и и не помешало другим браузерам. Это хак. Но мы понимаем, как он работает (один браузер округляет субпиксели, а другой — нет), и поэтому этот код, если мы еще и поясним его комментарием, никому не повредит.

Грег Витворг из Microsoft также поделился некоторыми деталями округления субпикселей в браузерах. WebKit/Blink округляет до 1/64, Gecko — до 1/60 и Edge — до 1/100 (с подачи ‘smfr, разработчика WebKit )

Отладка мобильных платформ

Для мобильных устройств, если у вас физически есть требуемое устройство, а не только сообщение о баге от пользователя, и это устройство поддерживает такую функцию, ничто не сравнится с «удаленной» отладкой по кабелю. В этом плане великолепен Safari с подключенным iPhone (только для Mac), впрочем, как и Chrome на Android в паре с десктопным Chrome (Windows и Mac). Для iOS, если у вас нет под рукой конкретного устройства, весьма неплох и отладчик Safari в паре с симулятором iOS, но вы будете ограничены теми версиями iOS, которые поддерживает ваша версия Xcode. В теории, можно завести несколько версий Xcode одновременно, например, одну, которая поддерживает iOS6 и iOS7, и другую с поддержкой iOS8 и 9, но у меня это никогда не толком не срабатывало.

А как быть, если нужно разобраться с более старым мобильным устройством? Удаленная отладка тут часто не вариант. Для таких случаев полезно выработать «чутьё», какие инструменты разработчика могут помочь в решении проблем отображения какой платформы.

Например, если вы рассматриваете проблему в старой версии Safari на iOS (напр. iOS5-6) или во встроенном браузере из Android outer по вашему? Если считаете, что 400px, как указано в max-width , то я бы вас понял. Но это не так. Взгляните на это:?

Что происходит? Почему max-width не учитывается? Дам подсказку. Откройте отладчик и взгляните на панель «Вычисленные стили» («Computed Styles»).

Избавлю вас от неопределенности; по умолчания у fieldset есть вычисленная ширина, которая подстраивается под его содержимое. В Chrome это отображается в «Computed Styles» в качестве нового значения длины min-content в min-width .

Чтобы это исправить, можно добавить новое значение в свойство min-width . С min-width: 0 наше свойство max-width заработает, как надо.

Вот насколько полезной может оказаться панель «Computed Styles» в отладчике. Помните, что всё то, что вы написали, не обязательно должно вычисляться в браузере.

Заключение

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

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

P.S. Это тоже может быть интересно:

Если вам понравилась статья, поделитесь ей!

Цукерберг рекомендует:  Multi-Select c помощью MooTools
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих
25 мая 2010