CSS - Cascading Style Sheets
CSS (Cascading Style Sheets)- каскадные таблицы стилей. Это технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML.
Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений. Блок определений обрамляется фигурными скобками, и состоит из набора свойств и их значений.
В качестве селектора может выступать любой элемент HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и др.
CSS по категориям
Онлайн справочник по CSS
Основа CSS
селектор1, селектор2 { свойство1: значение; свойство2: значение; свойство3: значение; }
Чтобы подключить файл со стилями в теге <head> документа пишем:
<link rel="stylesheet" type="text/css" href="путь_к_файлу/имя_файла.css">
CSS стиль для тега
«НАСЛЕДОВАНИЕ» У тега <h1>
уже есть какой-то стиль, который можно переопределить на его основе. То есть если, например, размер шрифта по умолчанию у него 18px, то его можно изменить, просто прописав в стиле его размер. Выглядеть это будет так:
h1{ font-size: 10px; }
font-size как раз и указывает то, что мы изменяем размер шрифта.
CSS для id и class.
код HTML
<div id="idName"> <p class="clName">
idName и clName - имена селекторов из CSS. Теперь задаем их в CSS:
#idName /* описание по id */ { свойство1: значение; } .clName /* так задаем описание class */ { свойство1: значение; }
отличия между id и Class
- В CSS, селектор класса обозначается через точку, а селектор id через решетку.
- id это уникальное собственное имя элемента на странице, и оно не может повторяться, т.е. двум тегам нельзя дать одинаковый id. С классом все наоборот.
- Еще одно отличие это то, что у id и class разные веса. У id он больше. То есть если в HTML документе написано следующее:
<h2 id="header1" class="header2">...</h2>
то первым применится стиль header1.
Тег + id
CSS:
#news p { color: blue; }
html:
<div id="news"> <p>Параграф</p> </div>
В этом случае, стиль применится к тексту «Параграф» и он станет синего цвета. Но применяться будет не ко всем тегам <P>, а только к тем, которые находятся внутри элемента с атрибутом id, равным «news». Т.е., если написать без тега
, то стиль не будет применен. Точно также и с классами.
Несколько примеров.
Есть код:
<div class="level1"> <div class="level2"> <p>Мама мыла раму</p> </div> <p>Молодая мама мыла раму</p> </div> <div class="level2"> <p>Мама все еще моет раму</p> </div>
И стиль:
.level1{ font-size: 50px; } .level2{ font-size: 20px; } /* Первая и последняя строчки будут одинакового стиля, а средняя другого, т.к. к ней применился стиль level1. */ .level1 .level2{ font-size: 50px; } /* стиль будет применен только к первой строчке, так как она находится в элементе с классом level2, а тот, в свою очередь, находится в элементе с классом равным level1 */
Ну и вот еще пример:
p{ color: Green; } #sea p{ font-size: 50px; }
Код:
<div id="sea"> <p>Первая строчка</p> </div> <p>Вторая строчка</p>
Так как первая и вторая строчки заключены в тег <p>, то применится стиль «p» и они будут зелеными. Только первая строчка находится в элементе с id = sea и к ней еще применится стиль #sea p. Размер шрифта будет 50px.
Псевдоселекторы
a { font-size:12px; color : #000000; } a:hover { font-size:14px; color: #FF0000; }
Таким образом, мы установили стиль для всех ссылок (если они не будут переопределены далее) в документе. Прелесть вся заключается в том, что мы добавили после селектора «:hover», что означает «применить этот стиль к тегу <a> если над ним указатель мыши». Это очень удобная вещь. С ее помощью, я сделал меню на этом сайте. Как это делать я расскажу в другой статье.
- web/css/start.txt
- Последнее изменение: 2016/10/20 13:31
- (внешнее изменение)