CSS урок 1. Добавление стилей

*** SPAN 1: Следует прямо за div 2 ***

Результат:

CSS стили. Методы добавления

CSS — Cascading Style Sheets (каскадные таблицы стилей) — это средство, позволяющее задавать различные визуальные свойства html-тегам

Рассмотрим основные методы добавления стилей:

• Встраивание (inline)
• Вложение (embeding)
• Связывание (linking)
• Импорт

Метод встраивания (inline) в CSS

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

= "свойство1: значение; свойство2: значение; . . .">;

Рассмотрим основные понятия, встречающиеся при использовании стилей.

Пример: Первый абзац без стилей, ко второму абзацу применен стиль

>Обычный текст>

p style="color:red; background:#cccccc">Абзац с методом встраивания/p>

Результат:

Абзац с методом встраивания

Метод вложения (embeding) CSS

Метод вложения или внутренний стиль описывается в области head веб-страницы.

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

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

> ="text/css"> p{ color:red; background:#cccccc; } > > > >Абзац1> >Абзац2> .

Результат:

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

Пример использования вложенного стиля для разных селекторов (тегов)

> ="text/css"> h1 { border-width: 1; border: groove; text-align: center; color: green } h2 { color: maroon; font-style: italic } body { background-color: #FF0000; } . >

Метод связывания (Linking) в CSS

Это самый надежный и самый эффективный способ использования каскадных таблиц стилей.

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

Чтобы подключить к странице файл с таблицами стилей, надо использовать элемент LINK в секции HEAD :

Задание css1_1.

• Используя метод встраивания определите цвет текста элемента h1.
• Используя метод вложения определите задний фон страницы.
• Используя метод связывания определите написание параграфа курсивным стилем.

Работайте над текстом:

body> h1>В моей душе/h1> p> Я хочу быть ребенком, наивным и смелым,br/> Ничего не бояться и верить в добро.br/> Я бы снова писала по черному белым:br/> Два плюс два - ну, четыре, конечно равно! /p>

В моей душе

Я хочу быть ребенком, наивным и смелым,
Ничего не бояться и верить в добро.
Я бы снова писала по черному белым:
Два плюс два — ну, четыре, конечно равно!

Подключение стилей CSS к HTML документу. Как подключить CSS файл

Каскадные таблицы стилей CSS (Cascading Style Sheets) нужны для оформления страниц вашего сайта в соответствии с разработанным стилем, дизайном.

Таблицы стилей CSS являются неотъемлемой частью страниц современного сайта. Рассмотрим как подключить CSS к HTML странице сайта.

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

Подключение CSS через внешний файл стилей тегом link

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

Чтобы подключить CSS файл, в head области страницы используйте следующую конструкцию:

В атрибуте href необходимо указать URL адрес файла, содержащего набор стилей CSS. Атрибуты rel=»stylesheet» и type=»text/css» указывают, что указанный файл является таблицей стиля в формате CSS.

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

Добавление CSS с помощью тега style

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

 
/* CSS код */ 

CSS стили для конкретного тега атрибутом style

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

текст

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

Inline-стили также обычно используются, когда вы редактируете контент через программы — визуальные редакторы WYSIWYG .

Стили CSS через JavaScript

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

В JavaScript, при использовании библиотеки jQuery, есть много различных функций для управления стилями HTML элементов. Например, функция .css() — задает CSS стиль для элемента, .hide() — добавление элементу CSS свойства display: none; (скрытие элемента) и др.

При использовании этих функций CSS свойства добавляются в style атрибут тега.

Пример подключения CSS к HTML странице описанными выше способами

Ниже приведен код простой HTML страницы с подключением CSS стилей различными способами.

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

 
 
 
 
 
 
 
  
 
Таблица моделей некоторых смартфонов Samsung.

 
 
 
 
.model_table margin: 10px; 
width: 100%; 
> 
.model_table tr:nth-child(even) background-color: #efefef; 
> 
.model_table tr:hover background-color: #cfcfcf; 
> 
 
 
 
Скрыть модели февраля
 
 
 
Модели февраля 
 
Samsung Galaxy A10 
2019, февраль 
 
Samsung Galaxy A30 
2019, февраль 
 
Samsung Galaxy A50 
2019, февраль 
  
 
Модели марта 
 
Samsung Galaxy A20 
2019, март 
 
Samsung Galaxy A40 
2019, март 
 
 
 
*В таблице указаны предварительные данные.

 
 
 
document.getElementById('model_table_hide_btn').addEventListener("click", function () document.getElementById('model_table_winter').style.display = 'none'; 
>); 

Результат приведенного выше кода:

Таблица моделей некоторых смартфонов Samsung.

Скрыть модели февраля

Модели февраля
Samsung Galaxy A10	2019, февраль
Samsung Galaxy A30	2019, февраль
Samsung Galaxy A50	2019, февраль

Модели марта
Samsung Galaxy A20	2019, март
Samsung Galaxy A40	2019, март

*В таблице указаны предварительные данные.

Всё, что вам нужно знать о CSS-in-JS

Краткая выжимка статьи — поговорим о компонентном подходе к CSS. Больше нет необходимости в поддержке множества CSS-файлов. CSS-in-JS делает логику CSS абстракцией уровня компонента, а не уровня документа (используя принцип модульности).

Пример со стилизованным React-компонентом

Предположу, что вы слышали термины «CSS-in-JS», «стилизованные компоненты», «Radium», «Aphrodite», но не стали в них вникать, думая: «Ну и зачем это всё нужно? Мне вполне хватает CSS-in-CSS (обычного кода CSS в .css-файлах).»

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

CSS-in-JS — непростая тема, полная противоречий, и я призываю к непредвзятой позиции. Посмотрите, может ли этот инструмент улучшить ваш рабочий процесс. Это единственное, что имеет значение.

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

Дадим ей шанс показать себя в деле.

CSS проекта, размер которого уже ближе к среднему

Что такое CSS-in-JS?

JSS — более мощная абстракция над CSS. Он использует Javascript в качестве языка для описания стилей в декларативном и удобном в поддержке виде. Это высокопроизводительный компилятор из JS в CSS, который работает и на стороне сервера, и на стороне клиента в реальном времени. Это низкоуровневая и не привязанная к какому-либо фреймворку библиотека. Она весит около 6KB (миницифированная и сжатая gzip). Ее можно расширить при помощи API для плагинов. — источник

Имейте ввиду, что inline-стили и CSS-in-JS — не одно и тоже! Это две разные вещи. Сейчас продемонстрирую.

Как работают inline-стили

В браузере это добавится к DOM-узлу таким образом:

Как работает CSS-in-JS

В браузере это добавится к DOM-узлу таким образом:

Разница

Видите эту небольшую разницу? CSS-in-JS добавился в виде тега вверху дерева DOM, тогда как inline-стили добавились к DOM-узлу в виде свойств (в атрибут style — прим. переводчика).

Какое это имеет значение?

Не все возможности CSS могут быть реализованы при помощи обработчиков событий JavaScript, невозможно использовать многие из псевдоселекторов (типа :disabled, :before, :nth-child ), нельзя назначить стили тегам html и body и так далее.

С CSS-in-JS вся мощь CSS всегда под рукой. Поскольку генерируется настоящий CSS-код (в отличие от inline-стилей, где свойства прописаны в атрибуте style — прим. переводчика), вы можете использовать любые медиавыражения и псевдоселекторы, какие только захотите. Некоторые библиотеки (типа jss, styled-components) даже добавляют поддержку изящных возможностей, не нативных для CSS, типа вложенности.

«Да просто пишите CSS-in-CSS и забудьте об этой ерунде.»

Всё верно, мы так и делали с незапамятных времен. Но проблема в том, что современный веб строится не страницами, а компонентами.

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

Для сброса напряжения посмотрите, как Боб Росс рисует камушки 🙂
(по ссылке откроется анимация, 15 MB — прим. переводчика)

В чем плюсы использования CSS-in-JS?

• Компонентный подход к CSS. Больше нет необходимости в поддержке множества CSS-файлов. CSS-in-JS делает логику CSS абстракцией уровня компонента, а не уровня документа (используя принцип модульности).
• CSS-in-JS использует всю мощь JavaScript для расширения возможностей CSS.
• «Настоящая изоляция CSS-правил». Ограничения видимости селекторов недостаточно. В CSS есть свойства, которые, если не заданы явно, автоматически наследуются от родительских элементов. Но, благодаря плагину jss-isolate, JSS-правила не наследуют свойств.
• Селекторы с ограниченной областью видимости. В CSS есть только одно глобальное пространство имен. Невозможно избежать коллизий селекторов, если только речь идет не об элементарном проекте. Соглашения о наименованиях, вроде БЭМ, могут помочь в рамках одного проекта, но не тогда, когда мы включаем в него сторонний код. JSS генерирует уникальные имена классов по умолчанию при компиляции JSON-представления в CSS.
• Браузерные префиксы автоматически проставляются в CSS-правила, так что вам не нужно вообще о них думать.
• Совместное использование кода. JS и CSS легко используют одни и те же константы и функции.
• В DOM находятся только те стили, которые на данный момент используются для отображения элементов на экране (react-jss).
• Удаление мертвого кода.
• Модульное тестирование CSS.

В чем минусы использования CSS-in-JS?

• Сначала надо научиться пользоваться.
• Новые зависимости.
• Новым участникам команды труднее вникать в то, как организован код. Новичкам фронтенда придется изучать больше всяких инструментов.
• Отказ от привычного подхода (впрочем, это не обязательно минус).

Плюсы явно перевешивают минусы! Так давайте же дадим CSS-in-JS шанс! Нам нечего терять!

Самые популярные библиотеки CSS-in-JS

Я привожу простой «Hello World!» пример, используя все популярные библиотеки для CSS-in-JS. Выбирайте, какая вам больше нравится, исходя из синтаксиса.

npm trends (статистика загрузок, по которой можно отследить популярность раличных инструментов — прим. переводчика)

Styled Components

import React, < Component >from 'react'; import styled from 'styled-components'; const Title = styled.h1` color: white; `; const Wrapper = styled.div` background: black ` class App extends Component < render() < return (   ); > > export default App; 

JSS-React

import React from 'react' import injectSheet from 'react-jss' const styles = < wrapper: < background: 'black' >, title: < color: 'white' >> const App = () => ( 
> 
> Hello JSS-React!
 
 ) export default injectSheet(styles)(App) 

Glamorous

import React from 'react' import glamorous from 'glamorous' const Wrapper = glamorous.div(< backgroundColor: 'black' >) const Title = glamorous.h1(< color: 'white' >) const App = () => (    ) export default App; 

Radium (предупреждение: использует inline-стили)

import React, < Component >from 'react'; import Radium from 'radium'; @Radium // decorator class App extends Component < render() < const styles = < wrapper: < background: 'blue', >title: < color: 'white' >>; return ( 
> 
>Hello Radium!
 
 ); > > export default Radium(App); 

Обратите внимание еще на то, что Radium использует декораторы.

Aphrodite

import React, < Component >from 'react'; import < StyleSheet, css >from 'aphrodite'; const styles = StyleSheet.create(< wrapper: < backgroundColor: 'red' >, title: < backgroundColor: 'blue' >>); class App extends Component < render() < return ( > >Hello Aphrodite! ; ) > > 

Stylotron

import React, < Component >from 'react'; import < styled >from 'styletron-react'; const Wrapper = styled('div', < backgroundColor: 'black' >) const Title = styled('h1', < color: 'white' >) class App extends Component < render() < return ( Hello Styletron! ; ) > > 

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

Отличная статья, в деталях рассказывающая обо всех возможностях CSS-in-JS.

Нравится нам это или нет, но подход CSS-in-JS заслуживает того, чтобы его попробовать.

P.S. Это тоже может быть интересно:

• Укрощаем режимы наложения: difference и exclusion
• Чтобы быть впереди веба, веб-стандартам нужно бежать в два раза быстрее
• Голограммы, пленочные засветки и шейдеры на чистом CSS

Если вам понравилась статья, поделитесь ей!

11 комментариев

Гхм. В минусы я бы первым и самым жирным пунктом добавил, что мы заменяем конструкцию вида, скажем, createElement(‘div’, < …attrs >, children) на createElement(StyledClass, < …attrs >, children). Стало бы на каждый такой элемент мы заставляем React делать wrapper. Бррр. Столько оверхеда на ровном месте. Бррр. Или я не правильно понимаю принцип работы? Просто пока у вас маленькое приложение вам в принципе плевать, что и как делать. Даже замедлив его в 10 раз оно вроде будет шевелиться. Но мы же про SPA. Там в порядке вещей сложные вещи. Для примера какие-нибудь таблицы (а это сразу оочень много DOM). Если такое увлекаться wrapper-ами… в общем лучше не увлекаться.

Алексей :

Из статьи не понятно будет ли CSS-in-JS для каждого компонента создавать style в head страницы. Если так то в минусы надо еще записать увеличение времени загрузки страницы. Насколько я понимаю каждый style заставить браузер перестраивать CSSOM учитывая новые найденные правила css. Так же ничего не сказано о отладке стилей — со всеми этими уникальными именами классов. Чтобы найти нужное свойство в исходном коде придется сначала понять что за компонент смотришь, найти его в js и т.д.? Есть ли поддержка редакторами кода? Т.е. использование автодополнения, emmet, других удобных инструментов. Модульные стили (как и вообще подход к разработке) это здорово. Но ИМХО лучше подождать (т.к. поддержка в браузерах пока слабая)и использовать для этого веб-компоненты. Или не ждать и использовать polymer.
В компонентах есть все что описано в преимуществах CSS-in-JS (Компонентный подход, Селекторы с ограниченной областью видимости, В DOM находятся только те стили, которые на данный момент используются) и нет описанных выше недостатков. А вещи вроде подстановки браузерных префиксов или «использует всю мощь JavaScript для расширения возможностей CSS» ИМХО лучше делать с помощью postcss при сборке проекта.

Я работал только с jss, имена классов в DOM выглядят так: Example-root-1 — где Example — название компонента, а root название класса. И если ты пишешь на React, то в принципе у тебя в папке с компонентом лежат компонент и стили, с отладкой ничего сложного.

Николай Громов :

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

Синтаксис написания достаточно прост, не обязательно jss стили писать в файле с основным компонентом, просто выносишь в отдельный файл и описываешь все стили там в одном объекте, это похоже на обычный css: const styles = < root: < backgdoundColor: ‘red’, fontSize: ’12px’ >, someStyle: < color: ‘#FFFFFF’, border: ‘1px solid black’, ‘&:hover’: <
background:’none’
> >, > Просто описываешь стили в виде объекта в отдельном файле и импортишь его в компонент.

Лев Солнцев :

Надо переиспользовать стили. CSS: добавляешь селектор через запятую, styled-components: копируешь всю портянку стилей, и надо не забывать дублировать все изменения кода. extend не предлагать — нужен другой тег.

Сергей :

Вы не разобрались в работе styled-components. Например, есть метод withComponent, который это делает. Выносить общие стили и потом их переиспользовать никто не запрещает, про extend вы и сами написали. Более того import < css >from styled-components позволяет писать только css-код, а потом добавлять его внутрь какого угодно тэга. Т.е. ещё один вариант композиции стилей. Сам я вижу другую проблему в css-in-js. Мало какая технология позволяет эти стили выделить в css-файл на моменте сборке, чтобы их можно было держать где-то на cdn, облегчить генерацию стилей на клиенте

Как вставить на страницу inline js?

Добавляет теги и дает атрибут src с именем файла с js кодом.

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

• Вопрос задан более трёх лет назад
• 375 просмотров

3 комментария

Оценить 3 комментария

А обернуть этот код в функцию и выполнять при надобности нельзя?

Андрей Федоров @aliencash Автор вопроса
Никита Полевой: ) Черт. ) Так и знал что раз это не гуглится, значит нубский вопрос. )
Мда, Вам бы сначала книжку прочитать какую-нибудь или курс пройти.
Решения вопроса 0
Ответы на вопрос 1

Антон Артёмов @ArtyomovAnton
PHP и всё что рядом
Мне кажется неверный подход к разработке у Вас.
Ответ написан более трёх лет назад

Андрей Федоров @aliencash Автор вопроса

Антон Артёмов @ArtyomovAnton

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

Андрей Федоров @aliencash Автор вопроса

Антон Артёмов, у меня задача облегчить и ускорить загрузку сайта. У меня грузится много сторонних скриптов — рекапча для формы обратного звонка, поиск по сайту и т.п. Так вот, зачем мне грузить рекапчу, если пользователь еще не открыл модальное окно с формой, или зачем грузить скрипт поиска по сайту если пользователь не поставил курсор в поле поиска? В чем тут неверный подход?

Антон Артёмов @ArtyomovAnton

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

Андрей Федоров @aliencash Автор вопроса

Антон Артёмов, к задаче может быть я подошел не так как это принято в современной разработке, поскольку не в курсе как надо подходить. Но она решена так или иначе. Попробую на примере объяснить. у яндекса есть сервис — поиск по сайту. Для его использования предлагается вставить на сайт некий код, который вставляет форму поиска на сайт и подгружает скрипт //site.yandex.net/v2.0/js/all.js который грузит еще 3 скрипта и после этого поиск становится возможным. Итого 4 загрузки со стороннего сайта, для возможности, которая нужна не всем пользователям.
Я модифицировал инлайн-код яндекс.поиск по сайту таким образом, что он грузит //site.yandex.net/v2.0/js/all.js и всех его потомков, только когда пользователь поставил курсор в поле поиска. профит.

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