Внедрение картинки в таблицу стилей или код страницы


Содержание

Урок 2. Внешние таблицы стилей CSS. Как подключить стили. Уроки CSS

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

В этом уроке мы оформим нашу web-страничку, чтобы она стала более разноцветной (рисунок 1).

Прежде, чем перейти к оформлению страниц, изучим, как задается цвет в web

1. Определение цветов. Уроки CSS

При определении цветов для документа HTML можно использовать либо названия цветов, либо их шестнадцатеричные коды. Система шестнадцатеричного кодирования основана на трех компонентах – красном (Red), зеленом (Green) и синем (Blue), отсюда и ее название RGB, по первым буквам названий этих цветов. Каждый из компонентов соответствует шестнадцатеричному числу от 00 до FF (0 и 255 в десятичной системе счисления). Эти три значения затем объединяются в одно значение, которому предшествует знак #, например #800080, что соответствует фиолетовому цвету.

В таблице приведены названия некоторых цветов и их коды. Более полные таблицы цветов и их коды можно просмотреть в папке colors, расположенной в папке CD.

Таблица безопасных цветов для разработки дизайна сайта

Безопасная палитра цветов обеспечивает наиболее точное соответствие отображения на различных мониторах.

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

Если любое из трех шестнадцатеричных значений отличается от 00, 33, 66, 99, СС или FF, то цвет не является безопасным.

Таблицу безопасных цветов можно просмотреть в папке CD/colors.

2. Определение CSS

Наша web-страница пока не имеет оформления, которое можно осуществлять двумя способами:

  • первый – средствами таблиц стилейCSS (более прогрессивный и правильный метод),
  • второй – средствами атрибутов у теговHTML.

Начнем сразу с более прогрессивного метода.

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

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

Обратная ситуация: мы с помощью атрибутов HTML задали на десяти web-страницах всем заголовкам H1 зеленый цвет, т.е. прописали его десять раз. Затем решили изменить цвет заголовка на красный, тогда нам придется десять раз исправить зеленый цвет на красный.

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

Таблица стилей включает набор CSS-элементов, структура которых отличается от структуры HTML-элемента.

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

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

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

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.

или тот же самое можно записать так:

  • h1 – селектор, в данном случае HTML-элемент,
  • font-family и font-size – стилевые свойства,
  • Arial – значение свойства font-family,
  • 14pt – значение свойства font-size.

Способы включения таблиц стилей в HTML-документ

  1. Внешняя таблица стилей (связанный стиль).
  2. Внедренная таблица стилей (глобальный стиль).
  3. Внутренние стили.

3. Внешняя таблица стилей CSS (связанный стиль)

Определяет стиль всего сайта.

Является текстовым файлом с расширением css.

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

В данном примере таблица стилей написана в текстовом файле style.css.

Практическое задание 1

1. Откройте чистый документ в Notepad++ и сохраните его в папке public_html под именем style.css. Обратите внимание, чтобы в поле Тип файла было установлено All types (рисунок 2).

2. Так как CSS – это другая технология, то теги HTML в файле .css не пишутся вообще. Оформим наш заголовок «Каталог архитектурных проектов» в файле main.html с выравниванием по центру, синим цветом, шрифтом Verdana, высотой шрифта 20 pt. Для этого в файле css сделаем следующую запись (рисунок 3):

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

  • h1 – селектор, т.е. элемент html, к которому применяется стиль;
  • text-align:center; – стилевое свойство text-align (выравнивает текст) со значением center (по центру);
  • color:#0000FF; – стилевое свойство color (цвет текста) со значением синего цвета #0000FF (значение взято из таблицы цветов);
  • font-family:Verdana; – стилевое свойство гарнитуры шрифта font-family со значением Verdana;
  • стилевые свойства со значениями разделены между собой точкой с запятой;
  • и так далее, все согласно синтаксису.

Чтобы наша web-страница «увидела» таблицу стилей и применила свойства к html-элементам, необходимо установить связку между файлом main.html и style.css. Для этого откройте файл main.html и между тегами и вставьте конструкцию
,
как на рисунке 4.

3. Просмотрите результат в браузере. Он должен совпадать с рисунком 5.

В данном уроке CSS мы рассмотрим где взять названия стилевых свойств и их значений? Для этого также существуют специальные справочники и спецификация (папка Справочник CSS). Для начала используйте в качестве справки небольшой справочник Sprav_CSS.doc.

4. Зададим стиль заголовку h2 «Проекты для Вашего будущего дома» с выравниванием по правому краю, бордового цвета, шрифтом Verdana, высотой шрифта 16 pt. Для этого в файле style.css сделаем следующую запись для селектора h2 (рисунок 6).

5. Проверьте результат в браузере, он должен совпадать с рисунком 7.

6. Абзацы оформим с выравниванием по ширине, темно-синего цвета, шрифтом Arial, высотой шрифта 12 pt. Для этого в файле style.css сделаем следующую запись для селектора p (рисунок 8).

7. Также сделаем светло-голубым цветом фон всей web-страницы. Для этого для селектора body добавим запись (рисунок 9)

8. Просмотрите результат в браузере. Он должен совпадать с рисунком 10.

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

  1. Используя справочник Sprav_CSS.doc, оформите стилями заголовок в файле main.html. Свойства стилей на выбор.
  2. Для списка «Проекты домов», используя стили, измените арабские цифры на римские. Остальные параметры по желанию.
  3. Для списка «Площади домов» в качестве маркера примените изображение spisok_1.gif из папки html_css_2. Остальные параметры по желанию.
  4. В качестве фона web-страницы примените через стили изображение fon9.jpg из папки html_css_2.
  5. С использованием стилей сделайте шрифт абзацев полужирным.

Примерный результат на рисунке 11.

4. Классы в стилевых спецификациях

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

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

После точки идет имя класса, которое должно быть уникальным и не может состоять только из цифр.

Теперь при использовании тега в документе необходимо установить атрибут class, чтобы указать, какой именно стиль нужно применить:

Это голубой заголовок


Это красный заголовок

Это зеленый заголовок

Практическое задание 2

1. Откройте файл shablon.html. Сохраните его под новым именем ploshady.html в папке public_html.

2. Напишите между тегами и новый заголовок «Площади домов».

3. В содержимое скопируйте текст из файла Площади домов.txt из папки html_ccs_2.

4. Стили будем писать в том же файле style.css, который у нас создан в предыдущем уроке. Поэтому в файле ploshady.html установите связку с этой таблицей стилей, вставив между тегами и (рисунок 12)

5. Отформатируйте заголовки тегом

и присвойте каждому заголовку свой класс (рисунок 13).

Ваш файл ploshady.html сейчас должен выглядеть следующим образом (рисунок 14).

6. В таблице стилей style.css создайте следующую запись (рисунок 15)

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

8. Вы, наверно, заметили, что в нашей новой записи стилей заголовков есть повторяющиеся конструкции font-family:Verdana; text-align:left; font-size:14pt. Такие конструкции можно записывать один раз, сгруппировав селекторы, к которым они применены. Для этого, надо перечислить селекторы через запятую, а затем в фигурных скобках прописать общие свойства. Тогда наша таблица стилей для заголовков будет выглядеть следующим образом (рисунок 17):

Практическое задание 3

Под каждый заголовком в файле ploshady.html есть текст. Отформатируйте абзацы с использованием различных классов. Используйте разные цвета, выравнивание и гарнитуру шрифтов. Имена классов должны быть уникальными. Нежелательно использование одинаковых имен для разных селекторов. Один из возможных вариантов на рисунке 18:

5. ID-стиль для специфического элемента

Уроки CSS включают изучение так называемых id-стилей.

Любому элементу можно присвоить идентификатор id, а затем поставить в соответствие этому элементу какой-либо стиль, используя id.

Запись в файле таблиц стилей будет следующая

Теперь можно поставить этот стиль в соответствие любому элементу в документе html:

В этом примере слово test – имя стиля. Имя может быть произвольным из латинских букв, но оно должно быть уникальным, т.е. ни один элемент в таблице стилей не должен больше иметь такое имя.

Практическое задание 4

Сделаем заготовку для будущего меню нашего сайта.

1. Откройте файл shablon.html и сохраните его под новым именем menu.html в папке public_html.

2. В содержимое страницы файла menu.html внесите текст из файла menu.txt из папки html_css_2.

3. Средствами html-тегов отформатируйте файл следующим образом:

    для заголовков «Категории проектов», «Каталог архитектурных проектов» и «Площади домов» используйте тег

;
для списка «Категории проектов» используйте нумерованный список
    ;
    для списков «Каталог архитектурных проектов» и «Площади домов» используйте маркированный список
      .

4. Вверху web-страницы вставьте логотип (файл logo_myhouse.gif). Результат должен совпасть с рисунком 19.

5. Для этого меню сделаем отдельную таблицу стилей под именем style_menu.css. Установите связку между файлом menu.html и таблицей стилей style_menu.css, вставив запись между тегами и в файле menu.html.

6. Создайте чистый документ и сохраните его под именем style_menu.css в своей папке.

7. Для группы «Категории проектов», в которую входит заголовок и нумерованный список и для группы «Каталог архитектурных проектов», в которую входит сам заголовок и маркированный список будем использовать имя id-стиля blue. Т.е. код будет выглядеть следующим образом (рисунок 20):

8. В файле style_menu.css стиль для этих элементов сделаем темно-синего цвета, шрифтом Tahoma (рисунок 21):

9. Для группы «Площади домов», в которую входит заголовок и маркированный список, будем использовать имя id-стиля brown. Т.е. код будет выглядеть следующим образом (рисунок 22):

10. В файле style_menu.css стиль для этих элементов сделаем коричневого цвета, шрифтом Times (рисунок 23):

11. И добавим еще цвет фона файлу menu.html (рисунок 24)

12. В результате получим следующую web-страницу (рисунок 25)

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

HTML Изображения

Изображение может улучшить дизайн и внешний вид веб-страницы.

Пример

Пример

Пример

HTML Синтаксис изображений

В HTML, изображения определяются тегом .

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

Атрибут src задает URL-адрес (веб-адрес) изображения:

Атрибут alt

Атрибут alt содержит альтернативный текст для изображения, если изображение по какой-то причине не отображается (из-за медленного соединения или ошибки в атрибуте src , тогда изображение используется для чтения с экрана).

Значение атрибута alt , должно описывать изображение:

Пример

Если браузер не может найти изображение, он будет отображать значение атрибута alt :

Пример

Примечание: Атрибут alt является обязательным. Веб-страница не будет проверяться правильно без него.

Размер изображения — ширина и высота

Вы можете использовать атрибут style , чтобы задать ширину и высоту изображения.

Пример

Кроме того, вы можете использовать атрибуты width и height :

Пример

Атрибуты width и height всегда определяют ширину и высоту изображение в пикселях.

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


Ширины и высота, или стили?

Все атрибуты width , height и style являются действительными в HTML5.

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

Что такое CSS и как подключить каскадные таблицы стилей к html-документу

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

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

Каскадные таблицы стилей(так расшифровывается аббревиатура CSS — Cascading Style Sheets) представляют собой набор параметров(стилей), описывающих оформление самой web-страницы и отдельных ее элементов. Эти параметры определяют фон страницы, цвет текста, выравнивание абзацев, параметры рамки таблицы и многое другое.

Таким образом с помощью языка HTML вы формируете структуру web-страниц, например задаете заголовки с помощью тегов h1-h6 или абзацы через тег p. А с помощью правил CSS вы задаете то, как эти элементы html-документа будут отображаться в браузере. То есть задаете тип и цвет шрифта, выравнивание текста, цвет фона элементов, различные отступы и др. Причем одно правило CSS может влиять на визуальное представление сразу нескольких элементов веб-страницы.

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

Добавление стилей или как подключить CSS к HTML документу

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

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

Путь до файла стилей записывается в качестве значения атрибута href. Атрибут rel указывает браузеру чем является файл на который ссылается тег link. Значение «stylesheet» говорит о том, что этот файл внешняя таблица стилей. В атрибут type указывается тип MIME файла. Для внешней таблицы стилей тип MIME «text/css».

Так примерно будет выглядеть строчка подключения стилей CSS в html коде:

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

2. Второй способ заключается в написании так называемых глобальных стилей, которые прописываются прямо в html коде веб-страницы. Их заключают в парный тег style и обычно помещают в секцию заголовка между тегами head:

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

3. Третий способ это так называемые встроенные или внутренние стили. Для этого просто в требуемый html тег нужно поместить атрибут Style, который включает в себя в качестве параметров набор CSS свойств:

Абзац с серым фоном и красным текстом

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

Создание стилей CSS. Синтаксис каскадных таблиц стилей — правила, свойства, селекторы.

Далее рассмотрим синтаксис написания правил CSS. Обычный формат определения CSS правила выглядит так:

Т.е. правило стиля включает в себя селектор стиля и список свойств стиля с их значениями в фигурных скобках(«<» и «>»):

  • селектор используется для привязки к элементам web-страницы, на которые он должен распространять свое действие;
  • пары «Свойство: Значение» разделяются символом точкой с запитой(«;») и их может быть сколь угодно много;
  • между последней парой «Свойство: Значение» и закрывающей фигурной скобкой символ точка с запитой можно не ставить;
  • свойство стиля представляет из себя один из параметров элемента html страницы: цвет текста, гарнитура шрифта, величина отступов;
  • пробелы и переводы строк при написании правил css не критичны, браузер их игнорирует, поэтому можно оформлять код так как вам захочется;
  • так же код не чувствителен к регистру символов.

Чтобы было понятней рассмотрим несколько примеров.

Разберем данное CSS правило:

  • body — это селектор, который представляет из себя имя тега body;
  • background — свойство стиля, с помощью которого задаются параметры фона;
  • #0000FF — значение свойства стиля background, которой представляет из себя код цвета в формате RGB.

В итоге данный стиль применится к элементу body web страницы и окрасит фон страницы в заданный цвет. Рассмотренный стиль называется стилем переопределения тега, потому что в качестве селектора указано имя тега без символов .

Рассмотрим еще пример:

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

В качестве селектора тега, кроме имени тега, можно указывать класс:

Имя класса должно состоять из букв латинского алфавита, цифр и дефисов и начинаться должно с буквы. А в определении CSS правила перед именем класса должна стоять точка, означающая что определяется стилевой класс. Данный стиль будет применен ко всем тегам, у которых будет задан атрибут >имени стилевого класса без точки :

В примере мы привязали к тегу «Р» css правило с помощью имени класса yellowtext. В результате текст в данном абзаце будет отображен оранжевым цветом.

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

В этом примере к тегу «Р» мы привязали сразу два класса: yellowtext и cursivtext. В результате содержимое тега отобразится желтым цветом и курсивным шрифтом.

Кроме классов в качестве селектора правила css можно использовать идентификатор, который определяет уникальное имя элемента. Здесь все также как и в случае со стилевыми классами, только есть несколько отличий:

  • в селекторе правила CSS, также задается имя идентификатора, только вместо точки перед его именем ставят символ решетки «#»;
  • привязка к html элементу осуществляется через атрибут >Рассмотрим пример для ясности:

К элементу p (абзац) с помощью атрибута id привязывается правило css, которое выравнивает текст по центру страницы. На странице больше не допускается создавать элементы с таким значением атрибута id, иначе html код будет не валидным.

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

h1.redtext, p strong

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

Комментарии CSS

Язык css позволяет как и html задавать комментарии. Для того, чтобы выделить фрагмент кода CSS в комментарий достаточно заключить его в специальные слеши со звездочками:

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

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

Создание первой таблицы стилей

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

Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets, он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets, то он подходит и для пользователей Microsoft Windows, вы можете впоследствии выбрать, что вам ближе.

Создание внутренней таблицы стилей

Рассмотрим пример в котором вы будете создавать Вашу первую внутреннюю таблицу стилей.

Шаг 1: Откройте текстовый редактор

Нажмите кнопки WIN + R одновременно (аналог Пуск — Выполнить) при этом откроется диалог «Выполнить» впишите notepad++ и нажмите Enter (откроется программа Notepad++), либо запустите программу Notepad++ через её ярлык.

Перед Вами откроется основное окно программы:

Рис. 2 Текстовый редактор Notepad++.

Шаг 2: Создайте структуру документа

Скопируйте или впишите в редактор следующий HTML код:

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

Шаг 3: Добавьте встроенные стили

Следующим шагом добавьте к вашей странице встроенные стили: для заголовка первого уровня цвет текста красный ( color : red ), а для абзацев голубой ( color : blue ). Кроме того, для заголовка первого уровня мы сделаем выравнивание текста по центру ( text-align : center ). Проверьте, чтобы каждое CSS свойство и его значение было разделено двоеточием, а в конце каждого объявления стояла точка с запятой.

Шаг 4: Просмотр HTML страницы в браузере


Откройте пример в браузере и убедитесь, что результат нашего примера соответствует изображению:

Рис. 2.1 Пример создания внутренней таблицы стилей в документе.

Подключение внешней таблицы стилей

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

  1. В программе Notepad++ создайте новый пустой файл и сохраните его под именем page.css (при сохранении файла необходимо выбрать Cascade Style Sheets *.css) в той же папке, где вы создавали HTML документ.
  2. Перенесите из предыдущего примера код CSS (содержимое тега ) в файл, который мы создали. Обратите внимание, что сам тег необходимо удалить из документа (зачем нам пустые неиспользуемые теги в документе). Файл css у Вас должен содержать следующий код:
  3. Добавьте к вашей таблице стилей следующий CSS код для элемента , который определяет видимое содержимое страницы:

Для элемента мы указали следующие новые для Вас CSS свойства:

margin-top : 50px – это CSS свойство отвечает за внешний отступ от верхнего края элемента, его мы указали равным 50 пикселям.
border : 5px solid green — это универсальное CSS свойство, которое позволяет установить все свойства границ элемента в одном объявлении (в нашем случае задаем сплошной тип границы (solid) равной 5 пикселям зеленого цвета.
font-family : courier — задаем шрифт «Courier» для элемента.

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

  • Как управлять шрифтами вы научитесь в статье «Работа со шрифтами в CSS».
  • Как работать с отступами элемента вы научитесь в статье «Блочная и строчная модель в CSS».
  • Как использовать границы элемента вы научитесь в статье «Границы элемента в CSS».

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

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

Практическое задание № 1.

Подсказка: на странице использованы цвета: dimgray, gray, aliceblue, orange.

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

Блог Vaden Pro

Cascading Style Sheets или же css при переводе на русский язык означает «каскадные таблицы стилей». Согласно официальной документации W3C css представляет из себя механизм для добавления оформления в html документ.

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

Что такое каскадные таблицы стилей?

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

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

В слове «каскадная» заключается главная особенность данного языка веб-разработки, позволившая ему стать настолько популярным среди веб-мастеров. Она заключается в том, что в css используется наследование правил оформления элементов (стилей) от старшего элемента (родителя) к младшему (потомку, элементу содержащемуся внутри родителя, вложенному тегу, если будет понятнее).

Подробнее о «родственных» связях html тегов можно почитать в статье: «Что такое дерево документа в HTML?»

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

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

Наследование стиля вместе с четкой расстановкой приоритетов наследования и образует собой в конечном итоге «каскад».

Пример использования css

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

  • Селектора – часть кода сообщающая браузеру к какому именно элементу или же совокупности элементов применяется данное правило. В нашем примере селектор это «#footer h3». Подробнее правила построения селекторов и принципы наследования оформления будут рассмотрены в дальнейших уроках.
  • Блока определений – набор стилей оформления для конкретного селектора. Он содержится между фигурных скобок после селектора. Стили написанные не блоком, а в одну строку являются признаком дурного тона в оформлении css кода.

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

Зачем понадобилось разделять содержимое и оформление html страниц?

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

Пример кода с оформлением на чистом html:

Теперь пройдемся подробнее по основным причинам перехода от чистого html к html + css:

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

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

Что изменилось с внедрением css?

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

Подводя итоги

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

Создание внедренной таблицы стилей

Назначение стилей нескольким элементам одной страницы – создание внедренной таблицы стилей

Допустим, мы хотим, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом «Arial» зеленого цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня – шрифтом «Helvetica» размером 14 пунктов полужирного курсивного начертания желто-зеленого цвета. Для этого нам понадобится создать в «голове» страницы (в любом месте между тегами и ) внедренную таблицу стилей, в которой мы пропишем несколько правил сразу. Для этого создаем тег-контейнер таблицы стилей, начинающийся открывающим тегом . Внутри этого тега-контейнера мы вольны задать любое количество правил CSS, состоящих из селектора (названия тега HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки. Синтаксис для приведенного выше примера такой:

Заголовок №1

Заголовок №2

Обратите внимание – когда мы задавали стиль шрифта, после названия «Times New Roman» мы указали начертание «serif», что обозначает любой шрифт. Если на компьютере пользователя не установлен шрифт «Times New Roman», браузер подставит вместо него любой из имеющихся шрифтов, и отображение страницы будет максимально приближено к тому, что вы задумали.

Внедрение картинки в таблицу стилей или код страницы

, передавая браузеру, что все теги

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

Привязывание страницы стилей к документу

/* Далее следует остальная часть вашей веб-страницы. */

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


HTML Стили

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

Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style. Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).

Вот как это выглядит для элемента

Пример: применение стилей к элементу

Способы добавления CSS стилей

Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:

  • Внешняя таблица стилей &#8212 определение правил таблицы стилей в отдельном файле .css, с последующим подключением этого файла в HTML-документ с помощью тега
  • .
  • Внутренняя таблица стилей &#8212 определение правил таблицы стилей с использованием тега

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

В данном примере мы с помощью CSS установили цвет фона для элемента : background-color:palegreen, цвет и тип шрифта для заголовков

: color: blue; font-family:verdana, а также размер шрифта, цвет и выравнивание текста по центру для параграфов

: font-size:20px; color:red; text-align:center.

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

Когда необходимо отформатировать отдельный элемент HTML-страницы, описание стиля можно расположить непосредственно внутри открывающего тега при помощи уже специализированного атрибута style. Например:

Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе

Каскадные таблицы стилей, или CSS для начинающих (практикум «правильного» HTML)

Русская часть Интернета растет день ото дня. За последние год-два суммарный объем русскоязычных страниц увеличился более чем в два раза. Сегодня в России уже никого не удивишь словосочетанием или английским словом . Если раньше создание web-страниц было уделом избранных и на просторах Рунета царили лишь признанные web-дизайна, то теперь даже мой десятилетний сынишка в свободное от учебы время мастерит потихонечку собственную страницу, собираясь разместить ее на каком-нибудь бесплатном сервере (вроде narod.ru или boom.ru), которых за последний год тоже развелось в Рунете множество. Web-конструированием сегодня не занимается, наверное, только не подключенный к Сети или ленивый. Множество людей, поблуждав по просторам Интернета, рано или поздно задумываются о создании собственной странички. Для них-то и написана эта статья.

Речь здесь пойдет о HTML для новичков, а именно — о некоторых дополнительных возможностях, официально утвержденных интернет-консорциумом (http://www.w3.org/). В частности, о некоторых возможностях, предоставляемых динамическим HTML (DHTML). А еще точнее — о том, как с помощью CSS (cascade style sheets, или каскадных таблиц стилей) сделать страничку, которая будет выглядеть лучше, чем страницы, созданные посредством HTML, при этом занимать меньше места и, соответственно, быстрее грузиться.

Мало кто из людей, впервые решившихся на создание собственного web-представительства, вооружается notepad’ом или другим текстовым редактором вроде HomeSite. Обычно новичок думает следующим образом: ) — тексты я создаю в MS Word, презентации — в MS PowerPoint, так возьму-ка я и для создания web-странички подобную программу — MS FrontPage. > Приняв такое решение, новоявленный web-ваятель дважды обкрадывает себя.

Первый раз — в смысле рационального использования web-пространства. Дело в том, что все визуальные редакторы web-страниц, к которым относится и упомянутый MS FrontPage, вставляют в создаваемые страницы — множество лишних ненужных тегов. Исключением, пожалуй, является Macromedia Dreamweaver (за что он снискал себе заслуженную популярность как среди новичков, так и среди профессионалов). Но даже он в этом плане не идеален — любит засорять исходный текст кавычками (в большинстве случаев совершенно ненужными), а также вставлять символы неразрывного пробела в самых неподходящих для этого местах. Справедливости ради стоит отметить, что все визуальные редакторы предоставляют пользователю возможность работать с исходным кодом создаваемой страницы, но столь любимый многими FrontPage вновь переделает все по-своему, стоит вам только переключиться снова в визуальный режим.

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

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

Логическое и физическое форматирование

Классический HTML версии 3.2, наиболее распространенный на данный момент в Сети, предоставляет нам средства физического форматирования документов, для чего имеются специальные теги (например, теги , , ) и множество различных атрибутов (size, color, height, width и т. п.). Особенности web-форматирования принуждают нас снова и снова прописывать эти теги и атрибуты для каждого нового абзаца, что, конечно, сильно увеличивает размер кода страниц. Кроме того, при таком способе форматирования в случае анализа структуры документа остается непонятным, почему данное слово выделено жирным начертанием — просто для красоты или же чтобы обратить на себя особое внимание конечного пользователя? Если живой человек еще в состоянии худо-бедно разобраться в логических построениях страниц на классическом HTML, то о поисковых машинах или, к примеру, голосовых броузерах этого не скажешь. Им вынь да положь чистую логику в структуре страницы. Именно из-за такой логическому анализу данный способ форматирования был назван физическим форматированием. В противовес ему при создании новой спецификации HTML 4.0 во главу угла было поставлено логическое форматирование, то есть такое форматирование, при котором структура и оформление документа были бы четко разделены. Этот способ форматирования рекомендован к применению интернет-консорциумом, так как предоставляет расширенные возможности поиска информации в Сети, позволяет более точно структурировать и анализировать информацию посредством поисковых машин, а также существенно уменьшает размер страниц и время их полной загрузки. Реализуется разделение структуры и оформления документа как раз с помощью CSS.

Стоит отметить тот факт, что зачатки логического форматирования присутствовали и в классическом HTML — теги

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

Назначение стилей отдельным элементам страницы

CSS позволяют назначить собственный стиль визуального представления любому тегу HTML, в том числе тегу . Если стиль задан для тега , он наследуется всеми элементами (абзацами, заголовками и т. д.), помещенными внутри этого тега-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нам уже не нужно прописывать теги и атрибуты color, size и т. п. для каждого абзаца на странице — достаточно задать некий стиль для тега , и все абзацы на странице будут отображены в соответствии с этим стилем. Как же это сделать?

Допустим, мы хотим, чтобы все абзацы отображались шрифтом Times New Roman размером 12 пунктов темно-зеленого цвета. Для этого следует прописать атрибут style тега , присвоив ему соответствующее значение. Синтаксис такой:

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

Обратите внимание — когда мы задавали начертание шрифта, после названия Times New Roman мы указали начертание serif, что обозначает любой шрифт с засечками. Если на машине конечного пользователя не установлен шрифт Times New Roman, броузер подставит вместо него любой из имеющихся шрифтов с засечками, и отображение страницы будет максимально приближено к тому, что вы задумали. Причем приведенный пример будет понятен и для IE (4.0 и выше), и для NN (4.0 и выше). Хотя надо сразу оговориться, что Netscape Navigator поддерживает далеко не все возможности, предоставляемые CSS и DHTML, и это, безусловно, не увеличивает числа его поклонников.

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

Назначение стилей нескольким элементам одной страницы — создание внедренной таблицы стилей

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

Допустим, мы хотим, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом Arial зеленого цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня — шрифтом Helvetica размером 14 пунктов полужирного курсивного начертания желто-зеленого цвета. Для этого нам понадобится создать в страницы (в любом месте между тегами и ) внедренную таблицу стилей, в которой мы пропишем несколько правил сразу. Для этого создаем тег-контейнер таблицы стилей, начинающийся открывающим тегом . Внутри этого тега-контейнера мы вольны задать любое количество правил CSS, состоящих из селектора (названия тега HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки. Синтаксис для приведенного выше примера такой:

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

Назначение стилей одновременно для нескольких страниц сайта

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

Вот пример содержимого такого файла (например, my.css):

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

В этой строке указывается, что связываемый файл является таблицей стилей (rel=»stylesheet»), формат этого файла — .css (type=»text/css») и находится он в той же директории, что и файл html, либо имеет другой URL-адрес (href=»my.css»). Очевидно, что эту строку мы можем прописать в любом (либо во всех) из наших html-файлов. Таким образом, единое стилевое оформление будет прописано для нескольких страниц сразу.

Обратите внимание на то, что inline-стили (стили, прописанные для отдельных элементов страницы с помощью атрибута style) и внедренные стили (стили, прописанные в страницы внутри тега-контейнера .

Помимо адреса импортируемой таблицы стилей вы можете прописать в тег-контейнер . .

Внедрение картинки в таблицу стилей или код страницы

Рассмотрим практичный пример с

Например . Html код:

Преобразуется на странице в следующее:

Обратите внимание, что в class мы указали styletest — потому что именно так называется наш стиль. Поскольку в style мы не указали конкретно для какого тега он сделан, то мы может применять его не только для тегов , но и для других. Например, для , и т.д. — для всех тегов, которые поддерживают параметр class.

Выше разобранный пример можно сделать по-другому (не используя class):

Результат будет таким же как и предыдущий пример.

В чем же тогда разница? Давайте проведем сравнение. Допустим, у Вас есть на сайте 50 страниц (это считается маленьким сайтом). На всех 50 страницах у Вас для какого-то текста в тегах прописано style =» color: blue; font-size:12px; font-family:Arial «. Теперь представим такую ситуацию, что синий цвет Вам больше не по душе и Вы захотели сменить его на черный. В этом случае Вам нужно будет редактировать 50 страниц. Но 50 страниц это ещё не так уж и много. Тем не менее это все равно лишняя работа, которую можно было не делать. Поэтому я советую пользоваться классами ( class =» какой-то класс «). В этом случае Вам бы пришлось поменять всего лишь в одном месте цвет и на всех страницах бы все поменялось.

Задание стилей для вложенных тегов
Если мы используем вложенные конструкции (иерархию тегов), то стиль нужно задавать напрямую. Например:

Например, .cen a говорит о том, что этот стиль будет использован только в блоке с классом cen. В нашем примере мы подразумеваем этот блок тегом

Таблица стилей CSS

Чтобы упростить работу со стилями, создают специальную «таблицу стилей CSS«, которая представляет из себя просто сборник стилей. Подключается она с помощью тега link в теге head

В данном случае таблица стилей (назовем её style.css ) должна содержать следующее:

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

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

Плюсы при использовании таблицы стилей

  • Файлы .css можно сжимать и кэшировать, за счет этого страница грузится быстрее
  • Стиль прописывается в одном месте, а значит его легко изменить. Представьте, как сложно было бы менять стиль на каждой странице при любой небольшой правке
  • Это позволяет уменьшить html код и является правильным тоном. На странице должен быть контент, а не описание стилей.

Использование стилей html через ID


Теперь рассмотрим как можно использовать стили через ID . Для начала, необходимо в таблице стилей (назовем её primerid.css ) написать следующее:

Обратите внимание, что сначала пишется название тега, далее # , далее название ID и потом аргументы стиля.

Для использования ID, код html страницы должен содержать примерно следующее:

Вместо параметра class нужно написать id, в остальном все также. Также можно использовать и вложенные конструкции. Как правило, id не используют для описание стилей.

Теперь расскажу о том, какие аргументы можно задавать в стилях. Их довольно много.

Аргументы и свойства в style

1. Свойство background: цвет — задает цвет фона. Цвет можно выбрать любым. Цвет может быть задан в виде шестизначного кода (например, #53A32B; ) или конкретное название цвета (например, red ). Выбрать подходящий цвет можно на странице: коды и названия html цветов.

Аналогом является: background-color: цвет .

Более подробно про фон читайте в отдельной статье: как сделать фон для сайта.

2. Свойство background-image: url(‘images/bg.png’); — фоном будет картинка. В скобках указывается адрес фона изображения.

3. Свойство background-repeat: repeat — использовать фоновую картинку многократно. Другие возможные параметры:

  • repeat-x — повторять фоновое изображение только по горизонтали
  • repeat-y — повторять фоновое изображение только по вертикали
  • no-repeat — не повторять фоновое изображение

4. Свойство border: 1px solid red; — вся область объекта будет в красной рамке, ширина которой 1 пиксель. Возможны и другие параметры вместо solid:

  • dotted — рамка будет покрыта не сплошной линией, а точками
  • dashed — рамка будет покрыта тире, пробел, тире и т.д.
  • double — двойная рамка
  • groove — рифлёная 3D граница

Цвет и размер области рамки можно изменять. Цвет можно задавать в формате #XXXXXX или писать название цвета. Выбрать цвет можно на странице коды и названия html цветов

Рамку можно задавать избирательно, т.е. только с тех сторон, где это нужно:

  • border-bottom: 1px solid red; — линия будет только снизу
  • border-top: 1px solid red; — линия будет только сверху
  • border-right: 1px solid red; — линия будет только справа
  • border-left: 1px solid red; — линия будет слева

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

5. Свойство color: #fc0ab1; — задает цвет текста. Цвет можно выбрать любым. С этим аргументом Вы уже были знакомы.

6. Свойство font-family: value; — задает шрифт текста. Существует очень много различных шрифтов. Например, самые распространенные шрифты:

  • Verdana (я пользуюсь этим шрифтом)
  • Times New Roman
  • Arial
  • Courier New
  • Comic Sans MS
  • Georgia
  • Impact

Более подробно про шрифты и их выбор читайте в статьях:

7. Свойство font-size: 15px; — задает размер текса, в данном случае 15px. Можете вместо px так же писать другие единицы размерности: em и om .

8. Свойство font-weight: value; — задает толщину текста (насыщенность). Возможные значения:

  • bold — полужирное
  • bolder — жирное
  • lighter — светлое
  • normal — обычный

Можно толщину задавать цифрами: 100, 200, 300, 400, 500, 600, 700, 800, 900. Более подробно читайте в статье: свойство CSS font-weight

9. Свойство height: 100%; — задает высоту. Можно задавать в %, а можно в пикселях (px). Например: height: 100px .

10. Свойство padding-top: 5px; — отступ сверху. Возможно задать значение auto . Аналогичный тег: margin-top с разницей, что padding — отступ внутри элемента, а margin — от других элементов.

11. Свойство padding-right: 4px; — отступ справа. Возможно задать значение auto . Аналогичный тег: margin-right.

12. Свойство padding-bottom: 5px; — отступ снизу. Возможно задать значение auto . Аналогичный тег: margin-bottom.

13. Свойство padding-left: 4px; — отступ слева. Возможно задать значение auto . Аналогичный тег: margin-left.

14. Свойство width: 100%; — задает ширину. Можно задавать в %, а можно в пикселях (px).

15. Свойство overflow: value; — область видимости содержания блочного элемента, которое не помещается в нем. Возможные значения параметра:

  • visible — отображается все содержание элемента, даже за пределами установленной высоты и ширины
  • hidden — отображается только область внутри элемента, остальное будет обрезано
  • scroll — всегда добавляются полосы прокрутки
  • auto — полосы прокрутки добавляются только при необходимости

Более подробно читайте в статье: свойство CSS overflow

16. Свойство text-align: value; — выравнивание текста. Возможные значения параметра:

  • left — по левому краю
  • right — по правому краю
  • center — по центру
  • justify — выравнивание по левому и правому краю
  • auto — автоматически
  • inherit — наследование значения предка

Более подобно читайте в статье свойство CSS text-align

17. Свойство float: value; — определяет сторону, по которой будет выравниваться какой-то элемент, а остальные элементы будут обтекать его с других сторон. Возможные значения параметра:

  • left — по левому краю
  • right — по правому краю
  • none — отсутствует
  • inherit — наследование значения предка

18. Свойство line-height: 22px; — устанавливает межстрочный интервал в пикселях. Более подробно про растояние между строками читайте в статье свойство CSS line-height

19. Свойство white-space: value; — задает отображение между пробелами. Возможные значения:

  • normal — обычное значение
  • nowrap — пробелы не учитываются, переносы строк в коде HTML игнорируются
  • pre — текст показывается с учетом всех пробелов и переносов, в случае длинной строки будет добавлена полоса прокрутки
  • pre-line — пробелы не учитываются, текст автоматически переносится на следующую строку
  • pre-wrap — сохраняются все пробелы и переносы, автопереход на следующую строку
  • inherit — наследование значения предка

Более подробно читайте в статье: свойство CSS white-space

20. Свойство display: value; — определяет способ показа элемента. Имеет довольно много параметров:

  • block — элемент показывается как блочный
  • inline — элемент отображается как встроенный
  • inline-block — создает блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу
  • inline-table — элемент является таблицей
  • list-item — элемент выводится как блочный и добавляется маркер списка
  • none — временно удаляет элемент из документа. С помощью скриптов можно сделать его появление
  • run-in — устанавливает элемент как блочный или встроенный в зависимости от контекста
  • table — элемент является блочной таблицей
  • table-caption — задает заголовок таблицы подробно
  • table-cell — элемент представляет собой ячейку таблицы
  • table-column — назначает элемент колонкой таблицы
  • table-column-group — элемент является группой одной или более колонок таблицы
  • table-footer-group — используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы
  • table-header-group — элемент предназначен для хранения одной или нескольких строк ячеек
  • table-row — элемент отображается как строка таблицы
  • table-row-group — создает структурный блок, состоящий из нескольких строк таблицы

Более подробно читайте в статье: свойство CSS display

21. Свойство text-decoration: value; — опция для редактирования внешнего вида текста. Имеет несколько параметров:

  • blink — мигающий текст
  • line-through — перечеркнутый текст
  • overline — верхнее подчеркивание текста
  • underline — нижние подчеркивание текста
  • none — выводит обычный текст
  • inherit — наследуется у предка

Более подробно читайте в статье: свойство CSS text-decoration

22. Свойство text-transform: capitalize; — преобразование текста в заглавные или прописные буквы.

  • capitalize — первый символ каждого слова в предложении будет заглавным
  • lowercase — перевод всего текста в нижний регистр
  • uppercase — перевод всего текста в верхний регистр
  • none — не менять ничего
  • inherit — наследование предка

Более подробно читайте в статье: свойство CSS text-transform

23. Свойство letter-spacing: 2px; — задает расстояние между буквами. Более подробно читайте в статье: свойство CSS letter-spacing

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

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

Илон Маск рекомендует:  Что такое код pg_last_error
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL