CSS Преимущества CSS • Разграничение кода и оформления • Разное оформление для разных устройств • Расширенные средства стилизации элементов по сравнению с HTML • Возможность хранить всё стилевое оформление сайта в одном файле (централизованное хранение) • Ускорение загрузки страниц за счет кэширования стилевых файлов браузером Способы подключения CSS-стилей: 1. Подключение внешнего стилевого файла с помощью тега link: <link rel=“stylesheet” href=“style.css” /> 2. Использование стилей прямо на странице с помощью тега style: <style> p {color: red;} </style> 3. Применение стилей к конкретному элементу через атрибут style: <p style=“font-size: 20px;”>text</p> Синтаксис CSS cелектор { свойство: значение; свойство: значение; } Виды селекторов • Имя тега: 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> Контекстный доступ к элементам 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; } DIV – элемент • Блочный элемент (А что это значит?) • Предназначен для выделения фрагмента страницы с целью последующего изменения вида содержимого • Универсальный контейнер Особенности DIV-элемента • В нестилизованном виде без контента внутри никак не отображается на странице! • Чтобы без контента увидеть DIV-элемент на странице, нужно: – задать высоту! – задать/изменить видимые css-стили: • поставить фоновую картинку (background или background-image) • определить цвет фона (background или backgroundcolor ) • определить границу (border) DIV-блочный элемент! Свойство float: left; float: left; float: left; Свойство clear: both; float: left; float: left; float: left; float: left; clear: both; Формирование структуры страницы