Здавалка
Главная | Обратная связь

Урок 2: Синтаксис и принцип работы CSS



Содержание

 

1. Урок 1: Что такое CSS3

2. Урок 2: Синтаксис и принцип работы CSS 3

3. Урок 3: Цвет и фон в CSS5

4. Урок 4: Шрифты в CSS 7

5. Урок 5: Текст в CSS 9

6. Урок 6: Списки в CSS 10

7. Урок 7: Ссылки в CSS 11

8. Урок 8: Типы селекторов в CSS 12

9. Урок 9: Блоковая модель в CSS 13

10. Урок 10: Рамки в CSS 13

11. Урок 11: Поля (margin) и отступы (padding)14

12. Урок 12: Высота(height) и ширина(width) блоков15

13. Урок 13: Позиционирование блоков15

14. Урок 14: Плавающие блоки(свойство float)16

15. Урок 15: Слои в CSS 17

 

 

Урок 1: Что такое CSS

 

Стиль - это набор параметров, задающий внешнее представление некоторого объекта в той или иной среде.

CSS - это сокращение от Cascading Style Sheets - в переводе Каскадные таблицы стилей. CSS работает со шрифтами, полями, таблицами, отступами, картинками и др. и представляет значительно более широкие возможности, чем простой html.

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

Основные преимущества CSS :

  • управление дизайном любого количества документов с помощью одной таблицы стилей;
  • более точный дизайн страниц, поддерживаемый всеми браузерами;
  • разделение документа на две составляющие: структура и дизайн, благодаря чему исходный код становится чистым и легко читаемым
  • новые расширенные возможности по сравнению с обычным html

 

Урок 2: Синтаксис и принцип работы CSS

 

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

Рассмотрим структуру правила:

Как видно из рисунка выше, сначала записывается так называемый селектор, показывающий к какому html тегу(тегам) применяется то или иное свойство.

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

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

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

 

Подключение CSS таблицы к HTML документу.

Внешняя таблица стилей это просто текстовый файл с расширением .css.

Допустим у нас есть таблица стилей style.css и несколько страниц html, и причем все это расположено в одной папке. Тогда в каждом документе который мы хотим подключить, в голове документа(между тегами <head> и </head>) необходимо прописать строчку:

 

<link rel="stylesheet" type="text/css" href="style.css">

 

Эта строка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.

 

index.htm:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Работаем со стилями</title>

<link rel="stylesheet" type="text/css" href="style.css" >

</head>

<body>

<h1>Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразится высотой всего лишь 14 пикселей и будет голубого цвета</h1>

</body>

</html>

style.css :

 

h1{color:blue;font-size:14px}

 

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

1. Можно располагать правила стилей непосредственно в голове документа:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Работаем со стилями</title>

<style type="text/css">

h1{color:blue;font-size:14px}

</style>

</head>

<body>

<h1>Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразиться высотой всего лишь 14 пикселей и будет голубого цвета</h1>

</body>

</html>

 

2. Также, можно задавать стиль с помощью атрибута style :

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Работаем со стилями</title>

</head>

<body>

<h1 style="color:blue;font-size:14px">Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразиться высотой всего лишь 14 пикселей и будет голубого цвета</h1>

</body>

</html>

 







©2015 arhivinfo.ru Все права принадлежат авторам размещенных материалов.