CSS

1. CSS

2. Преимущества CSS • Разграничение кода и оформления • Разное оформление для разных устройств • Расширенные средства стилизации элементов по сравнению с HTML • Возможность хранить всё стилевое оформление сайта в одном файле (централизованное хранение) • Ускорение загрузки страниц за счет кэширования стилевых файлов браузером

3. Способы подключения CSS-стилей: • Подключение внешнего стилевого файла с помощью тега link:<link rel=“stylesheet” href=“style.css” /> • Использование стилей прямо на странице с помощью тега style:<style>p {color: red;}</style> • Применение стилей к конкретному элементу через атрибутstyle:<p style=“font-size: 20px;”>text</p>

4. Синтаксис CSS cелектор{ свойство: значение; свойство: значение; }

5. Виды селекторов • Имя тега:css:p {color: red;}html: <p>text</p> • Обращение по id элемента (по значению атрибута id):css: #btext{font-size: 10px;}html: <p id=“btext”>such</p> • Обращение по классу (по значению атрибута class):css: .myc {text-decoration: none;}html: <a class=“myc” href=“news1.html”>title</a>

6. Контекстный доступ к элементам HTML: <h1> <p><a href=“n1.html”>news 1</a></p> <p><a href=“n2.html”>news 2</a></p> <p><a href=“n3.html”>news 3</a></p> </h1> CSS: h1 p a { color: red; }

7. DIV – элемент • Блочный элемент (А что это значит?) • Предназначен для выделения фрагмента страницы с целью последующего изменения вида содержимого • Универсальный контейнер

8. Особенности DIV-элемента • В нестилизованном виде без контента внутри никак не отображается на странице! • Чтобы без контента увидеть DIV-элемент на странице, нужно: • задать высоту! • задать/изменить видимые css-стили: • поставить фоновую картинку (background или background-image) • определить цвет фона (background или background-color) • определить границу (border)

9. DIV-блочный элемент!

10. Свойство float: left; float: left; float: left;

11. Свойство clear: both; float: left; float: left; float: left; float: left; clear: both;

12. Формирование структуры страницы