Как создать css документ
Перейти к содержимому

Как создать css документ

  • автор:

Как создать файл стилей CSS?

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

Первым делом нужно разобраться, что вообще собой представляет этот файл. Нужно понимать, что файл стилей CSS – это обычный текстовый файл, точно такой же, какой вы можете создать в любом текстовом редакторе «Блокнот», «Microsoft Word» и.т.д.

Единственное, что отличает файл стилей от других текстовых документов – это его расширение, которое имеет вид *.css.

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

Для тех, кто любит видео:

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

Способ 1. Создание файла CSS меняя расширение текстового файла.

Откройте любой текстовый редактор, например, редактор «Блокнот», который входит в состав операционной системы Windows. Найти эту программу можно через главное меню Пуск -> Все программы ->Стандартные -> Блокнот.

В главном меню программы выбираем «Файл-Сохранить как».

И сохраняем текстовый файл с расширением *.txt.

Теперь нужно поменять расширение этого файла с *.txt на *.css.

Если у Вас не отображается расширение файлов, вот заметка:

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

Теперь для создания файла CSS нужно просто переименовать файл, изменив его расширение на css.

После данной операции вы получите файл стилей css.

Способ 2. Создание файла стилей с помощью редакторов кода (на примере Dreamweaver).

Многие специализированные программы для редактирвания кода, например Dreamweaver, имеют специальные функции для создания файлов стилей CSS.

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

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

После того, как файл будет создан, его можно будет сохранить через главное меню «Файл-сохранить как…».

Аналогичный процесс создания файлов CSS есть и в других редакторов кода.

На сегодня все. Подготовьте все необходимые программы, о которых сегодня говорилось и создайте файл стилей style.css. Завтра мы начнем наполнять его содержимым.

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

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Начало работы с CSS

В этой статье мы возьмём простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.

Необходимые знания: Базовая компьютерная грамотность, Базовое программное обеспечение, базовые знания работа с файлами, и базовые знания HTML (смотрите Введение в HTML.)
Задача: Понять основы связывания CSS-документа с HTML-файлом и уметь выполнять простое форматирование текста с помощью CSS.

Начнём с HTML

Нашей отправной точкой является HTML-документ. Вы можете скопировать код снизу, если вы хотите работать на своём компьютере. Сохраните приведённый ниже код как index.html в папке на вашем компьютере.

doctype html> html lang="ru"> head> meta charset="utf-8" /> title>Начало работы с CSStitle> head> body> h1>Я заголовок первого уровняh1> p> Это абзац. В нём есть span>элемент spanspan>, а также a href="http://example.com">ссылкаa>. p> p>Это второй абзац. Он содержит em>акцентирующийem> текст.p> ul> li>Элемент одинli> li>Элемент дваli> li>Элемент em>триem>li> ul> body> html> 

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

Добавление CSS в наш документ

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

Создайте файл в той же папке, что и документ HTML, и сохраните его как styles.css . Расширение .css показывает, что это файл CSS.

Чтобы связать styles.css с index.html, добавьте следующую строку где-то внутри HTML документа:

link rel="stylesheet" href="styles.css" /> 
h1  color: red; > 

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

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

Стилизация HTML-элементов

Делая наш заголовок красным, мы уже продемонстрировали, что можем нацеливать и стилизовать элемент HTML. Мы делаем это путём нацеливания на элемент selector — это селектор, который напрямую соответствует имени элемента HTML. Чтобы нацелиться на все абзацы в документе, вы должны использовать селектор p . Чтобы сделать все абзацы зелёными, вы должны использовать:

p  color: green; > 

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

p, li  color: green; > 

Попробуйте это в интерактивном редакторе ниже (отредактируйте поля кода) или в своём локальном документе CSS.

Изменение поведения элементов по умолчанию

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

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

li  list-style-type: none; > 

Попробуйте добавить это в свой CSS сейчас.

Свойство list-style-type — это хорошее свойство, информацию о котором можно найти на MDN, чтобы увидеть, какие значения поддерживаются. Взгляните на страницу для list-style-type (en-US) и вы найдёте интерактивный пример в верхней части страницы, чтобы опробовать некоторые другие значения, затем все допустимые значения будут подробно описаны ниже.

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

Добавление класса

Пока у нас есть стилизованные элементы, основанные на их именах HTML-элементов. Это работает до тех пор, пока вы хотите, чтобы все элементы этого типа в вашем документе выглядели одинаково. В большинстве случаев это не так, и вам нужно будет найти способ выбрать подмножество элементов, не меняя остальные. Самый распространённый способ сделать это — добавить класс к вашему HTML-элементу и нацелиться на этот класс.

В своём HTML-документе добавьте Атрибут class ко второму пункту списка. Ваш список теперь будет выглядеть так:

ul> li>Элемент одинli> li class="special">Элемент дваli> li>Элемент em>триem>li> ul> 

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

.special  color: orange; font-weight: bold; > 

Сохраните и обновите, чтобы увидеть результат.

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

Иногда вы увидите правила с селектором, который перечисляет селектор HTML-элемента вместе с классом:

li.special  color: orange; font-weight: bold; > 

Этот синтаксис означает «предназначаться для любого элемента li, который имеет класс special». Если бы вы сделали это, вы бы больше не смогли применить класс к или другому элементу, просто добавив к нему класс; вы должны добавить этот элемент в список селекторов:

li.special, span.special  color: orange; font-weight: bold; > 

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

Стилизация элементов на основе их расположения в документе

Добавьте следующее правило в таблицу стилей.

li em  color: rebeccapurple; > 

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

Попробуйте также добавить это правило в таблицу стилей:

h1 + p  font-size: 200%; > 

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

Примечание: Как вы можете видеть, CSS даёт нам несколько способов нацеливания на элементы, и мы пока только слегка изучили его! Мы будем внимательно смотреть на все эти селекторы и многое другое в нашей статье Селекторы позже в нашем курсе.

Стилизация элементов на основе состояния

a:link  color: pink; > a:visited  color: green; > 

Вы можете изменить внешний вид ссылки, когда пользователь наводит на неё курсор, например, удалив подчёркивание, что достигается с помощью следующего правила:

a:hover  text-decoration: none; > 

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

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

Примечание: вы часто будете видеть упоминание о доступности в этих уроках и по всей MDN. Когда мы говорим о доступности, мы имеем в виду требование, чтобы наши веб-страницы были понятными и доступными для всех.

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

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

Сочетание селекторов и комбинаторов

Стоит отметить, что вы можете комбинировать несколько селекторов и комбинаторов вместе. Вот пример:

    , который идёт сразу после */h1 + ul + p. >

Вы также можете комбинировать несколько типов вместе. Попробуйте добавить следующее в ваш код:

body h1 + p .special  color: yellow; background-color: black; padding: 5px; > 

Это будет стиль любого элемента с классом special , который находится внутри

, который приходит сразу после , который находится внутри . Уф!

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

Не беспокойтесь, если это покажется сложным — вы скоро начнёте понимать это, когда будете писать больше на CSS.

Завершение

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

На следующем уроке мы рассмотрим структуру CSS.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 2 дек. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как подключить css-файл: разбираемся в деталях

Как? Существуют разные способы подключения CSS-файла для добавления стилей на HTML-странице. Можно использовать тег style, написать отдельный файл или использовать JavaScript.

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

В статье рассказывается:

  1. Задачи подключения файла CSS
  2. Добавление CSS файла через теги
  3. Подключение CSS-файла через внешние таблицы
  4. Приоритеты стилей CSS
  5. Другие способы подключения CSS-файла

Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.
Бесплатно от Geekbrains

Задачи подключения файла CSS

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

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

Добавление CSS файла через теги

Подключение CSS при помощи внешнего файла стилей через тег link

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

В параметре href следует прописать URL адрес файла, в котором хранятся параметры CSS. Значения rel=»stylesheet» и type=»text/css» говорят о том, что соответствующий файл содержит таблицу стиля в виде CSS.

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

Подключение CSS через тег style

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

Узнай, какие ИТ — профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Павел Симонов
Исполнительный директор Geekbrains

Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов - исполнительный директор Geekbrains

Павел Симонов
Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

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

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно
Уже скачали 26481

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

CSS стили для отдельного тега со значением style

Значение style применяется в том случае, когда требуется указать параметры стиля для отдельного элемента страницы. Инструкция выглядит следующим образом:

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

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

Стили CSS при помощи JavaScript

Сценарии, созданные на основе языка программирования JavaScript, можно встретить на всех современных сайтах. С помощью этого языка на основе библиотеки jQuery можно задать множество параметров, позволяющих подключить CSS-файл к HTML-элементам. Так, параметр .css() оправляет CSS-стиль для отдельного объекта, .hide() указывает на CSS-свойство display: none; (то есть скрытие объекта) и т. д.

При указании функции таким способом установки сценария указываются в style-атрибуте тега.

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

Присоединение сценария CSS к странице HTML различными вариантами

Сценарий для ряда моделей телефонов от Samsung.

Samsung Galaxy A10

2019, апрель

Samsung Galaxy A30

2019, апрель

Samsung Galaxy A50

2019, апрель

Samsung Galaxy A20

2019, май

Samsung Galaxy A40

2019, май

Для вас подарок! В свободном доступе до 25.02 —>
Скачайте ТОП-10
бесплатных нейросетей
для программирования
Помогут писать код быстрее на 25%
Чтобы получить подарок, заполните информацию в открывшемся окне

Подключение CSS-файла через внешние таблицы

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

:

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

В HTML-файле необходимо указать вместо тегов путь, по которому размещается внешний файл CSS. Он пишется сразу после тега (), где в предыдущем случае указывались внутренние параметры стиля.

Инструкция будет иметь следующий вид:

Дарим скидку от 60%
на обучение «Инженер-программист» до 25 февраля
Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

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

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

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

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

Приоритеты стилей CSS

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

  • непосредственно в теге (inline-способ): 1 000 условных единиц.
  • в или в стороннем файле, обращение по id: 100 у. е.
  • в или в стороннем файле, запрос по class: 10 условных единиц.
  • в или в стороннем файле, запрос по наименованию тэга (p, h1 и так далее): 1 у. е.

Только до 22.02
Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней
Список документов:

ТОП-100 площадок для поиска работы от GeekBrains

20 профессий 2023 года, с доходом от 150 000 рублей

Чек-лист «Как успешно пройти собеседование»

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

В случае, когда селектор имеет несколько указаний (допустим, класс + тег), то условные веса суммируются, в нашем случае – 10 + 1 = 11. Когда браузер получает инструкции от нескольких сценариев, то применяется тот, который имеет больший условный вес. При равенстве показателей используется тот, который описан позднее других.

Таким образом, при использовании двух сценариев:

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

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

Изменить значения приоритетов поможет приложение !important. Можно принять вносимые им изменения за + 10 000 условных единиц к весу. Однако здесь есть важный нюанс. При использовании нескольких стилей с !important, их приоритет может выглядеть как 10 001 и 10 010, то есть сформируется собственная их система, помимо уже установленной.

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

Другие способы подключения CSS-файла

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

Ряд компонентных библиотек, в частности, Vue и Svelte, не нуждаются в хранении стилей в собственной папке и ориентируют на использование сценариев непосредственно в разделе

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

Введение в CSS

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

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

Рис. 1

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

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

Рис. 2

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

   Флексагон  

Флексагон

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

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

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

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

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

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

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

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

Типы стилей

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

Стиль браузера

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

Стиль автора

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

Стиль пользователя

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

Рис. 1.3

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

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

Рис. 1.4

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

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

Вопросы для проверки

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

  1. font-color
  2. color
  3. font-family
  4. text
  5. font-size

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

  1. Способ сокращения HTML-кода за счёт переноса части данных в другой файл.
  2. Язык разметки гипертекстовых документов.
  3. Набор правил форматирования элементов веб-страницы.
  4. Метод преобразований текстовых документов в HTML.
  5. Технология, представляющая собой разные приёмы для вёрстки HTML-кода.

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

  1. Colorful Style Sheets
  2. Cascading Style Sheets
  3. Computer Style Sheets
  4. Creative Style Sheets
  5. Common Style Sheets

Ответы

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

3. Cascading Style Sheets

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

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