Главная страница Случайная страница
Разделы сайта
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Создание файла СSS
⇐ ПредыдущаяСтр 5 из 5
|
|
Документ CSS - этот отдельный документ, который создается с помощью текстового редактора и сохраняется как стандартный текстовый файл, с расширением файла .css (например styles.css).
В текстовый документ вводится информация следующим образом:
| Имя тега свойство, которого надо изменить | { | свойство | : | значение свойства | ; | } |
Например, файл такого содержания определяет серебристый фон страницы:
body {background-color: silver; }
| Название | Значения | Тэги | Описание |
| Font-size | 13px | Все | Задает размер шрифта |
| Font-family | Arial, Times new roman и т.д. | Все | Задает гарнитуру шрифта |
| Font-weight | Значениия от 100 до 900, либо normal, bold, bolder, lighter | Все | Задает толщину шрифта |
| Font-style | Italic, normal, oblique | Все | Задает начертание текста, соответственно курсивное, обычное наклонное. |
| border | 1px solid #000000 | Все | Устанавливает параметры рамки. Параметры необходимо задавать именно в таком виде: ширина рамки в пикселях, стиль и цвет. Варианты стиля: dotted, dashed, solid, double, groove, ridge. Также можно задавать стили для отдельных границ: правая, левая и т.п. С помощью свойств border-right, border-left, border-top, border-bottom. |
| background | #ff0000 или red или URL(image.jpg) | Все | Задает фон. В первых двух случаях цвет фона, в третьем – изображение. |
| Background-repeat | Repeat, repeat-x, repeat-y, no-repeat | Все | Управляет дублированием изображения установленного для фона. Соответственно: - изображение дублируется во всех направлениях - дублируется по оси Х. - дублируется по оси У. - не дублируется. |
| color | #ff0000 или red | Все | Задает цвет шрифта внутри элемента |
| Text-align | Left, right, center | Все | Задает выравнивание текста внутри элемента |
| Vertical-align | Top, Bottom, middle | td | Задает вертикальное выравнивание содержимого ячейки таблицы |
| Text-decoration | None, underline, overline, line-through | Все | Задает параметры текста, соответственно: обычный, подчеркнутый, с линией сверху, перечеркнутый. |
| Text-transform | Capitalize, uppercase, lowercase, none | Все | Преобразует текст соответственно: Первая буква становится заглавной, Все буквы заглавные, Все буквы строчные, без преобразования. |
| Cursor | Crosshair, pointer, move и т.п. | Все | Задает стиль отображения курсора над элементом. |
| width | 100px | Все | Задает ширину элемента |
| height | 100px | Все | Задает высоту элемента |
| padding | 10px | Все | Определяет отступ между содержимым и границами элемента в пикселях. Также может быть использован с суффиксами Padding-left, padding-right, padding-top, padding-bottom. Для установки соответственно отступов слева, справа, сверху и снизу. |
| margin | 10px | Все | Определяет отступ от элемента снаружи. Может быть использован с суффиксами: Margin-left, margin-right, margin-top, margin-bottom. |
Таблица основных тегов языка HTML
| ТЭГИ | НАЗНАЧЕНИЕ |
| < html> < /html> | Указывает программе просмотра страниц, что это HTML документ. Данные тэги обрамляют документ |
| < head> < /head> | Определяет место, где помещается различная информация, не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин |
| < title> < /title> | Помещает название документа в оглавление программы просмотра страниц |
| < body> < /body> | Определяет видимую часть документа |
Для создания своей первой страницы недостаточно знать основные теги. Необходимо научиться форматировать текст соответствующим образом. Для этого используются теги для форматирования текста. Они представлены в следующей таблице:
Таблица тегов для форматирования текста
| ТЕГИ | НАЗНАЧЕНИЕ | |
| < hl> < /hl> < h6x/h6> | Задает размер заголовка | |
| < pre> < /pre> | Обрамляет предварительно отформатированный текст | |
| < b> < /b> | Жирное начертание шрифта | |
| < i> < /i> | Начертание Курсив | |
| < tt> < /tt> | Имитация стиля печатной машинки | |
| < cite> < /cite> | Используется для цитат, обычно наклонный текст | |
| < strong> < /strong> | Используется для выделения наиболее важных частей текста (наклонный или жирный текст) | |
| < p> | Начало нового абзаца | |
| < p align=...> | Выравнивает абзац относительно одной из сторон документа, значения: left, right, или center | |
| < br> | Вставляет перевод строки | |
| < blockquote> < /blockquote> | Создает отступы с обеих сторон текста. | |
| < font size=...> < /font> | Устанавливает размер текста в пределах от 1 до 7 | |
| < font color=.. > < /font> | Устанавливает цвет текста, используя значение цвета в виде RRGGBB | |
| < font face=.. > < /font> | Устанавливает вид текста (например Times New Roman, Calibri, Arial и т. д.) | |
| < fontbase face=… color=….size=…> | Устанавливает три предыдущих параметра в одном теге | |
| < TT> < /TT> | Текст ф иксированной ширины | |
| < u> < /u> | подчеркнутый текст | |
| < S> < /S> | перечеркнутый текст | |
| < BIG> < BR> | шрифт большего размера | |
| < SMALL> < /SMALL> | шрифт меньшего размера | |
| < body bgcolor=...> | Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0OOO - красный цвет | |
| < body text=...> | Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет |
Теги состоят из ключевых слов и могут быть дополнены атрибутами, разделенными пробелами. Описание атрибутов без использования ключевых слов не допускается.
Таблица тегов для работы с графическими изображениями
| < img атрибуты> | Тег для вставки изображения |
| Src=”x” | атрибут src определяет месторасположение файла с изображением. |
| Width=”x” | – ширина прямоугольника, выделяемого браузера для изображения, в пикселях. |
| Height=”x” | – высота прямоугольника, выделяемого браузером для изображения, в пикселях. |
| Border=”x” | атрибут border используется для добавления рамки вокруг изображения. Значение x – целое число. |
| Align=”x” | - с помощью этого атрибута изображения можно выровнять на странице по горизонтали и вертикали. |
| Alt=”описание” | описание появляется на экране графических браузеров во время загрузки изображения, которая может быть длительной. Описание появляется также, когда указатель мыши проходит по изображению. |
Таблица цветов
| Цвет | шестнадцатеричное представление |
| black | |
| silver | C0C0C0 |
| gray | |
| white | FFFFFF |
| maroon | |
| red | FF0000 |
| purple | |
| fuchsia | FF00FF |
| green | |
| lime | 00FF00 |
| olive | |
| yellow | FFFF00 |
| navy | |
| blue | 0000FF |
| teal | |
| aqua | 00FFFF |
|
|