Казахстан, Семей
СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
Была в сети 28.10.2024 11:56
Ищенко Виктория Евгеньевна
Преподаватель Специальных Дисциплин
31 год
6 008
9 861 
Местоположение
Специализация
CSS- Каскадные таблицы стилей
Категория:
Информатика
02.12.2020 12:59
Просмотр содержимого документа
«CSS- Каскадные таблицы стилей»
CSS- Каскадные таблицы стилей
| CSS удобен при форматировании текста, навигационных панелей, изображений и других элементов веб-страницы, но его по-настоящему потрясающие способности проявляются, когда нужно создать макет всей веб - страницы. В то время как HTML обычно отображает содержимое страницы на экране сверху вниз, размещая один блочный элемент за другим, CSS позволяет создавать расположенные бок о бок столбцы и помещать изображения или текст в любом месте на странице (и даже наслаивать поверх других элементов), поэтому веб-страницы имеют намного более интересный внешний вид. Что такое стиль Определение стиля в CSS, устанавливающего внешний вид какого-либо элемента (фрагмента) веб-страницы, — это всего лишь правило, которое сообщает браузеру, что и каким образом форматировать: изменить цвет шрифта заголовка на синий, выделить фото красной рамкой, создать меню шириной 150 пикселов для списка гиперссылок. Если бы стиль мог говорить, он сказал бы: «Браузер, сделай, чтобы вот это выглядело так-то». Фактически определение стиля состоит из двух основных элементов: это сам элемент веб-страницы, который непосредственно подлежит форматированию браузером, — селектор, а также форматирующие команды — блок объявления. Селекторами могут быть заголовок, абзац текста, изображение и т. д. Блоки объявления могут, например, окрасить текст в синий цвет, добавить красную рамку (границу) вокруг абзаца, установить фотографию в центре страницы — возможности форматирования бесконечны. Любой стиль, даже самый простой, содержит несколько элементов. Он состоит из селектора, сообщающего браузеру, что именно форматировать, и блока объявления, в котором перечислены форматирующие команды, используемые браузером для стилизации фрагмента, определенного селектором. Селектор. Как уже было отмечено, селектор сообщает браузеру, к какому элементу или элементам веб-страницы применяется стиль: к заголовку, абзацу, изображению или гиперссылке. селектор p обращается к тегу , передавая браузеру, что все теги нужно форматировать, используя объявления, указанные в данном стиле. Благодаря значительному разнообразию селекторов, предлагаемых языком CSS, и своему творческому потенциалу вы сможете мастерски форматировать веб-страницы (в следующей главе селекторы описаны более подробно). Блок объявления стиля. Код, расположенный сразу за селектором, содержит все форматирующие команды, которые можно применить
к этому селектору. Блок начинается с открывающей ({) и заканчивается закрывающей фигурной скобкой (}). Объявление свойства. Между открывающей и закрывающей фигурными скобками блока объявления можно добавить одно или несколько определений или форматирующих команд. Каждое объявление имеет две части — свойство и значение свойства. Двоеточие отделяет имя свойства от его значения, и все объявление заканчивается точкой с запятой. Свойство. CSS предлагает большой выбор команд форматирования, называемых свойствами. Свойство представляет собой слово или несколько написанных через дефис слов, определяющих конкретный стиль или стилевой эффект. У большинства свойств есть соответствующие, простые для понимания названия, такие как font-size, margin-top, background-color и т. д. (в переводе с английского: размер шрифта, верхний отступ, цвет фона). После имени свойства нужно добавить двоеточие, чтобы отделить его от значения. Значение. Наконец, настал тот момент, когда вы можете задействовать свой творческий потенциал, присваивая значения CSS-свойствам: определяя фоновый цвет, например, синим, красным, фиолетовым, салатовым и т. д. Как будет описано в других главах, различные CSS-свойства требуют определенных типов значений — цвет (red или #FF0000), длина (18px, 200% или 5em), URL (images/background.gif), а также определенных ключевых слов (top, center, bottom). Рассмотрим пример: p {color: #000;} Данная запись означает, что все абзацы будут набраны чёрным шрифтом. Здесь “р” — это атрибут, а то, что находится в фигурных скобках и есть Объявление правила для этого атрибута. Слово color является Свойством объявления, а “решётка” с тремя нулями — Значением. В данном случае значение записано в виде шестнадцатиричного числа, обозначающего цвет. Всем, кто пользуется Фотошопом это должно быть известно. Почему всего три нуля, ведь в данном обозначении должно быть шесть цифр (или букв)? Когда пары знаков одинаковы 00 00 00, то допускается писать сокращённо — 000. Все браузеры это понимают правильно. Правило можно писать как угодно — хоть в строку, как у нас, хоть в столбик — это роли не играет. Важно только не забывать две вещи: 1. После каждого Свойства необходимо ставить двоеточие. 2. После каждого Значения — точку с запятой. Если пропустить хотя бы в одном месте эти знаки, то IE и Firefox будут глючить, а Opera, возможно, и покажет всё без ошибок. Привязывание страницы стилей к документу Таблицы стилей бывают двух видов — внутренние и внешние, — в зависимости от того, где определена стилевая информация: непосредственно в самой веб-странице или в отдельном файле, связанном с веб-страницей.
Внешняя таблица стилей — это не что иное, как текстовый файл, содержащий весь набор стилей CSS. Он не должен включать в себя HTML-код, поэтому никогда не добавляйте сюда тег . Вдобавок название этого файла всегда должно заканчиваться расширением CSS. Можно давать какое угодно имя этому файлу, но лучше, чтобы оно было наглядным. Связывание таблиц стилей с HTML-кодом Наиболее распространенный метод добавления внешней таблицы стилей в веб-страницы — применение HTML-тега . Синтаксис применения данного тега немного различается в зависимости от того, чем вы пользуетесь — HTML5, HTML 4.01 или XHTML. Например, так выглядит вариант для HTML5: Вариант для HTML 4.01 похож на предыдущий, но требует дополнительного атрибута type: link rel="stylesheet" type="text/css" href="css/styles.css" И наконец, вариант для XHTML очень похож на вариант для HTML 4.01, но требует в конце тега ставить закрывающий слеш: styles.css" / Поскольку для HTML5 требуется меньше кода, рекомендуется использовать HTML5. Для всех типов документов необходимы два атрибута: rel="stylesheet" — указывает тип ссылки; в данном случае это ссылка на таблицу стилей; href — задает местонахождение внешнего CSS-файла на сайте. Значение этого атрибута — URL-адрес, который будет отличаться в зависимости от того, где вы храните CSS-файл. Он работает так же, как атрибут src при добавлении изображения на страницу или атрибут href гиперссылки, указывающей на другую веб-страницу. mystyles.css p { color: white; background-color: black; } h1 { font-size: large; font-weight: bold; } h2 { font-weight: 500; color: blue; } example.html
“mystyles,css"/ содержание страницы HTML-документа
Вебинар для учителей
Свидетельство об участии БЕСПЛАТНО! Полезное для учителя  |
