2017-10-25
1571
CSS (Cascading Style Sheets) - Каскадные таблицы стилей - это свод стилевых описаний, тех или иных HTML тегов (далее элементов HTML), который может быть применён как к отдельному тегу - элементу, так и одновременно ко всем идентичным элементам на всех страницах сайта. CSS по сути своего рода дополнение к HTML, которое значительно расширяет его возможности.
Чтобы внедрить CSS в документ HTML, то есть связать стилевое описание элемента непосредственно с самим элементом, каким либо HTML тегом, можно тремя способами:
1. Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе, который нуждается в отдельном стилевом описании.
2. Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).
3. Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.
|
|
|
Практически каждый HTML тег имеет атрибут style, который говорит о том, что к этому тегу применяется некое стилевое описание:
<p style=""> это параграф с индивидуальным стилем </p>
Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента <p>
Например:
<p style="color: #ff0000; font-size:12px"> это параграф с индивидуальным стилем</p>
В данном случае мы указали, что этот параграф должен отображаться красным цветом и иметь размер шрифта в 12 пикселей.
По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента.
Для того, что бы описать необходимые элементы одновременно на всей странице в заголовок HTML документа внедряют тег <style></style> в котором и происходит описание нужных нам элементов.
Теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в "голову" документа. Мы облегчили себе работу, будь на странице сотня параграфов и несколько заголовков, да и сам документ стал меньше весить за счет "удаления" всех повторяющихся стилевых описаний для каждого отдельно взятого элемента.
Тег <style> принято внедрять в заголовок HTML документа между тегами <head></head>.
Атрибут тега <style> type - сообщает браузеру, какой синтаксис использовать для правильной интерпретации стилей. Для правильной интерпретации браузерами CSS значение type должно равняться text/css.
|
|
|
Внутри тега <style></style> идет непосредственное объявление стилей тех или иных HTML элементов.
Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.
Главное достоинство CSS - возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.
Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:
body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h1 {color: #0000ff; font-size:18px}
h2 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}
Далее сохраняем этот небольшой файл с расширением *.css (обычно файл со стилями называют style.css).
Нужно заставить страницы нашего сайта черпать информацию с этого файла.
Делается это с помощью тега <link> (связь). Тег <link> многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег <link> является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как <link> несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами <head> </head> и не выводится браузерами на экран.
Тег <link> имеет атрибуты:
href - Путь к файлу.
rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.
shortcut icon - Определяет, что подключаемый файл является иконкой.
stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
application/rss+xml - Файл в формате XML для описания ленты новостей.
type - MIME тип данных подключаемого файла.
Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:
<link rel="stylesheet" href="mystyle.css" type="text/css">
Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"
Теперь вставляем эту строчку в заголовки страниц нашего сайта и получаем результат.
Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
Используйте тег <style> со стилевым описанием, в том случае, если страница должна иметь индивидуальный дизайн в корни отличный от других страниц сайта.
В большинстве случаев разумно выносить каскадную таблицу стилей в отдельный css файл.
В CSS свойство text-align выравнивает текстовое содержание относительно элемента родителя (например, блока div) или же окна браузера.
text-align (так же как и htmlловский атрибут align) имеет следующие значения:
left - Выровнять текст по левому краю элемента (по умолчанию).
right - Выровнять текст по правому краю.
center - Выровнять текст по центру.
justify - Выровнять текст по обоим краям.
Чтобы выровнять текст параграфа по центру следует писать так:
<p style="text-align: center">текст по центру </p>
- это в этом случае если с помощью атрибута style, внедряем CSS непосредственно в HTML тег.
А вот в примере ниже используется тег <style> в заголовке документа:
<!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 { text-align: center }
p { text-align: justify }
</style>
</head>
<body>
<h1>Всё о слонах</h1>
<p>Слон - самое крупное млекопитающее на нашей планете! Самый большой слон из когда-либо живущих на Земле был зарегистрирован в Анголе в 1956 году. Этот самец весил около 12 тон, а в высоту достигал 4,2 метра, что на метр выше среднего Африканского слона.</p>
<p>Слоны являются королевским символом Азиатской культуры и известны своей отличной памятью и высоким интеллектом. Аристотель однажды сказал, что слон - "животное, которое превосходит всех других в остроумии и интеллекте".</p>
</body>
</html>
|
|
|
Свойство text-decoration позволяет декорировать текст, присвоив ему одно или несколько значений из ниже представленных вариантов оформления текста:
blink - Текст будет мигать.
line-through - Делает текст перечеркнутым.
overline - Надчёркивание текста.
underline - Подчеркивание текста.
none - Текст без оформления.
Пишется так:
<a href="index.html" style="text-decoration:none">Ссылка без подчёркивания</a>
Обратите внимание на внешний файл CSS в нем мы "декорировали" ссылку элемент <a>, причем делали это два раза первый раз a {text-decoration: underline} сделали её подчёркнутой, хотя можно было этого и не делать, так как тег <a> подчёркнут по умолчанию, а второй раз использовали так называемый псевдокласс hover и запретили подчеркивание a:hover {text-decoration:none}
Данный псевдокласс указывает на то, что применять к нему стилевое описание стоит лишь в том случае если пользователь навел курсор на этот элемент. Так если в примере навести курсор на одну из ссылок в меню то подчеркивание исчезнет, что создаёт определенный динамический эффект.. меню становиться "живым".
Свойство text-indent - задаёт отступ первой строки в текстовом блоке с левой стороны, проще говоря делает "красную строку".
Расстояние от левого края окна браузера или же элемента родителя (блока в который помещен блок с текстом) может быть заданно в процентах от ширины окна браузера или же единицах измерения принятых в CSS.
Свойство text-transform трансформирует символы в указанном текстовом блоке, делая их заглавными или прописными по одному из правил в зависимости от присужденного значения данному свойству.
Значения:
none - Текст отображается без каких-либо изменений.(по умолчанию)
capitalize - Каждое слово в тексте отображается с заглавного символа.
lowercase - Все символы преобразуются в нижний регистр.
|
|
|
uppercase - Все символы преобразуются в верхний регистр.
Вертикальное выравнивание текста в строке устанавливает свойство vertical-align
Возможные значения свойства vertical-align:
baseline - Выравнивает базовую линию элемента по базовой линии родителя.
bottom - Выравнивает элемент по нижней части строки.
middle - Выравнивает средину элемента по базовой линии родителя и прибавляет половину высоты родительского элемента.
sub - Нижний индекс (размер шрифта не меняется).
super - Верхний индекс (размер шрифта не меняется).
text-bottom - Нижняя граница элемента выравнивается по нижнему краю строки.
text-top - Верхняя граница элемента выравнивается по верхнему краю строки.
top - Выравнивает элемент по верхней части строки.
Базовая линия - это линия, на которой располагаются "сидят" символы в текстовой строке,
Так же вертикальное выравнивание элемента относительно строки может выражаться в процентах, пикселях или любых других принятых в CSS единицах измерения, причем эти единицы могут принимать как положительные, так и отрицательные значения.
Набранный текст, в каком либо текстовом редакторе браузерами по умолчанию выводится на экран в виде сплошного текста, где переносы строк расставляются автоматически, а так же убираются лишние (более одного) пробелы между символами.
Свойство white-space имитирует работу тега <pre>, определяя показывать или нет пробелы между символов, если таковых больше чем один, а так же разрешает или запрещает перенос строки.
Может иметь следующие значения:
normal - текст выводится как обычно (лишние пробелы убираются), переносы строк определяются автоматически. (по умолчанию)
nowrap - запрещает автоматический перенос строки.
pre - показывает текст в том виде в котором он был набран. пробелы и переносы строки не удаляются.
При использовании nowrap текст в нужном месте можно переносить на следующую строку используя тег <br>
Свойство word-spacing задаёт расстояние между словами (группами символов не разделенными пробелом) в строке:
normal - Нормальное расстояние. (по умолчанию)
px - Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.
Свойство letter-spacing определяет расстояние между символами в тексте и так же как и может word-spacing быть задано следующими значениями:
normal - Нормальное расстояние. (по умолчанию)
px - Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.
Интерлиньяж - это расстояние между строками текста.
Расстояние между строками текста можно задать используя свойство line-height, сделать это можно следующими способами:
normal - Норма (по умолчанию).
% - Проценты. за сто процентов берется высота шрифта
0.5 - Множитель. Может быть использовано любое число больше ноля. Так, например множитель 0.5 будет равняться половинному межстрочному расстоянию, а 2 - двойному.
px - Пиксели и любые другие единицы измерения, принятые в CSS.
Свойство font-style, в зависимости от выбранного значения, определяет стиль шрифта.
Шрифт может иметь следующие стили:
normal - обычный (по умолчанию)
italic - курсив
oblique - наклонный
Курсив - это своего рода шрифт взятый из библиотеки шрифтов, а наклонный текст - это результат работы алгоритма, где каждый символ слегка наклоняется в правую сторону.
Весьма интересное свойство шрифта font-variant позволяет делать строчные буквы заглавными и уменьшенными:
normal - нормальный (по умолчанию)
small-caps - все буквы заглавные и уменьшенные
Свойство CSS font-size - определяет размер шрифта.
Размер шрифта может быть задан в процентах или пикселях и любых других допустимых единицах измерения CSS, а так же абсолютным или относительным значением.
значения абсолютного размера шрифта:
xx-small - очень очень маленький
x-small - очень маленький
small - маленький
medium - средний
large - большой
x-large - очень большой
xx-large - очень очень большой
значения относительного размера шрифта:
larger - больше чем размер шрифта родительского элемента
smaller - меньше чем размер шрифта родительского элемента
Свойство font-weight - определяет жирность шрифта. Насыщенность шрифта может быть задана относительно шрифта элемента родителя с помощью следующих значений:
normal - обычный шрифт
bold - полужирный шрифт
bolder - жирный шрифт
lighter - тонкий шрифт
А также выражается в условном числовом значении от 100 до 900 с шагом 100 (100, 200, 300... 900) где значение 100 тонкий шрифт, а 900 - сверх жирный.
Атрибут CSS font-family - указывает одно, два или три имени шрифта из библиотеки шрифтов.
Возможность указывать до трёх имен шрифтов через запятую используется разработчиками во избежание возможных проблем связанных с отсутствием, по тем или иным причинам, указанных имен в библиотеке шрифтов на компьютере пользователя.
Так например запись в стилевом описании P {font-family: Times New Roman, Arial, Verdana;} - будет указывать браузеру пользователя, что данный параграф следует писать с помощью шрифта Times New Roman, а если его по каким то причинам не окажется в его библиотеке шрифтов то следует использовать шрифт Arial, и уж если и его нет, тогда писать шрифтом Verdana.
Если же браузер не найдёт в библиотеке шрифтов пользователя ни одного шрифта из указанных то он будет использовать тот шрифт который указан в его настройках "по умолчанию"
Однако также можно указать браузеру не только какой то конкретный шрифт, но и обозначить предпочтительное семейство шрифтов из перечисленных ниже возможных
serif - шрифты с засечками
sans-serif - рубленые шрифты
cursive - курсивные шрифты
fantasy - декоративные шрифты
monospace - моношириные шрифты
Например, если в файле CSS написать P {font-family: Times New Roman, sans-serif;} то это будет значить что если вдруг не окажится шрифта с именем Times New Roman, то следует использовать любой (или определённый в настройках браузера) доступный шрифт из семейства sans-serif - рубленых шрифтов.
Все свойства CSS предназначенные для работы со шрифтом начинаются с английского слова font (собственно шрифт).. font-family, font-size и т.д..
Все эти свойства являются "дочерними" базового атрибута CSS font.
font - (шрифт), являясь базовым атрибутом, может определять одновременно сразу несколько параметров шрифта принимая те или иные значения от следующих атрибутов:
Font-style
Font-variant
Font-weight
Font-size
Font-family
Для более детального ознакомления с возможными параметрами смотрите каждый атрибут отдельно.
Предположим нам необходимо написать стилевое описание шрифта для тега <span> и по нашей задумке шрифт для данного тега должен быть: курсивом, жирным, иметь размер 20 пикселей и использовать шрифт Arial
Все это можно осуществить, написав следующие:
span{
font-style: italic;
font-weight: bolder;
font-size: 20px;
font-family: Arial
}
А можно обойтись всего одной строчкой используя базовый атрибут font.
Вот так:
span{font: italic bold 20px Arial}
Мы просто перечислили нужные нам параметры "марки" font. Так писать гораздо проще, к тому же код становится более компактным и лёгким для чтения как браузером, так и человеком.
Цвет в CSS может быть задан следующими методами:
#ff0000 - шестнадцатеричное значение цвета RGB.
red - именное значение цвета.
RGB(255,0,0) - значение цвета RGB.
Свойство background-color - определяет цвет фона элемента.
Цвет фона может иметь следующие значения:
#ff0000 - шестнадцатеричное значение цвета RGB.
red - именное значение цвета.
RGB(255,0,0) - значение цвета RGB.
transparent - прозрачный фон. (по умолчанию)
Для любого элемента можно присвоить фоновое изображение с помощью CSS свойства: background-image.
Возможные значения background-image:
url - путь к файлу с изображением.
none - изображение отсутствует. (по умолчанию)
Если рисунок не заполняет собой весь фон элемента, то он выкладывается "плиткой". Свойство background-repeat - регулирует повторение фонового изображения.
Возможные значения:
no-repeat - запретить повторение, показать только одно изображение.
repeat - повторять изображение (по умолчанию).
repeat-x - повторять только по горизонтали.
repeat-y - повторять только по вертикали.
При помощи CSS свойства background-position - можно управлять позицией фонового изображения в элементах где оно задано с помощью background-image.
Позицию фонового изображения, а точнее его верхнего левого угла, можно задать в процентах, пикселях, а также любых других единицах измерения CSS, с помощью двух значений, где первое значение будет являться отступом от левой границы элемента, а второе значение отступом от верхней границы элемента.
Например, запись: background-position: 200px 100px; будет обозначать, что фоновое изображение будет смещено по горизонтали на 200 пикселей от левой границы элемента и по вертикали на 100 пикселей от верхней границы элемента.
Так же можно использовать следующие значения:
по горизонтали:
left - расположить слева.
center - расположить по центру.
right - расположить справа.
по вертикали:
top - расположить сверху.
center - расположить по центру.
bottom - расположить снизу.
Являясь базовым свойством, background может одновременно принимать те или иные значения от его дочерних свойств:
