Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
Синтаксис и принцип работы CSS
CSS имеет строго определенный синтаксис, т. е. правила по которым создаются таблицы стилей. Основной структурной единицей здесь является правило, которое определяет, как будет выглядеть тот или иной элемент в документе. Рассмотрим структуру правила:
Сначала записывается так называемый селектор, показывающий к какому html тегу (тегам) применяется то или иное свойство. Далее, непосредственно за селектором, пишется блок объявления стилей, который обязательно заключается в фигурные скобки.
Каждое объявление в свою очередь состоит из свойства и его значения. После свойства ставится двоеточие. Правило может содержать в себе несколько объявлений. В таком случае они должны быть отделены друг от друга точкой с запятой, причем после последнего объявления точку с запятой можно не ставить.
Показанное выше правило указывает на то, что все заголовки первого уровня в документе будут голубого цвета с размером шрифта 14 пикселей.
Как подключить CSS таблицу к HTML документу?
Главная особенность css состоит в том, что меняя стилевые правила во внешней таблице стилей, мы можем управлять дизайном сколь угодно большого количества страниц.
Но для этого нам нужно подключить внешнюю таблицу стилей ко всем страницам html, дизайном которых мы хотим управлять.
Внешняя таблица стилей это просто текстовый файл с расширением .css. Допустим у нас есть таблица стилей style. css и несколько страниц html, причем все это расположено в одной папке. Тогда в каждом документе который мы хотим подключить, в голове документа (между тегами <head> и </head>) необходимо прописать строчку:
<link rel="stylesheet" type="text/css" href="style. css">
Эта строка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.
Теперь попробуйте сами:
Откройте Блокнот и создайте с помощью него два файла находящихся в одной папке: CSS файл - style. css и HTML файл - index. html.
index. htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www. w3.org/TR/html4/loose. dtd">
<html>
<head>
<title>Работаем со стилями</title>
<link rel="stylesheet" type="text/css" href="style. css" >
</head>
<body>
<h1>Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразится высотой всего лишь 14 пикселей и будет голубого цвета</h1>
</body>
</html>
style. css
h1{color:blue;font-size:14px}
Если вы все сделали правильно, то запустив в браузере файл index. html увидите:
Существуют еще два способа подключения стилей, которые не требуют внешней таблицы стилей.
Можно располагать правила стилей непосредственно в голове документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www. w3.org/TR/html4/loose. dtd">
<html>
<head>
<title>Работаем со стилями</title>
<style type="text/css">
h1{color:blue;font-size:14px}
</style>
</head>
<body>
<h1>Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразиться высотой всего лишь 14 пикселей и будет голубого цвета</h1>
</body>
</html>
Также, можно задавать стиль с помощью атрибута style. Например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www. w3.org/TR/html4/loose. dtd">
<html>
<head>
<title>Работаем со стилями</title>
</head>
<body>
<h1 style="color:blue;font-size:14px">Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразиться высотой всего лишь 14 пикселей и будет голубого цвета</h1>
</body>
</html>
Оба эти примера не используют хотя бы потому, что они не дают особых преимуществ перед html. Ведь при попытке изменить дизайн всего сайта, построенного по такому принципу, придется изменять стили на всех страницах.
Цвет и фон в CSS
Цвета в CSS указываются так же, как и в HTML. Т. е. можно указывать шестнадцатеричное значение, например #ff3355, либо же название цвета (red, green, blue и др.)
Основными свойствами цвета и фона в CSS являются:
· color
· background-color
· background-image
· background-repeat
· background-attachment
· background-position
· background
Свойство COLOR
Задает основной цвет (цвет переднего плана) того или иного элемента. Например, если мы хотим сделать цвет всех заголовков первого уровня красным, а цвет текста параграфов зеленым, то таблица стилей будет выглядеть так:
H1 {
color: red ; }
P {
color: green ; }
Свойство BACKGROUND-COLOR
Задает фоновый цвет элемента. В отличие от HTML, в котором фоновый цвет можно использовать только для страницы или ячейки таблицы (т. е. имеющих атрибут bgcolor), в CSS фоновый цвет можно задавать для чего угодно: для таблиц, заголовков, параграфов, ссылок и др.
Например, чтобы изменить фоновый цвет всей страницы, нужно задать это свойство элементу BODY, т. к. именно он отвечает за тело документа, т. е. за всю страницу.
BODY {
background-color : #FFEE8C ; }
H1 {
color: red ;
background-color :blue ; }
P {
color: green ; }
Свойство BACKGROUND-IMAGE
Данное свойство используется для задания фонового изображения. В примере ниже фоновое изображение задается для всей страницы, т. е. для элемента BODY.
BODY {
background-color : #FFEE8C ;
background-image : url(ris1.png) ; }
H1 {
color: red ;
background-color :blue ; }
P {
color: green ; }
Как видите, в качестве значения свойства, указывается путь к изображению, но немного не так как в HTML. В начале пишется URL, а затем сразу, Без пробелов!!! в круглых скобках положение картинки. Если она находится в той же папке, то пишем просто название картинки, как в примере выше. Если допустим в подпапке img, то пишем так url(img/ris1.png).
Свойство BACKGROUND-REPEAT
По-умолчанию фоновое изображение повторяется начиная с верхнего левого угла, как по вертикали, так и по горизонтали, пока не заполнит весь экран. С помощью свойства background-repeat мы можем контролировать эти повторения.
Это свойство может принимать четыре значения:
Background-repeat: repeat-x ; | повторение по горизонтали |
Background-repeat: repeat-y ; | повторение по вертикали |
Background-repeat: repeat ; | по вертикали и по горизонтали (значение по-умолчанию) |
Background-repeat: no-repeat ; | не повторяется |
Это очень полезное свойство, и аналогов ему в html нет.
Пример записи стиля:
BODY {
background-image : url(ris1.png) ;
background-repeat: repeat-x;
}
Если вы вообще не укажете это свойство, то будет использоваться его значение по умолчанию, т. е. фоновое изображение будет повторяться как по вертикали, так и по горизонтали.
Свойство BACKGROUND-ATTACHMENT
При наличии фонового рисунка, это свойство устанавливает, будет ли фоновое изображение прокручиваться с содержимым страницы, или будет заблокировано, т. е. неподвижно. Может принимать два значения:
SCROLL - фон прокручивается вместе с содержимым;
FIXED - фон строго зафиксирован.
BODY {
background-image : url(ris1.png) ;
background-repeat: no-repeat;
background-attachment: scroll ;
}
BODY {
background-image : url(ris1.png) ;
background-repeat: no-repeat;
background-attachment: fixed ;
}
Значение по умолчанию - scroll , т. е. если вообще не писать это свойство, то фон будет прокручиваться вместе с содержимым, как в первом примере.
Свойство BACKGROUND-POSITION
Задает позицию фонового изображения. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов. Отсчет как обычно ведется из левого верхнего угла браузера, где и располагается фоновое изображение по умолчанию. На рисунке приведены примеры позиционирования (точка – это изображение, а то что под ней – приблизительные координаты).
В начале указываем координату по горизонтали (по оси Х), затем через пробел координату по вертикали (по оси Y ). Координату можно задавать в процентах от ширины окна браузера, также в пикселях. Можно задавать и в сантиметрах, но сантиметры лучше не использовать.
Также положение можно задавать специальными словами:
left - лево, right - право, center - центр, top - верх, bottom - низ. Смотрите рисунок:
Примеры стилей:
BODY {
background-image : url(ris1.png) ;
background-repeat: no-repeat;
background-position: top right;
}
BODY {
background-image : url(is1.png) ;
background-repeat: no-repeat;
background-position: 300px 500px ;
}
BODY {
background-image : url(ris1.png) ;
background-repeat: no-repeat;
background-position: 75% 25%;
}
Сокращенная форма записи - BACKGROUND
Свойство BACKGROUND служит для сокращенной записи всех выше рассмотренных свойств.
Порядок свойств этого элемента таков:
background-color_background-image_background-repeat_background-attachment _background-position
Т. е. просто записывается пять значений свойств через пробел.
То что записано так:
BODY {
background-color:#ffee8c ;
background-image : url(ris1.png) ;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}
Можно записать одной строчкой:
BODY {
background: #ffee8c url(ris1.png) no-repeat fixed top right ;
}
Как видите, значения свойств пишутся через пробел. Если какое либо свойство не указать, то ему автоматически присвоится значение по-умолчанию.
Шрифты в CSS
Основными свойствами шрифтов в CSS являются: семейство, стиль, вариант, вес, размер.
• font-family
• font-style
• font-variant
• font-weight
• font-size
• font
Свойство FONT-FAMILY
Данное свойство определяет гарнитуру шрифта. Вообще FONT-FAMILY в переводе с английского означает семейство шрифта. Дело в том, что шрифты по тем или иным признакам объединяются в семейства. Три основных семейства:
Serif - шрифты с характерными "засечками", наиболее яркий представитель - "Times New Roman";
Sans-serif - шрифты рубленые, без засечек, например Arial или Verdana ;
Monospace - моноширинные шрифты (с одинаковым расстоянием между символами, наподобие печатной машинки), такие как "Courier New";
На рисунке ниже изображены названия основных, используемых на практике, шрифтов, сгруппированные по семействам. Причем отображены они именно так, как выглядят на самом деле, например название "Times New Roman" отображено шрифтом "Times New Roman".
Названия некоторых шрифтов заключены в кавычки, потому что есть такое правило: "Если в названии шрифта встречаются пробелы, то его следует заключать в кавычки".
h1 {font-family: verdana, arial, sans-serif;}
p {font-family: "Times New Roman", serif;}
Т. е. в начале пишется самый приоритетный шрифт, затем менее приоритетный, а затем желательно писать имя семейства. Надпись из примера выше -
h1 {font-family: verdana, arial, sans-serif;} означает, что все заголовки первого уровня будут отображаться шрифтом verdana. Если по каким либо причинам этот шрифт не установлен на компьютере, то браузер подставит шрифт arial, а если и его нет, то браузер подставит любой доступный шрифт из семейства serif.
Свойство FONT-STYLE
Данное свойство задает стиль шрифта. Может принимать три значения:
- normal - обычный; italic - курсивный; oblique - наклонный;
У вас может возникнуть вопрос: "чем отличается курсивный от наклонного?" , - дело в том, что значение italic означает использование встроенного в шрифт курсивного начертания. Ведь почти каждый шрифт включает в себя все символы и буквы в нормальном исполнении, в полужирном исполнении и в курсивном.
А значение oblique – это искусственно созданный курсив, т. е. созданный наклоном стандартных букв на определенный угол.
h1{
font-family: verdana, arial, sans-serif;
font-style:normal;
}
h2{
font-family: verdana, arial, sans-serif;
font-style:italic ;
}
h3{
font-family: verdana, arial, sans-serif;
font-style:oblique;
}
Свойство FONT-VARIANT
Это свойство используется для выбора варианта написания букв нижнего регистра. Может принимать два значения:
normal - значение по умолчанию, текст отображается обычным образом.
small-caps - буквы нижнего регистра отображаются как уменьшенные заглавные.
Т. е. как видите большие (заглавные буквы) остаются без изменений, а маленькие - представляют собой полную копию заглавных букв, только слегка меньшего размера.
По умолчанию (т. е. если вообще не записывать это свойство) текст будет отображаться обычным начертанием.
Пример записи стиля:
h1{
font-family: verdana, arial, sans-serif;
font-variant:small-caps;
}
h2{font-family: verdana, arial, sans-serif;}
Свойство FONT-WEIGHT
Это свойство определяет насыщенность шрифта, т. е. с его помощью можно сделать шрифт жирным. Основные значения: normal - обычный и bold - жирный. Некоторые браузеры поддерживают числовые значения: 100, 200,300,400,500,600,700,800,900. Для справки: 400 равносильно normal, а 700 - bold. Но лучше не пользоваться числами!
P {font-family: arial, verdana, sans-serif;}
DIV {
font-family: arial, verdana, sans-serif;
font-weight: bold;
}
Свойство FONT-SIZE
C его помощью можно регулировать размер шрифта. В качестве единиц измерения лучше всего использовать пикселы, т. к. это универсальный способ и во всех браузерах вы увидите одинаковый результат, а это самое главное.
h1 {
font-family: arial, verdana, sans-serif;
font-size: 18px;
}
h2{
font-family: arial, verdana, sans-serif;
font-size: 36px;
color: red;
}
Как видите с помощью этого свойства можно переопределять вид заголовков, что может быть полезно, например, при продвижении в поисковых системах. Ведь тексту, заключенному в заголовок поисковые системы придают большее значение, чем обычному.
Сокращенная запись. Свойство FONT
Все, перечисленные выше, свойства можно записать в краткой форме. Это помогает экономить время и делать код стилей более легким.
При этом нужно записывать значения всех свойств через пробел, в такой последовательности:
font-style_font-variant_font-weight_font-size_font-family
Например:
P{
font-style: italic;
font-variant: normal ;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
А теперь то же самое в краткой форме:
P{ font : italic normal bold 30px arial, sans-serif; }
Еще раз обратите внимание, на то, что все значения указаны в нужной последовательности, и ЧЕРЕЗ ПРОБЕЛ. Если какое-либо свойство не указать, ему присвоится значение по умолчанию.
Текст в CSS
Основные свойства CSS отвечающие за форматирование текста:
· text-align
· text-decoration
· text-indent
· text-transform
· letter-spacing
· word-spacing
Свойство TEXT-ALIGN
Свойство выравнивания текста, аналогичное атрибуту ALIGN используемому в HTML. Может принимать четыре значения:
left - выравнивание по левому краю (значение по умолчанию);
right - выравнивание по правому краю;
center - выравнивание по центру;
justify - выравнивание по ширине (по правому и левому краям одновременно).
Например:
h1{ text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}
p {text-align:justify;}
Свойство TEXT - DECORATION
Позволяет оформлять текст определенным образом. Рассмотрим четыре основных значения данного свойства:
none - значение по умолчанию. Дополнительного оформления не происходит;
underline - текст подчеркивается снизу;
overline - текст надчеркивается сверху;
line-through - текст перечеркивается;
h1 {
text-align:center;
text-decoration:underline;
}
h2 {
text-align:center;
text-decoration:overline;
}
h3 {
text-align:center;
text-decoration:line-through;
}
Это свойство частенько используется при задании оформления ссылок, к примеру для того, чтобы при наведении на ссылку убиралось подчеркивание.
Свойство TEXT-INDENT
Это свойство пригодится нам для создания отступов первой строки, другими словами абзацев. Значение лучше задавать в пикселах, это универсальный способ.
h1{text-align:center;}
p {
text-indent: 40px;
}
Однако можно задать и в процентах от общей длины базовой строки (строки без отступа)
h1{text-align:center;}
p {
text-indent: 20%;
}
Свойство TEXT-TRANSFORM
C помощью этого свойства, можно видоизменять текст, а именно менять большие буквы на маленькие или наоборот. Может иметь такие значения:
capitalize - меняет регистр первых букв каждого слова так, чтобы они были заглавными. Например:"создайте сайт сейчас" станет "Создайте Сайт Сейчас".
Частенько это свойство используется при написании рекламных текстов, это больше привлекает внимания!
uppercase - делает из всех букв заглавные. Например: "текст в css " станет " ТЕКСТ В CSS "
lowercase - делает из всех букв маленькие. Например: "TRANSFORM" cтанет "transform".
none - не производит смены регистра; это значение используется по умолчанию.
Свойство LETTER-SPACING
C помощью этого свойства можно изменять расстояние между буквами. Значение лучше указывать в пикселях.
h1 { letter-spacing: 10px;}
p{ letter-spacing :4px; }
В примере выше для заголовков установлен интервал между буквами в 10 px, а для параграфов в 4px;
Свойство WORD-SPACING
Позволяет изменять расстояние между словами. Значение также лучше задавать в пикселах.
h1 { word-spacing: 20px;}
p{ word-spacing :10px; }
А вообще, при создании того или иного шрифта, разработчиками идеально выбираются интервалы между буквами и словами, и поэтому применять последние два свойства следует осторожно, например, в случае, когда требуется своеобразное дизайнерское решение.
Списки в CSS
Основные свойства CSS, отвечающие за внешний вид списков:
· list-style-type
· list-style-position
· list-style-image
Все эти свойства универсальны, т. е. могут применяться как к упорядоченным спискам, так и к неупорядоченным.
Свойство LIST-STYLE-TYPE
Позволяет определять вид маркера элементов списка. Это могут быть цифры, буквы, квадратики, кружочки и др. Ниже приведены основные значения этого свойства:
- disk - маркер в виде закрашенного круга; circle - маркер в виде незакрашенного круга; square - маркер в виде закрашенного квадрата;
- decimal - обычные десятичные числа, например 1,2,3,4,5 и т. д. ; upper-roman - большие римские цифры, типа I, II, III, IV, V и т. д. ; lower-roman - маленькие римские цифры типа i, ii, iii, iv, v и т. д. upper-alpha - большие буквы A, B, C, D, E и так далее; lower-alpha - малые буквы типа a, b,c, d,e и т. д.;
- none - маркер списка отсутсвует;
Переделаем упорядоченный список в неупорядоченный, т. е. элементу OL (упорядоченый список) напишем decimal, а элементу UL(неупорядоченный) тип upper-roman;
ol {list-style-type:square;}
ul {list-style-type: upper-roman;}
Свойство LIST-STYLE-POSITION
Это свойство определяет положение маркера. Может принимать два значения:
- outside - за пределами основного блока элемента списка; inside - внутри основного блока списка.
Т. е. если мысленно обвести прямоугольником основной блок списка, получится примерно следующее: см. рисунок вверху. Это свойство уже устарело, и сейчас, в новых версиях браузеров может уже и не работать.
Свойство LIST-STYLE-IMAGE
Это наверное самое интересное свойство в списках. Оно позволяет поставить вместо маркера любое изображение. В качестве значения указывается ключевое слово url и затем в круглых скобках путь к изображению. В некоторых устаревших версиях браузеров, работает некорректно.
ul {list-style-image: url(galka. gif);}
Не забывайте, что url(galka. gif) означает что изображение galka. gif лежит в той же папке, где и css - файл. Если у вас изображение не там, соответственно и путь указывайте другой.
Ссылки в CSS
Наверное, вы не раз замечали на различных сайтах, как при наведении на ссылку меняется ее внешний вид (например исчезает подчеркивание или меняется цвет). Это делает CSS, а именно за это отвечают псевдоклассы - классы, способные учитывать те или иные условия, при определении свойств html элемента.
Как применить псевдокласс к ссылкам?
Записываем для начала элемент А, к которому мы будем применять псевдокласс, затем ставим двоеточие и указываем имя псевдокласса, а уже потом в фигурных скобках указываем нужный стиль.
А : ИМЯ ПСЕВДОКЛАССА { ...стиль...}
Для ссылок существуют четыре псевдокласса:
A:link { ... стиль оформления обычной ссылки... }
A:active { ... стиль оформления ссылки в момент нажатия... }
A:visited { ... стиль оформления посещенной ссылки... }
А:hover { ... стиль оформления ссылки, на которую наведен указатель мыши ... }
Ссылки по умолчанию выглядят следующим образом:
Видите, только посещенная ссылка отличается от других, а так в принципе все одинаково. Да и цвета не очень. Попробуем создать свой стиль:
a:link {
color: blue ;
}
a:visited {
color:gray;
}
a:hover {
color:red ;
text-decoration:none;
}
a:active {
color:green;
text-decoration:none;
}
Вообще вариантов оформления ссылки может быть множество, и каждый делает под конкретный дизайн что-то свое, например:
a:link {
color: blue ;
}
a:visited {
color:gray;
}
a:hover {
color:red ;
text-decoration:none;
font-weight:bold;
}
a:active {
color:green;
text-decoration:none;
text-transform:uppercase;
}
Бывают случаи, когда мы не хотим вообще чтобы ссылка визуально выделялась на фоне текста. Решение опять же в CSS:
a:link {
color: black ;
text-decoration:none;
}
a:visited{
color: black ;
text-decoration:none;
}
a:hover {
color: black ;
text-decoration:none;
}
a:active {
color: black ;
text-decoration:none;
}
Если для всех псевдоклассов стиль одинаковый, как в примере выше, то это можно записать и короче:
a:link, a:visited, a:hover, a:active {color:black; text-decoration:none;}
А можно и вовсе без использования псевдоклассов:
a {color:black; text-decoration:none;}
Типы селекторов в CSS
Селектор служит для того, чтобы однозначно определить элемент в HTML документе, к которому мы хотим применить тот или иной стиль CSS.
· Селектор по элементу;
· Селектор по классу;
· Селектор по id;
· Контекстный селектор;
Селектор по элементу
До этого момента, мы с вами работали именно с этим селектором. Т. е. в качестве селектора использовалось непосредственно имя html элемента, к которому мы хотели применить данный стиль. Т. е. написав класс, например для параграфа (Р), все параграфы на странице приобретали стиль данного класса.
P {
font-family: arial, verdana, sans-serif;
font-size: 12px
}
А теперь представьте ситуацию, когда необходимо сделать первый параграф в одном стиле, второй в другом, третий в третьем и. т.д. Тут нам на помощь придет селектор по классу.
Селектор по классу
Универсальный класс в CSS создается следующим образом: сначала ставим точку, затем сразу, без пробела, пишем имя класса, ну а затем в фигурных скобках стиль. Например:
.green {
font-family: arial, verdana, sans-serif;
font-size: 12px; color:green;
}
Как применить данный стиль?
Применяем данный стиль к определенному параграфу в документе. Для этого используется атрибут class со значением названия стиля. Вот как это будет выглядеть в html:
<P class ="green"> ... текст параграфа... </P>
Другой пример:
html:
<p>Это обычный параграф, для него используется селектор по элементу </p>
<p class="green"> Этот параграф зеленый, т. к к нему применили класс </p>
<p class ="big_red" >А этот параграф большего шрифта и красный </p>
<p>Этот параграф снова обычный, по классу селектора элемента </p>
css:
p {
font-family:arial, verdana, sans-serif;
font-size:18px;
}
.green {color:green;}
.big_red{
font-size:28px;
color:red;
}
Указываем сначала базовый стиль для всех параграфов(селектор по элементу), а потом уже, если хотим в каком-либо параграфе что-то изменить, создаем для него специальный стиль (селектор по классу) и присваиваем его этому параграфу. Когда мы создаем специальный класс, мы должны писать туда только те свойства, которые хотим добавить, или изменить, по отношению к базовому стилю для этого элемента.
Классы из примера выше, можно применить не только к параграфу, но и, например, к заголовкам, или например, к ячейке таблицы, или ко всей таблице, короче они могут применяться везде, где они могут на что-то повлиять (в данном случае везде, где есть параметр цвет, и текст).
Сделать так, чтобы класс действовал только на определенный элемент (например параграф) можно указав название элемента перед точкой:
P. green {color:green;}
Теперь класс green не будет действовать ни на что другое, кроме элемента P.
Селектор по id
Данный селектор применяется, если необходимо выделить один единственный элемент, уникальный, отличный от всех остальных в документе. К примеру, выделим первый заголовок на странице определенным образом:
html - часть:
<Н1 id="firstheader"> Первый заголовок на странице </Н1>
css - часть:
H1#firstheader { color: red; font-weight: bold; text-align: center }
Как видите в html-части вместо атрибута class здесь употребляется атрибут id, а в css - вместо точки употребляется знак #.
В принципе, то же самое можно сделать и с использованием селектора по классу, это уже кому как больше нравится :)
Контекстный селектор
Это очень полезная вещь. Допустим, у нас есть страничка с таблицами и параграфами текста, причем и в таблице, и в параграфах встречаются выделенные жирным шрифтом (strong) слова. Сделаем так, чтобы слова, в параграфе, которые выделены жирным стали зеленого цвета. Так вот:
p strong {color:green }
Т. е. в начале P затем пробел, затем STRONG, а уже потом стиль. Читается эта строчка примерно так: «Если внутри элемента P имеется элемент STRONG то элементу strong присвоить стиль зеленого цвета».
Вложенность может быть любого уровня. Вот еще пример: "Если вдруг внутри ячейки таблицы (td) , встретится параграф (P) , внутри которого будет слово выделенное жирным (STRONG) то пусть это слово станет красным!"
td p strong {color:red;}
Блоковая модель в CSS
В HTML различают элементы блочные и строчные. Причем блочные элементы это как бы отдельная структурная единица, которая всегда отделяется абзацными отступами. Т. е. нельзя расположить два блочных элемента на одной строке. Примером блоков в HTML могут служить элементы H1 - Н6, Р, DIV. А строчные элементы не создают отдельной структурной единицы, не отделяются абзацными отступами, и например два строчных элемента могут без проблем расположиться на одной строке. Примером могут быть элементы strong , EM , I.
Технология стилей CSS также использует понятие блоков. Блоки в CSS представляют собой самостоятельную структурную единицу, имеющую форму прямоугольника. Каждый элемент в дереве элементов документа - самостоятельный блок. Из этого следует, что в CSS есть блоки, которые структурно отделены от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков. Но и те, и другие имеют одинаковую структуру:
Каждый такой блок обязательно имеет информационную часть, или содержимое, которым может быть текст, изображение или другая информация. Эта часть блока называется его контентом или содержимым. Например, для элемента P содержимым блока является текст абзаца.
Вокруг области контента могут быть пустые, не занятые содержимым области, называемые полями (margin). С точки зрения дизайна поля обеспечивают для содержимого блока эстетически более привлекательный вид. При наличии полей определенного размера текст не примыкает вплотную к границам блока. Можно провести аналогию с полями, устанавливаемыми при печати документов на бумаге. Если полей не было бы, то текст начинался бы прямо у края листа. При наличии полей имеются не занятые текстом области вдоль краев листа бумаги, и текст, напечатанный на листе, в этом случае читать приятнее и удобнее.
Непосредственно за полями проходит граница блока (border), которая может иметь определенную толщину и стиль линий. Ширина блока может быть произвольной - от нулевой (граница в этом случае не видна) до произвольно заданной в единицах измерениях длины. Стиль линий может быть различным, от простой линии до объемных вариантов. Кроме того, граница может иметь произвольный цвет.
Также блок может иметь отступы (padding), это дополнительное свободное пространство вокруг границы блока. Согласно спецификации CSS, поля, границы и отступы не входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого.
Рамки в CSS
Основные свойства рамок в CSS следующие:
· border-width
· border-color
· border-style
· Сокращенная форма - border
Свойство BORDER-WIDTH
Это свойство задает толщину рамки. Значение обычно указывается в пикселях, но также можно указывать ключевыми словами thin (2px) , medium(4px) и thick(6px). Для лучшего понимания, сколько это один пиксель, смотрите рисунок ниже:
На рисунке приведены значения ширины от 1 до 10 пикселей.
Свойство BORDER-COLOR
Данное свойство определяет цвет рамки. Значение цвета задается обычным образом, т. е. например: "#ff3344", или "gold".
Свойство BORDER-STYLE
Данное свойство определяет какого вида будет рамка. Ниже приведены 8 основных значений данного свойства.
SOLID | Рамка состоит из сплошной линии |
DOTTED | Точечная рамка |
DASHED | Пунктирная рамка |
DOUBLE | Рамка из двойной сплошной линии |
GROOVE | Рамка как бы из вдавленной линии, с имитацией объема |
RIDGE | Рамка отображается выпуклой линией с имитацией объема |
INSET | Рамка отображается так, что весь блок кажется вдавленным |
OUTSET | Рамка отображается так, что весь блок кажется выпуклым |
Примечание: минимальная ширина рамки типа double должна равняться 3 px, иначе она будет отображаться некорректно.
Примеры стилей:
h1 {
border-width: 4px;
border-style: dotted;
border-color: red;
}
h2 {
border-width: 18px;
border-style: inset;
border-color: red;
}
p {
border-width: 2px;
border-style: solid;
border-color: blue;
}
Или такой вариант:
h1 {
border-width: 30px;
border-style:outset ;
border-color: red;
}
h2 {
border-width: 20px;
border-style: dashed;
border-color: gold;
}
h3 {
border-width: 16px;
border-style: double;
border-color: green;
}
p {
border-width: 1px;
border-style: dotted;
border-color: blue;
}
Сокращенная форма - border
Как и в других свойствах, у рамки есть сокращенная форма border. В начале пишется толщина, затем после пробела стиль, а затем после пробела цвет. Предыдущий пример можно записать так:
h1 {
border:30px outset red;
}
h2 {
border:20px dashed gold;
}
h3 {
border: 16px double green;
}
P {
border:1px dotted blue
}
Примеры:
Во всех перечисленных выше примерах, если добавить после слова border одно из ключевых слов (top, right, bottom, left) можно регулировать параметры рамки с разных сторон соответственно (верх, право, низ, лево). Например можно сделать так:
h1 {
border-top-width: 30px;
border-top-style:solid ;
border-top-color: red;
border-right-width: 20px;
border-right-style:dashed ;
border-right-color: gold;
border-bottom-width: 10px;
border-bottom-style:dashed;
border-bottom-color: green;
border-left-width: 40px;
border-left-style:solid ;
border-left-color: blue;
}
Естественно намного красивее код будет выглядеть в сокращенном виде:
h1 {
border-top: 30px solid red;
border-right: 20px dashed gold;
border-bottom: 10px dashed green;
border-left: 40px solid blue;
}
- Смотреть пример
Можно также комбинировать перечисленные выше свойства, например, так:
h1 {
border: 30px solid red;
border-bottom: 10px solid gold;
}
h2 {
border: 30px solid red;
border-bottom-color: green
}
Поля (margin) и отступы (padding)
В чем отличие margin от padding. Для этого, еще разок вспомним блоковую модель в CSS.
MARGIN (Поля) - это расстояние от границы (рамки) блока, до ближайших элементов, или, если их нет, до краев документа.
PADDING (Отступы) - как бы внутреннее расстояние, между границей(рамкой) и содержимым блока.
И давайте сразу посмотрим пример: создадим три стиля для трех разных параграфов, с различными значениями margin и padding и посмотрим на результат:
.p1 {
background-color : #FFE446;
border:1px solid red;
margin:70px;
}
.p2 {
background-color : #FFE446;
border:1px solid red;
padding:70px;
}
.p3 {
background-color : #FFE446;
border:1px solid red;
margin:50px;
padding:20px;
}
Добавляя уже знакомые нам ключевые слова: top, right, bottom, left можно регулировать отступы и поля соответственно сверху, справа, снизу, слева.
p {
margin-top:50px;
margin-right:50px;
margin-bottom:50px;
margin-left:150px;
}
Тоже самое, только в сокращенной записи:
p {
margin:50px;
margin-left:150px;
}
Т. е. так как только левое поле отличается от остальных, мы просто записали общее поле, а потом дописали значение левого поля, и получили тот же результат что и в первом примере.
Возможен также такой вариант записи:
p {
margin: 50px 50px 50px 150px;
}
Т. е. значения записываются по часовой стрелке: верхнее, правое, нижнее, левое.
В каких случаях лучше пользоваться отступами, а в каких полями?
А это уже решать Вам, могу только дать несколько принципиальных отличий:
- Отступы (padding) располагаются внутри блока, а поля (margin) – за их пределами; Фон блока и фоновое изображение распространяются только на отступы, но не на поля. Поля всегда прозрачны, и сквозь них просвечивает фон родительского элемента.
Высота(height) и ширина(width) блоков
По умолчанию высота и ширина блоков определяются автоматически, т. е. чем больше текста (или другого содержимого) тем шире и выше блок.
Но, с помощью технологии CSS, мы можем сами задавать необходимую нам ширину и высоту блоков.
HEIGHT - свойство, устанавливающее высоту блока;
WIDTH - свойство, устанавливающее ширину блока;
Обычно, в качестве блоков в CSS используют элемент DIV. Однако свойство ширины и высоты можно применить и к параграфам, спискам и др.
Пример: создаем 4 класса, и поочередно присваиваем их одному и тому же боксу (в данном случае DIV) с текстом.
.box1 {
width: 300px;
border: 1px solid red;
background: #FFE446;
}
Как видите, ширина фиксированная и равна 300 пикселей, а высота устанавливается по умолчанию, в зависимости от содержимого.
.box2 {
height: 300px;
border: 1px solid red;
background: #FFE446;
}
Теперь, фиксированная высота, а ширина растягивается по содержимому.
.box3 {
width: 300px;
height: 600px;
border: 1px solid red;
background: #FFE446;
}
Здесь фиксированная как высота, так и ширина.
.box4 {
width: 300px;
height: 300px;
border: 1px solid red;
background: #FFE446;
}
Когда бокс с фиксированной шириной и высотой, а содержимое не умещается в такой блок, то текст попросту выходит за рамки блока.
Примечание!
Согласно спецификации CSS, поля, границы и отступы не входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого.
Позиционирование блоков
Технология CSS позволяет размещать что угодно, там где вам угодно. Нужно просто указать координаты блока и все. Под блоком мы понимаем не только <div>, но и заголовки, параграфы, рисунки, списки, в общем, все, что является блоковой моделью. Это помогает создать действительно уникальный дизайн.
Рассмотрим две основные модели позиционирования:
· Абсолютное позиционирование (POSITION:ABSOLUTE;)
· Относительное позиционирование (POSITION:RELATIVE; )
Абсолютное позиционирование (POSITION:ABSOLUTE;)
Обычно для позиционирования применяют именно этот тип. В технологии CSS, свойство позиционирования обозначается как POSITION, а чтобы указать, что это позиционирование абсолютное, пишут значение ABSOLUTE. Затем, используя ключевые слова top, right, bottom, left указывают необходимые координаты, которые отсчитываются от краев окна браузера.
Огромный плюс абсолютного позиционирования в том, что бокс с абсолютным позиционированием располагается по заданным координатам, а из того места, где он должен был бы быть, он удаляется.
Рассмотрим, обычный документ с одним изображением, и обтекающим его текстом.
Спозиционируем изображение, для чего создадим класс, и присвоим его изображению. Код класса, выглядит примерно так:
.ris1{
border: 1px solid red;
position:absolute;
top:100px;
right:100px;
}
В HTML, чтобы применить класс к изображению, пишем <img class="ris1"> .
Что мы видим? Изображение удалилось из того места, где оно было (вместо изображения теперь там текст), и переместилось соответственно указанным координатам.
Обычно указываются только две координаты, т. е. привязка идет к любому из углов документа.
Вот еще пример стиля:
.ris1{
position:absolute;
bottom:300px;
left:100px;
}
Если необходимо зафиксировать блок, т. е. чтобы он не прокручивался вместе с основным содержимым, то необходимо указать значение FIXED.
.ris1{
position:fixed;
bottom:300px;
left:100px;
}
Относительное позиционирование (POSITION:RELATIVE; )
При относительном позиционировании, бокс смещается, но его прежнее место ничего не заполняет. Обозначается в как POSITION: RELATIVE;
Координаты в отличие от абсолютного позиционирования, отсчитываются от прежнего положения блока.
Пример простого документа с текстом и рисунком:
Css код:
.ris1{
border:1px solid red;
position:relative;
top:200px;
left:100px;
}
Итак, прежнее место ничем не занимается, а координаты отсчитываются от первоначального положения блока.
Позиционировать можно не только изображения, а и все другие элементы.
Плавающие блоки(свойство float)
С помощью плавающих блоков можно создавать различные эффекты и даже дизайн страниц, т. н. блочный дизайн. Большинство современных сайтов строятся именно по блочному принципу. Плавающие блоки в CSS определяются свойством float.
Свойства FLOAT
Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Свойство может принимать следующие значения.
- left - структурный блок перемещается влево. Остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха. right - структурный блок перемещается вправо. Остальное содержимое документа выводится вдоль левой стороны блока, начиная с самого верха. none - блок не перемещается (значение по умолчанию).
Например, три квадратных блока, со стороной в 200 пикселей будут располагаться по умолчанию следующим образом.
HTML код :
<div class="box1">Первый блок</div>
<div class="box2">Второй блок</div>
<div class="box3">Третий блок</div>
CSS код :
.box1 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
}
.box2 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
}
.box3 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
}
По умолчанию каждый следующий блок, находится под предыдущим.
Используя свойство float можно сделать так, чтобы каждый блок всплывал влево, т. е. это будет выглядеть так:
.box1 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
}
.box2 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
}
.box3 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
}
Вот как будет выглядеть, если блоки будут всплывать вправо:
.box1 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:right;
}
.box2 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:right;
}
.box3 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:right;
}
Классический пример применения - это когда надо сделать чтобы текст выводился в колонках. Пусть колонки будет три.
CSS код:
.column1 {
float:left;
width: 33%;
}
.column2 {
float:left;
width: 33%;
}
.column3 {
float:left;
width: 33%;
}
В html-коде просто заключим необходимый текст в соответствующие колонки, тегами DIV
<div class="column1">
<p>There is one universal truth in website making: To make a websitet...</p>
</div>
<div class="column2">
<p> If you're like the vast majority of people thinking...</p>
</div>
<div class="column3">
<p>There is one universal truth in website...</p>
</div>
Говоря о плавающих блоках, необходимо упомянуть также о свойстве CLEAR - специфическое свойство, позволяющее определенным образом позиционировать плавающие блоки.
- left - блок должен размещаться ниже всех левосторонних плавающих блоков. right - блок должен размещаться ниже всех правосторонних плавающих блоков. both - блок должен размещаться ниже всех плавающих блоков. none - никаких ограничений на положение блока относительно перемещаемых объектов не накладывается.
Ну допустим имеется два плавающих влево блока (float:left;), которые обтекает текст.
Если заключить весь текст в блок, и придать ему свойство CLEAR:BOTH т. е. чтобы он размещался ниже всех плавающих блоков, можно избавиться от обтекания блоков текстом.
HTML-код
<div class="box1">Первый блок</div>
<div class="box2">Второй блок</div>
<div class="box3">
<p>There is one universal truth in website...</p>
</div>
CSS-часть
.box1 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
}
.box2 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
}
.box3 {
clear:both;
}
- Смотреть пример
Заметьте, что в блоках может находиться что угодно (картинки, списки, текст и др.)
Еще один пример, когда один блок располагается под другим, и оба блока обтекаются текстом.
HTML-код
<div class="box1">Первый блок</div>
<div class="box2">Второй блок</div>
<p>There is one universal truth in website...</p>
CSS - часть
.box1 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
}
.box2 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
clear:both;
}
Слои в CSS
Поговорим о таком понятии как слой в CSS. Для тех, кто работал с графическими редакторами, это понятие должно быть знакомо.
Создавая блок в CSS, мы всегда четко задаем его параметры, а также позиционируем его в определенное место на экране. Таким образом, любой блок имеет две координаты X и Y, которые определяют положение блока на плоскости экрана. Но в CSS есть еще и третья, пространственная координата Z, которая определяет номер слоя, на котором находится блок. Т. е. чем больше координата Z, тем выше этот слой находится по отношению к остальным. Например, слой с номером 2 будет ближе расположен к пользователю, просматривающему вашу страницу, чем слой с номером 1. А слой с номером 1, будет располагаться выше, чем основной код страницы.
За создание слоя в CSS отвечает свойство Z-index, а принимаемые им значения, указывают номер слоя.
Например, можно сделать из карт знаменитую комбинацию Royal Flash.
Как видите, каждая карта, немного перекрывает другую. Вот как это выглядит в коде:
.desatka_buba {
position: absolute;
left: 200px;
top: 200px;
z-index: 1;
}
.valet_buba {
position: absolute;
left: 215px;
top: 215px;
z-index: 2;
}
.dama_buba {
position: absolute;
left: 230px;
top: 230px;
z-index: 3;
}
.korol_buba {
position: absolute;
left: 245px;
top: 245px;
z-index: 4;
}
.tuz_bubna {
position: absolute;
left: 260px;
top: 260px;
z-index: 5;
}
Ну а в html коде, просто присваиваете рисункам соответствующие стили, например:
<img src="10buba. gif" class="10_buba"> и так далее...
Если хорошенько разобраться с этим простым методом, можно создавать довольно интересные вещи. Например, размещать текст над изображением, или наоборот, создавать красивые заголовки, например с эффектом тени, и многое другое...
