Лекция «Основы CSS»
Лекция. ОСНОВЫ CSS
CSS (Cascading Style Sheets) — это язык таблиц стилей, который позволяет определить стиль (например, шрифты и цвет) структурированных документов (в частности, к HTML- документам и приложениям XML).
Как правило, CSS-стили используются при создании стилей элементов веб-страниц, а также пользовательских интерфейсов языка HTML, XML, SVG и XUL -документов.
CSS упрощает создание веб-страниц и обслуживание сайтов, при этом отделяет стиль представления документов от содержимого документов.
Файл со CSS стилями имеет расширение .css.
Чтобы подключить такой файл к HTML странице, в теге head записывают следующюю конструкцию:
<link rel="stylesheet" href="имяФайла.css">
К HTML файлу подключается CSS файл mystyles.css:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
<link rel="stylesheet" href="mystyles.css">
</head>
<body>
<p>
Здравствуйте! Мы рады Вас приветствовать!.
</p>
</body>
</html>
Как работать с CSS
Каждому тегу в HTML соответствует селектор CSS.
Так,
тегу <p> соответствует CSS селектор p
После селектора ставят фигурные скобки и записывают CSS свойства. Свойства и задают размер и цвет шрифта и др.
формат записи: имя свойства, двоеточие, значение этого свойства (например, свойство - это цвет, а "зеленый" - это значение). Потом нужно поставить точку с запятой и записать следующее свойство.
p {
color: green;
}
Задание цвета ключевым словом.
Задание цвета через rgb
Задание цвета через решетку #.
пример задания цвета через rgb:
p {
color: rgb(112, 223, 255);
}
пример задания цвета через #:
p {
color: #ffаа00;
}
Нужный цвет и оттенок цвета можно получить с помощью специальных программ.
программа, позволяющая замерять цвет: colorcop.net
онлайн генератора цвета: colorscheme.ru,
Ширину и высоту элементов в CSS задают свойства width и height. Значения задаются в пикселях. обозначаются так: 100px.
Пример. Задать ячейке таблицы следующие параметры: ширина - в 500px и высота 300 px:
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
td {
width: 500px;
height: 300px;
}
Результат выполнения кода:
Выравнивание текста
Свойство text-align.
Выравнивание текста по левому краю (значение left), по правому (значение right), по центру (значение center) и одновременно и по правому, и по левому краю (значение justify).
Значение right
Выравнивание текста по правому краю:
<p>
Текстовый абзац
</p>p {
text-align: right;
}
Выравнивание по центру:
<p>
Текстовый абзац
</p>p {
text-align: center;
}
значение left - по умолчанию абзацы выровнены по левому краю.
Однако которые элементы по умолчанию стоят по центру, например, теги th, -заголовок таблицы). Здесь нужно выравнивать по левой стороне:
<table border="1">
<tr>
<th>группа</th>
<th>ученик</th>
<th>отметка</th>
</tr>
<tr>
<td>КА2</td>
<td>Петров</td>
<td>5td>
</tr>
<tr>
<td>КА</td>
<td>Сидовров</td>
<td>4td>
</tr>
</table>
th {
text-align: left;
}
table {
width: 400px;
}
Значение justify
Используют для длинных текстов, выравнивает текст одновременно и по правому, и по левому краю.:
<p>
длинный текст...
</p>p {
text-align: justify;
width: 500px;
}
Жирность текста
Свойство font-weight позволяет сделать текст жирным или наоборот - отменить жирность (к примеру, для заголовков, которые жирные по умолчанию).
Чтобы сделать текст жирным, следует указать значение bold, а чтобы обычный - значение normal.
Пример. Нужно задать абзацы жирными, а все заголовки h2 - нежирными:
<h2>Заголовок</h2>
<p>
Текст текст текст
</p>
h2 {
font-weight: normal;
}
p {
font-weight: bold;
}
Курсив.
Свойство font-style
Для текста курсивом добавляют значение italic. Пример:
<p>
Текст текст текст
</p>
p {
font-style: italic;
}
Размер шрифта
свойство font-size, принимающее значение в пикселях.
Задать тексту абзаца шрифт в 30 пикселей:
<p>
абзац с текстом
</p>
p {
font-size: 30px;
}
Тип шрифта
Свойство font-family задает семейство шрифта.
Пример. задать для всех абзацев шрифт Arial:
<p>
Текст текст текст
</p>
p {
font-family: Calibri;
}
<p>
Текст текст текст
</p>p {
font-family: "Comic Sans MS";
}
Межстрочный интервал
свойство line-height, задает высоту линии текста.
свойство line-height свойство не задает промежуток между строками текста, а задает высоту линии текста.
Расстояние между строками вычисляется следующим образом: line-height - font-size = видимое расстояние между строками текста.
В следующем примере расстояние между строками текста будет 10px - 40px = 30px:
<p>
длинный текст...
</p>p {
font-size: 20px;
line-height: 70px;
text-align: justify;
width: 400px;
}
Свойство- font.
свойство font позволяет одновременно задать размер шрифта, семейство, жирность, курсив и межстрочный интервал.
свойство font имеет следующий синтаксис:
курсив жирность размер_шрифта / межстрочный_интервал семейство
Пример
Пусть у нас есть следующие стили:
p {
font-size: 10px;
font-family: Calibri;
line-height: 20px;
}
перепишем их через свойство-сокращение:
p {
font: 10px/20px Arial;
Основы CSSDOCX / 42.08 Кб
/data/files/u1684536042.docx (Основы CSS)Контрольные вопросы для самопроверки
Что такое CSS?
Какая связь между SGML, HTML, XML и XHTML?
Какие браузеры поддерживают HTML?
Что такое специфичность CSS-селекторов и как она работает?
В чем разница между CSS и HTML?
Как бы вы определили цвет в CSS?
