Как задать стиль HTML-элемента с помощью CSS
с помощью CSS
8 января, 2021 12:14 пп 3 961 views | Комментариев нет
Development | Amber | Комментировать запись
Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все мануалы по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.
Примечание: Найти все мануалы этой серии можно по тегу CSS-practice
Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.
Элемент <div> добавляется в HTML-документ при помощи открывающих и закрывающих тегов. Сам по себе этот элемент обычно мало влияет на представление веб-страницы. Если присвоить ему набор CSS правил, вы сможете изменить размер, цвет и другие его свойства.
В данном руководстве мы поговорим о стилизации HTML элемента разделения контента – элемента <div> – с помощью CSS. Элемент <div> можно использовать для структурирования макета и разбиения страницы на отдельные компоненты для создания индивидуального стиля. Сможете понять, как создавать и стилизовать элементы <div>, а также научитесь добавлять и стилизовать другие элементы внутри контейнера <div>. Навык работы с элементом <div> как с инструментом компоновки пригодится вам позже, когда вы начнете создавать свой тестовый сайт.
Требования
Чтобы следовать этому мануалу, нужно подготовит среду по мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.
Краткий обзор элемента <div>
Давайте посмотрим на практике, как работает элемент <div>.
Сотрите все, что есть в файле styles.css (если вы добавляли в него код из предыдущих мануалов серии). Затем добавьте следующее CSS правило для селектора тега <div>:
div {
background-color: green;
height: 100px;
width: 100px;
}
Сохраните файл styles.css. Затем откройте файл index.html, сотрите все, что там есть (кроме первой строки кода: <link rel=”stylesheet” href=”css/styles.css”>), и добавьте следующий фрагмент:
<div></div>
Обратите внимание, элемент <div> состоит из открывающего и закрывающего тега, но не требует какого-либо контента.
Сохраните файл index.html и перезагрузите его в браузере. Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»).
На вашей веб-странице должно появиться зеленое поле шириной 100 пикселей и высотой 100 пикселей, согласно CSS-правилу:
Теперь, когда у вас есть правило стиля для элемента <div>, каждый элемент <div> на вашей странице будет оформлен точно так же.
Но чаще всего на элементы <div> должны быть стилизованы по-разному. По этой причине для стилизации элементов <div> разработчики часто используют классы.
Чтобы попрактиковаться в создании классов для <div>, удалите из файла styles.css только что созданное CSS-правило и добавьте следующие три новых набора правил:
.div-1 {
background-color: blue;
height: 50px;
width: 50px;
}
.div-2 {
background-color: red;
height: 100px;
width: 100px;
}
.div-3 {
background-color: yellow;
height: 200px;
width: 200px;
}
В этом фрагменте содержатся правила стиля для трех разных классов: div-1, div-2 и div-3. Обратите внимание, имена селекторов классов начинаются с точки.
Сохраните файл styles.css и перейдите в файл index.html. Сотрите только что созданный элемент <div> и добавьте три новых элемента, применив к каждому из них класс, который соответствует селекторам CSS из файла styles.css:
<div></div>
<div></div>
<div></div>
Обратите внимание, класс добавляется в качестве атрибута к тегу <div>: для этого нужно указать атрибут class и имя класса в открывающем теге <div>.
Сохраните файл и перезагрузите его в своем браузере. Вы должны получить такой результат:
На вашей веб-странице будет три элемента <div>, каждый из которых отличается по цвету и размеру в соответствии с присвоенным ему правилом стиля. Обратите внимание, каждый элемент <div> указывается с новой строки, поскольку элементы <div> являются блочными элементами и это их поведение по умолчанию.
Читайте также: Строчные и блочные элементы HTML
Добавление и стилизация текста в контейнере <div>
Вы можете поместить в контейнер <div> текст, вставив его между открывающим и закрывающим тегами <div>. Попробуйте добавить текст в каждый из трех элементов <div> в файле index.html:
<div>Blue</div>
<div>Red</div>
<div>Yellow</div>
Сохраните файл и загрузите его в браузере. Теперь в каждом из контейнеров <div> должен отображаться текст:
Blue
Red
Yellow
В текст внутри элементов <div> можно добавить дополнительные HTML-элементы.
Для примера попробуйте добавить к вашему тексту внутри тегов <div> в файле index.html теги заголовков (от <h3> до <h5>):
<div><h3>Blue</h3></div>
<div><h4>Red</h4></div>
<div><h5>Yellow</h5></div>
Сохраните файл и перезагрузите его в браузере. Текст внутри контейнеров <div> теперь будет оформлен в соответствии со свойствами тегов:
Blue
Red
Yellow
Обратите внимание, элементы <div> также немного изменили свои позиции. Это смещение вызвано стандартными свойствами полей для элементов с тегами <h3> по <h5>. Больше о полях вы узнаете в следующем мануале, посвященном блоковой модели CSS (пока что мы проигнорируем эти поля).
Чтобы стилизовать текст внутри <div>, вы можете указать значения свойств текста в наборах правил для классов <div>. Попробуйте добавить свойства в свои наборы правил в файле styles.
css, как в следующем фрагменте кода:
.div-1 {
background-color: blue;
height: 50px;
width: 50px;
font-size: 10px;
color: white;
}
.div-2 {
background-color: red;
height: 100px;
width: 100px;
font-size: 20px;
color: yellow;
}
.div-3 {
background-color: yellow;
height: 200px;
width: 200px;
font-size:30px;
color: blue;
}
Сохраните файл styles.css и перезагрузите index.html в браузере. Текст внутри контейнеров <div> теперь будет оформлен в соответствии с CSS правилами в файле styles.css:
Blue
Red
Yellow
Заключение
В этом мануале вы узнали, как изменить цвет и размер элемента <div>, а также как добавить и стилизовать текст внутри такого элемента. Позже – когда мы начнем создавать веб-сайт – мы будем использовать элемент <div> для управления макетом страницы. В следующем мануале мы поговорим о блоковой модели CSS и о том, как ее использовать для настройки свойств контента, отступов, границ и полей элементов.
Tags: CSS, CSS-practice, HTML
Красота CSS-дизайна
Итак, о чем это?
Существует постоянная необходимость продемонстрировать мощь CSS . Zen Garden стремится волновать, вдохновлять и поощрять участие. Для начала просмотрите некоторые из существующих дизайнов в списке. Нажав на любой из них, вы загрузите таблицу стилей на эту же страницу. HTML остался прежним, единственное, что изменилось, это внешний файл CSS . Да, действительно.
CSS позволяет полностью контролировать стиль гипертекстового документа. Единственный способ, которым это можно проиллюстрировать так, чтобы это взволновало людей, — это продемонстрировать, чем это может быть на самом деле, как только бразды правления будут переданы в руки тех, кто способен создать красоту из структуры.
И дизайнеры, и программисты внесли свой вклад в красоту Интернета; мы всегда можем продвинуть его дальше.
Участие
Нас всегда привлекал сильный визуальный дизайн. Вы модифицируете эту страницу, так что сильные навыки CSS также необходимы, но файлы примеров прокомментированы достаточно хорошо, чтобы даже новички CSS могли использовать их в качестве отправной точки. См. Руководство по ресурсам CSS для получения дополнительных руководств и советов по работе с CSS .
Вы можете изменять таблицу стилей любым способом, но не HTML . Поначалу это может показаться пугающим, если вы никогда раньше не работали таким образом, но следуйте указанным ссылкам, чтобы узнать больше, и используйте примеры файлов в качестве руководства.
Загрузите образец HTML и CSS для локальной работы с копией.
Как только вы закончите свой шедевр (и, пожалуйста, не отправляйте наполовину готовую работу), загрузите файл CSS на веб-сервер под вашим контролем. Отправьте нам ссылку на архив этого файла и всех связанных ресурсов, и если мы решим его использовать, мы загрузим его и разместим на нашем сервере.
Преимущества
Зачем участвовать? Для признания, вдохновения и ресурса мы все можем сослаться на то, чтобы показать людям, как удивительны CSS действительно может быть. Этот сайт служит в равной степени источником вдохновения для тех, кто работает в Интернете сегодня, инструментом обучения для тех, кто будет работать завтра, и галереей будущих методов, которых мы все с нетерпением ждем.
Требования
Там, где это возможно, мы хотели бы видеть в основном использование CSS 1 и 2 . CSS 3 и 4 должны быть ограничены только широко поддерживаемыми элементами или должны быть предусмотрены сильные резервные варианты.
К счастью, такое проектирование показывает, насколько хорошо различные браузеры к настоящему времени реализовали CSS . Придерживаясь рекомендаций, вы должны увидеть довольно стабильные результаты в большинстве современных браузеров. Из-за огромного количества пользовательских агентов в Интернете в наши дни — особенно с учетом мобильных устройств — идеальные до пикселя макеты могут быть невозможны на каждой платформе. Это нормально, но проверяйте как можно больше. Ваш дизайн должен работать как минимум в IE9+ и новейшие браузеры Chrome, Firefox, iOS и Android (используют более 90% населения).
Просим присылать оригинальные работы. Пожалуйста, соблюдайте законы об авторском праве.
Пожалуйста, сведите нежелательный материал к минимуму и постарайтесь включить в свою работу уникальные и интересные визуальные темы. Мы уже прошли точку необходимости еще одного дизайна, связанного с садом.
Это учебное упражнение, а также демонстрация. Вы сохраняете все авторские права на свою графику (за некоторыми исключениями, см. правила подачи), но мы просим вас освободить ваши CSS под лицензией Creative Commons, идентичной лицензии на этом сайте, чтобы другие могли учиться на вашей работе.
Дэйв Ши. Пропускная способность любезно предоставлена mediatemple. Теперь в наличии: Zen Garden, книга.
HTML CSS CC A11y ГХвстроенных стилей CSS | Nomensa
- Главная
- блог
- Встроенные стили CSS и почему они считаются вредными для доступности
- По
- Nomensa
- Поделиться этой публикацией в Twitter (откроется новая вкладка)
- Поделиться этой публикацией в LinkedIn (откроется новая вкладка)
- Поделиться этой публикацией в Facebook (откроется новая вкладка)
- Посетите нашу страницу в Instagram (откроется новая вкладка)
Введение
С середины 1990-х годов веб-разработчики получили все больше контроля над представлением разрабатываемых ими веб-страниц.
- Стили можно объявлять в отдельном файле и ссылаться на них из HTML-документа. Стили, объявленные в этом внешнем файле, будут проанализированы и применены к соответствующим элементам в HTML-документе;
- Стили можно встраивать непосредственно в HTML-документ. Эти стили должны быть вложены между тегами и будут применяться к HTML-документу почти так же, как стили, содержащиеся во внешней таблице стилей;
- Стили можно встраивать непосредственно в элементы HTML с помощью атрибута стиля.
Эти стили визуализируются почти так же, как описанные выше методы, хотя и для каждого элемента.Это заголовок
Эти стили визуализируются почти так же, как описанные выше методы, хотя и для каждого элемента. Первый из описанных выше методов обычно является предпочтительным методом стилизации контента на веб-страницах. Многие считают его самым чистым и удобным в сопровождении решением, поскольку оно представляет собой четкое разделение между структурой (HTML) и стилем (CSS). Второй метод не должен вести себя иначе, чем первый метод. Однако это представляет собой потенциальную проблему с ремонтопригодностью, поскольку HTML и связанные стили тесно связаны друг с другом. Это может затруднить разделение работы между разными членами команды и может привести к раздуванию HTML-файла. Третий метод, указанный выше, представляет собой наиболее проблематичный случай. Если стили встроены непосредственно в элементы HTML с помощью атрибута стиля, HTML может стать трудным для чтения (и, следовательно, поддерживать), и это может вызвать проблемы с доступностью для некоторых посетителей вашего веб-сайта.
Ремонтопригодность
За последние 20 лет эксперты в области клиентской веб-разработки выразили озабоченность по поводу использования встроенных стилей. Разработчики часто обнаруживают, что поддержка сложных HTML-документов значительно усложняется, если в исходный документ встроено большое количество презентационных данных. Для многих предпочтительным методом является использование внешних таблиц стилей. Стили, объявленные во внешних таблицах стилей, применяются путем ссылки на типы элементов, классы и уникальные идентификаторы в документе HTML. Можно сказать, что стили, объявленные во внешних таблицах стилей, «ненавязчивы», поскольку они не привязаны жестко к конкретным страницам или элементам. Для многих такое разделение структуры (HTML) и представления (CSS) является логичным шагом к повышению удобства сопровождения.
Специальные возможности
Некоторые люди используют пользовательские таблицы стилей при работе в Интернете.
Люди с тяжелой степенью дальтонизма или другими нарушениями зрения могут испытывать трудности с чтением контента в Интернете и, скорее всего, будут использовать пользовательские таблицы стилей. Пользовательские таблицы стилей хранятся на компьютере пользователя и будут использоваться им для просмотра многих (если не всех) веб-сайтов в Интернете. Они позволяют людям определять сочетания цветов и размеры шрифта, которые облегчают им чтение контента на веб-страницах. Встроенные стили почти всегда переопределяют таблицы стилей, связанные извне (включая пользовательские, определяемые пользователем таблицы стилей). По этой причине следует избегать использования встроенных стилей. Например, если размер шрифта заголовка был объявлен встроенным, человеку, которому нужно увеличить шрифт с помощью пользовательской таблицы стилей, будет трудно (если не невозможно) сделать это. Это может помешать людям получить доступ к контенту на вашем веб-сайте наиболее удобным для них способом.
Заключение
В последние годы некоторые из самых популярных браузеров сделали возможным переопределение ЛЮБЫХ стилей на веб-странице (включая встроенные стили).
Это действительно многообещающая вещь для доступности. Однако люди, которые застряли в старых или менее популярных браузерах, с большей вероятностью столкнутся с проблемами со встроенными стилями. В заключение я хотел бы призвать разработчиков помнить о доступности при создании стилей CSS для проектов веб-разработки. На самом деле отделить стили CSS от разметки HTML несложно. На самом деле верно как раз обратное. Если правила CSS объявлены во внешних таблицах стилей, результирующая HTML-разметка, вероятно, предложит значительно улучшенную управляемость, как и фактический CSS, используемый для оформления веб-сайта. Однако более важным является влияние, которое это оказывает на доступность вашего веб-сайта. Если все стили содержатся во внешне связанных таблицах стилей, у людей будет гораздо больше возможностей переопределить представление элементов на странице по умолчанию. Это, вероятно, облегчит некоторым посетителям вашего веб-сайта взаимодействие с содержащимся на нем контентом.
Дальнейшее чтение
- Использование псевдокласса CSS
- Где UX не работает со специальными возможностями
- Советы по доступности с помощью клавиатуры
Просто начните создавать специальные возможности в своих проектах, не оставляйте их с самого начала, чтобы сэкономить время и деньги он висит на отставании, позволяя ему собирать пыль.