Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

Характеристика АТП и сварочно-жестяницкого участка: Транспорт в настоящее время является одной из важнейших отраслей народного хозяйства...

Интересное:

Принципы управления денежными потоками: одним из методов контроля за состоянием денежной наличности является...

Инженерная защита территорий, зданий и сооружений от опасных геологических процессов: Изучение оползневых явлений, оценка устойчивости склонов и проектирование противооползневых сооружений — актуальнейшие задачи, стоящие перед отечественными...

Национальное богатство страны и его составляющие: для оценки элементов национального богатства используются...

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

Подключение внешних стилей CSS

2019-12-19

155

0.00 из 5.00 0 оценок

Заказать работу

Стр 1 из 2Следующая ⇒

Послание № 3

Каталог сайта

Любой сайт имеет собственное хранилище. Это может быть сервер или локальный компьютер, неважно, главное то, что каждый сайт разбит на множество различных файлов, и все эти файлы хранятся в различных папках. Делают это конечно для удобного хранения и поиска исходных файлов сайта + это считается хорошим тоном среди программистов.

Пути к файлам

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

Для начала запомним, что пути делятся на 2 вида:

· Абсолютный путь

· Относительный путь

Абсолютный путь

Когда ссылка представляет из себя полный URL файла или страницы, это и есть абсолютный путь. В основном абсолютный путь используется, тогда, когда нужно сослаться на другой сайт. Иными словами, если Вы хотите отправить посетителя на другой сайт, то нужно использовать абсолютный путь, например: url(http://ya.ru)

Относительный путь

Относительные пути используются гораздо чаще чем абсолютные пути. В основном относительный путь указывается тогда, когда Вам нужно отправить посетителя на другую страницу Вашего сайта, или вставить объект (изображение) на одной из страниц, например:

url(../images/anyphoto.png) — относительный путь от файла;

url(/images/anyphoto.png) — относительный путь от корневого каталога.

Это интерпретируется следующим образом: / — означает подняться к корневому каталогу сайта, images/ — перейти к папке с изображениями, anyphoto.png — указывает на файла изображения.

CSS

Подключение внешних стилей CSS

Чаще всего стили подключают из внешнего файла с расширением .css. Для этого в теге <head> используется тег <link>. Например:

<head>

</head>

В атрибуте href задают адрес файла, а атрибут rel="stylesheet" говорит браузеру, что мы подключаем стили для этой страницы, а не что-то другое.

Содержимое файла CSS ничем не отличается от содержимого тега <style>, с которым мы уже знакомы.

Именно такой способ стилизации мы будем использовать с вами в наших дальнейших проектах.

Новые селекторы (проводники)

Контекстные селекторы

Селектор может состоять из нескольких частей, разделённых пробелом, например:

p strong {... }

ul.hit {... }

.footer.menu a {... }

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

Например, селектор .menu a сработает для ссылки a только в том случае, если она расположена внутри элемента с классом .menu.

Читать их проще всего справа налево:

p strong {... } /* выбрать все теги strong внутри тегов p */

.menu a {... } /* выбрать все ссылки <a> внутри элементов с классом.menu */

Таким образом, можно задавать элементам различные стили в зависимости от их контекста. Если ссылка расположена внутри меню, сделать её крупнее, а если внутри основного текста, то задать ей нужный цвет.

Дочерние селекторы

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

<ul>

</ul>

По отношению к <ul> <li> являются дочерними элементами и потомками, а <span> — потомки, но не дочерние элементы.

Контекстные селекторы влияют на всех потомков, что не всегда удобно. Иногда необходимо задать стили только для дочерних элементов. Особенно это полезно при работе с многоуровневыми списками.

Для этого существует дочерний селектор, в котором используется символ >. Например: ul > li.

CSS селекторы

.menu a Контекстный селектор. Такие селекторы называют контекстными или вложенными. Их используют для того, чтобы применить стили к элементу, только если он вложен в нужный элемент. ul > li Дочерний селектор. Потомком называются любые элементы, расположенные внутри родительского элемента. А дочерними элементами называются ближайшие потомки. По отношению к <ul> <li> являются дочерними. Контекстные селекторы влияют на всех потомков, что не всегда удобно. Иногда необходимо задать стили только для дочерних элементов. Для этого существует дочерний селектор, в котором используется символ >. Например: ul > li.

Каскадирование

Аббревиатура CSS расшифровывается как Cascading Style Sheets (каскадные таблицы стилей), где одним из ключевых слов выступает «каскад». Под каскадом в данном случае понимается одновременное применение разных стилевых правил к элементам документа — с помощью подключения нескольких стилевых файлов, наследования свойств и других методов. Чтобы в подобной ситуации браузер понимал, какое в итоге правило применять к элементу, и не возникало конфликтов в поведении разных браузеров, введены некоторые приоритеты.

Самым низким приоритетом обладает стиль браузера — оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей.

Вес селекторов

Название	Вес
селектор тега	1
селектор класса или селектор атрибута	10
селектор ID	100
inline-стиль	1000
!important;	10000

Пример веса

Селектор, атрибут или стиль	!important	style =” ”	id	class	Тег	Общий вес
p	0	0	0	0	1	1
.your_class	0	0	0	1	0	10
p.your_class	0	0	0	1	1	11
#your_id	0	0	1	0	0	100
#your_id p	0	0	1	0	1	101
#your_id.your_class	0	0	1	1	0	110
p a	0	0	0	0	2	2
#your_id #my_id.your_class p a	0	0	2	1	2	212
<p style=”color:red”> … </p>	0	1	0	0	0	1000
p { color:red!important; }	1	0	0	0	0	10000

Наследование

Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.

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

Наследование позволяет сократить размер таблицы стилей, но если стилей много, то отследить какой родительский элемент установил некоторое свойство, становится сложнее.

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

Стандартные стили браузеров

Каждый браузер имеет по умолчанию некий набор базовых стилей, которые он применяет к странице по умолчанию. И если мы создадим страницу на «голом» html без оформления и стилей, браузер все равно отобразит тег <h1> </h1> большим размером и жирным начертанием, <h2></h2> чуть меньшим размером и так далее. Браузер выделит текст в теге <i> курсивом, <u> сделает подчеркнутым, а <b> — жирным.

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

Лет 10 назад эти отличия были прямо кардинальными, и очень бросались в глаза. Сейчас они минимальны, но все же есть.

Кроссбраузерность

Чтобы страница одинаково хорошо отображалась в разных браузерах, необходимо работать над ее кроссбраузерностью. В этом нам помогает тестирование страницы и отладка html или css разметки.

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

Чтобы убрать различия браузеров, и сделать по умолчанию отображение страницы во всех браузерах одинаковым — используют специальный .css файл: reset.css или normalize.css

Reset. css

Первым появился reset.css. Этот css файл содержит в себе перечисление всех возможных html тегов, и сбрасывает их значение на ноль. Он убирает все возможные отступы, делает шрифт одинаковым во всех тегах, сбрасывая все стили текста. Так что все заголовки и абзацы отображаются простым текстом, одним размером и без отступов. В результате получаем сброс стилей по умолчанию во всех браузерах.

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

Недостатки Reset.css

Сбросы CSS отменяют стили браузеров и возвращают множество элементов к их «обесстиленному» состоянию, некоему ровному основанию, на котором можно безопасно строить. Однако затем нужно обратно назначить стили большей части стандартных элементов.

Normalize.css

Normalize.css является альтернативой CSS Reset.

Проект является продуктом сотен часов глубокого исследования различий между изначальными стилями браузера. Это исследование провели Николас Галахер и Джонатан Нил.

Цели normalize.css:

· сохранять полезные настройки браузера, а не стирать их;

· нормализовать стили для широкого круга HTML-элементов;

· корректировать ошибки и основные несоответствия браузера;

· совершенствовать юзабилити незаметными улучшениями.

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

Несмотря на то, что проект основан на принципе нормализации, он использует стандартные настройки там, где они предпочтительны.

Послание № 3

Каталог сайта

Пути к файлам

Для начала запомним, что пути делятся на 2 вида:

· Абсолютный путь

· Относительный путь

Абсолютный путь

Относительный путь

url(../images/anyphoto.png) — относительный путь от файла;

url(/images/anyphoto.png) — относительный путь от корневого каталога.

CSS

Подключение внешних стилей CSS

<head>

</head>

Содержимое файла CSS ничем не отличается от содержимого тега <style>, с которым мы уже знакомы.

Именно такой способ стилизации мы будем использовать с вами в наших дальнейших проектах.

12 Следующая ⇒

Поделиться с друзьями:

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

История создания датчика движения: Первый прибор для обнаружения движения был изобретен немецким физиком Генрихом Герцем...

Индивидуальные очистные сооружения: К классу индивидуальных очистных сооружений относят сооружения, пропускная способность которых...

Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов (88‰)...