CSS - webiclass.ru

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