Добавление css к веб-странице

Добавление CSS к веб-странице

Первый метод (external style sheets — внешние таблицы стилей). Если вы желаете применять обрисованные правила стилей для многих страниц собственного сайта, то их необходимо сохранять в отдельном файле стилей. Для этого создается простой текстовый файл, посредством текстового редактора, с расширением .css и в него вписываются при помощи CSS обрисованные правила стилей. После этого чтобы увязать web-файл и страницу стилей, используем метатег в теге для того чтобы вида:

либо

@import URL;,

где атрибуты REL и TYPE показывают браузеру, что в web-документе будут употребляться каскадные таблицы стилей CSS. Ну а атрибут HREF это URL(Uniform Resource Locator) файла стилей. Тут URL — это или безотносительный адрес файла стилей, если он размещен на втором сервере, или относительный адрес, в случае, если файл размещен на том же веб-сервере. Параметр MEDIA определяет тип совокупности отображения информации (монитор, принтер либо другие), @import — показывает, что стили должны импортироваться с файла, по указанному адресу.

Итак,

— файл стилей находится на веб-сервере, его возможно использовать для множества веб-страниц, у которых имеется на него ссылка;
— при загрузке на компьютер пользователя, происходит его кэширование, что не воздействует на время загрузки вторых страниц сайта;
— при необходимости трансформации стиля какого-либо элемента веб-страниц, трансформации вносятся лишь в одном месте — в файле стилей;
— соблюдена схема разделения описания оформления данных страниц от самих данных (в самом веб-документе находится лишь информация и ни слова о ее оформлении).

Второй метод (document style sheets — таблицы стилей документа) — включение описаний правил стилей конкретно в код web-страницы, в тегов …. Для этого используется тег

….

Параметр TYPE необходимый и показывает браузеру об применении каскадных таблиц стилей CSS. Ниже приведем пример, определяющий правило стиля для заголовков первого уровняю H1. Тип шрифта — Verdana либо второй из указанного перечня, на случай, в случае, если у пользователя таковой не установлен в ОС; размер шрифта — 18 пикселей; выравнивается текст заголовка по центру; цвет заголовка — коричневый.

H1 { Font-Family: Verdana, ARIAL, HELVETICA, SANS-SERIF; Font-size: 18px; Text-align: center; color: #996666;}

Для данного метода:

— заданные правила стилей используются лишь к веб-странице, в которую они включены;
— количество страницы возрастает, что увеличивает время ее загрузки;
— для трансформации стиля, правки вносятся конкретно в html-код страницы;
— в коде веб-документа размещается и описание оформления данных.

Третий метод (inline styles — стили, вставляемые в строчок) — стиль задается конкретному элементу в его теге. Данный метод используется, в то время, когда необходимо задать соответствующий стиль какому-то одному элементу в веб-документе. Ниже взглянуть на тег

Пример задания стиля в теге, определяющем абзац

Тут для абзаца, значением параметра style, задан отступ слева от края окна на 20 пикселей, выяснен шрифт — Arial, выделение — полужирным, размер шрифта — 16 пикселей, цвет — темно-светло синий. К вторым элементам веб-страницы данный стиль никакого отношения не имеет. А вот как это будет смотреться в окне вашего браузера:

Пример задания стиля в теге, определяющем абзац.

В этом методе:

— как и в прошлом, количество страницы возрастает, что ведет к повышению времени ее загрузки;
— для трансформации стиля, правки необходимо вносить конкретно в конкретный тег страницы;
— в тегах элементов веб-документа размещается описание стилей.

Селекторы

Посредством селекторов создаются CSS-правила для форматирования элементов веб-страницы. В качестве селекторов употребляются не только сами их классы и элементы и идентификаторы, и псевдоклассы и псевдоэлементы.

Псевдоклассы разрешают додавать особенные классы к элементам, выбирая объекты, которых нет в структуре веб-страницы, или каковые нельзя выбрать посредством простых селекторов, к примеру, первая буква либо первая строчок одного абзаца.

Псевдоэлементы выбирают элементы, каковые не являются элементами структуры html-страницы.

	Описание, пример
Универсальный	Универсальный селектор соответствует любому элементу, к примеру, следующая запись обнулит отступы для всех элементов сайта: * {margin: 0;}
Элемента	Селекторы элементов употребляются для определения стилей элементов для всех страниц сайта, к примеру, стиль заголовков h1 либо неспециализированный стиль абзацев: h1 {font-family: Lobster, cursive;} p {letter-spacing: 0.1em;}
Класса	Селекторы класса употребляются для определения стилей для нескольких элементов одного типа, размещенных в различных частях либо на различных страницах сайта. Для заголовка класса headline нужно добавить атрибут class с соответствующим значением в открывающий тег . Потом нужно задать стиль для указанного класса. Этот стиль оформления возможно применить и для других элементов. Код HTML: Инструкция пользования ПК Код CSS: .headline { text-transform: uppercase; color: lightblue;}
Идентификатора	Селекторы идентификатора употребляются для присваивания стиляодному конкретному элементу. Идентификатор id элемента возможно применять в документе лишь один раз, поскольку он выделяет неповторимый элемент. #sidebar { text-transform: uppercase; color: lightblue;} К потомкам элемента относятся его дочерние элементы. Селекторы потомков разрешают стилизовать все положенные элементы, к примеру, возможно отформатировать внешний вид элементов маркированного перечня: ul li {text-transform: uppercase;} – выберет все элементы li, являющиеся потомками всех элементов ul. В случае, если необходимо отформатировать потомки определенного элемента, то возможно задать ему стилевой класс: p.first a {color: green;} – свидетельствует, что необходимо применить этот стиль ко всем ссылкам, потомкам абзаца, относящегося к классу с именем first;
Потомка	p .first a {color: green;} -если добавить пробел, то будут выбраны ссылки, расположенные в любого тега класса.first, что есть потомком элемента ; .first a {color: green;} – этот стиль используется к любой ссылке, расположенной в вторых тегов, обозначенных классом .first.
Дочерний	Дочерний тег есть прямым потомком содержащего его тега, т.е. отношения “родители-дети” существуют между теми элементами и элементами, каковые находятся конкретно в них. У одного элемента возможно пара дочерних элементов, а родительский элемент возможно у каждого элемента лишь один. p strong – выбирает все элементы strong, являющиеся дочерними по отношению к элементу p.
Сестринский	Сестринские отношения появляются между элементами, имеющими неспециализированного родителя. Селекторы сестринских элементов разрешают выбрать теги из группы элементов одного уровня. h1 + p– выберет все первые абзацы, идущие конкретно за любым тегом , не затрагивая остальные абзацы. h1 ~ p – выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие по окончании него.
Атрибута	Селекторы атрибутов разрешают форматировать элементы на базе выборки любых содержащихся в них атрибутов либо значений атрибутов, варианты: [атрибут] – выбирает все элементы, для которых задан указанный атрибут. img[alt] – выбирает все картины, которые содержат атрибут alt. img[title=flower] – выбирает все картины, наименование которых содержит слово flower. a[href^=http://] – выбирает все ссылки, начинающиеся на http://. img[src$=.png] – выбирает все картины, наименование которых заканчивается на .png. a[href*=ru] – выбирает все ссылки, наименование которых содержит слово ru. input[type=text]– выбирает лишь текстовые поля формы. article[class~=feature] – выбирает статьи по частичному значению атрибута, т.е. статьи, наименование класса которых содержит данное слово. article[id\|=feature] – выбирает элемент, атрибут которого эквивалентен feature либо начинается на feature.
Псевдокласс	Псевдоклассы – это классы, практически не прикрепленные к тегам html-кода. Они вызывают CSS-правила при совершении того либо иного события либо подчиняющиеся тому либо иному правилу: a:link – ссылается на не посещенную ссылку. a:visited – ссылается на уже посещенную ссылку. a:hover – ссылается на любой элемент, по которому выполняют курсором мыши. a:focus – ссылается на любой элемент, над которым находится курсор мыши. a:active – ссылается на элемент, что был активизирован пользователем. input:valid – выберет поля формы, содержимое которых прошло диагностику в браузере на соответствие указанному типу. input:invalid – выберет поля формы, содержимое которых не соответствует указанному типу. input:enabled – выберет все дешёвые (активные) поля форм. input:disabled – выберет заблокированные поля форм, т.е., находящиеся в неактивном состоянии. input:in-range – выберет поля формы, значения которых находятся в заданном диапазоне. input:out-of-range – выберет поля формы, значения которых не входят в установленный диапазон. input:not([type=submit]) – выберет все поля формы, не считая полей отправки данных. p:lang(en-US) – выберет все абзацы на английском. :not(селектор) – выберет элементы, каковые не содержат указанный селектор, к примеру, класс, идентификатор либо селектор элемента. :target – выбирает элемент с знаком #, на что ссылаются в документе. :checked – выбирает выделенные (выбранные пользователем) элементы.
Структурные псевдоклассы типа	Разрешают указать на конкретный тип дочернего тега: :nth-of-type() – выбирает элементы по аналогии с :nth-child(), наряду с этим берет во внимание лишь тип элемента. :first-of-type – разрешает выбрать первый дочерний элемент. :last-of-type – выбирает последний тег конкретного типа. :nth-last-of-type() – выбирает элемент заданного типа в перечне элементов в соответствии с указанным расположением, начиная с конца. :only-of-type – выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.
Структурные псевдоклассы	Структурные псевдоклассы форматируют дочерние элементы в соответствии с указанным параметром в скобке, варианты: :nth-child(odd) – выбирает нечетные дочерние элементы. :nth-child(even) – выбирает четные дочерние элементы. :nth-child(3n) – выбирает каждый третий элемент среди дочерних. :nth-child(3n+2) – выбирает каждый третий элемент, начиная со второго дочернего элемента (+2). :nth-child(n+2) – выбирает все элементы, начиная со второго. :nth-child(3) – выбирает третий дочерний элемент. :nth-last-child() – в перечне дочерних элементов выбирает элемент с указанным расположением, подобно с :nth-child(), но начиная с последнего, в обратную сторону. :first-child – разрешает оформить лишь самый первый дочерний элемент тега. :last-child – разрешает форматировать последний дочерний элемент тега. :only-child – выбирает элемент, являющийся единственным дочерним элементом. :empty – выбирает элементы, у которых нет дочерних элементов. :root – выбирает элемент, являющийся корневым в документе (элемент html).
Псевдоэлементы	Псевдоэлементы употребляются для добавления содержимого, которое генерируется посредством свойства content, и для трансформации внешнего вида части элемента: :first-letter – выбирает первую букву каждого абзаца, используется лишь к блочным элементам. :first-line – выбирает первую строчок текста элемента, используется лишь к блочным элементам. :before– вставляет генерируемое содержимое перед элементом. :after – додаёт генерируемое содержимое по окончании элемента.

Комбинация селекторов

Дабы добиться более четкого выбора элементов для форматирования, возможно не ограничиваться заданием одного типа селектора, а применять комбинации селекторов, к примеру:
a[href][title] – выберет все ссылки, для которых заданы атрибуты href иtitle;
img[alt*=css]:nth-of-type(even) – выберет все четные картины, другой текст которых содержит слово css.

Группировка селекторов

Возможно применить одинаковый стиль к нескольким элементам. Для этого нужно в левой части объявления поместить через запятую необходимые селекторы, к примеру:

h1, h2, h3, h4 {color: tomato; background: white;}

Форматирование текста в CSS

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

Свойства, разрешающие форматировать текст в CSS:

Color– разрешает задает цвет элемента. В качестве параметра может выступать как шестнадцетиричное, так и буквенное значение цвета.

Direction – разрешает поменять направление текста. К сожалению, не во всех браузерах данный параметр будет отображаться верно.

ltr – слева направо

rtl – справа налево.

div.d1{direction: ltr;}

Letter – spacing – задает промежуток между знаками.

normal – простые промежутки

length– пользовательский промежуток.

div.c {letter – spacing: 7px;}

Text – align– задает выравнивание текста в элемента и может принимать значения:

Left – сглаживает текст слева

div.e1{text – align: left;}

Right – сглаживает текст справа

Center– сглаживает текст по центру

Justify – сглаживает текст по ширине

Text – decoration– оформление текста. Может принимать значения:

None – простой текст
Underline – выделенный снизу текст
Overline– выделенный сверху текст
Line – through – зачеркнутый текст
Blink– мигающий текст

Text – indent –задает отступ для первой строки текста.

Text – transform – руководит размером знаков и может принимать следующие значения:

None – простой текст
Capitalize– каждое слово начинается с большой буквы.
Uppercase – лишь громадные буквы
Lowercase– мелкие буквы

White – space –задает метод отображения пробелов и может принимать следующие значения:

normal – допускается лишь один пробел.
pre – вся структура документа, с неограниченным числом пробелов сохраняется.
nowrap – текст не будет переноситься , пока не встретит тег

Word – spacing – задает промежуток между словами.

Работа со шрифтами в CSS

Font – family – определяет перечень допустимых имен шрифтов для элемента. Использован будет первый, выявленный браузером шрифт.

h1 {font – family : Comic Sans MS, Times New Roman;}

Font – size –задает размер шрифта и может принимать значения:

xx – small – мельчайший
x – small – весьма мелкий
small– мелкий
medium – средний
large– большой
x – large – большой
xx – large – громаднейший
smaller – меньше, чем у порождающего элемента
larger – больше, чем у порождающего элемента
length– задает фиксированное значение шришта
% – размер шришта в % от размера шрифта порождающего элемента

Font – size – adjust – задает значение нюанса шрифта. Нюанс шрифта – отношение между размерами маленькой буквы x и размером тшрифта. Чем выше это значение, тем лучше шрифт будет читаться при уменьшении размера.

Font – stretch –разрешает задать промежуток между знаками в шрифта. Принимает значения:

normal– Задает масштаб сжатия либо расширения как простой
wider– Задает масштаб расширения как следующее расширенное значение
narrower – Задает масштаб сжатия как следующее сжатое значение
ultra – condenced – большой масштаб сжатия
extra – condenced – сильный масштаб сжатия
condenced – сжатие
semi – condenced – не сильный сжатие
semi – expanded – не сильный расширение
expanded– расширение
extra – expanded – сильный масштаб расширения
ultra – expanded – большой масштаб расширения

div.k1 {font – stretch : wider;}

Font – style – задает стиль шрифта.

normal – обычный шрифт.

italic – курсив.

oblique– наклонный шрифт.

Font – variant –употребляется для шрифта – капители (все мелкие знаки преобразуются в громадные).

normal – простой шрифт

small – caps – шрифт – капиель.

Font – weight – разрешает задать толщину знаков:

normal – простые знаки
bold – жирные знаки
bolder– более жирные знаки
lighter – более узкие знаки

Фон в CSS

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

Background–attachment – определяет привязку фона на странице. Значение scroll – привязывает фон к полосе прокрутки (при прокрутке фон будет оставаться на месте) и значение fixed – привязывает фон к виртуальной оси координат (при прокрутке фон будет прокручиваться совместно со всей страницей).

Background–color – заполняет элемент цветом. Значение color – задает цвет элемента, а значение transparent – задает прозрачный фон.

Background–image – разрешает применять изображение в качестве фона.

none – фоновое изображение не употребляется

url – разрешает задать путь к изображению

Background–position – задает начальное положение фонового изображения и может принимать следующие значения:

top – left – верхний левый угол экрана

top – center – верхний центральный

top – right – верхний правый

center left – центральный левый

center center – центр экрана

center right – центральный правый

bottom left – нижний левый

bottom center – нижний центральный

bottom right – нижний правый угол экрана

%(x y) – задание положения в%(верхний левый 0% 0%)

pixels(x y) – задание положения в пикселях (верхний левый 0 0)

При задании координат при помощи главных слов, то в случае, если задано лишь одно слово (к примеру top), то второе принимается равным center. При задании координат при помощи процентов, в случае, если задано лишь одно значение, то второе принимается равным 50%. При указании положения в процентах либо координатно, возможно смешивать значения, к примеру (30% 500).

Background – repeat – задает способ тиражирования изображения. Может принимать следующие значения:

repeat – тиражирование в обоих направлениях

no – repeat – изображение выводится лишь один раз

repeat – x – тиражирование по горизонтали

repeat – y – тиражирование по вертикали.

Перечни в CSS

List–style–image – разрешает установить изображение в качестве маркера для перечней в CSS.

none– употребляется маркер по умолчанию

url– в качестве маркера употребляется изображение, url адрес которого нужно ввести в это поле, как в примере ниже:

List–style–position – определяет место размещения маркеров перечня.

inside – маркер находится в текста

outside– маркер находится слева от текста

List–style–type – задает разнообразные маркеры для перечней, каковые вы имеете возможность видеть ниже:

none– маркер не употребляется

disc – в качестве маркера употребляется закрашенный круг

circle– в качестве маркера употребляется закрашенный круг

square– закрашенный квадрат

decimal – простые числа

decimal – leading – zero – 01, 02, 03 b …..

lower – roman – i, ii, iii, iv, v …..

upper – roman – (I, II, III, IV, V …..

lower – alpha – a, b, c, d, e …..

upper – alpha – A, B, C, D, E …..

lower – greek – альфа, бета, гамма …..

lower – latin – a, b, c, d, e …..

upper – latin – A, B, C, D, E …..

hebrew – иудейские числа

armenian– армянские числа

georgian – an, ban, gan …..

cjk – ideographic — идеографические числа

hiragana – Маркер — a, i, u, e, o, ka, ki, …..

katakana– A, I, U, E, O, KA, KI ……

hiragana – iroha – i, ro, ha, ni, ho, he, в первых рядах …..

katakana – iroha – I, RO, HA, NI, HO, HE, TO …..

6. «@media» — Типы носителей в CSS

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

@media разрешает применять разные стили, для вывода на различных устройствах.

Атрибут media определяет под какие конкретно устройства оптимизирован файл. В большинстве случаев он употребляется с файлами таблиц стилей, для определения разных стилей под различные типы носителей.
В примере ниже будут употребляться разные стили при выводе документа на экран и при печати документа:

@media screen
{div.test {font – family: times,serif; font – size:8px}}
@media print
{div.test{
font – family: verdana,sans – serif; font – size:30px}}

Главные типы носителей вы имеете возможность видеть в перечне ниже:

Устройства

Значение	Описание
all	Подходит для всех устройств (значение по умолчанию)
aural	Синтезаторы речи
braille	Устройство обратной связи шрифта Брайля
handheld	Карманные устройства (мелкий экран, ограниченная пропускная свойство)
projection	Проекторы
print	Режим для печати страниц
screen	Компьютерные экраны
tty	Телетайпы и подобных средств массовой информации, посредством знаков фиксированного шага сетки
tv	Телевизионный тип устройства (низкое разрешение, ограниченная свойство прокрутки)

Значения устройств

Значение	Описание
width	Определяет ширину области целевой страницы. В значение возможно применять префиксы min- и max-. Пример: media=screen and (min-width:500px).
height	Определяет высоту области целевой страницы. В значение возможно применять префиксы min- и max-. Пример: media=screen and (max-height:700px).
device-width	Определяет ширину области отображения экрана/бумаги. В значение возможно применять префиксы min- и max-. Пример: media=screen and (device-width:500px).
device-height	Определяет высоту области отображения экрана/бумаги. В значение возможно применять префиксы min- и max-. Пример: media=screen and (device-height:500px).
orientation	Задает метод отображения. Вероятные значения: portrait либо landscape. Пример: media=all and (orientation: landscape).
aspect-ratio	Определяет соотношение высоты и ширины. В значение возможно применять префиксы min- и max-. Пример: media=screen and (aspect-ratio:16/9).
device-aspect-ratio	Задает ширину/высоту устройства по отношению к области отображения экрана/бумаги. В значение возможно применять префиксы min- и max-. Пример: media=screen and (aspect-ratio:16/9).
color	Показывает биты для цвета отображения. В значение возможно применять префиксы min- и max-. Пример: media=screen and (color:3).
color-index	Определяет количество цветов, для экрана целевого устройства. В значение возможно применять префиксы min- и max-. Пример: media=screen and (min-color-index:256).
monochrome	Показывает количество битов на пиксель для буфера монохромных кадров. В значение возможно применять префиксы min- и max-. Пример: media=screen and (monochrome:2).
resolution	Определяет плотность пикселей(dpi либо dpcm) для целевого экрана/бумаги. В значение возможно применять префиксы min- и max-. Пример: media=print and (resolution:300dpi).
scan	Определяет способ сканирования ТВ дисплея. Вероятные значения: progressive и interlace. Пример: media=tv and (scan:interlace).

Пример:

CSS Media

.warning {color:#ff0000}

h1.warning {text-decoration:underline}

p.warning {font-weight:bold}

.printDisplay {display:none}

.warning {color:#660000;}

h1.warning {text-decoration:underline; font-size:1in;}

p.warning {font-weight:bold; font-size:.5in;}

.screenDisplay {display:none}

WARNING

Don’t go there!

This is the print version.

This is the screen version.

Пример правила :

@media screen and (min-width: 600px) and (max-width: 900px) {

.class {

background: #333;

}

Работа с типами носителей (@media) в CSS разрешает сделать ваш сайт вправду кроссбраузерным и мультиплатформенным, разрешает упростить отображение сайта на мобильных устройствах и другое…

Псевдо–элемент: first–line.

Этот псевдо элемент разрешает добавить особый стиль для первой строки текста в элементе:

Before

Разрешает выполнить вставку любой раз перед возникновением указанного элемента.

After

Разрешает выполнить вставку любой раз по окончании появления указанного элемента

Пример

Наименование документа table, td, th { border: 1px solid black; border-collapse: collapse; } table { width: 70% } td { text-align: right; } th { height: 50px; } .test1 { vertical-align: top; } .test2 { vertical-align: bottom; }

ИмяФамилия

Гомер	Симпсон
Мардж	Симпсон

При просмотре громадных таблиц, содержащих довольно много строчков с громадным числом информации, не редкость тяжело отследить, какие конкретно эти относятся к конкретной строчку. Дабы оказать помощь пользователям сориентироваться, возможно применять два различных фоновых цвета поочередно. Для обрисованного результата «зебры» возможно применять селектор класса, додавая его к каждой второй строке таблицы:

Наименование документа table { width: 70%; border-collapse: collapse; } td, th { border: 1px solid #98bf21; padding: 3px 7px 2px 7px; } th { text-align: left; padding: 5px; background-color: #A7C942; color: #fff; } .alt td { background-color: #EAF2D3; }

ИмяФамилияПоложение

Гомер	Симпсон	папа
Мардж	Симпсон	мать
Барт	Симпсон	сын
Лиза	Симпсон	дочь

Додавать атрибут class к каждой второй строке достаточно изнурительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, разрешающий решить эту проблему другим методом. Сейчас результата чередования возможно достигнуть только средствами CSS, не прибегая к трансформации HTML-разметки документа. Посредством псевдо-класса :nth-child возможно выбрать все четные либо нечетные строчки таблицы, применяя одно из главных слов: even (четные) либо odd (нечетные):

tr:nth-child(odd) { background-color: #EAF2D3; }

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

Реализовать таковой эффект весьма легко, для этого необходимо добавить псевдо-класс :hover к селектору строчка таблицы и задать необходимый цвет фона:

tr:hover { background-color: #E0E0FF; }