Учебник css


  • Введение
    Краткое введение. О чём здесь речь.
  • Урок 1: Что такое CSS?
    Немного о том, почему появился CSS и почему лучше использовать CSS поверх HTML для дизайна страниц.
  • Урок 2: Как работает CSS?
    Основы синтаксиса CSS и создание вашей первой таблицы стилей.
  • Урок 3: Цвет и фон
    Как работать с цветом и фоном на вашем web-сайте и как использовать фоновый рисунок.
  • Урок 4: Шрифт
    Здесь вы узнаете о работе со шрифтами в CSS.
  • Урок 5: Текст
    Замечательные возможности CSS при работе с текстом.
  • Урок 6: Ссылки
    Как добавить к ссылкам различные эффекты и как работать с псевдоклассами.
  • Урок 7: Идентификация и группирование элементов (class и id)
    Подробно об использовании class и id для специфицирования свойств выбранных элементов.
  • Урок 8: Группирование элементов  (span и div)
    Подробно об использовании в CSS span и div как важнейших HTML-элементов.

  • Урок 9: Боксовая модель
    Боксовая модель в CSS описывает боксы, генерируемые для HTML-элементов.
  • Урок 10: Боксовая модель — поля & заполнение
    Изменение представления элементов свойствами margin и padding
  • Урок 11: Боксовая модель — рамки
    Опции использования рамок на ваших страницах с помощью CSS.
  • Урок 12: Боксовая модель — высота и ширина
    В это уроке мы рассмотрим, как легко можно определить высоту и ширину элемента.
  • Урок 13: Всплывающие элементы (поплавки)
    Элемент может «всплывать» справа или слева с помощью свойства float
  • Урок 14: Позиционирование элементов
    С помощью позиционирования CSS вы можете поместить элемент точно там, где это нужно на вашей странице.
  • Урок 15: Наслоение с помощью z-index (Слои)
    В этом уроке мы рассмотрим, как редактировать перекрывание элементов с помощью layers
  • Урок 16: Web-стандарты и проверка кода
    Этот последний урок — о W3C-стандартах и о том, как проверить корректность вашего CSS-кода.

ru.html.net

Язык HTML

Язык HTML — это основа web сайтов, с его помощью создается каркас страницы, которую вы видите в браузере.

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

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

Что такое HTML теги?


HTML теги — это специальные команды для браузера. Они говорят ему, что, к примеру, следует считать заголовком страницы, а что абзацем.

Теги строятся по такому принципу: уголок <, потом имя тега, а потом уголок >, вот так: <имя тега>. Имя тега может состоять из английских букв и цифр. Примеры тегов: <h1>, <p>, <b>.

Теги обычно пишутся парами — открывающий тег и соответствующий ему закрывающий. Разница между открывающим и закрывающим тегами в том, что в закрывающем теге после уголка < стоит слеш /.

К примеру, <p> — так я открыл тег p, а так — </p> — я его закрыл. Все, что попадает между открывающим и закрывающим тегами, подпадает под воздействие нашего тега.

Бывают теги, которые не нужно закрывать, например, <br> или <img>.

Атрибуты

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

Атрибуты размещаются внутри открывающего тега в таком формате: <тег атрибут1=»значение» атрибут2=»значение»>.

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

Язык CSS


Язык CSS расширяет возможности языка HTML. Он позволяет менять цвета, шрифты, фон, в общем заниматься красотой сайта. А HTML, соответственно, отвечает за структуру сайта.

Итак, приступим

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

code.mu

  • Главная»
  • Уроки»
  • CSS учебник, бесплатные уроки CSS для начинающих

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

Бесплатные уроки CSS для начинающих

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

  • Учебник css

    Забавные эффекты для букв

    Небольшой эффект с интерактивной анимацией букв.


  • Учебник css

    Реализация забавных подсказок

    Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

  • Учебник css

    Анимированные буквы

    Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

  • Учебник css

    Солнцезащитные очки от первого лица

    Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

  • Учебник css

    Раскрывающаяся навигация

    Экспериментальный скрипт раскрывающейся навигации.

  • Учебник css

    Анимация фона при прокрутке страницы

    Анимируем SVG фигуры при прокрутке страницы.

  • Учебник css

    Пример 3D помещения выставки

    Экспериментальная 3D проекция помещения галереи.


ruseller.com

Что такое css?

Если Вы уже прошли курс обучения по учебнику HTML (http://webremeslo.ru/html/glava0.html) или же хорошо знакомы с HTML почерпнув необходимые знания из других источников, то настало время взяться за изучение CSS.

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

Ну и что? Спросите Вы.. Зачем мне этот пресловутый CSS? Я и HTML-ом в чистом виде неплохо обходился!

Приведу ряд доводов в пользу использования CSS:

HTML в чистом виде имеет весьма ограниченный набор инструментов не позволяющий решать те или иные дизайнерские и функциональные задумки веб-мастера. Ну вот хотя бы, к примеру, взять больной вопрос всех начинающих веб-ремесленников «Как убрать подчеркивание ссылки?» или «Как сделать чтобы наведя курсором на эту самую ссылку она меняла цвет и подсвечивалась?» с помощью одного HTML этого никак не сделать!! А сколько их еще таких «больных вопросов»? — тьма.. Тут то и приходит на помощь CSS, который решает большинство задач касающихся дизайна сайта.


Предположим, Вы написали сайт в нем 100 страниц.. хороший сайт, информативный, люди на него ходят.. И вдруг по каким либо причинам Вам понадобилось изменить его дизайн, ну не знаю, мода изменилась, Вы нашли более лучшее дизайнерское решение, заказчику пришлось не по душе.. да мало ли еще почему.. Сколько времени и сил у Вас уйдёт на то что бы полностью переделать все 100 страниц сайта? CSS предлагает разумное решение этой задачи. А что если один раз в отдельном файле полностью описать весь дизайн сайта? Допустим: все заголовки <h1> делать красным цветом, параграфы <p> писать курсивам, ссылки <a> не подчёркивать 🙂 фон на всех страницах залить зелёным, и т. д. … а потом просто заставить эти 100 страниц HTML обращаться к файлу CSS и черпать из него нужную информацию? Теперь когда Вам вздумается, к примеру, перекрасить все заголовки из красного в зеленый, Вам ненужно открывать все 100 страниц находить в них теги <h1> и указывать в каждом что ты теперь не красный а зелёный! Вам нужно всего лишь открыть файл описание и изменить в нем цвет элемента <h1> на зелёный и всё!! Все заголовки на всех страницах сайта как по взмаху волшебной палочки станут зелеными.

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


Ну как? Заинтриговал? Если да то рекомендую перейти к непосредственному изучению CSS. В главах этого учебника Вы научитесь внедрять каскадные таблицы стилей на страницы Вашего сайта, познакомитесь с основными стилевыми свойствами элементов на примере создания сайта с использованием CSS, вникните в тонкости и хитрости дела. Если Вы уже знакомы c каскадными таблицами стилей и Вас интересует исключительно справочная информация, то предлагаю заглянуть в справочник CSS (http://webremeslo.ru/spravka/spravka4.html) где собранны и кратко описаны свойства CSS и их возможные значения.

studfiles.net

182

Веб-программирование — Учебник CSS3

Почти бессмысленно пытаться создать современный веб-сайт, не используя возможностей CSS (Cascading Style Sheet). Этот стандарт воткан в ткань Всемирной сети почти так же плотно, как и HTML. Каскадные таблицы стилей являются основным средством для любого типа деятельности в области веб-дизайна, будь то компоновка страниц, создание интерактивных кнопок и меню или простое декорирование. По сути, в то время как фокус HTML все больше смещается на содержимое и семантику, спецификация CSS стала центральной технологией веб-дизайна.


CSS3

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

Таким образом, разработчики браузеров могут реализовывать наиболее интересные и популярные части стандарта в первую очередь (что они и так уже делали, с модулями или без них). Всем этим новым модулям CSS было присвоено коллективное название CSS3 (обратите внимание на необычное отсутствие пробела, как и с HTML5).

Спецификация CSS3 содержит около 50 модулей разной степени завершенности. Возможности этих модулей широки: от предоставления декоративного оформления (такого как расширенные шрифты и анимация) до реализации более специализированного функционала (например, чтение текста или изменение стилей в зависимости от возможностей компьютера или мобильного устройства). В целом, эти модули содержат как надежно поддерживаемые возможности самыми последними версиями всех современных браузеров, так и экспериментальные.

professorweb.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.