Кот

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Кот » Архив обучения от 03.12 » Shata -> ПокемонкО


Shata -> ПокемонкО

Сообщений 1 страница 10 из 12

1

И еще раз добрый вечер.

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

Покопавшись в Гугле, я нашла вот такую ссылку: http://kek.ksu.ru/eos/tests/LTags.html
Цвет фона там ужасный, зато написано очень толково. Советую скопировать куда-нибудь и прочитать.

Пока не потеряла:
FAQ по дизайнам

Отредактировано Shata (2013-02-13 19:58:52)

0

2

Да-да, еще раз)) (где-то пятый))

Хорошо, начну изучать.

0

3

1-3 задания
Код:
<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>
4-5 задания

<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)

+1

4

готово. прочитал и полностью доделал задания

0

5

Хорошо.
Чаще всего нам придется работать с тегом <div>...</div>. Этот тег задает блок или контейнер. Сейчас большинство сайтов размечены именно с помощью блоков. Обычно есть отдельный контейнер для шапки, для меню, для копирайта и прочей информации в самом низу страницы и, собственно, для основного контента. Внутри одного блока могут быть другие, причем уровень вложенности не ограничен.
Блоки удобны тем, что с помощью того самого пресловутого CSS их можно располагать на странице как угодно друг относительно друга. Например, один закрепить, а остальные прокручивать или один прилепить к левому краю, другой - к правому. Вот тут и начинается разгул фантазии.
Как это выглядит в коде:

Допустим, у нас есть два блока:
<div>Текст один</div>
<div>Текст два</div>

И мы хотим что-то с ними сделать. В первую очередь, чтобы как-то отличать их друг от друга, им присваиваются уникальные имена через свойство id:

<div id="first">Текст один</div>
<div id="second">Текст один</div>

Теперь компьютер, да и мы тоже, может их различать. Пора знакомиться с загадочным зверем CSS.
CSS - это по сути все атрибуты каждого элемента html-кода, выписанные в отдельном месте, чтобы не загромождать основной код. Ну действительно: если у нас первый блок с зеленой рамочкой, вытянут в высоту, прилеплен куда-то и с жирным шрифтом, а второй имеет еще два десятка свойств, то пихать все это в код - каша получится. Можно сделать компактнее и аккуратнее, вот так:

<html>
<head>

<style>
...вот сюда записываем все css-стили всех элементов...
</style>

</head>
</body>
...а здесь оставляем только разметку...
</body>
</html>

<html>
<head>

<style>
#first {background: #ccc;
color: #000}
#second {width: 50%}
</style>

</head>
</body>
<div id="first">Текст один</div>
<div id="second">Текст один</div>
</body>
</html>

Отделение мух от котлет - это вообще любимое занятие программистов.

Отредактировано Shata (2013-02-13 19:50:26)

0

6

прочитал

0

7

Хорошо. Добавим, что, помимо 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)

0

8

прочитал и это

0

9

Практическая часть.

Адрес тестовика: http://shatatest.rusff.ru

И статья о расположении блоков в дизайне mybb. Из нее можно понять структуру форума.

0

10

На тестовик зарегистрировался, статью прочитал (хоть мы уже с предыдущим учителем более-менее разобрались с селекторами и прочим. Как я понял, теперь все будет происходить через Хтмл-верх/низ, а не через свой стиль?

0


Вы здесь » Кот » Архив обучения от 03.12 » Shata -> ПокемонкО


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC