Здравствуйте. Сразу напомню, что данный язык знаю плохо, так как нет практики: все элементы налазят друг на друга, если пытаюсь настроить внешний вид с помощью стилей.
Но основы расскажу.
5 основ css:
- Классы. Пишутся с ".", могут использоваться несколько раз на страницах;
- Id: может использоваться только 1 раз на html странице. Начинаются со знака "#".
- После имени класса или идентификатора пишется { - левая фигурная скобка означает начало параметров сего class/id.
- } - закрывает блок настроек класса/id;
- Все параметры прописываются через двоеточие и заканчиваются точкой с запятой. Пример:
align: center; // Выравнивание по центру
Здесь я выравнил по центру, а при помощи "//" прописал комментарий к стилю.
Примеры написания
#id_name {
width: 100px;
}
Здесь я написал, что создать необходимо идентификатор с именем id_name, и прописал ему ширину в 100px. Это значит, что элементы, которым его присвою, станут иметь ширину в 100 пикселей.
Как используются стили на странице:
- Прописываем class или id в атрибутах тегов. Но без начального символа(# или .):
<p id="id_name">Текст</p>
<div class="class_name">Блок текста</div> - Атрибутом style (Не рекомендуется):
<p style="width: 100px;">Текст</p>
Способы подключения стилей:
- Создаём файл с расширением .css и подключаем его, как было описано в предыдущем уроке про HTML:
<link rel="stylesheet" href="style.css"> - Прописать в теге
<style>, который имеет закрывающий парный тег.
Чаще всего его пишут в секции head, но стоит попробовать разместить перед</body>. Кроме того, стоит знать, что внутри сего тега лучше не писать много стилей.
Пример:
<style>
.class_name {
width: 500px;
}
</style>
И да:
Если вы решили делать css файл, необходимо знать, что внутри прописываются только сами стили (Без всяких там тегов и прочих обозначений начала). Пример (С первой строки кода - это начало файла стилей):
.class_name {
width: 500px;
}
#id_name {
width: 100px;
background_color: #ffffff;
}
p .image_class {
width: 100%;
}
На самом деле, файлы стилей гораздо больше содержат инструкций, но это всего лишь пример.
Если заметили, в id я добавил background_color - это цвет фона. #ffffff - это hax код цвета (Для получения нужного вам надо пойти в поисковые системы: там есть таблицы цветов).
Также прописал p .image_class, который имеет ширину 100%.
p - это тег.
**Т.е. если вы хотите, чтобы параметры стилей срабатывали только для класса или id с определённым тегом, необходимо прописать его название перед именем с начальным символом, например, div #sidebar.
Всё
Если будут вопросы, пишите - отвечу.