htmlsait.ru - Свой сайт это просто

Блокнот+ локальный сервер+ FTP клиент+ домен+ хостинг= свой сайт
пишим сайт в блокноте и не зависим от конструкторов и CMS

Основные CSS стили

В этом разделе собраны основные CSS стили. Как вы наверно уже знаете CSS это формальный язык, с помощью которого задается внешний вид html тегам, то есть задаются стили оформления содержимого веб страниц. Стили оформления обычно хранятся во внешнем файле, который подключен ко всем страницам сайта и браузеры при загрузке страницы обращаются к одному и тому же файлу. Стили хранящиеся в отдельном файле очень удобны тем что дизайн сайта, или отдельных элементов можно очень быстро сменить, при этом на всех страницах произойдут изменения.

Стили для текста

font-family: - указывается семейство шрифтов и тип Стиль font-family: устанавливает семейство шрифтов, которое будет использоваться для оформления текста содержимого. Значение может даваться как для всей страницы для тега body, так и конкретным тегам. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.

Браузер проверяет шрифт и если не находит, то переходит к отображению второго указанного шрифта в списке, если и его не находит то берет третье значение и т.д. Если не может отобразить не один из шрифтов, то отображает текст своим шрифтом. Несколько шрифтов увеличивает вероятность, что хотя бы один из них будет прочитан браузером и он сможет его отобразить.

Заканчивают список шрифтов обычно указанием типа шрифта serif, sans-serif, cursive, fantasy, monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид шрифта.

Типы шрифтов:
serif & шрифты с засечками (антиквенные), типа Times
sans-serif - рубленные шрифты (шрифты без засечек или гротески), типичный представитель Arial
cursive - курсивные шрифты
fantasy - декоративные шрифты
monospace - моноширинные шрифты

Пример:
font-family: Arial, sans-serif; - указывает шрифт семейства Arial, рубленый шрифт

font-size: - задает размер шрифта 3начение можно указывать в (px), (%), (em). В пикселях обычно задают конкретный размер шрифта, в процентах задается размер шрифта от радительского, его можно указать как 100%, или больше например 140%, или меньше 60%. Измерение в em тоже самое что и проценты, но размер шрифта исходит из значения ем установленного в браузере.

В разных браузерах размер текста в em может быть разным, но обычно это 16px, если указать font-size: 1em; то размер шрифта будет равным установленному в браузере, если указать 1,5 em, то размер текста будет в полтора раза больше. Так можно указывать разные значения для текста исходя из базового размера установленного в браузере.

Примеры:
font-size: 12px; - размер шрифта 12 пикселей
font-size: 1,2 em; - размер шрифта на 1,2 больше чем установлен для элемента, если значение em не указано, то размер от установленного в браузере
font-size: 140%; - размер шрифта больше на 140% от родительского, если шрифт не задан, то от установленного в браузере

color: - задает цвет текста С помощью него можно задать любой цвет для текста. Цвет можно задавать как в шестизначным кодом цвета, так и R G B, или использовать название цвета латинскими буквами. Данные о цветах и значениях можно найти в таблицах цветов.
Примеры:
color: #0000FF; - задает синий цвет текста
color: green; - задает зеленый цвет текста
color: rgb(255 192 203); - задает розовый цвет текста
font-style: - задает начертание текста, курсивный, наклонный Определяет начертание шрифта. Можно указать три значения. Если для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати документа.

normal - обычное начертание текста
italic - курсивное начертание
oblique - наклонное начертание

Примеры:
font-style: normal;
font-style: italic;
font-style: oblique;
font-weight: - управляет жирностью шрифта, толщиной букв Определяет если нужно жирность шрифта. Толщина букв шрифта задаётся с помощью ключевых слов или цифр.
bold - полужирное начертание
normal - нормальное начертание
bolder - большая толщина относительно родительского шрифта
lighter - меньшая толщина относительно родителя
100, 200, 300, 400, 500 ,600, 700, 800, 900 - жирность шрифта

По умолчанию жирность 400 единиц, поэтому понятно что значение 100 сделает шрифт совсем худым, а значение 900 сделает его очень жирным.

Примеры:
font-weight: bold;
font-weight: 700;
font-weight: lighter;
text-align: - задает выравнивание текста С помощью стиля text-align: задается выравнивание текста в контейнере. Выравнивание может быть по центу, по ширине, по всему границам элемента и др.
tcenter - выравнивает текст по центру
tjustify - выравнивает текст по ширине
tleft - выравнивание по левому краю
tright - выравнивание по правому краю
auto - не меняет значение
inherit - наследует значение родительского контейнера

Примеры:
text-align: left; - текст выравнивается по левому краю
text-align: center; - по центру
text-align: right; - по правому краю
text-decoration: - устанавливает подчеркивание текста Стиль text-decoration: устанавливает подчеркивание текста. Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

text-decoration: underline; - устанавливает нижнее подчеркивание текста
text-decoration: overline; - задает верхнее подчеркивание, линия над текстом
text-decoration: line-through; - создает перечеркнутый текст
text-decoration: none; - уберает линию если она есть, в том числе и у ссылок
text-decoration: inherit; - наследует значение родителя
text-decoration: blink; - делает текст мигающим примерно раз в секунду текст то появляется то пропадает
text-shadow: - создает тень для текста Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Через запятую можно указывать несколько теней, которые все применятся к тексту.

Первая цифра определяет горизонтальный сдвиг тени в право, можно указать значение с минусом чтобы тень сдвинулась в лево.
Вторая цифра указывает сбвиг по вертикали вниз, значение с минусом сдвигает тень вверх.
Третья цифра задает радиус размытия тени.
Четвертый параметр это цвет тени, если цвет не указан, то цвет тени определяется цветом текста.

Примеры:
text-shadow: 1px 1px 2px black, 0 0 1em red; - Применяется два значения тени
тень текста
text-shadow: 1px 1px 2px #0000ff; - синяя тень, цвет текста указан розовый в стиле
тень текста
text-transform: - трансформирует, изменяет текст Управляет преобразованием текста элемента, делает все буквы заглавными, или строчными.

text-transform: uppercase; - делает все буквы заглавными, прописными (верхний регистр)
text-transform:lowercase; - делает все символы строчными (нижний регистр)
text-transform:capitalize; - все первые буквы каждого слова становятся заглавными
text-transform:inherit; - наследует значение родителя
text-transform:none; - отменяет значение трансформации

line-height: - устанавливает расстояние между строк Стиль line-height: Устанавливает меж-строчный интервал текста, или как его называют - интерлиньяж. Расстояние вычисляется от высоты шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение меж-строчного расстояния не допускается.

Любое указанное число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает меж-строчный интервал в полтора раза больше высоты шрифта. В качестве значений можно указывать любые единицы, например пиксели. Можно использовать проценты в этом случае за 100% берется высота шрифта.

Примеры:
line-height: 1,8; - расстояние между строк на 1,8 больше высоты шрифта
line-height:10px; - расстояние 10 пикселей
line-height: 120% - расстояние между строками на 120% больше высоты шрифта

Стили для контейнеров

width: и right: - задают размеры контейнеров (блоков и элементов) С помощью стиля width: задается ширина блока (контейнера). Значение можно указывать как в пикселях, так и в процентах, и других принятых единицах. Стиль right: задает высоту блока. Если значения не заданы то блок автоматически изменяет размеры в зависимости от содержимого. Если это текст, то контейнер растягивается по всей ширине того контейнера, в котором он вложен. Стили width: и right: можно применять практически ко всем тегам, например к тегам <img>, <header>, <p>, <main>, <div> и другим.

Примеры:
width: 400px; - ширина контейнера 400 пикселей
width: 80%; - ширина контейнера 80 процентов от доступной ширины
right: 320px; - высота контейнера 320 пикселей
margin: и padding: - определяют внешние и внутренние отступы для контейнеров Стиль margin: задает внешний отступ контейнера от границ того контейнера, в который он вложен.
Стиль padding: задает внутренний отступ от границы контейнера до его содержимого.

Значение можно задавать как одной цифрой, тогда отступ будет одинаковый со всех сторон - margin: 10px;.

Можно указать отступ для каждой стороны - margin: 0px 10px 5px 20px, поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

Если указать три значения отступа, то первое значение задает отступ от верхнего края, второе  одновременно от левого и правого края, а третье  от нижнего края.

Если указать два значения, то первое значение устанавливает поля от верхнего и нижнего края, второе  от левого и правого

Так же можно указать конкретный отступ от одной из сторон элемента
margin-bottom: - устанавливает величину отступа от нижнего края элемента
margin-left: - устанавливает величину отступа от левого края элемента
margin-right: - устанавливает величину отступа от правого края элемента
margin-top: - устанавливает величину отступа от верхнего края элемента

Со стилем padding: все тоже самое , но он делает внутренний отступ в контейнере до его содержимого

Примеры
margin: 20px; - отступ контейнера 20 пикселей
margin: 10px 0px 10px 0px; - отступ от верха и низа 10px, а с боков по 0px
margin-top: 15px; - устанавливает отступ от верха до границы контейнера
padding: 10px; - внутренний отступ до содержимого в контейнере 10px
padding-bottom: 12px; - внутренний отступ от низа до содержимого

Так же с помощью margin: и padding: можно не только создавать отступы, но и выравнивать контейнеры. Например если прописать margin-left: auto; margin-right: auto; то контейнер выровняется посередине.
float: - устанавливает выравнивание контейнера по левому или правому краю Стиль float: определяет, по какой стороне будет выравниваться контейнер, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.

Примеры:
float: left; - прижимает контейнер к левой стороне
float: right; - выравнивает по правому краю
float: inherit; - наследует значение родителя
float: none; - наследует значение родителя

Часто значение left или right применяются когда нужно горизонтально в ряд выставить несколько блоков, если они помещаются то выстроятся горизонтально друг за другом
background: - задает фон, устанавливает цвет фона или изображение и др Стиль background: устанавливает фон для контейнеров, он позволяет установить одновременно до пяти свойств фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству.
background-color: - устанавливает цвет фона, цвет можно указывать в любом поддерживаемом формате
background-image: - устанавливает фоновое изображение
background-position: - задает положение фона установленного с помощью background-image
background-repeat: - определяет как будет повторятся фоновое изображение

Примеры:
background-color: #DCDCDC; - устанавливает цвет фона, в даном случае цвет #DCDCDC.
background-image: url(images/fon.jpg); - фоновое изображение, которое будет поаторятся ели не перекрывает весь фон.
background-repeat: repeat-x; - фоновое изображение повторяется по горизонтали
background-repeat: repeat-y; - фоновое изображение повторяется по вертикали
background-repeat: no-repeat; - отменяет повторение изображения
background-repeat: repeat; - изображение повторяется по горизонтали и вертикали

Можно так же записывать сокращенно
background: url(images/fon.jpg) no-repeat #ЕFFFF0; - указано фоновое изображение fon.jpg, указано что изображение не будет повторятся no-repeat, и указан цвет фона после изображения #ЕFFFF0, или если его нет или оно недоступно.
border: - устанавливает бордюр, стиль границы контейнера Стиль border: устанавливает стиль границы контейнера. Он позволяет одновременно установить толщину, цвет, вид границы вокруг элемента. Можно указывать несколько стилей для контейнера, значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

Кроме цвета сам бордюр может быть в виде сплошной линии, пунктирной, выпуклой граница
none - граница отсутствует (по умолчанию).
dotte - граница из ряда точек.
dashed - пунктирная граница.
solid - сплошная граница
double - двойная граница
groove - граница "бороздка"
ridge - граница "гребень"
inset - вдавленная граница
outset - выдавленная граница

Бордюр можно указывать одной цифрой, например: border: 2px; тогда толщина применится ко всем четырем сторонам контейнера.
Так же толщину можно указать для каждой стороны, например: border:2px 4px 1px 3px; тогда по порядку толщина будет: верх, правый, низ, левый.
Можно указывать три значения например: border: 2px 1px 3px; , тогда первая цифра верх, вторая левый и правый, а третья низ.
Или две цифры например: border: 1px 6px; тогда первая цифра верх-низ, а вторая левый-правый. Значение можно указывать не только в пикселях, но и в других принятых в CSS измерениях.

Примеры:
border: 1px solid #DCDCDC; - установлена толщина бордюра 1px, solid- сплошная, цвет #DCDCDC
border: 0px 2px; 0px 2px dashed #0000FF; - установлена граница по 2px с лева и с права, а сверху и снизу 0px, dashed-пунктираная, и цвет #0000FF
border-top: 2px solid #0000FF; - бордюр сверху толщиной 2px, сплошной, цветом #FFFACD
border-bottom: 6px ridge #E6E6FA; бордюр снизу, стиль "гребень", цвет бордюра #E6E6FA
border-left:1px solid #0000EE; бордюр левой границы контейнера, сплошная граница, цвет #0000EE
border-right:1px outset #BEBEBE; - устанавливает бордюр справа, outset-выдавленная граница, цвет #BEBEBE

border-radius: - устанавливает радиус скругления углов контейнера Стиль border-radius: устанавливает радиус скругления уголков границы контейнера. Можно использовать одно, два, три или четыре значения, перечисляя их через пробел. Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.

Если указать одно значение например: border-radius: 10px; то уголки округлятся со всех четырех углов

Если два значения, например: border-radius: 6 px 10px; то первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.

Если три значения например: border-radius: 10px; 20px 4px то первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка

Если четыре например: border-radius: 10px; 20px 4px то радиус задается поочередно для всех четырех уголков

В случае указания двух значений через слэш, то первое значение задает радиус по горизонтали, а второе по вертикали (эллиптические уголки)

box-shadow: - устанавливает тень границы контейнеров Стиль box-shadow: устанавливает тень границ контейнера. устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Через запятую можно указывать несколько теней, которые все применяются к тексту.

Первая цифра определяет горизонтальный сдвиг тени в право, можно указать значение с минусом чтобы тень сдвинулась в лево.
Вторая цифра указывает сдвиг по вертикали вниз, значение с минусом сдвигает тень вверх.
Третья цифра задает радиус размытия тени.
Четвертый параметр это цвет тени, если цвет не указан, то цвет тени определяется цветом текста.

Примеры:
box-shadow: 2px 2px 20px #FFFF00, 0 0 1em #FF4500; - применяется два значения тени
box-shadow: 4px 4px 10px #363636; - цвет тени #363636, сдвиг по 4px, радиус размытия тени 10px
display: - определяет как должен отображаться блок на странице Стиль display: обределяет как должен отображаться контейнер для содержимого, допустимо применять ко всем тегам, включаяя теги разметки тега, то есть строчные.

Для стиля есть два основных свойства:
display:block; - элемент отображается как блочный, то есть происходит перенос строк в начале и в конце содержимого. Применять можно например для встроенных элементов, например тега span, заставляет его вести подобно блокам.

Второе свойство display:inline; наоборот из облочного элемента делает строчный. Элемент отображается как встроенный. Можно использовать например для тегов div и p, которые по умолчанию блочные и происходит перенос строки. Этим свойством отменяется перенос и следующее содержимое начинается сразу после последнего элемента в теге.

Так же у стиля display: есть еще свойства, но они поддерживаются не всеми браузерами и редко используются.
display:inline-block; - делает элемент блочным, который обтекается другими элементами
display:list-item; - элемент выводится как блочный и добавляется маркированный список
display:none; - элемент перестает отображаться на странице и ено содержимое не видно, страница строится будто элемента совсем нет
display:run-in; - устанавливает элемент как блочный или встроенный в зависимости от контекста
display:table; - определяет, что элемент является блочной таблицей подобно использованию тега table

Этот домен продается здесь: telderi.ru, и еще много других