Что такое html и css что такое html и

Popovses blog

Личный блог

Нужна помощь?

Я занимаюсь разработкой сайтов на WordPress. Решаю различные технические вопросы.

Ускорить блог, помочь с версткой, починить плагин?

Свежие новости

Следить за новыми статьями блога можно через:

Или получать их по почте:

Поиск по блогу

Категории

HTML/CSS

WordPress

Linux

Блоггинг

Инструменты

Разное

Что такое HTML/CSS и как это выучить?

Привет. Пора бы что-то по теме написать. Из заголовка понятно, о чем этот пост, но я бы хотел внести немного ясности.

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

А вот делиться интересными фишками, хитростями да и вообще полезными приемами, которые использую в работе, с удовольствием буду!

Ближе к делу

Возьму определения с Википедии:

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста»;) — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

Вроде бы и так понятно, что такое HTML и CSS, но все равно скажу своими словами.

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

CSS — облицовочный материал, который делает всю красоту.

Немного моей истории

То, что я сейчас напишу уже есть на странице Об авторе, но я все равно еще раз напишу и дополню:)

Первый свой сайт я создал в 2008 году. Работает он на системе Ucoz. Не помню точно как, но один мой одноклассник рассказал мне о Ucoz и о том, как легко там можно сделать свой сайт. Мне стало интересно. Не знаю почему, но было типа «прикольно» сделать свой сайт. Вот тогда я и узнал про HTML. Но именно узнал, а не научился:) Кажется, это был 9-й класс школы. Применяя базовые знания по фотошопу и Ucoz, я все же смог сделать сайт.

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

Второе в жизни упоминание о тэгах было на первом курсе по информатике. Да, по этому предмету было много абсурдных заданий и лучше бы мы изучали Автокад вместо MS Access (градостроители все же), но за задание сделать сайт из пары страниц HTML я все же благодарен. Поначалу очень плевался на такое, но мне понравилось, когда сел делать.

Взял конспект лекций и начал писать структуру страницы по тегам, что переписал с доски, но…Понял, что ничего того, что я придумал у меня не получается и начал читать в интернете подробнее о html (я тогда еще и не подозревал о css). В итоге моя работа была лучшей в группе, но увы этого почти никто не оценил, так как ставили оценки за наличие работы, а вот если бы был рейтинг по работам…

Ну да ладно, я все равно был доволен собой. Передо мной стала задача разместить элементы на странице так, как я хочу, а не так, как получалось по конспекту лекций. Вся проблема в том, что в HTML нету такой функциональности, благодаря которой можно разместить элемент с отступом в 20 пикселей от правого края окна браузера. И тогда я подумал….а что если я необходимый элемент помещу в таблицу, которую помещу в ячейку главной таблицы, грани которой не видно, но которая занимает всю страницу и задавая размеры ячейкам, я смогу поместить тот элемент с отступом в 20px от правого края??…Попробовал — получилось!

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

Что для этого нужно?

В октябре 2011 года я стал серьезно изучать все это дело, что плавно перетекло в основную деятельность моей жизни. Я хотел делать сайты. Я знал, что для этого нужен HTML. Потом наткнулся на упоминания о CSS. Решил чуток подробнее понять, что это и…это было очень туго! Те сайты, на которые я попадал, давали вроде бы и базовые знания, но не было того момента, который бы подвел полного чайника от незнания к базовым моментам. А потом я случайно наткнулся на бесплатные видео уроки от Евгения Попова. Первым делом меня смутила необходимость вводить свою почту и имя, чтобы получить бесплатный видеокурс. Ну блин, еще заспамят меня, а то и почту взломают, не хочу! Но все же решился)

Но…на мой почтовый ящик так ничего и не пришло (должна была прийти ссылка на скачивание бесплатных курсов по HTML и CSS). Поэтому я пошел на ex.ua и скачал их там:) Рассуждая геройски, подумал, что курс по HTML мне не нужен, я вроде немного знаю его, а вот CSS посмотрю. Посмотрел первый урок — понял, что нужно смотреть и учить HTML сначала.

Что вам сказать, ребята…это лучше, чем все сайты с уроками вместе взятые. Везде автор пишет максимально просто, так как он это видит, но все равно этого не достаточно для чайника. Просто автору даже в голову не может прийти, что «этого» можно не знать. А Е.Попов не только объясняет как для маленьких и тупых, но еще и показывает каждый свой шаг и это именно то, что нужно вам, если хотите научится HTML/CSS!

Так что вот вам ссылки ( раз и два ) на бесплатные видеокурсы, берите, качайте, не пожалеете.

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

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

После изучения тех курсов я создал свой первый настоящий сайт (в плане, что на личном хостинге и т.д.). Да, я еще не подозревал о том, что такое PHP и MySQL, и WordPress, и т.д…

НО это уже совсем другая история…

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

Источник

html и css

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

Что такое html

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

Язык HTML придуман уже достаточно давно, его первая версия появилась примерно с 1986-1991 год, тогда этот язык был придуман для обмена научной и технической документацией, он содержал в себе не так уж и много дескрипторов, которые так же называются тегами. Благодаря этому несложному языку можно было делать хорошо структурированные и красиво отображающиеся документы.

Интернет развивался и развивался язык, усложняясь и приобретая все новые возможности. На данный момент самая последняя версия языка это HTML 5 хотя официально она ещё не законченная, но все же уже повсеместно используется и поддерживается всеми современными браузерами.

На самом деле язык html достаточно простой, и не стоит его бояться думая, что не каждый сможет понять или нечто подобное, все достаточно просто, и я на личном опыте в этом не раз убедился. Достаточно сделать хотя бы один сайт по четким инструкциям и вы все поймете и почувствуете как все доступно. Рекомендую изучать HTML5 так как он является на данный момент самым современным и его возможности намного шире чем у предыдущих версий, собственно все мои дальнейшие уроки будут именно на нем.

Что такое CSS

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

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

Первая версия языка была разработана в 1996 году, она была достаточно скромной и охватывала лишь свойства текста, цвета, выравнивание, и отступы. Но в последующих версиях языка, функционал, безусловно, значительно вырос, и уже сейчас просто невозможно описать в нескольких строчках все его возможности. Актуальной версией языка на сегодняшний день является CSS3, и именно о нем будут все последующие уроки.

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

Почему HTML и CSS вместе?

На самом деле ответ достаточно прост, потому, что по-другому никак.

Во-первых, язык CSS без языка html просто не может существовать как самостоятельный язык, так как он и был создан в помощь html.

Во-вторых, если в старых версиях языка html еще можно было обойтись без css, то на данный момент просто ни как.

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

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

Дата публикации:2014-03-23

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

Источник

Руководство по HTML/CSS/JavaScript

Frontend Guidelines

Правила и руководства оформления, форматирования HTML, СSS и JavaScript кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.

От переводчика

Приветствую всех снова, меня зовут Максим Иванов, и сегодня я подготовил перевод, который, возможно, окажется для вас полезным. Бенджамин Де Кук (Benjamin De Cock), разработчик из Бельгии, собрал некоторые указания по оформлению кода, которые позиционируют себя как лучшие практики по написанию HTML, CSS, JS. Конечно, существует множество рекомендаций, например, есть хороший гайдлайн от Google, наверное, есть еще что-то, однако, если следовать хотя бы некоторым из них, то можно надеяться, что ваш код станет лучше. В отдельных случаях следование этим гайдлайнам не полезно, а совсем наоборот. В общем и целом, все зависит от вашего опыта и виденья дела, если вы новичок, то скорее вам будет полезно оценить то, что пишут другие и в обществе считается верным, если вы гуру, то наверное вам и не нужны гайдлайны, которые написаны непонятно кем на ваш взгляд. Итак, приступим.

JavaScript

Семантика

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

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

Лаконичность

Старайтесь кратко писать код. Забудьте о своих старых привычках, перетекающих из XHTML.

Читабельность

Читабельность вашего кода не должна иметь второстепенный характер. Конечно, вы не обязаны быть экспертом по оптимизации (WCAG) для того, чтобы наверняка улучшить свой сайт, однако, уже прямо сейчас вы можете начать немедленно исправлять мелочи, которые в итоге помогут сделать ваш код лучше, например:

— использовать атрибут alt правильно
— связывайте имена (links) и элементы (buttons) и называйте их по смыслу (

— это зверство)
— не полагайтесь на название цветов, в качестве информации
— явно связывайте определенной меткой и элемент формы

Язык документа

Определении языка и кодировки символов не является обязательным, однако рекомендуется всегда объявлять их на уровне документа, даже если они указаны в заголовках HTTP. Приоритетной кодировкой символов является UTF-8.

Эффективность

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

Точка с запятой

В то время как точка с запятой является чисто технически разделителем правил, CSS всегда относится к точке запятой, как к оператору завершения.

Box model

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

Потоки

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

Аналогично, не вытаскивайте из основного потока элементы, если вы можете обойтись без этого.

Позиционирование

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

Селекторы

Минимизируйте сочетания селекторов связанных с DOM. Иногда, лучше добавить лишний класс элементу, который вы хотите найти, чем искать его через три структурных селектора: псевдо-класс, потомок, комбинатор.

Избегайте перегрузку селекторов.

Специфичность

Не используйте значения и селекторы, которые нельзя переопределить. Минимизируйте использование id (идентификаторов) и избегайте правило !important

Переопределения

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

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

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

Лаконичность

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

Англоязычные обозначения

Предпочтительно использовать английскую математику.

Вендорные префиксы

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

Анимация

Иногда предпочтительнее использовать переходы (transitions), нежели анимацию (animations). Избегайте анимирование свойств в пользу opacity и transform.

Единицы измерения

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

Цветовая модель

Если нужна прозрачность, использовать rgba. В противном случае, всегда используйте шестнадцатеричный формат.

Отрисовка

Избегайте http-запросов, если ресурс легко воспроизводится с помощью CSS.

JavaScript

Производительность

Легкочитаемый, выразительный и правильный код важнее производительности. На самом деле, JavaScript никогда не будет вашим узким местом в расчете на производительность. Лучше уделять внимание таким вещам, как сжатие изображений, оптимизация http-запросов и доступа к сети, перерасчет DOM-дерева. Если вы запомните хотя бы одну из рекомендаций в данной статье, опирайтесь на нее.

Независимость от внешнего состояния

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

Нативность

Полагайтесь на стандартные методы, как можно больше.

Принудительное сравнение

Лишние сравнения не имеют смысл, избегайте их.

Циклы

Не используйте циклы, так как они заставляют вас использовать изменяемые объекты. Полагайтесь на методы Array.prototype.

Если вы не можете использовать методы Array.prototype, используйте рекурсию.

Вот общая функция Loop, делающая рекурсию проще в использовании.

Аргументы

Забудьте об arguments как об объекте. Остаточные параметры это всегда лучший вариант, потому что:
1. Передаваемое имя дает лучшее представление о том, что ожидает функция на входе
2. Остаточный параметр — это массив и он легок в использовании

Использование метода apply

Забудьте метода apply(). Вместо этого используйте оператор распространения (вызова функции).

Использование метода bind

Не используйте bind(), когда есть более идиоматические подходы.

К прочтению:
1. Babeljs (пример в ES5): плохо vs хорошо
2. bind(), а также итераторы в JavaScript

Методы высшего порядка

Избегайте вложенных функций там где это не нужно.

Композиции

Избегайте несколько вложенных вызовов функций. Используйте вместо них композицию.

К прочтению:
1. Babeljs (пример в ES5): плохо vs хорошо

Кеширование

Дорогостоящие операции с большими структурами данных непростительны, если вы не кешируете их.

Переменные

Используйте const вместо let и let вместо var.

Условия

Будьте привержены концепции IIFE’s (немедленно выполняемый функтор), используйте возвращаемые значения в условиях (if, else if, else и switch).

Итераторы

Избегайте цикл перебора for. in

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

Объект как ассоциативный массив

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

Каррирование

Каррирование является мощной, но в свою очередь чужеродной парадигмой для многих разработчиков. Не злоупотребляйте.

Читабельность

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

Повторное использование кода

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

К прочтению:
1. Babeljs (пример в ES5): плохо vs хорошо

Зависимости

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

К прочтению:
1. Babeljs (пример в ES5): плохо vs хорошо
2. Путь JavaScript модуля и документация по библиотеке Underscore

Источник

Создание первой веб-страницы

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

Что такое HTML и CSS?

HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей — это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.

Эти два языка — HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.

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

Основные термины HTML

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

Элементы

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

) и абзацев (определены как

Элементы идентифицируются с помощью угловых скобок <>, окружающих имя элемента. Таким образом, элемент будет выглядеть так:

Добавление угловые скобок вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов.

Открывающий тег отмечает начало элемента. Он состоит из символа ; например,

Закрывающий тег отмечает конец элемента. Он состоит из символа ; например,

Так, теги ссылок будут выглядеть примерно так:

Атрибуты

Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент с атрибутом href будет выглядеть следующим образом:

Демонстрация основных терминов HTML

Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега и закрывающего тега охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href=»http://shayhowe.com» в открывающем теге.

Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег

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

Настройка структуры документа HTML

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

Демонстрация структуры HTML-документа

Самозакрывающиеся элементы

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

Валидация кода

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

На практике

В качестве веб-дизайнеров и фронтенд-разработчиков мы можем позволить себе роскошь посещать ряд замечательных конференций, посвящённых нашему ремеслу. Мы собираемся организовать собственную конференцию Styles Conference и создать для неё сайт на протяжении следующих уроков. Вот так!

Внутри элемента добавим элементы

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

Пришло время взглянуть на то, что мы сделали! Отыщем наш файл index.html (у меня он находится в папке styles-conference на рабочем столе). Дважды щёлкнув по этому файлу или перетащив его в браузер мы откроем его для просмотра.

Рис. 1.02. Наши первые шаги при создании сайта Styles Conference

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

Основные термины CSS

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

Селекторы

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

Селекторы, как правило, связаны со значением атрибута, вроде значения id или class или именем элемента, вроде

В CSS селекторы сочетаются с фигурными скобками <>, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы

Свойства

Значения

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

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

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

Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения

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

Работа с селекторами

Селекторы, как уже упоминалось ранее, указывают, какие элементы HTML будут стилизованы. Важно полностью понимать как использовать селекторы и как они действуют. Первым шагом должно стать знакомство с различными типами селекторов. Мы начнём с самых основных селекторов: селекторы типа, классы и идентификаторы.

Селекторы типа

Селекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы

Классы

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

Идентификаторы

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

Дополнительные селекторы

Селекторы чрезвычайно мощная штука и описанные выше относятся к наиболее распространённым селекторам, которые нам попадаются. Эти селекторы только начало. Существует много продвинутых селекторов и они легко доступны. Когда освоитесь с ними, не бойтесь посмотреть и некоторые более прогрессивные.

Ладно, начинаем собирать всё вместе. Мы добавляем элементы на страницу внутри нашего HTML, затем можем выбрать эти элементы и применить к ним стили с помощью CSS. Теперь давайте соединим точки между HTML и CSS, чтобы эти два языка работали вместе.

Подключение CSS

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

Другие варианты добавления CSS

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

В следующем примере HTML-документа элемент указывает на внешний стилевой файл.

Чтобы CSS отображался правильно, значение пути атрибута href должно напрямую совпадать с тем, где сохранён CSS-файл. В предыдущем примере файл main.css хранится в том же месте, что и HTML-файл, известном также как корневая папка.

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

Использование сброса CSS

Каждый браузер имеет свои собственные стили по умолчанию для различных элементов. То, как Google Chrome отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает Internet Explorer. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS.

Сброс CSS берёт все основные элементы HTML с заданным стилем и обеспечивает единый стиль для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) — наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все разные браузеры станут работать с общей точки отсчёта.

Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера, его сброс CSS адаптирован для включения новых элементов HTML5.

Если вы чувствуете себя немного авантюристом, есть также Normalize.css, созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей.

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

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

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

На практике

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

Просматривая файл index.html в браузере мы можем видеть, что элементы

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

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

Рис. 1.04. Наш сайт Styles Conference со сбросом CSS

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Резюме

Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.

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

Напомним, что мы рассмотрели следующее:

Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой.

Источник