Что такое css простыми словами

Что такое CSS и зачем нужны каскадные страницы

Ни для кого не является секретом, что интернет-сайты разрабатываются на html-языке. При этом в индустрии разработчиков встречается аббревиатура CSS, которая очень часто приводит начинающих специалистов в замешательство. В переводе с английского языка понятие Cascading Style Sheets означает «каскадные таблицы стилей». Речь идет про язык разметки, который применяется для визуального оформления веб-сайтов.

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

Получи грант, покрывающий 50% стоимости обучения
И обучайся новой профессии онлайн из любой точки мира
Получить грант

Cascading Style Sheets – это?

На курсе FrontEnd от академии DevEducation слушатели обязательно проходят инструменты, которые потребуются профессиональным разработчикам. Новички тщательно изучают не только html, но и то, для чего необходим CSS-язык. Комплексный подход предоставляет возможность людям, которые были далеки от IT-сферы, стать ценными специалистами в данном направлении.

Под понятием Cascading Style Sheets следует понимать формальный язык, помогающий описать внешний вид веб-странички, каскадные таблицы стилей. Впервые данная аббревиатура начала использоваться в далеком 1994, когда было предложено применить данный язык для оформления веб-страниц с учетом выбранного стиля. Спустя всего два года была опубликована первая спецификация, рекомендованная к применению Консорциумом Всемирной паутины. На данный момент актуальной является CSS3 (третья версия спецификации), которая существенно продвинулась вперед по собственным особенностям и возможностям.

Для чего необходимо применять CSS?

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

До того, как появился язык CSS, странички оформлялись исключительно внутри базового документа посредством html. Но технологии Cascading Style Sheets предоставили возможность разделить на отдельные компоненты содержание файла, визуальное оформление страницы. Это позволило использовать аналогичный стиль для всех документов, с помощью подключения html файла к каскадным таблицам стилей.

Ключевыми задачами, решаемыми с помощью этого языка, являются:

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

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

87% наших выпускников уже работают в IT
Оставь заявку, и мы поможем с выбором новой профессии
Оставить заявку

Особенности работы CSS

Разработчикам необходимо в первую очередь интегрировать документ на создаваемую страничку. Для этого существует два метода:

1. подключение файла Cascading Style Sheets непосредственно в html-документ, а именно в теге head;
2. CSS прописываются в теле файла, непосредственно внутри тега style.

Для стилизации компонента этот язык предлагает разработчикам механизм селекторов. Это значит, что пользователи могут обратиться к элементам, прописать для них определенные параметры свойств. Например, по тегу – в такой ситуации указанный формат будет применяться к абсолютно всем тегам на создаваемой интернет-страничке. Кроме того, есть возможность указать значение по ID, классу, атрибуту. Прописанные характеристики будут применимы ко всем элементам, которые отвечают заявленным значениям.

В Cascading Style Sheets также присутствуют псевдоселекторы. С помощью данных инструментов разработчики могут выбрать исключительно один элемент из перечня или компонент по порядковому номеру в списке идентичных вариаций.

Почему необходимо использовать язык в работе веб-разработчиков?

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

• Простоту инструмента. Это позволяет очень быстро разобраться в особенностях его использования. При этом принцип разделения содержания от стилевого оформления предоставляет возможность существенно сократить временные затраты на разработку веб-ресурса.
• Уменьшение времени, необходимого для загрузки странички. Это достигается благодаря переносу правил предоставления сведений в отдельный документ. Поэтому интернет-браузер загружает исключительно структуру файла в html и данные, которые хранятся на страничке. Представление такой информации загружается браузером исключительно один раз для абсолютно каждой странички, а при переходе пользователей между ними подгружаются сведения непосредственно из кэша программы. Благодаря этому сокращается нагрузка и на сервер.
• Легкость корректировки дизайна. CSS стили применяются тогда, когда необходимо что-то откорректировать в оформлении всего ресурса. Используя этот инструмент, разработчикам не нужно править каждую веб-страничку. Потребуется только внести изменение в значении свойств непосредственно в необходимом файле.

Такие плюсы делают Cascading Style Sheets востребованным языком среди профессиональных разработчиков веб-сайтов, поскольку позволяют существенно облегчить и ускорить процесс выполнения поставленных задач.

Минусы каскадных таблиц стилей

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

Еще одним недостатком является необходимость вносить исправления не только в CSS-документ, но в HTML-компоненты. Это происходит в том случае, когда элементы связаны непосредственно с селекторами инструмента. Поэтому появляется необходимость выполнить редактирование, тестирование внесенных изменений.

Об особенностях принципа разделения контента и оформления

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

Постепенно это привело к тому, что профессионалы начали отказываться от стандартного метода оформления страничек посредством табличек. Такой подход усложнял структуру ресурса, делал управление html-документами сложным и проблематичным. Появление Cascading Style Sheets стало тем самым спасательным кругом.

Ключевые принципы построения интернет-макетов посредством CSS

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

В наше время для расположения компонентов в теле ресурса используют 2 базовые методики:

• GRID. Предоставляет возможность отказаться от оберток, отдавая предпочтение размещению объектов по выбранной сетке.
• FLEX. Помогает в автоматическом режиме распределять элементы в блоке посредством создания блоков-оберток с flex-свойством.

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

Как освоить каскадные таблицы стилей?

Несмотря на то, что инструмент является достаточно интуитивной вещью, рекомендуется пройти специальное обучение. Например, записаться на курс FrontEnd от академии DevEducation. Это позволит даже новичкам IT-индустрии успешно и правильно справляться с разметкой, указанием свойств стилей, другими базовыми задачами.

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

Подведение итогов

Сегодня каскадные таблицы стилей являются мощнейшим инструментом для оформления веб-ресурсов, без которого сложно представить создание красивой интернет-странички. Изучение CSS поможет современным разработчикам сделать сайты стильными и уникальными, при этом без многочисленных JS-кодов, которые негативно влияют на производительность ресурса. В наше время Cascading Style Sheets считается одним из базовых языков, которым должен владеть абсолютно каждый web-разработчик, желающий реализовывать качественные и стильные веб-проекты в соответствии с поставленным техническим заданием.

Начни обучение сегодня
FrontEnd разработчик

Профессия Frontend-разработчик — лидер по количеству запросов от работодателей. Без этого специалиста не может обойтись ни одна современная компания, у которой есть сайт. Хотите стать Frontend-разработчиком и создавать сайты, интернет-магазины, маркетплейсы и прочее? Записывайтесь на наш курс!

QA Automation Engineer

QA Automation Engineer — это специалист, который обеспечивает качество продукта и контролирует все этапы разработки с момента появления идеи до релиза. Он имеет компетенции и тестировщика, и разработчика. Он участвует во всех процессах разработки: от подготовки стандартов и требований до самой разработки продукта. А также владеет ручным тестированием и пишет скрипты для автоматизации этого процесса, докладывает о проблемах и контролирует их исправление.

Project Manager

Project Manager — специалист, без которого не может обойтись ни один IT-проект. Если вы хотите войти в сферу IT-технологий, но учить языки программирования это не для вас, тогда профессия Project Manager — то, что вам нужно! Запишитесь на курс Project Management и начните свой путь в IT!

Популярное

10 задачек, которые дают на собеседованиях в IT-компании

8 главных качеств программиста: что говорят работодатели

Frontend разработчик: главные навыки

Что такое css простыми словами

Оглавление

1. Зачем используется CSS
2. Развитие CSS
3. Структура языка
4. Селекторы
5. Блок объявлений
6. Подключение CSS

CSS – это формальный язык, служащий для описания оформления внешнего вида документа, созданного с использованием языка разметки (HTML, XHTML, XML). Название происходит от английского Cascading Style Sheets, что означает «каскадные таблицы стилей».

Зачем используется CSS

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

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

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

Развитие CSS

Необходимость разработки CSS была признана консорциумом W3C в 1990-х годах. В 1996 году был принят стандарт CSS1, позволяющий изменять параметры шрифта, цвет, атрибуты текста, выравнивания и отступы. В 1998 году состоялся выход CSS2, добавивший возможности использования блочной верстки, звуковых таблиц, генерируемого содержания, указателей, страничных носителей. Версия CSS3 заметно увеличила возможности стилей: стало доступным создание анимированных элементов без использования JavaScript, появилась поддержка сглаживания, теней, градиентов и т. д. Спецификация была разделена на модули, каждый из которых стал развиваться обособленно. С 2011 года ведется разработка модулей CSS4. Возможности пока описаны в черновых вариантах.

Структура языка

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

Правило состоит из селектора и блока объявлений.

css1.png

Селекторы

Селектор сообщает, к какому элементу будут применены описываемые в CSS свойства стиля. В качестве селектора может выступать любой тег, которому задается форматирование (размер, цвет и т. д.). Если для тега нужно задать разные стили или применить один для отличных элементов, используются классы и запись вида «Тег.Класс ». Имя класса задается латиницей, может содержать подчеркивание или дефис. Если не указывать тег, а начинать запись с «.Класс», то можно использовать правило для любого тега. Если перечислять несколько классов для одного тега, к нему применятся все описанные стили. Идентификатор задает уникальное имя элемента для изменения стиля или обращения с помощью скрипта. Запись «#Идентификатор ». Название идентификатора состоит из букв латинского алфавита, допустимо использовать дефис и подчеркивание. Чтобы применить идентификатор к конкретному тегу, указывается его имя, потом без пробела и через знак решетки название идентификатора.

Блок объявлений

Блок объявлений состоит из пар «свойство: значение» (запись всегда черед двоеточие), размещенных в фигурных скобках. Записи заканчиваются точкой с запятой. CSS нечувствителен к табуляции, пробелам, регистру. Выбор способа записи (столбиком с отступами или просто в строчку) остается на усмотрение разработчика. Если для одного селектора прописаны разные значения для одного свойства, то приоритет отдается нижней записи.

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

CSS можно связать с HTML несколькими способами:

• внутри тега с помощью атрибута style. При этом нет нужды указывать селектор;
• добавить тег с атрибутом type=»text/css»;
• подключить внешнюю таблицу стилей: .

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

Что такое СSS? (Краткое руководство)

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

Основным инструментом, с помощью которого разработчики создают и меняют облик страниц, является CSS (Cascading Style Sheets, с англ. — каскадные таблицы стилей). В данной статье рассмотрим базовые принципы работы CSS и поговорим о важности технологии в разработке. Можете воспользоваться быстрыми ссылками, чтобы перейти к нужной вам части статьи:

• CSS простыми словами
• Как создается веб-страница?
• Основы CSS
• Возможности и важность CSS

CSS простыми словами

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

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

Как создается веб-страница?

Перед тем как мы перейдем к более углублённому знакомству с CSS, давайте уделим несколько минут базовым определениям , начиная с веб-страницы (если для вас всё это “легче лёгкого”, то сразу переходите к следующему разделу):

Веб-страница — это гипертекстовый документ, подключенный к Всемирной паутине.

Веб-сайт — это набор веб-страниц, размещённых в домене.

Каждая веб-страница состоит из трех компонентов :

Содержание — это структура веб-страницы, т.е. элементы из которых она состоит. За структуру страницы и определение её содержимого отвечает язык HTML (заголовки, текст, ссылки, изображения и т.д.).

Презентация — это визуальное представление элементов на веб-странице. Здесь на сцену и выходит CSS.

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

Поведение описывает то, как пользователь взаимодействует с веб-страницей. Как правило, поведение на странице обрабатывается с помощью JavaScript.

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

Основы CSS

Используя CSS мы можем задать для всего текста, заключенного в какой-то HTML-элемент, различные стили. К примеру: размер шрифта — 40 пикселей, шрифт — Arial, цвет — зелёный. Можно задавать и более серьёзные параметры — например, добавлять границы, изменять поля, контролировать точное позиционирование элемента и даже добавить различные эффекты и анимацию.

Таблица стилей сообщает браузеру, как отображать просматриваемый документ. Одна важная концепция CSS заложена в самом её названии — таблицы стилей являются каскадными. Это значит, что как минимум одна таблица стилей влияет на каждую веб-страницу.

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

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

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

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

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

Стиль, применяемый к какому-либо элементу, передаёт браузеру информацию о том, как этот элемент необходимо правильно оформить и отобразить.

Язык, на котором стиль «говорит» с браузером, называется синтаксисом . Например, чтобы задать размер шрифта и его цвет для все х абзацев, необходимо написать:

З десь стиль даёт команду : “Текст должен быть голубого цвета с высотой 2em” (em-единица измерения, стандарт высоты шрифта).

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

p < 
color: blue; 
font-size: 2em; 
> 

Так читать код становится гораздо удобнее, не правда ли? Давайте разберём вышеуказанный фрагмент. В нём присутствуют:

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

Также есть возможность присваивать стили сразу нескольким элементами по классу. Для этого используется атрибут class. Пример:

.className < 
color: blue; 
font-size: 2em; 
> 

Аналогичным образом можно присваивать стили элементам согласно их идентификаторам. В этом случае используем атрибут id:

#idName < 
color: blue; 
font-size: 2em; 
> 

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

Блок объявления — код после селектора. Он включает условия изменений, применяемых к селектору. Начинается знаком < и заканчивается знаком >.

​Объявление — это код, описывающий свойство и значение элемента. В конце каждого объявления стоит точка с запятой. Между свойством и значением — двоеточие.

Вы также можете ставить пробел между двоеточием и значением свойства. Это необязательно, но позволяет легче читать код. Допустимо оставлять между элементами пробел любой ширины (color: blue; или color: blue;)

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

font-size (размер шрифта);
margin-top (отступ от верхнего края);
background-color (цвет фона).

Значение — описывает, как именно свойство будет обработано браузером. Каждое свойство имеет набор допустимых значений, например: сделать фон зелёным, оранжевым или фиолетовым. Для разных свойств CSS необходимы соответствующие им типы значений, например цвет (red или #FF0000), длина (30px, 8in или 2em), расположение (top, center или bottom) и т.п.

Возможности и важность CSS

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

Подводя итог, вот ключевые преимущества CSS:

• Гибкость — CSS даёт свободу размещения элементов HTML в любом месте страницы, сохраняя при этом HTML-разметку организованной и чистой.
• Кроссбраузерная и кроссдевайсная совместимость — вы можете настраивать отображение веб-страницы различными браузерами и на разных устройствах с учётом их отличий и особенностей . Иначе говоря, это возможность создавать различные версии веб-страниц и сайтов с использованием одного и того же HTML-документа, адаптируя каждую версию под необходимые параметры.
• Огромные возможности настройки — CSS позволяет вносить практически неограниченные изменения в стили страниц: цвета, ссылки, границы, эффекты наведения и перехода, шрифты и т.д.
• Простота и эффективность — возможность легко создавать и настраивать стили одновременно для множества веб-страниц.
• Экономия времени — вы можете один раз написать таблицы стилей и затем многократно использовать их для неограниченного количества страниц.
• Высокая скорость загрузки страниц — благодаря CSS существенно сокращается длина кода HTML, что, в свою очередь, приводит к более быстрой загрузке веб-страниц.

Основы CSS

CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы. Основы CSS помогут вам понять, что вам нужно для начала работы. Мы ответим на такие вопросы как: Как сделать мой текст черным или красным? Как сделать так, чтобы контент появлялся в определённом месте на экране? Как украсить мою веб-страницу с помощью фоновых изображений и цветов?

Так что же такое CSS?

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

Давайте попробуем: вставьте эти три строки CSS в новый файл в ваш текстовый редактор, а затем сохраните файл как style.css в вашей папке styles .

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

Откройте ваш файл index.html и вставьте следующую строку куда-нибудь в шапку, между и тегами:

link href="styles/style.css" rel="stylesheet" type="text/css" /> 

Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!

Анатомия набора правил CSS

Давайте взглянем на вышеупомянутый CSS немного более подробно:

Вся структура называется набором правил (но зачастую для краткости «правило»). Отметим также имена отдельных частей:

Имя HTML-элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p ). Для стилизации другого элемента, просто измените селектор.

Единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать.

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

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

Обратите внимание на важные части синтаксиса:

• Каждый набор правил (кроме селектора) должен быть обёрнут в фигурные скобки ( <> ).
• В каждом объявлении необходимо использовать двоеточие ( : ), чтобы отделить свойство от его значений.
• В каждом наборе правил вы должны использовать точку с запятой ( ; ), чтобы отделить каждое объявление от следующего.

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

p  color: red; width: 500px; border: 1px solid black; > 

Выбор нескольких элементов

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

p, li, h1  color: red; > 

Разные типы селекторов

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

Имя селектора	Что выбирает	Пример
Селектор элемента (иногда называемый селектором тега или типа)	Все HTML-элемент(ы) указанного типа.	p Выбирает
ID селектор	Элемент на странице с указанным ID на данной HTML. Лучше всего использовать один элемент для каждого ID (и конечно один ID для каждого элемента), даже если вам разрешено использовать один и тот же ID для нескольких элементов.	#my-id Выбирает или
Селектор класса	Элемент(ы) на странице с указанным классом (множество экземпляров класса может объявляться на странице).	.my-class Выбирает и
Селектор атрибута	Элемент(ы) на странице с указанным атрибутом.	img[src] Выбирает но не
Селектор псевдокласса	Указанные элемент(ы), но только в случае определённого состояния, например, при наведении курсора.	a:hover Выбирает , но только тогда, когда указатель мыши наведён на ссылку.

Существует ещё много селекторов для изучения, и вы можете найти более подробный список в нашем Руководстве селекторов (en-US) .

Шрифты и текст

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

Прежде всего, вернитесь и найдите вывод из Google Fonts, который вы уже где-то сохранили. Добавьте элемент где-нибудь внутри шапки вашего index.html (снова, в любом месте между тегами и ). Это будет выглядеть примерно так:

link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" /> 

html  font-size: 10px; /* px значит 'пиксели': базовый шрифт будет 10 пикселей в высоту */ font-family: placeholder: здесь должно быть имя шрифта из Google fonts > 

Примечание: Все в CSS документе между /* и */ является CSS комментарием, который браузер игнорирует при исполнении кода. Это место, где вы можете написать полезные заметки о том, что вы делаете.

h1  font-size: 60px; text-align: center; > p, li  font-size: 16px; line-height: 2; letter-spacing: 1px; > 

Вы можете настроить значения px так, как вам нравится, чтобы ваш дизайн выглядел так, как вы хотите, но, в общем, ваш дизайн должен выглядеть вот так:

Блоки, блоки и ещё раз блоки

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

Не удивительно, макет CSS основан, главным образом, на блочной модели (box model). Каждый из блоков, занимающий пространство на вашей странице имеет такие свойства, как:

• padding , пространство только вокруг контента (например, вокруг абзаца текста)
• border , сплошная линия, которая расположена рядом с padding
• margin , пространство вокруг внешней стороны элемента

В этом разделе мы также используем:

• width (ширину элемента)
• background-color , цвет позади контента и padding элементов
• color , цвет контента элемента (обычно текста)
• text-shadow : устанавливает тень на тексте внутри элемента
• display : устанавливает режим отображения элемента (пока что не волнуйтесь об этом)

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

Изменение цвета страницы

html  background-color: #00539f; > 

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

Разбираемся с телом

body  width: 600px; margin: 0 auto; background-color: #ff9500; padding: 0 20px 20px 20px; border: 5px solid black; > 

• width: 600px; — заставляет тело быть всегда 600 пикселей в ширину.
• margin: 0 auto; — когда вы устанавливаете два значения для таких свойств как margin или padding , первое значение элемента влияет на верхнюю и нижнюю сторону (делает их 0 в данном случае), и второе значение на левую и правую сторону (здесь, auto является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано здесь.
• background-color: #FF9500; — как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для элемента, но не стесняйтесь и экспериментируйте.
• padding: 0 20px 20px 20px; — у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.
• border: 5px solid black; — просто устанавливает сплошную чёрную рамку шириной 5 пикселей со всех сторон тела.

Позиционирование и стилизация нашего заголовка главной страницы

h1  margin: 0; padding: 20px 0; color: #00539f; text-shadow: 3px 3px 1px black; > 

Вы, возможно, заметили, что есть ужасный разрыв в верхней части тела. Это происходит, потому что браузеры применяют некоторый стиль по умолчанию для элемента (en-US) (по сравнению с другими), даже если вы не применяли какой-либо CSS вообще! Это может звучать как плохая идея, но мы хотим, чтобы веб-страница без стилей имела базовую читаемость. Чтобы избавиться от разрыва, мы переопределили стиль по умолчанию, установив margin: 0; .

Затем мы установили заголовку верхний и нижний padding на 20 пикселей, и сделали текст заголовка того же цвета, как и цвет фона html.

Здесь, мы использовали одно довольно интересное свойство — это text-shadow , которое применяет тень к текстовому контенту элемента. Оно имеет следующие четыре значения:

• Первое значение пикселей задаёт горизонтальное смещение тени от текста — как далеко она движется поперёк: отрицательное значение должно двигать её влево.
• Второе значение пикселей задаёт вертикальное смещение тени от текста — как далеко она движется вниз, в этом примере: отрицательное значение должно переместить её вверх.
• Третье значение пикселей задаёт радиус размытия тени — большее значение будет означать более размытую тень.
• Четвёртое значение задаёт основной цвет тени.

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

Центрирование изображения

img  display: block; margin: 0 auto; > 

Примечание: Приведённые выше инструкции предполагают, что вы используете изображение меньшей ширины, чем заданная для (600px). Если ваше изображение больше, тогда оно выйдет за границы и займёт пространство страницы. Чтобы исправить это, вы можете: 1) уменьши ширину изображения используя графический редактор, или 2) изменить размер изображения используя CSS путём установки свойства width для меньше, чем у .

Примечание: Не стоит беспокоиться, если вы ещё не понимаете display: block; и различия между блочным/строчным. Вы поймёте, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве display.

Заключение

Если вы следовали всем инструкциям в этой статье, вы должны получить страницу, которая выглядит примерно так (вы также можете посмотреть нашу версию здесь):

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

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

В этом модуле

• Установка базового программного обеспечения
• Каким должен быть ваш веб-сайт?
• Работа с файлами
• Основы HTML
• Основы CSS
• Основы JavaScript
• Публикация вашего веб-сайта
• Как работает Веб

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.