Основы CSS

Всё что нужно знать про CSS, в базовом варианте, уже есть в этом посте.

Тег подключения таблиц стилей:

<link href="style.css" type="text/css" rel="stylesheet">

пояснение:

href="style.css" Адресс таблицы

type="text/css" Тип данной таблици, указывается всегда один:"text/css"

rel="stylesheet" Соотношение подцепляемого документа с HTML, говорит браузеру что это сисс.

Создание простейших правил.

h2 {cоlor:green;}

h2.red {color:red;}

.blue {color:blue;}

<p class="blue">

h2 p {cоlor:green;}

p strong {color:orange;}

strong {color:orange;}

div strong {color:orange;}

пояснение:

h2 {color:green;} Изменение всех заголовков второго уровня в зелёный цвет.

h2.red {color:red;} Придание отдельному заголовку крастного цвета.

<h2> Подключение правила к заголовку в хтмл странице.

.blue {color:blue} Придание класса любому тэгу, в данном случае абзацу.

h2 p {cоlor:green;} Придание стиля не только всем заголовкам, но и абзацам. Стиль работает только в том случае когда обьекты не перебиваються более приоритетными тегами.

p strong {color:orange;} Придание ораньжевого цвета текстам, заключенным в тег стронг, находящимся в абзаце.

strong {color:orange;} Придание ораньжевого цвета всем тегам стронг.

div strong {color:orange;} Тот же цвет всем тегам див, со стронгами.

Правила состояний у ссылок.

a:link {color:#336666 ; text-decoration:underline;}

a:visited {color:red; text-decoration:none;}

a:hover {color:green; text-decoration:overline;}

a:active {color:orange; text-decoration:none;}

пояснения:

a:link {color:#000000; text-decoration:underline;} Состояние не посещенной ссылки.

color:#000000; Цвет черный.

text-decoration:underline; Придание подчеркивания ссылке с низу.

a:visited {color:red; text-decoration:none;} Cостояние посещенной ссылки, крастного цвета.

text-decoration:none; Без подчеркивания.

a:hover {color:green; text-decoration:overline;} Состояние ссылки при наведении на неё мыши, зеленого цвета.

text-decoration:overline; Подчеркивание с верху.

a:active {color:orange; text-decoranion:none;} Состояние ссылки при нажатии, ораньжевого цвета.

text-decoration:none; Без подчеркивания.

Свойства текста.

p.new {font-family:Verdana, Tahoma; font-size:12px;}

class="new"

p.new {font: bold 12px Verdana, Tahoma}

margin-right:150px;

пояснения:

p.new Правило для параграфа.

font-family:Verdana, Tahoma; Стиль шрифта.

monospace; Означает, что будут подставлятся шрифты из семейства "моноширных" писать не обязательно.

font-size:12px; Размер шрифта.

class="new" Класс, размешаеться на хтмл станице.

font-variant:small-caps; Это свойство, которое делает все маленькие буквы заглавными.

font-style:italic; Стиль шрифта, курсив.

font-weight:bolt; Жирность шрифта, (вес) Максимальное значение 700

p.new {font: bold 12px Verdana, Tahoma} Сокрашеное придание стилей, Вес-Размер шрифта-Стиль шрифта.

margin-right:150px; Отступ текста, от правого края экрана на 150 пикселей.

Работа с фоном.

body {background-color:f6f6f6;

background-image:url(bg.gif);

background-repeat:repeat-y;

background-position:top right;

margin-right:150px;}

body {background-image:url(bg3.gif);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:300px; 70px;

p.new {background-color:red; color:white;}

пояснения:

body {background-color:f6f6f6;} Придание всей хтмл странице, светлосерый фон.

p.new {background-color:red;} Придание абзацу, крастный фон.

color:white; Белый цвет текста, на крастном фоне.

background-image:url(bg.gif); Вставка изображения на фон страници.

background-repeat:repeat-y; Тиражирование изображения по вертикали с левого края, repeat-x; по горизонтали, no-repeat; без тиражирования.

background-position:top right; Тиражирование с верхнего, правого угла.

margin-right:150px; Отступ текста, от правого края экрана на 150 пикселей.

background-attachment:fixed; Фиксация изображения в браузере, во время прокрутки страници. scroll; Фиксация на однном месте.

background-position: 70px; 300px; Расположение изображения, на 300px; пикс от левого угла и на 70; пикс от верхнего края.

Работа с текстом.

.al {text-align:right text-decoration:line-through; text-indent:4em;}

.at1 {text-transform:capilize; letter-spacing:10px; word-spacing=20px; line-height:50px;}

пояснения:

.al {text-align:right} выравнивание текста с классом al по правому краю. center; по середине.

text-decoration:line-through; Зачеркивание слов.

text-indent:4em; Создание крастной строки, выступ от левого края на 4 буквы m.

.at1 {text-transform:capilize; Все первые буквы каждого слова в классе at1, с большей буквы, uppercase; все слова с большей буквы, lowercase; все слова маленькими буквами.

letter-spacing:10px; Расстояние между буквами 10 пикселей.

word-spacing:20px; Расстояние между словами.

line-height:50px; Расстояние между строк: 50 пикселей.

Работа с рамками.

.frame {border-width:2px;

           border-style:solid;

             border-color:red;
           }

.frame{border:2px solid black;}

.frame{border-top:2px solid black;}

пояснения:

border-width:2px; Ширина рамки 2 пикселя.

border-style:solid; Стиль рамки: сплошная, dotted; Точечная рамка, dashed; Рамка из черточек.

border-color:black; Цвет рамки: черная.

.frame{border:2px solid black;} Сокращенное написание тех-же свойств.

border-top; Рамка, с видимой верхней границей.

border-right С правой линией, border-left:2px dotted blue; С левой границей

border-bottom:2px dashed orange; С нижней линией.

vertical-alidn:top; Выравнивание содержимого таблици по верху, можно и по другим сторонам.

Работа с отступами.

.pol {margin:60px;}

.pol {margin:60px; margin-top:auto;}

.pol2 {padding:30px;}

.pol2 {height:300px; width:300; float:left; margin-right:20px;}

пояснения:

.pol {margin:60px;} Общий отступ в 60 пикселей.

margin:left; Левый отступ, margin:right; Правый, top; Верхний, bottom; Нижний.

.pol {margin:60px; margin-top:auto;} Верхний отступ по умолчанию, остальные по 60 пикс.

.pol2 {padding:30px;} Придание отступа по 30 пикс, внутри рамки.

.pol2 {height:300px; width:300;} Придание рамке ширины и высоты по 300 пикселей.

float:left; Оптекание рамки текстом, с права.

margin-right:20px; Растояние между рамкой и текстом с права, 20 пикс.

Работа со списками.

ul.list {
list-style-type:decimal;
list-style-position:inside;
}ul {list-style-image:url(mini_ben.gif);
}

пояснения:

list-style-type:decimal; Отвечает за внешний вид списка, в данном случае цифровой.

list-style-type: upper-roman; Большие римские цифры.

lower-roman; Маленькие римские цифры.

lower-alpha; Маленькие обычные буквы.

upper-alpha; Большие обычные буквы.

list-style-type:none; Список без маркеров.

list-style-position:inside; Если список будет внутри рамки, то маркеры будут внутри блока.

list-style-position: outside; Маркеры списка, будут снаружи рамки.

list-style-image:url(mini_ben.gif); Вставка изображения вместо маркеров.

ul { } Правило для всех типов маркеров на хтмл странице.

list-style: none; - Убирание точек у списков.

Абсолютное позиционирование.

#free {
position:absolute;

top:45px;

right:50px;

height:100px;

width:100px;

background-image:url:(forum.jpg);
}

<span id="free"></span>

пояснения:

#free Ай ди клас, пишется через решетку.

position:absolute; Позиционирование абсолютное.

top:45px; Отступ с верхнего края экрана: 45 пикселей.

right:50px; Отступ от правого края экрана 50 пикселей.

height:100px; Высота изображения 100 пикс.

width:100px; Ширина изображения 100 пикс.

background-image:url:(forum.jpg); Вставка самого изображения.

<span id="free"></span> Добавление ай ди класса в специальный логический тег span, на хтмл странице.

Абсолютное позиционирование так-же можно применять и через обычный класс, через точку.

position:relative; - Отличается от абсолютки тем что расстояния у него отчисляются от изначального местоположения.

Стили можно писать и в самой хтмл странице в теге хед:

<style>

id {border:2px solid black;}

</style>

</head>

<p style="margin-right:150px;"> Создание класса в самом теге, на хтмл странице.

Дополнительные свойства:

a outline:none: - Применяется для того чтобы в браузере фаерфокс при нажатии на ссылку она не выделялась пунктиром

display:inline - Применяется для того чтобы не было промежутков, например между заголовком и остальным текстом, еще для выравнивание списков по горизонтали. Переводит из блочных тэгов в строчный.

body {margin: 0;

padding: 0;

} - Применятся для того чтобы небыло отступов ни сверху ни снизу от края браузера и самого сайта.

* {magin: 0;

padding: 0;
} - С помошью этого убиваются все отступы у всех элементов.

text-indent: -9999px; - Придаётся элементу, у которого не должен быть виден текст на хтмл странице.

background-position: 0px 0px; - Почти как и абсолютное позиционирование, лучше задавать изображению для ссылок.

z-index - Это штука делает блочные элементы поверх других в слоях, если у одного элемента зет индекс будет один а у другого два, то тот у которого он больше, тот того и перекрывает, у данных блоков должен быть указан позишен абсолют или релайтив и они не должны быть дочерними элементами, чтобы зет индекс работал.

line-height - Определяет расстояние между сторок текста.

border-collapse: collapse; - Делает хтмл таблицу в одну рамку.

display:block; Перевод из сторочных тэгов в блочный.

display:none; Полное скрытие любого объекта на странице, не остаётся даже свободного пространства после исчезновения.

owerflow: auto; Это свойство делает полосу прокрутки, если у участка текста заданы определённая ширина и высота в которую он не помещается.

clear: both; Отменяет выравнивание заданное флоатоми.

first-letter {
font-size:24px;
color:#FFFF00;} - Свойство влияющее на первую букву каждого абзаца.

first-line {
font-style:italic;
background-color:#00CCCC;

} - А это влияет на первую строку абзаца.

cursor:crosshair; Данное свойство меняет вид курсора при наведении, в данном случае это вид крестика.