Css самоучитель: Самоучитель CSS | htmlbook.ru

 

    

         Полное имя: 
        
    
    

         Адрес электронной почты: 
        
    
    

         Размер компании: 
        <выберите необходимый>
             Выберите вариант 
             1–10 
             10–50 
             50–100 
             100+ 
        
    
     Запросить демонстрацию 

     
 

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

• focus: outline-none - удаляет стиль контура фокуса по умолчанию браузеров при фокусировке на элементе
• граница - добавляет ширину границы в 1 пиксель к элементу
• border-gray-200 - делает цвет рамки более светлым оттенком серого
• bg-white - добавляет белый фон к элементу

Поздравляем! Теперь вы закончили страницу с адаптивной панелью навигации и раздел героя с формой регистрации с использованием Tailwind CSS.Следующие несколько разделов этого руководства будут посвящены настройке проекта с использованием файла конфигурации и уменьшению окончательного размера файла CSS путем его очистки на основе классов, используемых в ваших шаблонах HTML.

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

Хотя стандартный набор классов из Tailwind CSS предлагает большое количество вариантов стилей, скорее всего, вам потребуется настроить свойства дизайна проекта, такие как шрифт, цвета, размеры, интервалы, ширину контейнера и многое другое.

Чтобы изменить базовый шрифт вашего проекта, сначала вам нужно сделать шрифт доступным в вашем проекте. Нам нравится шрифт Nunito от Google Fonts, но вы можете выбрать другой, исходя из своих предпочтений или требований проекта. Включите шрифт в тег в файл index.html :

После этого не забудьте поменять местами значения по умолчанию для семейства шрифтов, используемых Tailwind CSS в tailwinding.config.js файл:

 
module.exports = {
    удалять: [],
    тема: {
        семейство шрифтов: {
        sans: ['Nunito', 'sans-serif'],
        отображать: ['Nunito', 'sans-serif'],
        body: ['Nunito', 'sans-serif']
        },
        продлевать: {}
    },
    варианты: {},
    плагины: [
        require ('tailwindcss'),
        требуется ('автопрефиксатор')
    ]
}
     
 

Если вы запустите следующую команду в своем терминале, она обработает вашу конфигурацию и файл main.css и обновите указанное вами семейство шрифтов:

 
npx tailwindcss build main.css -o output.css
     
 

Если вы обновите главную страницу, вы увидите, что шрифт был изменен на Nunito из Google Fonts.

Расширение CSS Tailwind пользовательскими цветами

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

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

 
продлевать: {
    цвета: {
        первичный: '# EA755E',
        вторичный: '# BD675F'
    }
}
     
 

Если вы снова используете команду построения в терминале, добавленные вами цвета теперь доступны с классами Tailwind CSS, и вы можете применить эти цвета к тексту, фону, границам и многому другому.Примером использования может быть основной текст , основной границы или bg-основной .

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

Уменьшите время загрузки и размер файла, удалив неиспользуемые классы из вашего CSS

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

Хорошая новость заключается в том, что вы можете легко уменьшить размер файла, удалив неиспользуемые классы CSS с помощью функции очистки в файле tailwind.config.js .

Добавьте в файл конфигурации следующую строку кода:

 
удалять: {
    включено: правда,
    содержание: [
        './**/*.html'
    ]
}
     
 

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

Вы можете больше узнать о функции Purge CSS в официальной документации.

Заключение и резюме

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

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

Руководство для начинающих по изучению CSS с примерами

Это руководство по CSS предназначено как для новичков, так и для профессионалов в изучении стилей веб-страниц. CSS контролирует дизайн, внешний вид и поведение веб-страницы.

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

Ключевые моменты CSS

• Полная форма CSS - это каскадные таблицы стилей
• Последняя версия CSS - CSS3
• CSS определяет общее представление HTML-документа с помощью цветов и шрифтов.
• Создателем CSS является Хакон Виум Ли в 1994 году.
• Вы можете отображать одни и те же страницы по-разному на экранах разных размеров.
• Может использоваться для создания анимации и эффектов перехода на веб-страницах.
• Вы можете определить CSS во внешних файлах (с расширением .css) и добавить файл на HTML-страницы.

Что такое CSS?

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

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

Простой пример CSS

Ниже приведен простой пример CSS, который применяет CSS к элементу HTML

. Он применяет CSS font-size и цвет к элементу абзаца.

Проверить это вживую

п{
размер шрифта: 23 пикселя;
цвет синий;
}

Вы можете нажать кнопку «Test it Live», чтобы увидеть работающий из приведенного выше примера вживую.

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

Часто задаваемые вопросы в учебнике CSS

1. Каковы основы CSS?

Ответ : Основы CSS приведены ниже:

• Полная форма CSS - это каскадные таблицы стилей.
• CSS3 - последняя версия CSS.
• CSS определяет общее представление веб-документов.
• CSS создан Хаконом Виум Ли в 1994 году и представлен W3C в 1996 году.
• Может использоваться для создания анимации, эффектов перехода, цветов, шрифтов и т. Д.
• Вы можете определить CSS во внешних файлах (с расширением .css) и добавить файл на HTML-страницы.

2. Легко ли выучить CSS?

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

3. Как лучше всего изучать CSS?

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

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

4. Как быстро я могу изучить CSS?

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

5. С чего начать с CSS?

Ответ : Вы можете начать с размещения CSS встраиваемых в элементы HTML, используя атрибуты стиля в

6.Стоит ли изучать CSS?

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

7. Что я должен сначала изучить HTML или CSS?

Ответ : Чтобы начать изучение CSS, рекомендуется сначала изучить HTML.

8. Могу ли я получить работу, просто зная HTML и CSS?

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

9. Какой редактор использовать для CSS?

Ответ : Вы можете использовать редактор Notepad ++ для CSS. Чтобы узнать, как установить редактор Notepad ++ в свою компьютерную систему, вы можете прочитать наше руководство по установке редактора Notepad ++.

Похожие сообщения

Учебное пособие по

CSS - Введение в CSS

»
CSS »
Учебное пособие по CSS - Введение в CSS

CSS и HTML

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

Что вы узнаете из этого урока CSS :

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

Сказав это, я предлагаю вам прочитать этот учебник CSS

Введение - Почему мы используем CSS

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

Введение - Что такое CSS. Общие концепции

CSS означает Каскадные таблицы стилей и в основном используется для настройки элементов HTML. В

, когда был представлен HTML 3.2, были также добавлены новые атрибуты для настройки тегов, такие как шрифт, цвет, фон и т. Д.В этот момент HTML стало действительно сложно писать и поддерживать. Вам придется редактировать каждую страницу и / или элемент на сайте.

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