HTML&CSS4 урок


Содержание материала:

Уроки CSS

Сохраните кучу времени с помощью CSS!

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

Пример

body
<
background-color:#d0e4fe;
>
h1
<
color:orange;
text-align:center;
>
p
<
font-family:»Times New Roman»;
font-size:20px;
>

Попробуйте сами »
Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает

CSS Примеры

Изучайте CSS с наглядными примерами. Более 150 примеров!

Наши примеры CSS помогут вам быстро освоить материал. С помощью онлайн редактора, вы можете редактировать CSS и, кликнув на кнопке, тут же увидеть результат. Попробуйте сами!

CSS Справочники

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

Урок 7. Блочная верстка web-сайта. Часть 1

Наиболее популярной является блочная верстка сайта или div верстка. Наш урок блочной верстки сайта поможет начинающим освоить основные приемы div верстки.

1. Основные понятия

Многие web-дизайнеры отдают предпочтение блочной верстке сайта, которая осуществляется с помощью тега

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

Рамка (border) – это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).

Поля (padding) – отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока.

Отступы (margin) – это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.

Блочная верстка сайта включает в себя блоки. Блоки, как и таблицы – это элементы, всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задается такой параметр как «обтекание» (float). Но об этом чуть позже.

В данной работе мы создадим web-страничку из блоков. Сначала создадим контейнер, в который, как в коробку сложим наши блоки. Для наглядности каждый блок будет иметь свой цвет. Конечный результат должен быть таким как на рис. 2.

Контейнер будет содержать в себе пять блоков:

TOP – шапка сайта, обычно содержит логотип компании, название, заголовки и слоганы, поиск, навигацию;

LEFT и RIGHT – левая и правая колонки, обычно содержат рекламу, навигацию, рассылку, новости и т. д.:

CENTER – содержит основной текст страницы;

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

Для теста нашего сайта нам понадобятся как минимум три самых популярных браузера – Opera, Fire Fox, Internet Explorer.

Описание web-страницы в основном делается в CSS документе.

2. «Фиксированный» дизайн методом блочной верстки

1. Создайте в блокноте новый документ с расширением css и сохраните его под именем mystyle.css.

2. Создайте HTML-документ и сохраните его в той же папке.

3. В самом начале HTML-документа впишите следующую строку:

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

Мы определили нашу страничку в соответствии с DOCTYPE под названием Strict 1.0.

Требования здесь весьма строгие – все тэги, не имеющие закрывающей пары, должны заканчиваться пробелом со слэшем / перед закрывающей угловой скобкой. Но вот ведь сам DOCTYPE тоже выглядит как тэг! Почему же у него нет этого пробела со слэшем? А просто! Захотелось так разработчикам этих строгих правил. Но это единственный случай, где правило не работает.

4. Одной строкой между тегами и присоедините документ mystyle.css к документу HTML (рисунок 3).

5. В таблице стилей наберите код как на рисунке 4.

# этот знак говорит, что элемент является уникальным атрибутом и используется в HTML документе в теге div один раз.

6. Добавьте в mystyle.css шапку сайта (рисунок 5).

7. Добавим HTML документ следующий код между тегами body (рисунок 6).

И у Вас должно получиться следующее (рис. 7).

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

8. Откройте css-документ и добавьте следующий код (рисунок 8).

Каждая строка кода имеет комментарий, заключенный в скобки /* комментарий */, который не отображается в браузере. Напомню, элементы со знаком # используются в теге div >

9. Сразу после закрывающегося тега

10. Откройте HTML-документ в браузере. Должно получиться такая div верстка (рисунок 10).

11. Теперь добавьте блок footer самостоятельно. Браузер должен показать такую блочную верстку сайта (рисунок 11).

Рассмотрим атрибуты relative и absolute.

Иногда бывает необходимо разместить какой-то блок в строго заданном положении относительно родительского.

Рассмотрим простейший код.

  1. Создайте html-документ, в теле которого разместите код, как на рисунке 12.

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

Попробуем сделать так (т.е. абсолютно позиционируем дочерний блок относительно родительского).

2. Создайте таблицу стилей, в которой наберите код из листинга на рисунке 13.

3. Проверьте web-страничку в браузере. Вот что получилось (рисунок 14). Это не то, что мы хотим, не так ли? Наш дочерний элемент ушел не к маме, а к дедушке (т.е. BODY)!

Проблема решается довольно просто: родителю дополнительно задаётся position: relative;

4. Измените код своей таблицы стилей в соответствии с рисунком 15.

5. Проверьте web-страничку в браузере. Результат на рисунке 16. Оцените разницу.

Создать web-страницу, внешний вид которой изображен ниже на рисунке 17

3. «Резиновый» сайт методом блочной верстки

В заданиях 1 и 2 мы рассмотрели «фиксированный» дизайн методом блочной верстки, т.к. все блоки имели точное значение по ширине и высоте в пикселах.

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

Задание 3. Создадим «резиновый» блочный макет как на рисунке 18.

1. Создайте HTML-документ с кодом, как на рисунке 19. Сохраните документ.

2. Создайте таблицу стилей как на рисунке 20. Сохраните документ. Вы должны получить результат ка на рисунке 18.

3. Изменяя размеры браузера, проанализируйте поведение макета.

4. Комбинированная блочная верстка

Комбинированная блочная верстка (div верстка) включает как блоки фиксированной ширины, так и блоки в процентном отношении к ширине экрана.

Задание 4. Создадим комбинированный блочный макет как на рисунке 21.

1. Создайте HTML-документ с кодом, как на рисунке 22.

2. Создайте таблицу стилей как на рисунке 23. Сохраните документ. Вы должны получить результат ка на рисунке 21.

3. Изменяя размеры браузера, проанализируйте поведение макета.

Методом блочной верстки создайте web-страницу для сайта архитектурных проектов коттеджей так, как изображено на рис. 24. Изображение для шапки сайта (shapka_div.jpg).

Требования к макету:

  • В HTML-коде не должно быть локального форматирования элементов, все оформление должно быть сделано через внешнюю таблицу стилей;
  • При наведении на ссылку «Проекты таунхаусов и блокированных домов» гиперссылка должна менять цвет (рис. 24);
  • При нажатии на гиперссылку «Проекты таунхаусов и блокированных домов» должна загружаться страница о проектах, внешний вид которой изображен на рис. 25.
  • При нажатии на логотип должна загружаться главная страница сайта (рис. 24).

Урок 1. Что такое CSS?

Здравствуй, уважаемый читатель.

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

Перед изучением CSS обязательно необходимо знать и понимать что такое html. Без знания html в css не о чем разговаривать. Поэтому ОБЯЗАТЕЛЬНО пройдите уроки по html:

Теория и практика

Что же такое CSS? CSS используется для задания цветов, шрифтов, расположения блоков и других аспектов представления внешнего вида веб-страниц. Как и в уроках HTML в CSS мы изучим только основные свойства. Потому что свойств очень много. Но для редактирования шаблонов, а также создания сайтов нет необходимости держать в памяти все свойства и тем более их значения. Мы рассмотрим только основные. Начнем с подключения CSS файла в HTML страницу:

Топ-пост этого месяца:  Stories в YouTube стали доступны большему числу издателей

Как вы заметили файл со стилями подключается с помощью тега
, который находится между тегами . Атрибут rel=»stylesheet» определяет отношения между текущим документом и документом, на который ведет ссылка, заданная атрибутом href. Атрибут href=»style.css» определяет где находится файл с таблицей стилей. Ну и атрибут type=»text/css» определяет тип данных.

Также в той же директории с html страницей создайте файл с расширением CSS. Рекомендую также для редактирования CSS использовать редактор Notepad++. Скачать его можно по ссылке Скачать Notepad++

Создайте эти два файла. Они будут необходимы для следующих уроков. Пробуйте всё прописать руками. Тогда вы лучше запомните материал.

Конспект «Знакомство с HTML и CSS»

HTML расшифровывается как «Hypertext Markup Language», то есть «язык гипертекстовой разметки».

Язык HTML отвечает за структуру и содержание страницы. HTML состоит из тегов, а тег состоит из имени, заключённого между знаками «меньше» и «больше». Примеры тегов:

Парные теги

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

В закрывающей части парных тегов перед именем ставится символ / («слэш»).

В парные теги можно вкладывать другие теги. Например, как в списках:

У вложенных тегов всегда нужно следить за правильным порядком закрытия. Вложенный тег не может закрываться позже родительского:

Не все теги можно вкладывать в другие теги, например, тег

нельзя вкладывать в


Одиночные теги

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

Сам по себе не имеет смысла. Чтобы этот тег был действительно полезен, необходимо написать внутри него адрес, ведущий к картинке. Делается это с помощью атрибута src :

У тега может быть несколько атрибутов. В этом случае они пишутся через пробел:

Например, картинке при желании можно задать размеры:

Комментарии

Код, заключённый между символами и , работать не будет. Если эти символы удалить, то код заработает, это называется «раскомментировать». С помощью комментариев обычно временно отключают какой-то код или оставляют подсказки и разъяснения.

CSS расшифровывается как «Cascading Style Sheets», то есть «каскадные таблицы стилей».

Язык CSS отвечает за внешний вид страницы.

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

Стили к тегам добавляются чаще всего при помощи атрибута class .

Например, если мы хотим, чтобы определённые стили, описанные, допустим, в классе feature-kitten , применились к тегу

, то в разметке напишем так:

CSS-правила

Можно сказать, что CSS-правило — это группа свойств и их значений, которая целиком применяется к тем тегам, на которые указывает селектор.

И выглядит это так:

Задавать стили можно не только с помощью атрибута class , но и по тегам. Селектор указывает, к каким тегам применятся свойства из CSS-правила. Селекторы по тегам работают проще всего: они выбирают все теги с подходящим именем.

В примере селектором является p , и он выбирает все теги с именем p (то есть теги

), а теги с другим именем, например h1 , не выбирает.

Когда же стилизация задаётся по классам, то стили применяются только к тегам с такими классами.

Миксование классов

У HTML-элемента может быть сколько угодно классов, в этом случае они перечисляются в атрибуте class через пробел, например:

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

Комментарии

В CSS тоже существуют комментарии, их отличие от HTML-комментариев в том, что код или подсказки пишутся между символами /* и */ .

Уроки по HTML и CSS

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

Если сумеете, представьте себе время до изобретения Интернета. Сайтов не существует и книги напечатанные на бумаге были вашим основным источником информации. Требовалось приложить значительное усилие, чтобы отыскать нужный фрагмент информации, который вы уже читали.

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

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

Оригинальную книгу вы можете прочитать и при желании купить по этому адресу: learn.shayhowe.com/html-css/

Содержание

Шэй Хоу

Специализируется на дизайне и разработке интерфейсов, о чём регулярно пишет и говорит. В настоящее время является руководителем подразделения Belly. Один из организаторов таких мероприятий как Chicago Camps, Refresh Chicago и UX Happy Hour.

Курс HTML/CSS

Интерактивный курс создания сайтов HTML и CSS с нуля — обучение HTML онлайн

С помощью видеокурса HTML и CSS вы научитесь верстать адаптивные HTML страницы. Вы самостоятельно создадите портал КиноМонстр с помощью уроков HTML и CSS, работающий как на компьютерах, так и на мобильных устройствах.

  • 66 заданий
  • 5 часов видео
  • Сертификат об окончании

О курсе

Начните обучаться верстке HTML и CSS с нуля и вы узнаете, как эффективно построить обучение основам HTML и CSS и научиться создавать веб-сайты с нуля.

В уроках HTML и CSS вы узнаете:

  • Основы верстки сайтов (html и css)
  • Как пользоваться html-тэгами div, span, p, ul, li и другими
  • Для чего нужен CSS (каскадные таблицы стилей) и узнаете о css-свойствах
  • Как использовать css-свойства margin, position, padding, color, background и другие
  • Что такое адаптивная верстка
  • Как сделать верстку сайта
  • Как пользоваться инструментами разработчика в браузере Google Chrome
  • Что такое viewport и как его использовать
  • Как создать раздел с комментариями на сайте
  • Как встроить видео в html-страницу
  • Как изменить верстку сайта в браузере
  • Как связать html-страницы между собой
  • Как сверстать меню на сайте

Верстка html-страниц(верстка сайтов) относится к Frontend(фронтенд) части разработки профессионального веб-сайта. Для Frontend разработчиков открыто большое количество вакансий и Frontend-разработчики высоко ценятся на рынке труда по всему миру.

Пройдите интерактивные задания и вы убедитесь в том, что освоить верстку html-страниц с нуля и стать фронтенд разработчиком — это под силу каждому. После завершения курса HTML/CSS мы рекомендуем проходить курс верстки Bootstrap 3 или Bootstrap 4.

План курса

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

30 лучших CSS техник для начинающих

Дата публикации: 2009-10-06

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

1. Сделайте css код доступным для чтения

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

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

Группа 1: Все на одной строке

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Группа 2: Каждый стиль получает свою собственную строчку

Обе эти практики являются вполне приемлемыми, хотя в целом считается, что вторая группа презирает первую! Просто помните — выбирайте метод, который выглядит лучше ДЛЯ ВАС. Это все, что имеет значение.

2. Держите свой css код в соответствии

Убедитесь, что CSS является последовательным. Вы должны начать разрабатывать собственный «суб-язык» CSS, что позволяет быстро давать имена. Есть определенные классы, которые я создаю почти в каждой теме, и использую то же имя каждый раз, при создании новой работы. Я, например, использую » .caption-right» Float изображения, которые содержат подпись с правой стороны.

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

3. Начните с Framework

Некоторые дизайн — пуристы, решив поиздеваться, начали использовать Framework CSS в каждом дизайне, но я считаю, что если кто-то уже создал инструмент, который ускоряет производство, то зачем изобретать колесо? Я знаю, Framework, не должны использоваться в каждом конкретном случае, но в большинстве случаев они могут помочь.

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

Я не согласен. CSS Framework — фантастический инструмент… для тех, кто умеет им пользоваться.
Это не вопрос изобретения колеса, а скорее вопрос понимания, как работает колесо.

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

4. Используйте Сброс

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

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

5. Организуйте стиль с нисходящей структурой

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

Топ-пост этого месяца:  Загрузка части контента после основного содержимого

Обобщенные классы (body, a, p, h1 и т.д.)

Не забывайте комментировать каждый раздел!

6. Смешивайте элементы

Элементы стиля иногда имеют одинаковые свойства. Вместо переписывания предыдущего кода, почему бы не объединить их? Например, ваш H1, H2 и Н3 элементы имеют одни и те же шрифт и цвет:

Мы могли бы добавить уникальные характеристики каждому из этих заголовков стилями, если мы хотим (т.е. h1 < size: 2.1em>) в конце таблицы стилей.

7. Создайте сначала HTML код макета

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

8. Используйте нескольких классов

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

Вы можете добавить сколько угодно классов (разделенных пробелами) в любой декларации.

Будьте очень осторожны при использовании имен классов «right» и «left». Я буду их использовать, но только для таких вещей, как блог. Как же так? Давайте представим, что дальше вы решите, что лучше видеть поле всплывающим слева. В этом случае, вам придется вернуться на HTML и изменить имя класса — все для того, чтобы изменить дизайн на этой странице. Это бессмысленно. Помните — HTML для разметки и содержания. CSS — для оформления.

Если вам необходимо вернуться к HTML, чтобы изменить дизайн на этой странице, то Вы делаете ошибку!

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

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

Узнайте больше о том, какие типы документа используются на List Apart.

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

Вы можете уменьшить ваш код с помощью Значительных сокращений. Для таких элементов, как padding, margin, font и некоторых других, вы можете сочетать стили в одной строке. Например, Div этих стилей:

Вы можете комбинировать эти стили в одной строке, например так:

Если вам нужна дополнительная помощь, вот всеобъемлющее руководство по свойствам CSS сокращений.

11. Оставляйте Ваши комментарии в CSS коде.

Как в любом другом языке, это замечательная идея комментировать свой код в секции. Чтобы добавить комментарий, просто добавьте / * комментарий, и * /, чтобы закрыть его, вот так:


12. Понимайте разницу между блочными и строчными элементами

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

Вот списки элементов, которые могут быть строчными или блочными:

И блочные элементы:

13. Отсортируйте свойства в алфавитном порядке.

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

Э-эх … жертвовать скоростью для лучшей читабельности? Я бы не стал- но решайте сами!

14. Используйте CSS Компрессоры

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

15. Исползуйте классы Generic

Вы обнаружите, что существуют определенные стили, которые Вы применяете снова и снова. Вместо того, чтобы добавлять особый стиль для каждого ID, Вы можете создать общие классы и добавить их идентификаторы или другие классы CSS (с использованием совета № 8).

Например, я считаю, что я использую Float: right и Float:left снова и снова в моей конструкции. Поэтому я просто добавляю классы .left и .right в мой стиль, и ссылаюсь на них в элементах.

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

16. Используйте «Margin: 0 auto» для центрирования

Многие новички в CSS не могут понять, почему вы не можете просто использовать Float: center для достижения центра влияния на блочные элементы. Если бы все было так просто! К сожалению, вы должны будете использовать

для центровки Div-а абзацев и других элементов в макете.

17. Не всегда оборачивайте элементы в DIV

Когда вы начинаете, есть соблазн обернуть элемент в Div, создать для него стиль

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

Тогда вы сможете легко добавлять стиле h1, вместо родительского Div.

18. Используйте Firebug

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

19. Меньше Hack

Избегайте использования хаков, если это возможно. Конечно, дизайн должен выглядеть одинаково во всех браузерах, но использование только хаков делает ваши дизайны трудно поддерживаемыми в будущем. Кроме того, использование сброса файла (см. № 4) может устранить почти все неровности между браузерами.

20. Умеренно используйте абсолютное позиционирование

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

21. Используйте Text-transform

Text-transform является весьма полезным свойством-CSS, что помогает «стандартизированно» форматировать текст на вашем сайте. Например, Вы желаете создать некоторые заголовки, которые прописываются только строчными буквами. Просто добавьте text-transform в заголовок стиля вот так:

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

22. Не используйте отрицательные поля, чтобы скрыть h1

Часто люди используют свое изображение для текста заголовка, а затем используют display:none или отрицательный margin для выравниванияh1 на странице. Matt Cutts, глава Webspam команды Google, официально заявил, что это плохая идея, Так как Google может подумать, что это спам.

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

23. Проверьте Ваш CSS и XHTML

Проверка Вашего CSS и XHTML поможет вам быстро найти место ошибки в коде. Если вы работаете над дизайном, и почему-то некоторые вещи не выглядят так, как нужно, попробуйте HTML и CSS валидатор и посмотрите, какие ошибки всплывают. Как правило, вы обнаружите, что вы забыли закрыть Div где-нибудь или пропустили запятую в свойстве CSS.

24. Ems против Пикселей

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

25. Не стоит недооценивать Список

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

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

Вы часто будете видеть навигационные ссылки так:

Урок CSS 4. Создание нумерованных списков

В этом, очень простом уроке, я расскажду Вам о том, как при помощи CSS создать красивый нумерованный список.
Итак, приступим.

1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о нем читайте в конце урока):

ol <
font: italic 1em Georgia;
color: #999;
>

ol p <
font: normal 0.8em Arial;
color: #000;
>

3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:

Делаем свой сайт html.

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

К концу этого урока у нас должен получиться такой сайт . Аналогичный сайт Вы уже сейчас можете сделать самостоятельно. В этом уроке я лишь продемонстрирую, как всю полученную информацию из 14 уроков грамотно объединить в одно целое (сайт).

Наш первый сайт будет состоять из файлов с которыми мы работали на прошлом уроке. Если у Вас не осталось всех файлов с 14-го урока, то скачайте их по ссылке.

После скачивания, во всех четырех файлах (index.html, audi.html, bmw.html, mercedes.html) удалите весь код, кроме тегов входящих в структуру html страницы. Папку image не трогайте, она остается без изменений.

Топ-пост этого месяца:  FAQ - Часть 9

Каркас страниц сайта.

Мы начнем создавать наш сайт с редактирования файла index.html, откройте его в Notepad.

Основной каркас страниц мы сделаем с помощью табличной верстки (урок 10, 11). В основе нашего сайта будет таблица с тремя строками. В первой строке таблицы будет писаться заголовок страницы. Во второй строке сделаем две ячейки, в одной из них будет меню, в другой фото. В третьей строке таблицы будет текст.

Каркас нашего сайта будет выглядеть так:

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

Пояснения к коду:
1) Для тега &lttable&gt мы задали атрибут border со значением 1, тем самым задав границы для таблицы. Атрибут cellspacing со значением , означает, что отступы между ячейками таблицы равны 0, то есть их нет. С помощью атрибута align и его значения center, мы выравниваем нашу таблицу по центру страницы. Атрибутом width со значением 750px мы задали ширину таблицы 750 пикселей. Высоту (атрибут height) можно не прописывать, так как у нас будет задана высота для каждой отдельной строки таблицы.

2) Теперь несколько слов о строении таблицы. Максимальное количество ячеек у нас в средней строке (2шт.) Это значит, что по правилам объединения, в каждой строке таблицы у нас должно быть по две ячейки (11 урок). Строение нашего сайта подразумевает, что в первой и третьей строках таблицы по одной ячейке. По этому для этих ячеек будет прописан атрибут colspan со значением 2. Благодаря этому атрибуту мы объединяем 2 ячейки в одну.

3) Для первой строки &lttr&gt мы задали высоту (height) 70px. В первой строке содержится одна ячейка &lttd&gt объединяющая в себе две ячейки. По этому для нее задан атрибут colspan со значением 2. Также для этой ячейки мы прописываем атрибут align и даем ему значение center, благодаря которому, текст написанный в этой ячейке будет выравниваться по центру. То есть заголовок который мы пишем, будет отображаться посередине ячейки.

4) Вторая строка содержит в себе 2 ячейки (меню и фото). В нашем сайте будут использованы фотографии, все они имеют размер 600×400 пикселей, по этому, чтобы все было ровно, мы задаем высоту нашей строки равную высоте фотографий, это значит 400px. Ширина всех фотографий 600px, по этому для второй ячейки &lttd&gt, где будет фото, мы задаем ширину 600px. Общая ширина таблицы у нас 750px, а ширина 2-ой ячейки средней строки 600px. Соответственно 1-ая ячейка средней строки будет иметь ширину 150px.

5) Для третьей строки &lttr&gt в которой будет текст, мы задали высоту 150px. Эта строка, как и первая строка, содержит в себе одну ячейку, которая объединила в себе две. По этому для этой ячейки &lttd&gt задан атрибут colspan со значением 2.

С составлением каркаса сайта мы закончили. Он будет одинаковый для каждой страницы сайта, по этому весь код со страницы index.html (в которой мы сейчас работали) мы копируем и вставляем в другие 3 файла нашего сайта (audi.html, bmw.html, mercedes.html).

Наполняем сайт контентом.

Структура сайта создана, теперь мы заполним контентом наши 4 страницы. Давайте начнем с audi.html.

1) Начнем мы с написания заголовка страницы. Заголовок прописывается с помощью тега &lth1&gt (6 урок).
На фото изображена только рассматриваемая часть кода страницы (1-ая строка &lttr&gt):

2) Теперь мы разместим меню в 1-ой ячейке 2-ой строки. Меню у нас будет состоять из 4 ссылок. Это ссылка на главную страницу (index.html) и 3 ссылки на страницы с марками авто.
На фото изображена только рассматриваемая часть кода страницы (1-ая ячейка &lttd&gt 2-ой строки &lttr&gt):

Для того, чтобы меню было расположено в столбик, после каждой ссылки в конце строки мы ставим тег &ltbr&gt отвечающий за перенос строки. Если Вы не поняли каким образом будут работать эти 4 ссылки, то перечитывайте 13 урок.

3) Сейчас мы вставим фотографию во 2-ую ячейку 2-ой строки. Мы редактируем страницу audi.html, соответственно добавляем фото автомобиля ауди. Если Вы забыли, то напомню, наши 4 фотографии лежат в папке image.
На фото изображена только рассматриваемая часть кода страницы (2-ая ячейка &lttd&gt 2-ой строки &lttr&gt):

4) Теперь у нас осталась одна не заполненная нижняя строка, в нее мы добавляем текстовое описание марки Audi. Текст который мы будем использовать в описании марок автомобилей, находится по этой ссылке .
На фото изображена только рассматриваемая часть кода страницы (3-я строка &lttr&gt):

Весь наш текст заключается в тег &ltp&gt. Если забыли, что это за тег, смотрите урок 6.

5) Страница почти готова. Для того чтобы наше творчество стало больше похоже на сайт, давайте зададим цвет фона страницы. Для этого тегу &ltbody&gt мы прописываем атрибут bgcolor и даем значение grey. Цвет фона стал серый. Теперь давайте зададим цвет фона нашей таблицы, для того чтобы она не сливалась с основным серым фоном страницы. Сделаем таблицу белой, для этого тегу &lttable&gt мы прописываем атрибут bgcolor и даем ему значение white.
На фото изображена только рассматриваемая часть кода страницы:

Если Вы все сделали верно, то при открытии через браузер, файл audi.html будет выглядеть так:

Теперь аналогичным образом пропишите код для страниц index.html, bmw.html, mercedes.html. На страницах будет меняться заголовок, фотография и текст . В результате должен получиться сайт из 4-ех страниц.

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

Интерактивные онлайн-курсы HTML Academy

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

Подробнейшие курсы
по HTML, CSS и JavaScript

Мы выбрали одно направление — фронтенд — и сделали самые подробные интерактивные курсы о веб-технологиях. Одну тысячу четыреста заданий в среднем проходят за три месяца.

28 глав — бесплатно

Четыреста девяносто интерактивных заданий — бесплатные. После их прохождения вы сможете создать свой сайт.

Обучение на практике

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

От новичка до профессионала

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

Учиться весело

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

1 414 Заданий и испытаний

714 392 Пользователя

68 245 309 Заданий выполнено

Всё начинается с сущей шалости. «Я только попробую», — говоришь ты. А утром обнаруживаешь себя за компьютером и не можешь ответить, как долго просидел за ним, проходя онлайн‑курсы один за другим. Именно в этот момент всё выходит из-под контроля: базовый интенсив, продвинутый, JavaScript. И вот ты уже меняешь свою работу, жизнь и мечтаешь теперь об одном: стать ниндзя веб-разработки, в арсенале которого HTML, CSS, SVG и JavaScript. Ребятам из HTML Academy удалось невозможное: увлечь за собой многих «скучающих и сомневающихся» и занять их сложным, современным и очень классным делом. Ирина Смирнова, фронтенд-разработчик в Bookmate

Обучаясь в Академии, вы сэкономите огромное количество времени и научитесь правильно писать код, работать с реальными проектами и очень легко сможете продолжить свою карьеру фронтенд-разработчика самостоятельно. А также работа с наставником даёт большой опыт работы с кодом, потому что он всегда готов помочь в трудную минуту. Богдан Васкан, веб-разработчик в Synergic Software

Курсы Академии мне порекомендовали. Всегда скептически относился к вебинарам, но обучение в Академии изменило это представление. Учиться действительно интересно, занимательно, и, самое главное, не скучно. Интенсив Академии просто «вбивает» в голову нужные и современные навыки и знания, которые пригодятся вам в любимом деле. Павел Цыганов, преподаватель

Для меня знакомство с миром вёрстки началось с книжек и скринкастов на YouTube. Это было интересно, но непросто. И вызывало больше вопросов, чем ответов. В процессе появилось понимание, что без структуры и обратной связи от опытных практиков обучение может растянуться до бесконечности. В какой-то момент я наткнулся на сайт Академии. Это было что-то принципиально новое, интересное и увлекательное. Я стал проходить курсы по HTML и CSS. Это напоминало увлекательную игру, в которой хочется пройти на новый уровень. Сразу вспомнилась моя любимая игра World of Warcraft. Выполнил задание — получил достижение. В какой-то момент захотелось большего, и естественным продолжением стал интенсив. Месяц бессонных ночей, взорванный мозг, и вот, я смотрю на мой первый сайт. Потом на второй. И этот загадочный мир вёрстки начинает становиться понятным и уже родным. Для меня Академия стала прекрасным стартом, и я уверен, что будет отличным продолжением! Сергей Фоменко, ученик Академии

Если бы в школьную программу добавили обучение по таким интерактивным курсам, думаю, дети быстрей поняли, что им нравится, и лучше усваивали. Регулярно захожу на сайт, чтобы отдохнуть и вдобавок вспомнить, что давно не использовал в вёрстке. Советую всем тем, кто хочет держать себя в тонусе, и тем, кто учится. Поверьте такой подход обучения покажет свой результат, а если вы добавите ещё видео и книги, то пойдёт как по маслу. Поехали! Владислав Ридвановский, младший фронтенд-разработчик

HTML Academy — это новый уровень в онлайн-обучении. Я даже представить не мог, что такой уровень подачи материала может быть в онлайн. Академия учит тебя думать как профессионал, делать как профессионал. Плюс ко всему Академия — это семья и сообщество в одном лице, где каждый найдёт себе собеседника, ответ на волнующий его вопрос. Ни разу не пожалел, что год тому назад решил попробовать их курсы! Дмитрий Руднев, фронтенд-разработчик в Greensight

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

Добавить комментарий