Кот |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Кот » Архив обучения от 03.12 » Shata -> ПокемонкО
И еще раз добрый вечер.
Я уже говорила, что каскадные таблицы стилей - это производная, несамостоятельная величина. Они придуманы для того, чтобы облегчить запись HTML-кода. Поэтому начинать надо сначала.
Покопавшись в Гугле, я нашла вот такую ссылку: http://kek.ksu.ru/eos/tests/LTags.html
Цвет фона там ужасный, зато написано очень толково. Советую скопировать куда-нибудь и прочитать.
Пока не потеряла:
FAQ по дизайнам
Отредактировано Shata (2013-02-13 19:58:52)
Да-да, еще раз)) (где-то пятый))
Хорошо, начну изучать.
Код:<html><body> <title>Горобец</title> <b><i><big>Богдан Горобец</big></i></b> <u>24.05</u> <small>Киев Там же</small> Еще учусь <ul> <li>Салат с Краб. палочек <li>Овощной суп <li>Картошка <li>Чай) </ul> <ol> <li>Верстка <li>Графика</ol> </body></html>
<html>
<body bgcolor='yellow'>
Текст-Текст-Текст-Текст...
<a href='vtoroy_dokument.html'> второй документ </a>
</body>
</html>
---<html>
<body background='http://gotowall.com/wallpapers/[gotowall.com]20111231_150540_5278.jpg'>
Текст-Текст-Текст-Текст...
<a href='pervyy dokument.html'> первый документ </a>
</body>
</html>
Отредактировано ПокемонкО (2013-02-13 18:51:07)
готово. прочитал и полностью доделал задания
Хорошо.
Чаще всего нам придется работать с тегом <div>...</div>. Этот тег задает блок или контейнер. Сейчас большинство сайтов размечены именно с помощью блоков. Обычно есть отдельный контейнер для шапки, для меню, для копирайта и прочей информации в самом низу страницы и, собственно, для основного контента. Внутри одного блока могут быть другие, причем уровень вложенности не ограничен.
Блоки удобны тем, что с помощью того самого пресловутого CSS их можно располагать на странице как угодно друг относительно друга. Например, один закрепить, а остальные прокручивать или один прилепить к левому краю, другой - к правому. Вот тут и начинается разгул фантазии.
Как это выглядит в коде:
Допустим, у нас есть два блока:
<div>Текст один</div>
<div>Текст два</div>
И мы хотим что-то с ними сделать. В первую очередь, чтобы как-то отличать их друг от друга, им присваиваются уникальные имена через свойство id:
<div id="first">Текст один</div>
<div id="second">Текст один</div>
Теперь компьютер, да и мы тоже, может их различать. Пора знакомиться с загадочным зверем CSS.
CSS - это по сути все атрибуты каждого элемента html-кода, выписанные в отдельном месте, чтобы не загромождать основной код. Ну действительно: если у нас первый блок с зеленой рамочкой, вытянут в высоту, прилеплен куда-то и с жирным шрифтом, а второй имеет еще два десятка свойств, то пихать все это в код - каша получится. Можно сделать компактнее и аккуратнее, вот так:
<html> <style> </head> | <html> <style> </head> |
Отделение мух от котлет - это вообще любимое занятие программистов.
Отредактировано Shata (2013-02-13 19:50:26)
прочитал
Хорошо. Добавим, что, помимо id элементам кода можно задать еще свойство class. Это тоже идентификатор, но не уникальный. Например, если у нас сайт-блог, там куча однотипных постов, каждый, разумеется, заключен в свой блок, то их все надо оформить одинаково. Зачем каждому из них присваивать уникальное имя? Им можно присвоить класс:
<div class="post">...</div>
И задавать свойства для всех сразу.
А так же свойства CSS можно задавать вообще напрямую тегам. Например, всем div-ам или всем ссылкам.
Идем дальше.
Структура кода CSS очень простая:
селектор {свойство: значение; свойство значение; свойство: значение}
селектор {свойство: значение; свойство: значение}
Селектор - это, собственно, id, class или тег, которому мы хотим задать свойства. Чтобы компьютер не искал элементы с id "div" или, наоборот, тег "brahmaputra" в коде, перед id всегда добавляют знак #, а перед классом точку.
Таким образом, если у нас есть вот такой блок:
<div id="index" class="pun">...</div>
То, в CSS его можно записать так:
div {background: #000} - причем тогда цвет фона задастся для вообще всех блоков div в коде
.pun {background: #000} - и тогда цвет фона изменится для всех элементов со значением класса "pun"
#index {background: #000} - и вот тут цвет фона изменится только для нашего блока
Других видов селекторов не бывает.
Переходим к свойствам. Свойств бывает много и разных. Их можно посмотреть, например, тут. Вообще, советую прочитать эту статью, теперь она должна быть достаточно понятна.
Отредактировано Shata (2013-02-13 20:54:25)
прочитал и это
Практическая часть.
Адрес тестовика: http://shatatest.rusff.me
И статья о расположении блоков в дизайне mybb. Из нее можно понять структуру форума.
На тестовик зарегистрировался, статью прочитал (хоть мы уже с предыдущим учителем более-менее разобрались с селекторами и прочим. Как я понял, теперь все будет происходить через Хтмл-верх/низ, а не через свой стиль?
Вы здесь » Кот » Архив обучения от 03.12 » Shata -> ПокемонкО
