Как прописать стили css в html

Основы CSS

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

Грубо говоря, HTML — это каркас страницы, а CSS — это ее декорирование.

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

Существует три способа подключения стилей CSS к документу HTML.

Подключение CSS. Способ 1: внутри элемента

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

Итак, суть данного способа в том, что Вы прописываете стили прямо внутри тега HTML с помощью атрибута style.

Чтобы было нагляднее, представим пример:

В данном примере в документе HTML у нас есть абзац (он находится внутри тегов <p> и </p>). Чтобы задать стиль конкретно для этого абзаца, мы дописали прямо в теге атрибут style token tag"> color : blue ", таким образом, весь текст в данном абзаце будет выделен синим цветом.

Подключение CSS. Способ 2: внутри документа

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

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

Для того чтобы это сделать Вам необходимо прописать стили в самой структуре страницы в теге <head> (об этом теге мы упоминали тут).

Опять же для простоты приведем пример:

Как видите, в данном примере мы прямо в начале файла HTML прописали тег <style> и внутри него задали, что все абзацы должны быть выделены желтым цветом ( p < color : yellow ; >), а все ссылки в тексте синим ( a < color : blue ; >).

Подключение CSS. Способ 3: внешние стили (рекомендуемый)

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

Чтобы подключить CSS подобным образом, необходимо:

1. Создать отдельный файл с расширением .css, в котором будут перечислены все необходимые стили (в нашем примере файл будет называться file.css). Пример содержимого файла:

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

2. Загрузить полученный файл в систему, воспользовавшись инструкцией по ссылке.

3. Прописать в нужных HTML-файлах в теге <head> ссылку на данный файл с помощью тега <link>:

В данном примере мы прописали для HTML-документа, что ему следует использовать стили, прописанные в файле file .css ( < link rel = " stylesheet " type = " text/css " href = ‘file .css ‘ /> ). Таким образом, для данной страницы все оформление будет тянуться из того самого файла, что мы сформировали и загрузили в систему.

Селекторы

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

Чтобы прописать стиль для какого-либо элемента, Вам будет необходимо сперва задать, какой именно элемент в HTML-файлах должен использовать эти стили. Указание на тип элемента и будет селектором. К примеру, в качестве селектора Вы можете использовать имя элемента (например, <h1> или <a>), а также значение атрибута (например, id или class).

Приведем пример (как Вы уже могли заметить в стилях не нужно прописывать угловые скобки):

Тут в качестве селектора выступает "p" — это значит, что для всех элементов с тегом <p> будет применен стиль, заданный в скобках (желтый цвет текста).

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

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

  • Селекторы типа. Как видно из названия, указывают на применение стилей к элементам определенного типа, например, к элементам с тегом <a> или <div>. Таким образом, примерный вид кода с селектором типа будет выглядеть так (в нашем примере селектор задает стили для элементов с тегом <a> — то есть для всех ссылок в HTML-документе, а в фигурных скобках должны быть прописаны нужные стили):
  • Селекторы класса. Как мы писали в инструкции к HTML, Вы можете прописать для определенных тегов атрибут class. Соответственно, в файле CSS Вы можете прописать стили для элементов с данным классом. Это более конкретный селектор, поскольку позволяет применить стили не только к элементам одного типа, но и к разным элементам, для которых прописан один и тот же class. К примеру, у Вас на страницах для разных элементов — скажем, для некоторых тегов <p> и некоторых ссылок <a> прописан (в файле HTML это будет выглядеть как <p >содержимое абзаца</p>). Теперь Вы хотите задать определенные стили для всех элементов с этим стилем (шрифты, цвета и пр.). Для этого Вам необходимо прописать в файле CSS примерно следующее (в фигурных скобках опять же должны быть вписаны нужные Вам стили):
  • Селекторы идентификатора. Поскольку идентификатор определяет только один уникальный элемент (в HTML это атрибут id), подобный селектор позволяет точечно применить стиль к отдельному элементу. Например, Вы пометили в HTML какой-либо абзац атрибутом-идентификатором unique (в коде страницы это будет <p >содержимое абзаца</p>) и теперь хотите задать стили конкретно для этого абзаца. Пропишите в CSS:

Свойства

Как Вы могли заметить, после каждого селектора в фигурных скобках необходимо прописать свойства, которые будут применены к элементам.

Свойства пишутся внутри фигурных скобок, перед двоеточием.

Перечень возможных свойств довольно обширен. Наиболее часто используемые это:

  • background — позволяет установить свойства фона (например , background-color — цвет фона; background-image — фоновая картинка для элемента),
  • color — цвет элемента,
  • font-size — размер шрифта ,
  • height и width — высота и ширина элементов .

Например, если мы хотим задать для абзацев определенный размер шрифта и цвет текста, то в файле CSS прописываем:

С полным перечнем свойств CSS Вы можете ознакомиться по ссылке.

Значения

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

Возьмем тот же пример с шрифтами и цветами для абзацев и теперь укажем значения в свойствах (красный цвет и размер шрифта в 20 пикселей):

Каскадность и приоритетность

Пара особенностей, которые стоит учитывать при работе с CSS — каскадность и приоритетность.

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

Грубо говоря, то значение цвета, что указано ниже — будет обладать приоритетом и именно оно и применится к элементам (размер шрифта в этом случае останется 12, поскольку его не переопределяли).

Также стоит отметить, что в CSS стили наследуются от родительских тегов к дочерним. Проще это продемонстрировать на примере:

Тут для родительского тега <body> задан шрифт Calibri, затем для абзацев в тексте указан размер 14 пикселей и для курсивных текстов задан цвет желтый. В данном случае тег <p> унаследует шрифт Calibri, а тег <em> шрифт Calibri и размер шрифта в 14 пикселей.

Однако, если мы пропишем для дочерних тегов собственные стили (собственный шрифт и размер) — приоритетом будут обладать они:

В этом случае у абзацев уже будет свой шрифт Arial размером 14 пикселей, а у курсивных текстов не только свой шрифт Comic Sans, но и размер шрифта будет отличным от другого текста в том же абзаце — 16 пикселей и желтого цвета.

Комбинация селекторов

Для удобства и сокращения кода CSS Вы можете группировать и комбинировать селекторы.

Комбинируя селекторы Вы можете быть более конкретными в том, какой элемент или группу элементов Вы хотели бы выбрать.

К примеру, если Вы хотите, чтобы абзацы и заголовки h2 и h3 были написаны одним шрифтом и цветом и отличались только лишь размером, Вы можете сперва сгруппировать элементы <p>, <h2> и <h3> и указать для них шрифт и цвет, и уже ниже для каждого элемента указать отдельно размер шрифта. Выглядеть это будет примерно следующим образом:

Разберем еще один, более сложный пример комбинации селекторов. Например, у Вас есть страница, в которой абзацы лежат внутри элемента с классом brightstyle, но при этом для отдельных абзацев прописан собственный стиль dullstyle, и Вы хотите для всех абзацев brightstyle установить красный цвет текста, а для тех абзацев, у которых свой класс dullstyle — серый цвет текста (иными словами, в HTML у Вас, скажем, есть < div > и для него прописан класс brightstyle — <div class = "brightstyle" , внутри него несколько абзацев <p>, а также несколько абазцев с собственными классами <p class = "dullstyle" > . </p> ). Представим, как это будет выглядеть в CSS:

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

Иными словами, сперва в нашем примере описано, что для всех абзацев <p> (это основной селектор) с классом brightstyle (это уже уточнение) будет применяться красный цвет.

Затем указано, что для всех элементов с классом dullstyle (основной селектор), являющихся абзацами <p>, лежащими внутри класса brightstyle (это уточнения) будет применен серый цвет.

Также стоит заметить, что на применение стилей влияет наличие пробелов.

В нашем примере есть пробел между ".brightstyle" и "p.dullstyle", но нет пробела между "p" и ".dullstyle".

Отсутствие пробела указывает на то, что цвет будет применен только к абзацам <p> с классом .dullstyle, таким образом объединяя 2 селектора одного элемента, повышая специфичность селектора. Если просто убрать пробел — запись p .dullstyle будет означать последовательность селекторов, то есть читать можно будет так — элементы с классом .dullstyle внутри абзаца <p> . Если бы мы убрали пробел и селектор абзаца <p> — цвет применился бы ко всем элементам с классом .dullstyle, а не только к абзацам <p>, таким образом снизится специфичность селектора.

Дополнительная информация

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

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

HTML стили

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

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

Что такое стиль? Стиль устанавливает внешний вид какого-либо элемента страницы, т.е. грубо говоря, это правило, которое сообщает браузеру как форматировать определенный элемент (например, измененить фон или цвет шрифта).

Каждый элемент HTML имеет стиль по умолчанию. Изменение стиля по умолчанию в HTML элементе может быть произведено с использованием глобального атрибута style. Атрибут задает встроенный (inline) CSS стиль для элемента. Встроенный CSS используется, чтобы применить уникальный стиль для одного HTML элемента. В рамках изучения HTML мы рассмотрим только использование встроенного CSS.

Глобальный атрибут style имеет следующий синтаксис:

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

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

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

Давайте разберем, какие стили к чему были добавлены:

  1. Для тега <html> установили выравнивание текста по центру, для этого мы использовали CSS свойство text-align со значением center . Обращаю внимание, что выравнивание по центру распостраняется на все элементы в документе, аналогичный эффект можно было достичь задав этот стиль для элемента <body>. Изменяя значения свойства text-align вы можете также выровнять текст как по левому ( left ) и правому ( right ) краю, так и по ширине ( justify ).
  2. Для всего видимого содержимого (тег <body>) с использованием CSS свойства background-color мы задали цвет заднего фона khaki . Цвет khaki является одним из предопределенных цветов (стандартное имя цвета). Более подробную информацию по использованию цветов вы получите в следующей статье "HTML цвета".
  3. Для абзаца (тег <p>), который содержит имя автора стихотворения, мы применили два CSS свойства, первое color задает цвет текста (стандартное имя цвета brown — коричневый), второе font-size устанавливает размер текста. Мы установили размер текста равный 26 пикселям. Применение пикселей широко распространено при создании веб-страниц, так как эти единицы измерения обеспечивают совместимые параметры размера шрифта на различных типах мониторов и не зависят от настроек браузера. Пиксель соответствует одному пикселю, который указан в разрешении экрана пользователя.
  4. Для элемента <pre>, который определяет предварительно отформатированный текст, мы, с использованием CSS свойства font-family установили шрифт содержимого — Courier (компьютерный шрифт, относящийся к классу моноширинных, все знаки (кегельные площадки), которого имеют одинаковую ширину).

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

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

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

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

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

Подсказка: в этом примере используются следующие цвета: white (белый), khaki (хаки), gray (серый). Для текста стихотворения используется шрифт Verdana .

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

HTML с CSS

CSS экономит много времени. Он может управлять макетом нескольких веб страниц одновременно.

CSS = Стили и Цвета

Что такое CSS?

Каскадные таблицы стилей (CSS) используются для форматирования макета веб страницы.

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

Совет: Слово cascading означает, что стиль, примененный к родительскому элементу, будет также применяться ко всем дочерним элементам внутри родительского элемента. Таким образом, если вы установите цвет основного текста на "blue", все заголовки, параграфа и другие текстовые элементы внутри тела также получат тот же цвет (если вы не укажете что-то еще)!

HTML Стили с помощью CSS

CSS — Cascading Style Sheets (Каскадные Таблицы Стилей).

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

CSS экономит много времени. Он может контролировать макет нескольких страниц одновременно.

CSS может быть добавлен к элементам HTML 3 способами:

  • Встроенный — с помощью атрибута style в HTML элементы
  • Внутренний — с помощью элемента <style> в разделе <head>
  • Внешний — с помощью внешнего CSS файла

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

Совет: Вы можете узнать гораздо больше о CSS в CSS Учебнике.

Встроенный CSS

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

Встроенный CSS использует атрибут стиля элемента HTML.

В данном примере задается синий цвет текста элемента <h1> :

Пример

<h1 style="color:blue;">Это синий заголовок</h1>

Внутренний CSS

Внутренний CSS стиль используется для одной HTML страницы.

Внутренний CSS определяется в разделе <head> HTML страницы, в элементе <style> :

В следующем примере задается цвет текста всех элементов <h1> (на этой странице) до синего цвета, а цвет текста всех элементов <p> красный. Кроме того, страница будет отображаться с помощью фона "powderblue" :

Пример

Внешний CSS

Внешняя таблица стилей используется для нескольких HTML страниц.

Чтобы использовать внешнюю таблицу стилей, нужно добавить ссылку на файл в разделе <head> HTML страницы:

Пример

Внешняя таблица стилей может быть написан в любом текстовом редакторе. Файл не должен содержать HTML код, и должен быть сохранен с расширением .css .

Вот как выглядит внешний файл "styles.css" :

Совет: С помощью внешней таблицы стилей вы можете изменить внешний вид всего веб сайта, изменив один файл!

CSS Colors, Fonts и Sizes

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

CSS свойство color определяет цвет текста, который будет использоваться.

CSS свойство font-family определяет семейство шрифтов, который будет использоваться.

CSS свойство font-size определяет размер шрифта, который будет использоваться.

Пример

Свойство Border

CSS свойство border определяет границы вокруг элемента HTML:

Совет: Вы можете определить границу почти для всех HTML элементов.

Пример

Использование свойства CSS border:

Свойство Padding

CSS свойство padding определяет отступ (пробел) между текстом и рамкой:

Пример

Использование свойств CSS border и padding:

Свойство Margin

CSS свойство margin определяет поля (пространства) вне границы:

Пример

Использование свойств CSS border и margin:

Ссылка на внешний CSS

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

Пример

В этом примере используется полный URL адрес для ссылки на таблицу стилей:

Пример

Это пример ссылки на таблицу стилей находится в папке HTML на данном веб сайте:

Пример

Это пример ссылки на таблицу стилей находится в одной папке на той же странице:

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

Подробнее о файлах узнаете в главе HTML Путь к Файлам.

Краткое содержание

  • Используйте HTML атрибут style для определения встроенного стиля
  • Используйте HTML элемент <style> для определения внутреннего CSS
  • Используйте HTML элемент <link> для ссылки на внешний файл CSS
  • Используйте HTML элемент <head> для сохранения <style> и <link> элементов
  • Используйте CSS свойство color для цвета текста
  • Используйте CSS свойство font-family для текста шрифтов
  • Используйте CSS свойство font-size для размера текста
  • Используйте CSS свойство border для границ
  • Используйте CSS свойство padding для пространства внутри границы
  • Используйте CSS свойство margin для пространство снаружи границы

Совет: Вы можете узнать гораздо больше о CSS в разделе CSS Учебник.

HTML Упражнения

HTML Стиль тегов

Тег Описание
<style> Определяет информацию о стиле для HTML документа
<link> Определяет связь между документом и внешним ресурсом

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *