Что такое внешние и внутренние таблицы стилей. Основные элементы CSS

Обучающие курсы:

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

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

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

Font-family - имя шрифта;
font -size - размер;
font-weight - жирность;
font-style - стиль (normal, italic - курсив, oblique - наклонный);
color - цвет;
background-color - цвет фона;
background-image - рисунок для фона;
text-align - выравнивание.

Это лишь очень малая часть всех предусмотренных атрибутов. Общий принцип построения встроенной таблички стилей таков.

Рассмотрим пример использования таблицы стилей (листинг 12.10).

Листинг 12.10.

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

Работа с таблицей стилей</ТIТLЕ> <STYLE TYPE="text/css> H1, P {font-family: "Arial"; font-size: 14pt; text-align: right} H2, H4 {color: "green"; font-style: italic} </STYLE> </HEAD> <BODY> <Р>Мой текст <Н1>Мой заголовок первого уровня/Н1> <Н2>Мой заголовок второго уровня/Н2> <НЗ>Мой заголовок третьего уровня</НЗ> <Н4>Мой заголовок четвертого уровня</Н4> </B0DY> </HTML> </blockquote> Как это будет выглядеть в окне браузера, показано на рис. 12.4. Рис. 12.4. Результат выполнения листинга 12.10 Можно создать подобную таблицу стилей в отдельном файле, а затем встроить ее в HTML- страницу с помощью дескриптора <LINK> с атрибутами REL (значение "stylesheet"), TYPE (необязательного, как и в дескрипторе <STYLE>, со значением "text/css") и HREF с адресом таблицы стилей (расширение должно быть. css). Зададим для каждого дескриптора свой стиль. Для этого надо использовать атрибут Style. Создадим HTML-страницу по-новому (листинг 12.11). Листинг 12.11. Пример использования атрибута Style <img src='https://i0.wp.com/java-study.ru/images/samouchitel/12-7.gif' width="100%" loading=lazy> Создадим теперь класс со стилями. Пример создания подобного класса представлен в листинге 12.12. Листинг 12.12. Создание класса со стилями <img src='https://i1.wp.com/java-study.ru/images/samouchitel/12-8.gif' width="100%" loading=lazy> Чтобы работать со слоями, необходимо использовать таблицу стилей CSS. Рассмотрим основные атрибуты для работы с ними: <blockquote> Position - откуда отмеряются координаты; absolute - относительно левого верхнего угла; relative - относительно положения курсора в тексте; static - относительно фона; width - ширина слоя; height - высота слоя; left - координата по оси х; top - координата по ос у; z - Index - старшинство слоя. </blockquote> Это самые основные атрибуты. Подобие слоев можно создавать с помощью дескриптора <DIV>...</DIV>. Давайте переделаем пример программы из раздела «Слои в HTML» для учета возможностей Internet Explorer - получится почти идентичный слой (листинг 12.13). В первой главе вы узнали, что дизайн сайта создается с помощью CSS. Для лучшего понимания, что и для чего нужно использовать, давайте рассмотрим один наглядный пример. Представьте себе, что HTML – это черно-белый структурированный каркас дома без украшений, а CSS – это то, с помощью чего мы создаем уникальный образ. Как видите, у дома справа появились цвета, материалы и дополнительные украшения. На веб-странице происходит все то же самое: с помощью правил CSS на ней появляются цвета, отступы, меняется стиль шрифтов и размеры элементов, создается целый, завершенный стиль. <h2>Простая таблица стилей</h2> Давайте же взглянем, как выглядит самая элементарная таблица стилей и из каких элементов она состоит. Это пример CSS-стиля для всех тегов Которые есть на веб-странице:Как теперь будет выглядеть текст В браузере и что означает каждая строка? Все очень просто: шрифт будет иметь полужирное начертание и цвет #1E824C (шестнадцатеричный код цвета) и отображаться в размере 1em (относительная единица, равная размеру шрифта, который задан по умолчанию в браузере). <img src='https://i2.wp.com/idg.net.ua/blog/wp-content/uploads/chapter-02-css-dlya-p.png' width="100%" loading=lazy>Вышеописанный стиль, как и любой другой, включает в себя набор элементов, у которых есть собственные названия. Запомните их, чтобы при чтении следующих глав вы понимали, о чем идет речь.Селектор Указывая его, мы говорим браузеру, к чему именно хотим применить стиль. В нашем случае селектором является p . Блок объявлений Так называется всё содержимое, находящееся между фигурными скобками {} после селектора. Стилевое свойство Это команда, с помощью которой указывается желаемый вариант форматирования (например, вы хотите изменить начертание <a href="/pendrive-and-hdd/programma-dlya-prosmotra-i-udaleniya-shriftov-programmy-dlya-konvertirovaniya/">шрифта font</a>-weight , цвет color , размер шрифта font-size и т. д.). После имени свойства необходимо ставить двоеточие. В дальнейшем вы познакомитесь с большим количеством свойств CSS. Значение свойства После двоеточия записывается само значение свойства, которое вы определяете самостоятельно, создавая таким образом собственный стиль. В зависимости от свойства необходимо указывать подходящее ему значение. Например, начертание шрифта задается ключевыми словами bold , bolder и т. д., цвет – шестнадцатеричным значением, RGB(A), HSL(A) или ключевыми словами red , orange , white и т. д., размер шрифта – единицами измерения CSS (процентами% , пикселямиpx , пунктамиpt , высотой шрифтаem ) или константами small , medium , large и т. д. После указания значения свойства ставится точка с запятой. <img src='https://i2.wp.com/idg.net.ua/blog/wp-content/uploads/chapter-02-css-syntax.png' width="100%" loading=lazy> Поскольку CSS не чувствителен к переносу строк, пробелам, символам табуляции и регистру, вы можете оформлять ваш код так, чтобы в дальнейшем его было удобно читать и править. К примеру, мы могли бы написать вышеприведенный код в одной строке:P {font-weight:bold;color:#1E824C;font-size:1em;} Он тоже работает, но легко ли в нем разобраться? Особенно когда код CSS достаточно длинный. Конечно, не помешало бы разделить его хотя бы пробелами. Существует несколько правил хорошего тона, и если вы сразу выучите их, то в будущем скажете себе «спасибо». Очень часто при описании стиля используется компактная форма записи, при которой все свойства для одного селектора указаны в одном блоке:P { font-weight: bold; color: #1E824C; font-size: 1em; } А такая форма записи весьма громоздка, хоть и работает:P {font-weight: bold;} p {color: #1E824C;} p {font-size: 1em;} Чтобы было легче ориентироваться в коде, рекомендуется записывать каждое свойство на новой строке и использовать табуляцию либо пробелы при перечислении свойств. Иногда между двоеточием и значением свойства ставится пробел, но здесь вы можете решать, как вам удобнее. Для дополнительного удобства можно добавлять комментарии прямо в CSS. В них вы можете писать пояснения, пометки, помогающие ориентироваться в таблицах стилей. Комментарии в CSS записываются между символами /* и */ . Они не отображаются на веб-странице в браузере и видны исключительно в коде. Разработчики также часто используют комментарии для того чтобы скрыть временно ненужный участок кода CSS. Выглядят комментарии таким образом: /* Стиль для основного текста */ p { font-weight: bold; color: #1E824C; font-size: 1em; } <h3>Внутренние и внешние таблицы стилей</h3> Когда вы создали таблицу стилей, вы можете выбрать, каким образом прикрепить ее к веб-странице. Существует два варианта таблиц – внутренние, которые добавляются прямо на страницу, и внешние, которые находятся в отдельном файле с расширением.css и подключаются к странице с помощью ссылки. Внутренние таблицы стилей записываются в HTML-документе между тегами <style></style> . Нужно добавлять таблицу стилей в каждую веб-страницу. Если на сайте присутствует большое количество страниц, которым необходим одинаковый дизайн, то добавление, а также редактирование стилей становится неблагодарной работой – процесс займет очень много времени. Поэтому внутренние таблицы стилей считаются неудобными. Внешние таблицы стилей гораздо более распространены. Вам нужно только подключить таблицу ко всем необходимым веб-страницам, используя тег <link> c атрибутом rel (определяет отношение между страницей и подключаемым файлом) и значением stylesheet , которое означает, что в подключаемом файле содержится таблица стилей. Атрибут href – это путь (URL) к вашему файлу.css:  <link rel="stylesheet" href="css/style.css"> Редактируя только один файл, вы можете изменять стиль для всего сайта сразу, вне зависимости от того, сколько на нем страниц. Это очень удобно, особенно для крупных ресурсов. <h3>Урок: создаем таблицу стилей</h3> Поскольку внешние таблицы стилей наиболее удобны и широко используются при разработке дизайна, мы будем учиться создавать именно их. Архив с файлами для данного урока вы можете загрузить на этой странице. В папке вы найдете HTML-документ с примером простой страницы и изображение (будет использоваться в уроке). Откройте HTML-документ в браузере. Вы увидите, что страница выглядит совершенно обычно. Чтобы придать ей более привлекательный вид, давайте напишем для нее стиль. Пока что вам не нужно слишком сильно вникать в то, что означает тот или иной кусок кода. Сейчас вам необходимо понять сам принцип работы. Приступим. <h4>Подключение CSS к HTML</h4> Для начала откройте на компьютере любой текстовый редактор (подойдет блокнот) и создайте пустой файл с именем style , сохранив его с расширением.css (должен получиться файл style.css). Сохраните файл в той папке, где находится загруженный HTML-документ. Откройте HTML-документ в текстовом редакторе, а также в браузере (чтобы было удобно просматривать изменения во внешнем виде страницы). Добавьте между тегами <head></head> следующий код: <link href="http://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic" rel="stylesheet"> <link href="style.css" rel="stylesheet"> Вкратце о том, что вы только что сделали. Вставив этот код в HTML-документ, вы: <ul><li>указали ссылку на шрифт под названием Roboto Condensed, который будет взят с сервера Google (подробнее о шрифтах Google мы расскажем позже);</li> <li>подключили свою внешнюю таблицу стилей style.css (пока что пустую).</li> </ul><h4>Пишем стиль CSS</h4> Сохраните изменения в HTML-документе и перейдите в вами созданный пустой файл.css . Давайте добавим стиль для страницы:Html { padding-top: 5px; background-image: url(background.jpg); } Сохраните изменения. Поздравляем, вы написали первое правило – оно касается тега <html> . Первое свойство - padding-top - добавит отступ сверху между окном браузера и содержимым веб-страницы в размере 5 пикселей. С помощью второго свойства, background-image , вы подключили изображение для фона всей страницы, указав путь к графическому файлу (находится в той же папке, что и HTML-документ). Обновите открытую веб-страницу в браузере. Если всё сделано верно, вы увидите, что на странице появился фон, а между верхней частью окна и текстом немного увеличился отступ. Body { width: 75%; padding: 40px; margin: 15px auto; background-color: #EBEBEB; border-radius: 30px; } Сохраните изменения в файле. Сейчас вы: <ul><li>задали область для содержимого тега <body> , которая равна 75% от ширины окна браузера;</li> <li>обеспечили отступ в 40 пикселей от всех сторон области содержимого;</li> <li>расположили область по центру страницы, а также сделали отступ сверху и снизу в 15 пикселей;</li> <li>задали цвет фона #EBEBEB для области содержимого;</li> <li>скруглили углы прямоугольной области, указав радиус скругления 30 пикселей.</li> </ul>Снова обновите HTML-документ. При этом убедитесь, что кэш отключен либо перезагрузите страницу с обновлением всех связанных с ней файлов, используя специальную комбинацию клавиш (например, для Chrome это Ctrl+F5 ). Вы увидите, что по центру страницы добавилась прямоугольная область со скругленными углами. Это и есть результат ваших действий в файле CSS. Вы можете также попробовать уменьшить окно браузера и полюбоваться, как ширина прямоугольной области подстраивается под его размер. Это происходит благодаря тому, что ширина width задана в процентах. <h4>Изменяем шрифт с помощью CSS</h4> Пора украсить наш текст. Добавьте в таблицу стилей этот код и сохраните изменения:H1 { color: #E87E04; font-size: 2em; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; } h2 { color: #E87E04; font-size: 1.7em; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; } p { color: #22313F; line-height: 150%; margin-top: 20px; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; } Написав это, вы задали цвета шрифтов для тегов h1 , h2 , p , указали их размеры, добавили отступы margin от левого края в 20 пикселей и дополнительно для Сделали отступ сверху в 20 пикселей и установили интерлиньяж line-height (межстрочный интервал текста) на 50% больше стандартного. К тому же, вы подключили ко всем трём тегам шрифт Roboto Condensed (вот для чего в самом начале необходимо было указать ссылку на него в HTML-файле). Обновите страницу в браузере и полюбуйтесь результатом работы. В этом уроке мы попробуем еще одну вещь. Допишите в CSS этот код:Emphasis { font-weight: bold; } Сохранитесь и обновите страницу в браузере. Вы увидите, что в последнем абзаце шрифт в некоторой части текста стал жирным. Чтобы понять, что произошло, перейдите в окно текстового редактора, где в самом начале вы открыли HTML-файл. Взгляните на последний абзац: часть предложения завернута в тег с классом emphasis . Таким образом вы написали стиль для отдельной строки текста в абзаце. Подробнее о классах мы расскажем в следующей главе. В конечном итоге у вас должна получиться вот такая страница: <img src='https://i0.wp.com/idg.net.ua/blog/wp-content/uploads/chapter-02-lesson-create-first-css-style.png' width="100%" loading=lazy> В качестве тренировки попробуйте изменить размер текста для (допустим, 1.1em), а также увеличить отступ между И левым краем области содержимого еще на 10 пикселей. <h3>Выводы</h3> В данной главе был рассмотрен синтаксис CSS, а также способ создания элементарной таблицы стилей. Вы узнали, как подключить CSS к HTML странице, а также научились создавать простые стили. Выделим главные вещи, которые необходимо запомнить из этой главы: Любой стиль CSS состоит из нескольких элементов: селектора, стилевого свойства и значения этого свойства. Все свойства и их значения записываются в блоке объявлений между двумя фигурными скобками {} после указания селектора. Нужно внимательно следить за знаками: две фигурные скобки (открывающая в начале блока объявлений и закрывающая в конце). Без этих скобок CSS будет работать некорректно. Требуется обязательно ставить двоеточие после свойства и точку с запятой после значения. Для удобства и лучшего восприятия кода CSS записывайте каждое свойство в новой строке, а также не скупитесь на пробелы и табуляцию. В этой главе речь пойдет о том, как внедрить CSS в документ HTML, то есть связать стилевое описание элемента непосредственно с самим элементом, каким либо HTML тегом. Осуществить данную задачу можно тремя способами: <ul><li>Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.</li><li>Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).</li><li>Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.</li> </ul>Давайте более подробно рассмотрим каждый вариант, а заодно познакомимся с правилами синтаксиса написания CSS. <h2>Атрибут style.</h2> Практически каждый HTML тег имеет атрибут style , который говорит о том, что к этому тегу применяется некое стилевое описание. Пишется так: style="" > Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента Ну например: style="color: #ff0000; font-size:12px" > это параграф с индивидуальным стилем В данном случае мы указали, что этот параграф должен отображаться красным цветом и иметь размер шрифта в 12 пикселей. В последующих главах я подробно расскажу о том что написано в кавычках, сейчас же речь идет о том как применить CSS к какому либо HTML тегу. По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Атрибут style

style="background-color: #c5ffa0" >

style="color: #0000ff; font-size:18px" >Всё о слонах

Купить слона

style="color: #ff0000; font-size:14px" >

style="color: #0000ff; font-size:16px" >Взять слона на прокат

style="color: #ff0000; font-size:14px" >

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

Тег (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.

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

Тег style

Всё о слонах

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

Купить слона

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

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

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

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

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

Тег идет непосредственное объявление стилей тех или иных 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 для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
Используйте тег

Заголовок первого уровня

Заголовок второго уровня, синий

Заголовок третьего уровня

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