Ниачем

воскресенье, 1 сентября 2013 г.

CSS: An Overview. Details, Details #1

А что теперь?

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

Вы заметили, что когда мы просили вас задать в вашем css красный цвет, то мы имели ввиду цвет:красный. Возможно, вы задавались вопросом, а что если я хочу бордовый? Или цвет пожарной машины? Или же красно-оранжевый? Знает ли css все эти цвета?

Ответ на этот вопрос нет. Однако он может понимать миллионы цветов написанные в виде шестнадцатеричного значения.

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

Шестнадцатеричный счет идет по основанию-16. Каждая цифра может принимать значение от 0 до 9 и буквы от a до f! Сума сойти? Вы можете проверить это:

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

вторник, 6 августа 2013 г.

CSS: An Overview. CSS Syntax #6

Проверь себя прежде чем идти дальше

Вы многому научились за пару коротки уроков. Это нас очень впечатлило! Давайте быстро пройдемся по пройденному материалу, чтобы убедиться, что вы действительно все усвоили.

задание

подсказка

решение index.html

решение stylesheet.css

CSS: An Overview. CSS Syntax #5

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

Отлично! У вас действительно все получается.

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

Как вы помните комментарии в html выглядели так:

<!—я комментарий !-->

CSS комментарии выглядят по-другому:

/* я комментарий*/

Помните: компьютер не воспринимает то что написано в комментариях но писать их является хорошим тоном.

задание

решение stylesheet.css

понедельник, 5 августа 2013 г.

CSS: An Overview. CSS Syntax #4

Важность точки с запятой

Когда вы все больше пар свойство-значение главное не забывать поставить точку с запятой в конце каждой строки.

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

Кроме того не забывайте что все пары свойство-значение должны быть в фигурных скобках (“{}”)для каждого селектора.

задание

решение stylesheet.css

CSS: An Overview. CSS Syntax #3

Больше селекторов, больше свойств

Хорошая работа! Говорят чем больше практики, тем лучше, давайте же еще немного попрактикуемся. (Мы узнаем больше о селекторах в следующих курсах)

задание

подсказка

решение stylesheet.css

пятница, 2 августа 2013 г.

CSS: An Overview. CSS Syntax #2

Один селектор, множество свойств

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

font-family:Arial;

color:blue;

font-size:24;

}

Главное не забывайте в конце каждой пары ставить точку с запятой!

Пожалуйста, обратите внимание, если в вашем браузере изменен масштаб отображения страницы, то наши манипуляции с размером шрифта могут отображаться неправильно. Чтобы исправить это, нажмите Ctrl+0 или Cmd+0 чтобы вернуть значения по умолчанию.

задание

подсказка

решение stylesheet.css

CSS: An Overview. CSS Syntax #1

Синтаксис залог победы

Синтаксис css отличается от того что вы привыкли видеть в html, но не надо беспокоиться: он довольно понятен! Общий формат выглядит следующим образом:

селектор{

свойство:значение;

}

Селектор это любой элемент html такой как <p>, <img> или <table>. Вы просто пишете его без кавычек <>! Допустим если вам надо сделать текст абзаца красным вы должны в вашем css файле написать:

color:red;

}

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

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

Не забывайте заканчивать каждое значение точкой с запятой (;). Так вы даете знать css что закончили с этой парой и надо переходить дальше.

задание

подсказка

решение stylesheet.css

четверг, 1 августа 2013 г.

CSS: An Overview. What's CSS? #6

PS: самозакрывающиесятеги

Вот мы и подошли к концепции самозакрывающихся тегов.

Вы никогда не увидите <link></link> и это нормально использовать единый набор <>, в котором тег одновременно и открывается и закрывается. Вы делали это следующим образом:

< link type="text/css" rel="stylesheet" href="адрес css файла"/>

Возможно вы заметили сходство с тегом <img>:

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

Если все в понятно, то нажмите “Сохранить и отправить код” чтобы продолжить наше изучение css синтаксиса.

CSS: An Overview. What's CSS? #5

Свяжите его!

Есть лучший способ.

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

Это можно сделать при помощи тега <link> (вы уже могли видеть его в первом упражнении этого курса) написанного внутри тега <head></head> вашей html страницы. Тег <link> должен содержать следующие три атрибута:

атрибут type который всегда должен быть равен “text/css”
атрибут rel который всегда равен “stylesheet”
и атрибут href который должен указывать на веб-адрес где расположен ваш css файл

В редакторе справа вы можете увидеть два файла: index.html и stylesheet.css

задание

подсказка

решение index.html

среда, 31 июля 2013 г.

CSS: An Overview. What's CSS? #4

Если он не во вне!

Ранее мы показали вам, как создается встроенный дизайн в html выглядело это так:

<p style=”color:red”>красный фон</p>

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

Существует два способа задать css один из них мы уже рассматривали (создание отдельного файла).Второй создать код css прямо на вашей html страницы для этого надо меду тегами <head></head> поместить тег <style></style> внутри которого разместить ваши параметры css. Пример такого создания css вы можете увидеть в редакторе.

Все понятно? Отлично! Нажимаем “Сохранить и отправить код” и продолжаем курс

Подписаться на: Сообщения ( Atom )

воскресенье, 1 сентября 2013 г.

вторник, 6 августа 2013 г.

понедельник, 5 августа 2013 г.

пятница, 2 августа 2013 г.

четверг, 1 августа 2013 г.

среда, 31 июля 2013 г.

воскресенье, 1 сентября 2013 г.

вторник, 6 августа 2013 г.

понедельник, 5 августа 2013 г.

пятница, 2 августа 2013 г.

четверг, 1 августа 2013 г.

среда, 31 июля 2013 г.