Введение в CSS - «CSS»
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
Популярные статьи
  • 17 январь 2025, 00:02
Бывший глава PlayStation Studios после ухода из Sony объяснил, почему компания забросила Bloodborne - «Новости сети»
Наш опрос
Помогли мы вам



Наши новости
       
  • 24 март 2016, 17:40
Написание эффективного кода
  • 24 март 2016, 16:20
Базовый синтаксис CSS
Разное и интересное
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
  • 25 апрель 2024, 01:19
Скачать приложение Betera на Android
16-03-2016, 18:14
Введение в CSS - «CSS»
Рейтинг:
Категория: Учебник CSS / Введение в CSS

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

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

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

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

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

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

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML><html> <head>  <title>Флексагон</title>  <meta charset="utf-8">  <link rel="stylesheet" href="style.css"> </head> <body>  <h1>Флексагон</h1>  <p>Флексагон представляет собой бумажную фигуру, которая имеет    три и более стороны. Поначалу кажется, что это невозможно, но вспомните    ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа  бумаги,    и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и    склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но    стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться,    что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета.    Перегибая флексагон, по очереди будем наблюдать все его поверхности.</p> </body></html>

Сам код HTML никаких изменений не претерпел и единственное добавление — это строка <link rel="stylesheet" href="style.css">. Она ссылается на внешний файл с описанием стилей под именем 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 как раз и описаны все параметры оформления таких тегов как <body>, <h1> и <p>. Заметьте, что сами теги в коде HTML пишутся как обычно.

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

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

Типы стилей

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

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

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

Стиль автора

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

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

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

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

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

Ответы

1. color

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

3. Cascading Style Sheets


После знакомства с HTML разработчики сайтов разделяются на две основные категории. Одна часть считает, что с помощью HTML на сайте можно создавать всё или практически всё, другая же понимает, что в целом средств разметки недостаточно для оформления веб-документов. Действительно, HTML лишь первый этап в процессе обучения созданию сайтов. Следующим шагом является изучение стилей или CSS (Cascading Style Sheets, каскадные таблицы стилей). Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Чтобы стало понятно, о чем идет речь, посмотрим на рис. 1.1. Рис. 1.1. Веб-страница, созданная только на HTML Это обычная веб-страница, оформленная без всяких изысков. Тот же самый документ, но уже с добавлением стилей приобретает совершенно иной вид (рис. 1.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 В файле style.css как раз и описаны все параметры оформления таких тегов как , и . Заметьте, что сами теги в коде HTML пишутся как обычно. Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объёма повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом. CSS представляет собой свой собственный язык, который совпадает с HTML только некоторыми значениями, например способом определения цвета. Типы стилей Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя. Стиль браузера Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом , в большинстве браузеров выводится шрифтом с засечками размером 24 пункта. Стиль автора Стиль, который добавляет к документу его разработчик. В примере 1.2 показан один из возможных способов подключения авторского стиля. Стиль пользователя Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис

Теги: CSS, , , Введение

Просмотров: 3 456
Комментариев: 0:   16-03-2016, 18:14
Распечатать
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:


Другие новости по теме:
ДОБАВИТЬ БАННЕР