Урок 1. Читаем простой код.
Среда, 7 сентября 2011 г.Рубрика: Учимся читать чужой код -> CSS
Метки: html
Просмотров: 506
Подписаться на комментарии по RSS
Для чего вообще необходимо уметь читать код CSS? Допустим перед Вами будет стоять задача в некотором редактировании дизайна сайта… либо при создании дизайна Вы будете использовать готовый шаблон, в котором возникла необходимость что-то изменить. Как тогда без чтения кода? Ведь Вам необходимо понимать что и где подредактировать, чтобы достичь желаемого результата.
Поэтому уроки из рубрики «Учимся читать чужой код» в разделе CSS будут направлены на изучение основ построения CSS кода, возможных видов его написания и, конечно же, работы с самим кодом.
На этом уроке мы попробуем прочитать самые простые коды CSS.
Задача №1.
Дано:
body{
background-color:red;
}Теперь внимательно просмотрите код, и попытайтесь ответить на такие вопросы:1)Для каких целей был написан код?
2)Какие свойства задаёт данный код для выбранного элемента?
Ответы на вопросы этого и последующих заданий пишите в комментариях к данной статье в виде:
Задача №…
1)Цель кода - …
2)Свойство… задаёт элементу …
Для чего отвечать на вопросы в комментариях? Для того, чтобы мы могли просмотреть Ваши результаты и, при наличии ошибок, подсказать Вам на что следует обратить внимание!
Теперь немного усложним задачу.
Задача №2.
Дано:
body{
background-color:black;
color:red; }1)Для каких целей был написан код?2)Какие свойства задаёт данный код для выбранного элемента?
На этом наш урок закончен.
Ждём Ваших ответов! Всем удачи! До встречи на следующих уроках!
- Урок 1. Читаем простой код.
Задача №1
1)Цель кода - задать цвет для фона на вед-странице
2)Свойство background-color (цвет фона) назначается значение красный , задаёт элементу body - телу страницы
Задача №2
1)Для каких целей был написан код?
для создания страницы с черным цветом фона и красным текстом.
2)Какие свойства задаёт данный код для выбранного элемента?
черный цвет фона, и красный цвет текста
Уважаемый borisen81 ! Вы очень хорошо ответили на все вопросы, но Вам важно понять, что целью и Задачи №1 и Задачи №2 является не задание цвета фона и текста для всей страници, а задание этих свойств элементу body(тело страници). Почему так? Допустим мы имеем такой код:
body{
background-color:black;
color:yellow; }
h1, h2, h3{
color:red;
}
b{
color:green;
}
Мы ведь не можем сказать, что код задаёт свойства странице верно? Поэтому запомните - в CSS мы задаём свойства элементам страницы а не всй странице в целом!
Алёнка Ляхова, очень интересно, но статью, на мой взгляд, можно развернуть и создать намного подробнее. Чтоб меньше задавали вопросы. Допустим написать body{
background-color:red;
}
Где background может принимать разные значения, один из них это присвоения цвета «color», браузеры поддерживают некоторые цвета по их названию: шестнадцатеричный код, значения в формате RGB, HSL и описание. Пример таков:
background-color: #F9F2E3;
background-color: rgb(214,86,43);
background-color: red;
И самый наверное распространенный из функций присвоения цветов это background-color: red;. Также background принимает значение «image», и может присваивать картинку, а именно в нашем случае картинку фону нашего сайта, и обязательно должен иметь функцию «repeat», а именно определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. А сейчас мы попробуем все сложить и получить уже полу профессиональный код для CSS.
body{
background-color:red;/*установка цвета*/
background-image:url(/images/1-1.jpg);/*установка изображения и адрес к изображению*/
background-repeat:no-repeat;/*установка повтора изображения, но в нашем случае без повторения*/
}
/* */ - А вот между этими тегами хорошо бы оставлять комментарии лично для себя, на первых этапах создания дизайнов очень приятная вещь, всегда помнишь, что, и где ставил за код. И на этом еще не все! Главное помнить, что от веса вашего подключенного css кода зависит ваша скорость загрузки вашего сайта. И по этому были придуманы сокращения кода, для быстрой считки с css файла. А как это делается я сейчас покажу(минимизируем CSS код):
body{
background:red url(/images/1-1.jpg) no-repeat;/**/
}
Все тоже самое, только намного меньше написано, и быстрее грузится.
Так что Уважаемая Алёнка Ляхова, я с вашим комментарием полностью согласен, и Вы все правильно написали. Просто имею своё мнение!)
Спасибо большое за комментарий, уважаемый antidvs ! Но в этих уроках мы учимся читать чужой код, поэтому уроки будут усложняться постепенно!