Разумеется, веб-разработка огромна. Большая часть этого заключается в том, что почти все в Интернете. Тем не менее, существует нехватка разработчиков в этой области, и поэтому учебная программа веб-разработки так доступна и бесплатна. Имея это в виду, мы покажем вам немного о том, что такое HTML и CSS. Более конкретно, мы собираемся показать вам, как работают «классы».
Мы не начинаем вас с самого начала, потому что там уже есть множество бесплатных программ. Вместо этого мы специально покажем вам, как работают классы, так как это необходимый компонент для оформления вашего сайта. Мы также подумали, что, возможно, стоит остановиться, прежде чем публиковать наш взгляд на Bootstrap API Twitter, так как классы также являются обязательным компонентом.
Как оговорка, если вы совершенно новичок в HTML и CSS, это, вероятно, не очень хорошее начало для вас. Если вы знакомы с ним, его не должно быть слишком сложно подобрать. Но, если вы ищете полное учебное пособие для начинающих, есть много отличных вариантов онлайн. Вот некоторые из них: FreeCodeCamp, Проект Odin, CodeAcademy, Code School, Team Treehouse, Udacity и многие другие. Если вы решите начать копаться в одном из них, я настоятельно рекомендую придерживаться одного (например, Free Code Camp) и заканчивать его перед запуском другого, так как большая часть «основного» контента может быть довольно повторяющейся.
После этого давайте разберемся, что это за классы.
Как работают классы
Занятия чрезвычайно полезны. Они убирают повторяемость из стиля HTML. Без классов вы бы стилизовали каждый элемент в вашей разметке индивидуально. А что, если у вас есть два одинаковых элемента, но вы хотите по-разному стилизовать каждый из них? Это был бы полный беспорядок. Вот почему у нас есть занятия. Классы добавляют некоторую организационную структуру вашего HTML, позволяя вам сохранять ваш код относительно чистым. Кроме того, классы можно использовать более одного раза. Другими словами, вам никогда не придется создавать одни и те же правила стиля дважды.
Вот как классы выглядят в нашем
тег:
Как видите, под тегом body у нас есть два
элементы с разными классами. Первыйтег имеет класс «head1», в то время как второй тег имеет класс «head2». Таким образом, в нашем CSS вместо применения стилей простоэлемент, мы можем применить стиль к этим отдельным классам. Зачем нам это делать?
элемент, мы можем применить стиль к этим отдельным классам. Зачем нам это делать?
Основная причина в том, что вы не хотите, чтобы все ваши
элементы должны иметь одинаковый стиль. Это создаст много головной боли при создании веб-сайта, и в дополнение к этому веб-сайты будут выглядеть не очень хорошо. Классы позволяют применять стили только к одному экземпляру тега, а не ко всемтеги по всему документу. Итак, как вы пишете класс в HTML? Нравится:
Некоторый контент
Вы можете добавить свойство «class» практически к любому элементу HTML.
Большой! Итак, у нас есть классы, но в их текущем состоянии они на самом деле ничего не делают. Это потому, что мы еще не добавили никаких правил стилевого оформления в класс. Для этого нам нужно создать отдельный документ .css. Я просто собираюсь назвать это main.css. В этом документе мы бы стилизовали класс следующим образом:
Чтобы выбрать класс, который мы хотим стилизовать, мы делаем это:
.head1 {цвет: красный; выравнивание текста: по центру; }
В фигурных скобках есть все «правила» (или стили), которые мы применяем к этому классу. Есть много разных правил, которые вы можете поместить в этот класс. В моем случае я изменил цвет текста на красный, используя правило «цвет», и центрировал текст, используя правило «выравнивание текста». Вы можете найти полный список правил CSS, а также их документацию в Сети разработчиков Mozilla.
Теперь наш стиль по-прежнему не применяется к классам в нашем HTML-документе, и это потому, что мы еще не связали два файла вместе. Вернитесь к своему HTML-файлу и в
тег, вы хотите связать свой файл CSS, выполнив это:
Ваш HTML-документ должен выглядеть так:
И ваш тестовый проект в Интернете должен выглядеть так:
Более подробное видео, описывающее эти шаги, смотрите ниже.
видео
Заключение
И это все, что нужно для занятий! Они действительно просты для понимания. Очевидно, что на больших и популярных веб-сайтах, которые вы посещаете, правила внутри классов намного сложнее, чем то, что мы рассмотрели, но в их самой основной форме - так они работают.
Если у вас есть какие-либо вопросы или у вас возникли проблемы в течение длительного времени, обязательно сообщите нам об этом в комментариях ниже или позже на форумах PCMech! Или, если вам интересно полное руководство для начинающих по HTML / CSS для PCMech, обязательно сообщите нам об этом!
