 |
|
|
CSS
| |
 Tishina | Дата: Понедельник, 15.08.2011, 13:49 | Post # 1 |
 Создатель Клана
Предводитель Табуна
Постов: 3952
Статус: Offline
| Как известно, любой HTML/XHTML-документ состоит из элементов (тегов), образующих некую иерархию. Веб-мастер использует CSS, чтобы принудить браузер определенным образом оформить и отобразить содержимое элементов, превратив его в красиво оформленный документ.
Практически любой элемент браузер воспринимает как прямоугольную область, так, как показано в примере ниже. Это поведение браузера назвается Box Model ("блочная" или "коробочная" модель).
Предположим, мы имеем на входе:
<span>Какой-то контент</span>
В приведенном примере бордюры изображены для наглядности, по умолчанию они имеют нулевую толщину и не видны.
Благодаря CSS мы можем переопределить характеристики каждого блока-прямоугольника - его положение на странице, цвета, толщину и наличие границ, а также шрифт и оформление содержимого блока.
Прямоугольная область, содержащая элемент, состоит из четырёх частей. Это:
Собственно, содержимое элемента (контент)
Бордюр (рамка, англ. "border")
Пространство между содержимым элемента и бордюром (англ. "padding").
Внешнее пространство между бордюром и невидимой границей прямоугольника (англ. "margin").
Существует два типа элементов - блочные ("block") и внутритекстовые ("inline", можно называть как "встроенные").
Блочные (block) элементы
Занимают до 100% ширины родительского элемента. При этом соседним элементам придется подвинуться вниз. Так, например, h1 является блочным элементом - всякий следующий за ним элемент будет отображен ниже.
Inline- ("инлайн"-) элементы
Имеют ширину как у своего содержимого. Это означает, что два и более inline-элемента могут располагаться последовательно на одной линии. Например, тег a - это inline-элемент. Он может находиться прямо в тексте, окруженный текстом с двух сторон.
Любой веб-браузер содержит некий базовый встроенный набор правил, и знает, какой XHTML-элемент относится к типу "block", а какой - к "inline". Согласно этим правилам браузер рисует h1 заголовки шрифтом, вдвое превышающим размер обычного шрифта, а гиперссылки по умолчанию отображаются синими с подчеркиванием.
С помощью CSS мы можем переопределять эти правила, влияя на отображение прямоугольников элементов. CSS позволяет задавать свойства, определяющие цвет шрифта, фона и бордюра, стиль и ширину бордюра, ширину полей и отступов и многое-многое другое.
1998-2010 © Владимир Городулин
 
"Не полагайся на то, что враг не придет, полагайся на средства, которыми располагаешь, чтобы принять его."
«Враг гонял меня по всей стране, уничтожая мои земли, разрушал все крепости, захватывая заложников и оставляя разрушенными города..пока я наконец-то не выиграл, как и планировал заранее.»©
Я давно уже тут, срослась с этими стенами..я и есть они.
|
| |
| |
| Tishina | Дата: Понедельник, 15.08.2011, 13:54 | Post # 2 |
|
Создатель Клана
Предводитель Табуна
Постов: 3952
Статус: Offline
| Визуальные редакторы не требуют от вас знаний html, css и прочих технологий для разметки страниц. В визуальном редакторе вы располагаете различные элементы вашего сайта, как будто на листе бумаги, а редактор пишет за вас код самостоятельно. Именно поэтому визуальные редакторы еще называют WYSIWYG-редакторами. Аббревиатура WYSIWYG расшифровывается как What You See Is What You Get - что видишь, то и получаешь.
Однако, следует заметить, что ни один визуальный редактор не совершенен и все они так или иначе ограничены в своих возможностях, а от профессиональных кодеров требуется умение писать код руками, именно поэтому профессиональным кодерам часто нужны небольшие текстовые редакторы. В текстовых редакторах, как правило, бывают разные функции облегчающие кодеру написание кода, такие, как подсветка кода (так легче видеть, где в коде вставлены стили, или скрипты, а где просто текст), различные горячие кнопки и клавиши, которые вставляют уже готовые конструкции (куски кода, спецсимволы) в код, и т.д.
Замечу, что в визуальных редакторах есть аналогичные возможности. В плане использования их в роли текстовых редакторов, от последних визуальные отличает большой размер и зачастую излишняя громоздкость интерфейса.
Вот, можете скачать се пару хороших прог..если влом учить хтмл >:-)
HTML - это не язык программирования, как многие думают.
HTML - это язык разметки гипертекстовых документов ((H)yper(T)ext(M)arkup(L)anguage).
Его назначение - определять структуру документа.
Язык html составляет набор тэгов. Это директивы браузеру, которые указывают ему структуру Вашего документа. За внешний вид отвечает технология — CSS. Для того, чтобы научиться делать страницы, по сути, нужно выучить набор тэгов и их аттрибутов и все! Какие тэги нужно знать?
Основные: html, head, title, body;
Структурные: div, span;
Текстовые: p, ul, ol, li, h1-h6, br, em, strong, b, i;
Таблицы: table, tr, td, th;
Ссылки: a;
Мультимедиа: img, object;
Фреймы: frameset, frame, iframe;
Формы: form, input, textarea, label, select, option;
Факультативные: hr;
Специальные: script, link, meta;
Тэгов не так уж и много. Однако, их изучение может занять некоторое время, потому что многие из этих тэгов могут снабжаться атрибутами, которые заставляют эти элементы вести себя по другому.
Подготовка к работе
Создайте директорию (папку) и назовите ее, например mysite.
В основной директории создайте папки для необходимых файлов (фото, музыка и т.д.).
Все необходимые файлы разместите в соответствующие папки.
Названия папок, файлов пишутся латинскими буквами и цифрами, без пробелов.
Оптимизируйте графику (вес картинок в пределах 1 - 100kb, расширения JPG, GIF, PNG).
Когда закончите работу на компьютере, загрузите все файлы на сервер в том же порядке, какой у Вас в папке mysite, то есть, если картинки расположены в папке (к примеру) images, тогда и на сервере они должны находиться в папке с таким же названием.
Загружать файлы сайта удобнее по FTP
Для загрузки файлов по FTP откройте Internet Explorer и в адресной строке введите
ftp://логин:пароль@ftp.narod.ru
вместо слов "логин" и "пароль" впишите свои логин и пароль на народ.ру
Или из мастерской идите по ссылке "Управление файлами и HTML-редактор" там вверху жмите на ссылку "загрузить файлы"
Внимание! Имена загружаемых файлов не должны содержать недопустимые символы, например, символы «пробел», русские буквы и т.д. Имя файла должно состоять из латинских букв, цифр, знаков дефис и подчеркивание, может содержать точку.
Официальная (вступительная) часть закончена, можете переходить на другие страницы. Если Вы новичок и совсем незнакомы с версткой, лучше начать со страницы о табличной верстке
"Не полагайся на то, что враг не придет, полагайся на средства, которыми располагаешь, чтобы принять его."
«Враг гонял меня по всей стране, уничтожая мои земли, разрушал все крепости, захватывая заложников и оставляя разрушенными города..пока я наконец-то не выиграл, как и планировал заранее.»©
Я давно уже тут, срослась с этими стенами..я и есть они.
|
| |
| |
| Tishina | Дата: Понедельник, 15.08.2011, 13:59 | Post # 3 |
|
Создатель Клана
Предводитель Табуна
Постов: 3952
Статус: Offline
| Основные теги страницы
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> объявление типа документа
<html lang="ru"> начало html кода
<head> начало блока информации для браузеров
<title>учебная страница</title>— это название страницы
<meta...> подробнее о мета тегах здесь
<link rel="stylesheet" type="text/css" href="ссылка на файл css">
Тег <link> определяет ссылку. В отличие от тега A, тег LINK может располагаться только в части заголовка HEAD документа. Информация, указанная в элементе LINK, может по-разному обрабатываться броузерами, в зависимости от указанных атрибутов.
<link rel="icon" href="ссылка на картинку ico" type="image/x-icon"> иконка
</head> конец блока информации для браузеров
<body> начало тела страницы
содержимое страницы
</body> конец тела страницы
</html> конец html кода
Таблицы
Для большинства страниц достаточно совсем небольшого количества тегов.
Теги таблиц
<table> открывающий тег таблицы
<tr>тег - начало строки
<th> открывающий тег ячейки
содержимое ячейки - table header (заголовок таблицы)
текст внутри этих тегов будет выделен полужирным шрифтом и отцентрирован
</th> закрывающий тег ячейки
</tr> тег - конец строки
эти теги создают новый ряд (строку) ячеек
<tr> тег - начало строки
<td> открывающий тег ячейки
содержимое ячейки
</td> закрывающий тег ячейки
</tr> тег - конец строки
</table> закрывающий тег таблицы
Атрибуты
width - ширина таблицы указывается в "%" или в пикселях "800"
border - толщина рамки
cellspacing - расстояние между ячейками
cellpadding - расстояние между рамкой ячейки и текстом
align - выравнивание по горизонтали ( по умолчанию слева="left" центр="center" справа="right" )
valign - выравнивание по вертикали ( верх="top" середина="middle" низ="bottom" )
colspan=x - количество ячеек по горизонтали
rowspan=x - количество ячеек по вертикали
"Не полагайся на то, что враг не придет, полагайся на средства, которыми располагаешь, чтобы принять его."
«Враг гонял меня по всей стране, уничтожая мои земли, разрушал все крепости, захватывая заложников и оставляя разрушенными города..пока я наконец-то не выиграл, как и планировал заранее.»©
Я давно уже тут, срослась с этими стенами..я и есть они.
|
| |
| |
| Tishina | Дата: Понедельник, 15.08.2011, 14:07 | Post # 4 |
|
Создатель Клана
Предводитель Табуна
Постов: 3952
Статус: Offline
| <table> открывающий тег таблицы
<tr>тег - начало строки
<th> открывающий тег ячейки
содержимое ячейки - table header (заголовок таблицы)
текст внутри этих тегов будет выделен полужирным шрифтом и отцентрирован
</th> закрывающий тег ячейки
</tr> тег - конец строки
эти теги создают новый ряд (строку) ячеек
<tr> тег - начало строки
<td> открывающий тег ячейки
содержимое ячейки
</td> закрывающий тег ячейки
</tr> тег - конец строки
</table> закрывающий тег таблицы
URL - адрес фотографии (http://www.ваш сайт/папка/фото.jpg)
папка - название папки с фотографией (латинскими буквами без_пробелов)
фото - название фотографии (латинскими буквами без_пробелов)
jpg - расширение фотографии (допускается - jpg, gif, png)
width - укажите ширину фотографии
height - укажите высоту фотографии
alt - при отключенной графике посетитель увидит альтернативный текст
Основные теги страницы
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> объявление типа документа
<html lang="ru"> начало html кода
<head> начало блока информации для браузеров
<title>учебная страница</title>— это название страницы
<meta...> подробнее о мета тегах здесь
<link rel="stylesheet" type="text/css" href="ссылка на файл css">
Тег <link> определяет ссылку. В отличие от тега A, тег LINK может располагаться только в части заголовка HEAD документа. Информация, указанная в элементе LINK, может по-разному обрабатываться броузерами, в зависимости от указанных атрибутов.
<link rel="icon" href="ссылка на картинку ico" type="image/x-icon"> иконка
</head> конец блока информации для браузеров
<body> начало тела страницы
содержимое страницы
</body> конец тела страницы
</html> конец html кода
"Не полагайся на то, что враг не придет, полагайся на средства, которыми располагаешь, чтобы принять его."
«Враг гонял меня по всей стране, уничтожая мои земли, разрушал все крепости, захватывая заложников и оставляя разрушенными города..пока я наконец-то не выиграл, как и планировал заранее.»©
Я давно уже тут, срослась с этими стенами..я и есть они.
|
| |
| |
| Tishina | Дата: Понедельник, 15.08.2011, 14:29 | Post # 5 |
|
Создатель Клана
Предводитель Табуна
Постов: 3952
Статус: Offline
| CSS (Cascading Style Sheets — каскадные таблицы стилей) – одна из базовых технологий в современном Интернете. Нечасто можно встретить сайт, свёрстанный без примененения CSS.
CSS-код – это список инструкций для браузера, – как и где отображать элементы веб-страницы, написанный особым образом. Под «элементами» обычно подразумеваются теги XHTML/HTML и их содержимое.
Правила хорошего CSS
Расскажу о своих правилах, которые я использую в любом файле CSS.
Зачем это нужно ? Во первых, ваш CSS-файл будет легче читаться и восприниматься. Во вторых, хороший стиль написания это всегда плюс. Ну и в третьих, это намного упрощает жизнь.
1. Всё должно быть абсолютно валидным. Я стараюсь избежать даже warning’ов.
2. Старайтесь комментировать как можно больше.
Даже очевидным вещам не помешают комментарии. Например перед блоком header я пишу /* Шапка */, перед footer /* Подвал */. Вроде очевидно, но мельком просматривая код, зацепиться глазом намного легче, особенно если файл стилей разбит на логические блоки.
3. Разбивайте файл на логические блоки.
Каждый логический блок от другого отделяется пустой строкой. Блоки идут в логическом порядке, сначала подготовки(CSS reset и другие мелочи), затем блок body, после него идут блоки настроек основных компонентов(ссылок, параграфов, заголовков и т.д.).
С помощью блоков и комментариев просматривать и находить что-то в файле стилей становится безумно удобно и просто.
4. Сортируйте свойства CSS по алфавиту.
По началу немножко трудно, особенно для тех, кто не шибко знаком с английским алфавитом. Но в дальнейшем привыкаешь и уже автоматом пишешь свойства по алфавиту. Безумно упрощает редактирование.
5. Используйте иерархию.
Иерархия довольно удобная вещь. Например, имеет заголовок(<header>), в который вложено 2 блока(<div id=”h_left”> и <div id=”h_right”>), очень приятно для глаза будет описать эти блоки в иерархическом порядке.
1
body { … короткий … }
1
2
3
4
5
body {<br />
…<br />
длинный<br />
…<br />
}
Если свойств очень мало, то зачем писать длинный блок? Упростим как чтение, так и размер файла стилей.
7. Определитесь со стилем написания.
Например, я использую для отступа табуляцию, для построения иерархии 2 пробела. Каждому свойству я задаю значение после пробела( text-align: center; )
8. Обязательно используйте CSS Reset.
Ставить заплатки(костыли) под разные браузеры уже не модно. IE6 официально умер. Большую часть всего можно верстать валидно используя CSS Reset. О CSS Reset я более подробно остановлюсь в одном из следующих моих постов.
Надеюсь, мои советы вам.ггг) У вас есть замечания или дополнения? Пишите в комментариях, буду рада услышать ваше мнение 
"Не полагайся на то, что враг не придет, полагайся на средства, которыми располагаешь, чтобы принять его."
«Враг гонял меня по всей стране, уничтожая мои земли, разрушал все крепости, захватывая заложников и оставляя разрушенными города..пока я наконец-то не выиграл, как и планировал заранее.»©
Я давно уже тут, срослась с этими стенами..я и есть они.
|
| |
| |
| Tishina | Дата: Понедельник, 15.08.2011, 14:35 | Post # 6 |
|
Создатель Клана
Предводитель Табуна
Постов: 3952
Статус: Offline
| Свойства CSS
background
background-attachment
background-color
background-image
background-position
background-repeat
border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
bottom
caption-side
clear
clip
color
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
float
font
font-family
font-size
font-style
font-variant
font-weight
height
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
orphans
outline
outline-color
outline-style
outline-width
overflow
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
position
quotes
right
table-layout
text-align
text-decoration
text-indent
text-transform
top
vertical-align
visibility
white-space
widows
width
word-spacing
z-in
А вот отличный мануал по шифровке из http://css.manual.ru/
Хороший сайт для начинающих веб-мастеров http://dweb.ru/3d/3d2.php
"Не полагайся на то, что враг не придет, полагайся на средства, которыми располагаешь, чтобы принять его."
«Враг гонял меня по всей стране, уничтожая мои земли, разрушал все крепости, захватывая заложников и оставляя разрушенными города..пока я наконец-то не выиграл, как и планировал заранее.»©
Я давно уже тут, срослась с этими стенами..я и есть они.
|
| |
| |
 |
 |
Ancient Horse 