Вы многому научились за пару коротки уроков. Это нас очень
впечатлило! Давайте быстро пройдемся по пройденному материалу, чтобы убедиться,
что вы действительно все усвоили.
задание
подсказка
решение index.html
решение stylesheet.css
вторник, 6 августа 2013 г.
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 это то, что вы можете установить несколько свойств для
одного селектора. Например, если вы хотите задать абзацу шрифт, цвет шрифта и
размер шрифта, то вам достаточно написать:
p{
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 файле
написать:
p{
color:red;
}
Свойство это аспект селектора. Например, вы можете изменить
шрифт, цвет и размер шрифта на веб-страницах (и многое другое).
Значение это любое возможное значение для свойства. Например,
если мы написали в свойствах цвет то, значение для него будет красный, синий,
зеленый или любой другой возможный цвет. Если в свойствах мы написали семейство
шрифтов, то значением для него будет любой из множества доступных шрифтов.
Не забывайте заканчивать каждое значение точкой с запятой (;).
Так вы даете знать css что закончили с этой
парой и надо переходить дальше.
задание
подсказка
решение stylesheet.css
четверг, 1 августа 2013 г.
CSS: An Overview. What's CSS? #6
Вот мы и подошли к концепции самозакрывающихся тегов.
Вы никогда не увидите <link></link>
и это нормально использовать единый набор <>, в котором тег одновременно
и открывается и закрывается. Вы делали это
следующим образом:
< link
type="text/css" rel="stylesheet" href="адрес css файла"/>
Возможно вы заметили сходство с тегом <img>:
<img
src=”веб-адрес”/>
Большинство тегов не самозакрывающиеся, но не надо забывать
и про самозакрывающиеся, это поможет сохранить вам время и силы.
Если все в понятно, то нажмите “Сохранить и отправить код”
чтобы продолжить наше изучение 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
Подписаться на:
Сообщения
(
Atom
)