120 likes | 295 Views
CSS. Преимущества CSS. Разграничение кода и оформления Разное оформление для разных устройств Расширенные средства стилизации элементов по сравнению с HTML Возможность хранить всё стилевое оформление сайта в одном файле (централизованное хранение)
E N D
Преимущества CSS • Разграничение кода и оформления • Разное оформление для разных устройств • Расширенные средства стилизации элементов по сравнению с HTML • Возможность хранить всё стилевое оформление сайта в одном файле (централизованное хранение) • Ускорение загрузки страниц за счет кэширования стилевых файлов браузером
Способы подключения CSS-стилей: • Подключение внешнего стилевого файла с помощью тега link:<link rel=“stylesheet” href=“style.css” /> • Использование стилей прямо на странице с помощью тега style:<style>p {color: red;}</style> • Применение стилей к конкретному элементу через атрибут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 или background-color) • определить границу (border)
Свойство float: left; float: left; float: left;
Свойство clear: both; float: left; float: left; float: left; float: left; clear: both;