1 / 12

CSS

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

Download Presentation

CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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. Формирование структуры страницы

More Related