Как мы работаем css. Создание первой веб-страницы

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

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

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

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

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

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

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

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

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

style.css:

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

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

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

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

Следующая -

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

Вы этом уроке вы создадите свою первую таблицу стилей/style sheet. Вы узнаете об основах базовой модели CSS и о том, какие коды необходимо использовать для CSS в HTML-документе.

Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML. Таким образом, если вы используете HTML для дизайна страниц, вы, наверняка узнáете многие коды. Посмотрим на конкретном примере.

Скажем, нам нужен красный цвет фона web-страницы:

В HTML это можно сделать так:

С помощью CSS того же самого результата можно добиться так:

Как видите, эти коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует фундаментальную модель CSS:

Но где размещать CSS-код? Именно этим вопросом мы и займёмся сейчас.

Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Мы рекомендуем сосредоточиться на третьем - то есть внешней/external таблице стилей.

Можно применять CSS к HTML с помощью HTML-атрибута style . Красный цвет фона можно установить так:

Example

This is a red page

Второй способ вставки CSS-кодов - HTML-тэг . Например:

Example body {background-color: #FF0000;}

This is a red page

Внешняя таблица стилей это просто текстовый файл с расширением .css . Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.

Например, скажем, ваша таблица стилей называется style.css и находится в папке style . Это можно проиллюстрировать так:

Обратите внимание, как указан путь к вашей таблице стилей атрибутом href .

Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами и . Например, так:

My document ...

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

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

Давайте посмотрим, как это сделать.

Откройте Notepad (или другой ваш текстовый редактор) и создайте два файла - HTML-файл и CSS-файл - такого содержания:

Мой документ Моя первая таблица стилей

Body { background-color: #FF0000; }

Разместите эти файлы в одной папке. Не забудьте сохранить файлы с правильными расширениями (".css" и ".htm")

Откройте default.htm в вашем браузере и вы увидите, что страница имеет красный фон. Поздравляем! Вы создали вашу первую таблицу стилей!

Переходите в следующий урок , где мы рассмотрим некоторые из свойств CSS.

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

Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Чтобы стало понятно, о чем идет речь, посмотрим на рис. 1.1.

Рис. 1.1. Веб-страница, созданная только на HTML

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

Рис. 1.2. Веб-страница, созданная на HTML и CSS

Перемена разительна, поэтому заглянем в код, чтобы понять, в чем же разница (пример 1.1).

Пример 1.1. Исходный код документа

HTML5 CSS 2.1 IE Cr Op Sa Fx

Флексагон Флексагон

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

Сам код HTML никаких изменений не претерпел и единственное добавление - это строка . Она ссылается на внешний файл с описанием стилей под именем style.css . Содержимое этого файла показано в примере 1.2.

Пример 1.2. Содержимое стилевого файла style.css

Body { font-family: Arial, Verdana, sans-serif; /* Семейство шрифтов */ font-size: 11pt; /* Размер основного шрифта в пунктах */ background-color: #f0f0f0; /* Цвет фона веб-страницы */ color: #333; /* Цвет основного текста */ } h1 { color: #a52a2a; /* Цвет заголовка */ font-size: 24pt; /* Размер шрифта в пунктах */ font-family: Georgia, Times, serif; /* Семейство шрифтов */ font-weight: normal; /* Нормальное начертание текста */ } p { text-align: justify; /* Выравнивание по ширине */ margin-left: 60px; /* Отступ слева в пикселах */ margin-right: 10px; /* Отступ справа в пикселах */ border-left: 1px solid #999; /* Параметры линии слева */ border-bottom: 1px solid #999; /* Параметры линии снизу */ padding-left: 10px; /* Отступ от линии слева до текста */ padding-bottom: 10px; /* Отступ от линии снизу до текста */ }

В файле style.css как раз и описаны все параметры оформления таких тегов как , и

Заметьте, что сами теги в коде HTML пишутся как обычно.

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

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

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

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

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

Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство обозревателя > Кнопка «Оформление» , как показано на рис. 1.3.

Рис. 1.3. Подключение стиля пользователя в браузере Internet Explorer

В браузере Opera аналогичное действие происходит через команду Инструменты > Общие настройки > Вкладка «Расширенные» > Содержимое > Кнопка «Параметры стиля» (рис. 1.4).

Рис. 1.4. Подключение стиля пользователя в браузере Opera

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

1. Требуется задать цвет заголовка зелёным. Какое стилевое свойство подойдёт для этой цели?

2. Что такое стиль?

3. Как расшифровывается аббревиатура CSS?

2. Набор правил форматирования элементов веб-страницы.

Несмотря на всё большее распространение широкополосного доступа к Интернету, проблемы скорости загрузки 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. Ставьте / (слэш) в конце ссылок на каталоги

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

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