Основы HTML. Введение в CSS

Телефон

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

Осуществить данную задачу можно тремя способами:

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

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

Атрибут style.

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

Пишется так:

Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента

Ну например:

это параграф с индивидуальным стилем

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

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




Атрибут style


Всё о слонах


Купить слона


Взять слона на прокат




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

Тег

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

Взгляните на пример, ниже к нему будут комментарии.




Тег style


h2 {color: #0000ff; font-size:16px}
p {color: #ff0000; font-size:14px}



Всё о слонах

На этом сайте Вы найдёте любую информацию о слонах.


Купить слона

У нас Вы можете по выгодным ценам приобрести лучших слонов!!


Взять слона на прокат

Только у нас Вы можете взять любых слонов на прокат!!




Как видно из примера мы добились точно такого же результата что и в первом случае только теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в "голову" документа тем самым указав что все заголовки , - будут синими а параграфы

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

Теперь обещанные комментарии:

Тег принято внедрять в заголовок HTML документа между тегами .

Атрибут тега type - сообщает браузеру, какой синтаксис использовать для правильной интерпретации стилей. Для правильной интерпретации браузерами CSS значение type (MIME тип данных) должно равняться text/css .

Внутри тега идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:

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

CSS в отдельном внешнем файле.

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

Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:

Body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h1 {color: #0000ff; font-size:18px}
h2 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}

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

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

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

Тег имеет атрибуты:

href - Путь к файлу.
rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.
  • shortcut icon - Определяет, что подключаемый файл является .
  • stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
  • application/rss+xml - Файл в формате XML для описания ленты новостей.
type - MIME тип данных подключаемого файла.

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

Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"

Теперь вставляем эту строчку в заголовки страниц нашего сайта и наслаждаемся результатом..

Файл mystyle.css
body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h1 {color: #0000ff; font-size:18px}
h2 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}
Файл index.html



каскадная таблица стилей



Меню:
Всё о слонах.
Купить слона.
Взять слона на прокат.

Всё о слонах

На этом сайте Вы найдёте любую информацию о слонах.




Файл elephant.html



каскадная таблица стилей



Меню:
Всё о слонах.
Купить слона.
Взять слона на прокат.

Купить слона

У нас Вы можете по выгодным ценам приобрести лучших слонов!!




Файл elephant1.html



каскадная таблица стилей



Меню:
Всё о слонах.
Купить слона.
Взять слона на прокат.

Взять слона на прокат

Только у нас Вы можете взять любых слонов на прокат!!




В примере выше, "сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом - mystyle.css. Таким образом, мы значительно его "разгрузили" и сделали дизайн всего сайта "мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?

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

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

Представление документа пользователю значит его конвертацию в понятную для пользователя форму. Браузеры , такие как Firefox , Chrome или Internet Explorer , предназначены для представления документов визуально, например, на экране компьютера, проектора или принтера.

Как CSS влияет на HTML?

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

  • Набора свойств , которые имеют значения, устанавливающие, как будет отображаться содержимое(HTML), Например Я хочу, чтобы ширина элемента равнялась 50% ширины родительского элемента, и его фон был красным .
  • Селектор , который выбирает (англ. selects) элемент/элементы, к которым вы хотите применить измененные значения. Например, Я хочу применить это CSS-правило ко всем параграфам в моем HTML-документе .

Набор правил CSS, содержащихся в таблице стилей(stylesheet), определяет, как должна выглядеть веб-страница. Более подробно о синтаксисе CSS вы узнаете в следующей статье модуля - .

Краткий пример CSS

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

(заметьте, что таблица стилей применяется к HTML с использованием элемента ):

Мой эксперимент с CSS Hello World!

Это мой первый CSS-пример

Теперь давайте посмотрим на очень простой пример CSS, содержащий два правила:

Первое правило начинается с селектора h1 , который означает, что оно будет применено к элементу . Оно содержит три свойства и три значения(каждая пара свойство/значение называется объявление ):

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

    • Второе правило начинается с селектора p , который значит, что оно применится к элементу

    . Оно содержит одно объявление, которое меняет цвет текста на красный.

    Приведенный выше код в браузере отобразится вот так:

    Это не очень красиво, но показывает, как работает CSS.

    Активное обучение: Пишем наш первый CSS

    Сейчас мы дадим вам возможность написать свой первый CSS. Вы можете сделать это, используя поле ввода, расположенное ниже, и увидеть это на живом редактируемом примере. У нас есть некоторые простые элементы HTML, а также некоторые свойства CSS. Так же, как показано выше, попробуйте добавить простые объявления в CSS, чтобы определить стиль HTML.

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

    Playable code HTML Input Hello World!

    This is a paragraph.

    • This is
    • A list
    CSS Input h1 { } p { } li { } Output var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; var cssCode = cssInput.value; var output = document.querySelector(".output"); var solution = document.getElementById("solution"); var styleElem = document.createElement("style"); var headElem = document.querySelector("head"); headElem.appendChild(styleElem); function drawOutput() { output.innerHTML = htmlInput.value; styleElem.textContent = cssInput.value; } reset.addEventListener("click", function() { htmlInput.value = htmlCode; cssInput.value = cssCode; drawOutput(); }); solution.addEventListener("click", function() { htmlInput.value = htmlCode; cssInput.value = "h1 {\n color: blue;\n background-color: yellow;\n border: 1px solid black;\n}\n\np {\n color: red;\n}\n\nli {\n text-shadow: 2px 2px 3px purple;\n}"; drawOutput(); }); htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); Как на самом деле работает CSS?

    Когда браузер отображает документ, он совмещает содержимое документа с информацией о стиле. Он обрабатывает документ в два этапа:

  • Браузер конвертирует HTML и CSS в DOM (англ. Document Object Model ). DOM представляет документ в память компьютера и применяет к содержимому стили.
  • Браузер отображает содержимое DOM.
    • О DOM

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

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

    Представление DOM

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

    Давайте рассмотрим представленный HTML-код:

    В DOM узел, соответствующий элементу

    Является родителем. Его дети являются текстовыми узлами и соответствуют элементу . Узлы SPAN также являются родителями, а их потомки -- текстовые элементы:

    P ├─ "Let"s use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"

    После интерпретации DOM-дерева браузером на выходе мы получим вот это:

    Применение CSS к DOM

    Let"s use: Cascading Style Sheets

    Мы применим к нему этот CSS:

    Span { border: 1px solid black; background-color: lime; }

    Браузер проанализирует HTML и создаст DOM из него, а затем разберется с CSS. Поскольку у нас есть только одно правило, описывающее селектор span,то оно будет применено ко всем узлам документа с этим селектором. На выходе получим это.

    Как применить ваш CSS к вашему HTML

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

    Внешняя таблица стилей

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

    My CSS experiment Hello World!

    This is my first CSS example

    Добавим CSS-файл:

    H1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; }

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

    Внутренняя таблица стилей

    Внутренняя таблица стилей содержится внутри элемента и не требует подключения внешних файлов. Содержится в теге HTML head . HTML с подобным методом подключения стилей выглядит вот так:

    My CSS experiment h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } Hello World!

    This is my first CSS example

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

    Встроенные стили

    Встроенные стили - это объявление CSS, которое применимо только к одному элементу, и содержится в атрибуте style :

    My CSS experiment Hello World!

    This is my first CSS example

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

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

    Что дальше

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

    Отличительной особенностью CSS является отсутствие таких понятий как элемент, тег или атрибут.

    Структура таблиц состоит из ПРАВИЛ , которые определяют, какой внешний вид должен иметь определенный элемент в документе.

    Рассмотрим структуру правила:

    На изображении видно, что сначала пишется селектор, указывающий к какому html тегу (тегам) предназначается данное свойство. Затем идет блок объявления стилей, который содержит в себе свойство и значение, заключенный в фигурные скобки. После свойства пишется двоеточие. Если правило содержит в себе несколько объявлений, как в случае на рисунке, то после каждого пишется точка с запятой, кроме самого последнего. Таким образом, на рисунке выше правило показывает, что все заголовки заключенные в тег H1 в документе будут синего цвета (color: blue ) с размером шрифта 14 пикселей (font-size: 14px ).

    Создание таблицы CSS и подключение к HTML документу

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


    Только для этого сначала следует подключить внешнюю таблицу стилей ко всем страницам сайт.

    Внешняя таблица стилей - это обычный текстовый файл с расширением.css
    Например, есть таблица стилей style.css и страницы html. Для подключения стилей в данные html страницы следует добавить строку, которая дает понять браузеру, что он должен использовать стили css папки style.css:

    Попробуем сделать самостоятельно:
    Для этого открываем блокнот и создаем один файл - index.html и второй - style.css. Затем располагаем их в одной папке.

    Файлы имеют содержание:

    index.html:


    Создать таблицу CSS





    style.css:

    h2{color:green;font-size:16px}

    В браузере увидим:


    Встроенные таблицы стилей

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




    Создать таблицу CSS

    h2{color:green;font-size:16px}



    Создаем таблицу CSS и подключаем к html страницам

    Также, можно задать стили с помощью атрибута style:




    Создать таблицу CSS


    Создаем таблицу CSS и подключаем к html страницам

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

    Следующая -

    Здравствуйте, уважаемые читатели проекта «Анатомия Бизнеса»! Вас приветствует вебмастер Александр! Как Вы могли заметить, в рамках данного проекта Вы можете найти не только инструкции по запуску бизнеса, но и полезную информацию касаемо сайтостроения

    Причем тут СSS?

    Дело в том, что последние три года я занимаюсь бизнесом в сети, но при всем при этом не имею никакого представления о программировании на PHP, HTML и тем более CSS.
    Есть у меня одна цель, о которой я хочу Вам рассказать… Минимальный план на жизнь - это изменить мир! Возможно, громко сказано, но это действительно так.

    Как это сделали когда-то Бил Гейтс, Стив Джобс, Возняк, Павел Дуров, Марк Цукерберг и другие гении человечества. Всех их объединяет то, что они создали проекты, которые изменили мир современного человека.

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

    Итак, мои исходные данные:
    — Хорошие знания в области продвижения в социальных сетях
    — Базовые знания в области HTML
    — Гуманитарный склад ума (О Боже, куда я лезу! Там же одна математика!)
    — Упертый характер (Как баран - привык идти до конца!)

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

    Что такое CSS?

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

    Итак, перейдем непосредственно к делу.
    Официальное определение CSS (Cascading Style Sheets) — Каскадные Таблицы Стилей.
    Далее на большинстве сайтов идет определение, что СSS-стили - это правила отображения html-файла посредством CSS-файлов. Согласитесь, звучит немного запутано.
    Переведу на более понятный человеческий язык. HTML можно рассмотреть как скелет в человеческом организме. Но, согласитесь, скелет в отдельности от кожи и мышц не очень-то и симпатичен. Для того чтобы увидеть на наглядном примере, как CSS влияет на отображение сайта, нам понадобится установить на свой компьютер расширение Web Developer 1.2.3. для браузера Mozilla Firefox. О том, как это делается, я рассказал в статье «Удобные расширения для Mozilla Firefox»

    Пример работы CSS

    Итак, мы установили расширение Web Developer, теперь заходим на всеми нами любимый Yandex. Мы видим его в привычном для нас отображении:

    Расширение WebDeveloper позволяет отключать отображение CSS-стилей на сайте. Делается это путем перехода и нажатия «CSS» => «Disable Style» => «Disable All Style»

    И что мы видим перед собой?


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

    Как работает CSS?

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

    Для чего это нужно? Представьте, что у нас страница, на которой около 6 заголовков, выделенных тегом «h». Как будет проще: к каждому из этих заголовков в ручном режиме прописывать цвет или через CSS дать одно общее правило? Конечно, второй вариант намного проще! А если у Вас сайт, состоящий из сотен страниц? Вы можете к каждой прописывать все ручками, а можете научится работать с CSS. Вот почему я начал изучать и применять CSS!

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

    Несмотря на всё большее распространение широкополосного доступа к Интернету, проблемы скорости загрузки HTML-страниц всё ещё не безразличны многим пользователям Сети, особенно на просторах бывшего Союза. CSS (Cascading Style Sheets) может помочь в этом деле, сэкономив нам время и трафик.

    1. Избегайте использования таблиц для разметки страницы

    Вот шесть причин, по которым лучше использовать CSS, а не таблицы, для разметки страниц:

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

    Большинство кнопок и надписей можно отобразить при помощи CSS. Взгляните на пример:

    A:link.example, a:visited.example, a:active.example {
    color:#fff;
    background:#f90;
    font-size:1.2em;
    font-weight:bold;
    text-decoration:none;
    padding:0.2em;
    border:4px #00f outset
    }
    a:hover.example {
    color:#fff;
    background:#fa1;
    font-size:1.2em;
    font-weight:bold;
    text-decoration:none;
    padding:0.2em;
    border:4px #00f inset
    Этот CSS определяет простую кнопку, которая меняет свой вид при наведении курсора. Таким образом можно создавать и более сложные объекты.

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

    И соответствующий CSS:

    Pretty-image { background: url(filename.gif); width: 200px; height: 100px }

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

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

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

    Данный код неэффективен:

    This is a sentence


    This is another sentence


    This is yet another sentence


    This is one more sentence

    Text { color: #03c; font-size:2em }

    Вместо того, чтобы присваивать класс каждому параграфу, их можно сгруппировать в одном элементе DIV с тем же классом:


    This is a sentence


    This is another sentence


    This is yet another sentence


    This is one more sentence


    Text p { color: #03c; font-size:2em }

    Этот код указывает браузеру, что каждый параграф внутри элемента с классом text будет иметь цвет #03c и размер шрифта в 2em.

    Вы могли заметить, что цвет здесь указан всего тремя символами, а не шестью. В данном случае #03c является сокращённым написанием значения цвета #0033cc.

    5. Использование сокращений

    Лучше написать:

    Font: 1em/1.5em bold italic serif

    Вместо

    Font-size: 1em;
    line-height: 1.5em;
    font-weight: bold;
    font-style: italic;
    font-family: serif

    Border: 1px black solid

    Вместо

    Border-width: 1px;
    border-color: black;
    border-style: solid

    Background: #fff url(image.gif) no-repeat top left

    Вместо

    Background-color: #fff;
    background-image: url(image.gif);
    background-repeat: no-repeat;
    background-position: top left;

    Отступы и границы

    Используйте:

    Margin: 2px 1px 3px 4px
    (верх, вправо, низ, влево)

    Вместо

    Margin-top: 2px
    margin-right: 1px;
    margin-bottom: 3px;
    margin-right: 4px

    Аналогично:

    Margin: 5em 1em 3em
    (верх, влево и вправо, низ)

    Вместо

    Margin-top: 5em;
    margin-bottom: 1em;
    margin-right: 1em;
    margin-right: 4em

    Margin: 5% 1% (верх и низ, влево и вправо)

    Вместо

    Margin-top: 5%;
    margin-bottom: 5%;
    margin-right: 1%;
    margin-right: 1%

    Эти правила применяются к атрибутам margin, border и padding.

    6. Минимизирование пробелов, переводов строк и комментариев

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

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

    - Вызов корневой страницы сайта http://www.URL.com
    - Вызов страницы в корневом каталоге http://www.URL.com/filename.html
    - Файл в подкаталоге "корня" http://www.URL.com/directory/filename.html
    - Обращение к текущему каталогу и index.html
    - Каталог-родитель текущего и index.html
    - То же самое, с указанием файла
    - index.html в двух каталогах выше текущего
    8. Не увлекайтесь применением тегов META

    Большинство тегов META соврешенно ненужные. Если интересно, можно взглянуть на все существующие варианты. Самые важные теги (keywords и description) используются для оптимизации поисковых машин. При использовании атрибута content в теге META старайтесь не превышать размера в 200 символов. Большие описания и множество ключевых слов могут быть восприняты поисковыми машинами как спам.

    9. Выносите CSS и JavaScript в отдельные файлы

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

    И соответственно JavaScript:

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

    10. Ставьте / (слэш) в конце ссылок на каталоги

    Необходимо писать так:

    Объясняется это очень просто. В первом случае браузер не знает, на что ведёт ссылка: на файл или каталог. "Слэш" сразу даёт понять, что эта ссылка ведёт в каталог, и необходимости в дополнительной проверке не возникает.

    Рекомендуем
    Поиск альтернативы транзисторам
    Периодически мышь зависает на экране на некоторое время
    Качественный микрофон для компьютера Как подключить студийный микрофон к компу
    Как удалить страницу на мамбе