Все (или почти все), Вам необходимо знать, чтобы начать с CSS

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

Итак, давайте работать!

Таблицы стилей могут быть связаны с документом в трех направлениях:

1. Связанные или импортированных;
2. Объединенного;
3. Inline.

Внешние таблицы стилей

Стилей называется внешним, когда CSS правила были объявлены в документе, в документе HTML . Стилей представляет собой отдельный файл, а HTML-файл имеет расширение. Css

Внешняя таблица стилей является идеальным для применения на нескольких страницах. С внешней таблицы стилей, вы можете изменить внешний вид всего сайта, изменив только один файл (файл таблицы стилей).

CSS-файла из внешней таблицы стилей должны быть связаны или импортированы HTML документ внутри <> теги документа. Синтаксис Обзор для lincar стилей называют estilo.css показано ниже:

Общий синтаксис для импорта стилей называют estilo.css показано ниже:

Браузер будет читать estilo.css файл правил стиля и форматирования документа соответственно.

Внешняя таблица стилей может быть записана в любом текстовом редакторе. Файл не должен содержать HTML-тегов. Таблица стилей должна быть «спасена» с. Css
Встроенные таблицы стилей или внутренних

Стилей называют встроенные или внутренний, когда правила CSS объявлены в HTML-документе.

Встроенные таблицы стилей или внутренний, идеально подходит для применения в качестве одной странице. С встроенной таблицы стилей или внутренние, вы можете изменить внешний вид только один документ, тот, где стилей включены.

Правила стиля, действительны для документов объявлены в <> раздел документа со стилем тега <> как синтаксис, показанный ниже:

Браузер теперь будет читать правила стиля на самой странице, а также форматирование документа соответственно.

Примечание: браузер обычно игнорируют неизвестные тэги. Это означает, что старый браузер не поддерживает стили, проигнорирует теги, но содержимое тега будет показано на экране. Вы можете предотвратить старый браузер, чтобы показать содержание

тег ", скрывая его" с помощью комментария HTML разметку.

Обратите внимание на включение символов (открытый комментарий) в приведенном выше коде.
Встроенные таблицы стилей

Стилей называется встроенный CSS, когда правила были объявлены в теге HTML элемент.

Встроенный стиль применяется только к HTML-элементу. Он теряет многие преимущества таблиц стилей для смешивания с содержанием презентации. Используйте этот метод, в исключительных случаях, например, когда вы хотите применить стиль к одному появлению элемента.

Синтаксис применения встроенного стиля показано ниже:

В настоящее время, наиболее важные свойства CSS:

Собственности шрифта

Свойства источников, определять характеристики (значения в CSS правила), которые являются буквы текста в HTML элементов.

Основные свойства для шрифтов и мы рассмотрим в этой статье перечислены ниже:

* Цвет: цвет шрифта ...................
Семейство шрифтов: .......... шрифта
* Размер шрифта: Размер шрифта .............
Font-стиль: стиль шрифта ............
* Font-вариант: дело ......... источников меньшего размера
Начертание шрифта: ......... темнее исходного (жирным шрифтом)
* Font: .................... сокращенный вариант для всех свойств

Допустимые значения для свойств исходного

* Цвет:
1. шестнадцатеричный код: # FFFFFF
2. RGB-код: RGB (255,235,0)
3. Имя цвета красный, синий, зеленый и т.д. ...
Семейство шрифтов:
1. семьи имя: определяется имя источника,
р. Например: "Verdana", "Helvetica", "Arial", и т.д..
2. общий семьи: определяется его родовое имя,
р. Например: "засечек", "без засечек", "скоропись" и т.д..
* Размер шрифта:
1. хх-маленький
2. X-Small
3. небольшой
4. среда
5. большой
6. X-Large
7. хх-большой
8. Меньшие
9. больше
10. Длина: мера признана CSS (рх, р, в, см, ...)
11. %
Шрифт в стиле:
1. нормальный: нормальный шрифт вертикально
2. Курсив: источник склонны
3. косой: косой источник
* Font-вариант:
1. нормально: обычный шрифт
2. капитель: дело переходит в более низкую высоту
Начертание шрифта:
1. нормальный
2. смелый
3. смелее
4. легче
5. 100
6. 200
7. 300
8. 400
9. 500
10. 600
11. 700
12. 800
13. 900

Текст собственности

Для текста, определить характеристики (значения в CSS правила) вставляются в текст HTML-элементов.

Свойства текста перечислены ниже:

* ..................... Цвет Цвет текста;
Письмо-интервал ........ * расстояние между буквами;
* ......... Word, пробелы между словами расстояние;
* Текст-align выравнивание текста ..............;
* Текст-украшение текст-украшение ......;
* ............ Текста абзаца отступ текста;
* Текст-преобразования ....... форме буквы;
* ............... Направлению к тексту;
* ......... Белого пространства, браузер поставляется в пробелы;
Допустимые значения для свойства текста

* Цвет:
1. шестнадцатеричный код: # FFFFFF
2. RGB-код: RGB (255,235,0)
3. Имя цвета красный, синий, зеленый и т.д. ...
* Письмо-интервал:
1. Нормальный: интервал по умолчанию
2. длина: мера признана CSS (рх, р, в, см, ...) имеют место отрицательные значения
* Слово-интервал:
1. Нормальный: интервал по умолчанию
2. длина: мера признана CSS (рх, р, в, см, ...) имеют место отрицательные значения
* Text-align:
1. Слева направо: выровнять текст по левому краю
2. Право: выровнять текст по правой
3. центр: выравнивание текста по центру
4. оправдание: текст силы, чтобы занять по всей длине линии слева направо
* Текст-отделка:
1. Нет: украшения
2. Подчеркнем: подчеркивание текста ставит
3. Оверлайн: Оверлайн место в тексте
4. линейный путем: положить линию над текстом
5. Blink: текст мигать
* Text-indent:
1. длина: мера признана CSS (рх, р, в, см, ...)
2. %: Процент от ширины родительского элемента
* Текст-преобразования:
1. нет: обычный текст
2. выгоду: все первые буквы текста в верхний регистр
3. заглавной, все буквы в верхнем регистре текст
4. нижний регистр: все прописные буквы в тексте
* Направление:
1. л: текст, написанный слева направо
2. RTL: текст, написанный справа налево
* Белый пространстве:
1. нормально: пробелы игнорируются в браузере
2. до: пробелы будут сохранены в браузере
3. NoWrap: текст будет отображаться вокруг него в одну строку на экране. Есть нет строки можно найти тег <>

Рентабельность по собственности

Имущество для банков, устанавливает значение для толщины края HTML элементов.

Свойства полей приведены ниже:
* Margin-топ .......... устанавливает верхний край;
* Маржа правом ........ устанавливает правому краю;
* Маржа дном ....... устанавливает нижнюю границу;
* Маржа левой ......... устанавливает левое поле;
* .............. Маржа сокращенный вариант для всех банков

Допустимые значения маржи собственности

1. авто: значение по умолчанию края
2. Длина: мера признана CSS (рх, р, в, см, ...)
3. %: Процент от ширины родительского элемента

Границы собственности

Свойства края, определить характеристики (значения в CSS правило) из четырех границ HTML элемент.

Свойства края, приведены ниже:

* Граница ширина: толщина границы ................
* Граница стиля: стиль границы ................
* Граница цвета: цвет границы ................
* --------------
* Граница-топ-ширина: толщина верхнего края ............
* Граница-топ-стиль: стиль верхнего края ............
* Граница-топ-цвет: цвет верхнего края ............
* --------------
* Граница правой ширина: толщина правого края .........
* Граница правой стиля: стиль правого края ..........
* Граница правого цвета: цвет правого края ..........
* --------------
* Граница-снизу ширина: толщина нижнего края .........
* Граница дном стиля: стиль нижнего края .........
* Граница-нижний цвет: цвет нижнего края .........
* --------------
* Граница левой ширина: толщина левого края ...........
* Граница левой стиля: стиль левого края ...........
* Граница левой цвета: цвет левого края ...........
* --------------
* Граница-топ: ... сокращенный вариант для всех свойств верхнего края
* Граница правой: .. сокращенный вариант для всех свойств от правого края
* Граница-вниз: .. сокращенный вариант для всех свойств нижнего края
* Граница налево .. сокращенный вариант для всех свойств от левого края
* Граница: ......... сокращение по всем четырем краям

Допустимые значения для свойства края

* Цвет:
1. шестнадцатеричный код: # FFFFFF
2. RGB-код: RGB (255,235,0)
3. Имя цвета красный, синий, зеленый и т.д. ...
* Стиль:
1. никто: нет границ
2. скрытых: эквивалентна ни
3. пунктирной: пунктирной границей
4. пунктирные, штриховые границы
5. Solid: Solid Edge
6. двойной: двойная граница
7. паз, зубчатый край
8. хребта: границы босса
9. Вставка: преимущество в невысоком рельефе
10. Прежде всего: края тиснением
* Ширина:
1. тонкий: тонкий край
2. среды: средняя край
3. толстая: толстые границе
4. Длина: мера признана CSS (рх, р, в, см, ...)

Обивка собственности

Недвижимость в интервал (некоторые переводят как "наполнитель"), устанавливает значение для расстояния между краями и содержание HTML элементов.

Недвижимость на расстояния, приведены ниже:

* Padding-топ .......... расстояние определяет верхнюю;
* Заполнение права ........ расстояние определяет права;
Заполнение дном * ....... определяет нижний интервал;
* Заполнение левой ......... расстояние определяет слева;
* .............. Заполнения сокращенный вариант для всех расстояний
Допустимые значения для свойств расстояния

1. авто: значение по умолчанию края
2. Длина: мера признана CSS (рх, р, в, см, ...)
3. %: Процент от ширины родительского элемента

Фон собственности

Фон свойство определяет характеристики (значения в CSS правило) из нижней части HTML-элементов.

Свойства фона, приведены ниже:

* ............... Цвет фона цвет фона;
* Фонового изображения ............. фоновое изображение;
* Фон-повтор ............. как фоновый рисунок позиционируется;
* Фон-вложение ....... фонового рисунка «катится» или не с экрана;
* Фон положении ............ как и где фоновое изображение позиционируется;
* Фон ........................ сокращенный вариант для всех свойств;

Допустимые значения для свойств фона

* Цвет фона:
1. шестнадцатеричный код: # FFFFFF
2. RGB-код: RGB (255,235,0)
3. Имя цвета красный, синий, зеленый и т.д. ...
4. Прозрачность: прозрачный
* Фоновое изображение:
1. URL: URL (путь / image.gif)
* Фон-повторить:
1. Не повторять: нет, повторите
2. вертикальный и горизонтальный повтор: повтор
3. Вертикальная повторяю: повтор-й
4. Горизонтальная повторяю: повтор-х
* Фон-вложение:
1. неподвижное изображение на экране: фиксированный
2. картина «катится» на экран прокрутки
* Фон-позиции:
1. х-у-пос пос
2. х-у-%%
3. верхний левый
4. вверху в центре
5. правом верхнем
6. центре слева
7. центр центр
8. справа от центра
9. нижний левый
10. внизу по центру
11. правом нижнем углу

Список свойств

Список свойств определяет характеристики (значения) HTML списков.

Список свойств, перечисленных ниже:

* Список-стиль-образ ............. Изображение в качестве маркера списка;
* Список-стиль-положение .......... где маркер находится в списке;
* Список стиле типа ............... вид маркера списка;
* ........................ Список стиль сокращенный вариант для всех свойств;

Допустимые значения для свойства список

* Список-стиль-образ:
1. никто
2. URL: URL (путь / marcador.gif)
* Список-стиль-положение:
1. на улице, из выравнивание маркера текста
2. внутри: маркер соответствии с текстом
* Список стиле типа:
1. Нет: маркер
2. Обсуждение: Круг (заполняется шар)
3. круг: окружности (точка пустым)
4. площадь, площадь твердых
5. десятичного: 1, 2, 3, 4, ...
6. десятичной ведущих нуля
7. нижний-римская: Роман нижний I, II, III, IV, ...
8. верхний-римская: Роман заглавной I, II, III, IV, ...
9. нижний-альфа: строчные буквы A, B, C, D, ...
10. верхний-альфа: буквы A, B, C, D, ...
11. нижний греческий
12. нижний латинский
13. верхний латинский
14. иврит
15. армянский
16. грузинский
17. CJK-идеографический
18. хирагана
19. катакана
20. хирагана-Iroha
21. катакана-Iroha

БОНУС!

ПОЛОЖЕНИЕ

ПОЛОЖЕНИЕ атрибут может принимать три значения:

* Абсолютные: это только один, что позволяет перекрывающихся слоев и с его помощью вы определить положение на странице, которую вы создали и готово. Абсолютное позиционирование;
* Относительно: Это значение определяет текст будет иметь относительное положение в остальной части страницы, и поэтому не могут пересекаться, но все еще способен распознавать несколько интересных атрибутов. Относительное позиционирование;
* Estatic, определяет, что он не признает особого позиционирования определяется управления слоями. Статическое позиционирование.

ЛЕВЫЙ

Устанавливает расстояние, что слой будет левому краю браузера или родительского элемента. Вы можете взять абсолютный, относительный или авто (автоматически).

Примечание: абсолютные величины принимают значения в соответствии с определением форматов, описанных в "размер формата".
ПРАВО

Устанавливает расстояние, что слой будет иметь правого края браузера или родительского элемента. Вы можете взять абсолютный, относительный или авто (автоматически).

Примечание: абсолютные величины принимают значения в соответствии с определением форматов, описанных в "размер формата".
TOP

Устанавливает расстояние, что слой будет иметь в верхней части браузера или родительского элемента. Вы можете взять абсолютный, относительный или авто (автоматически).

Примечание: абсолютные величины принимают значения в соответствии с определением форматов, описанных в "размер формата".
Botom

Устанавливает расстояние, что слой будет в нижней части браузера или родительского элемента. Вы можете взять абсолютный, относительный или авто (автоматически).

Примечание: абсолютные величины принимают значения в соответствии с определением форматов, описанных в "размер формата".

Z-INDEX

Определяет порядок расположения элементов. Принимает значение Auto (автоматический) и номер, где чем выше значение, тем выше уровень.

ВИДИМОСТЬ

Этот стиль используется для скрытия элементов. Невидимый элемент по-прежнему занимает место на странице. Допустимые значения: видимый (видимый), скрытое (оккультное) и наследование (наследует атрибут верхнего слоя, по умолчанию).

OVERFLOW

Определяет, как вести себя содержимое слоя, когда пределы меньше, чем его содержание. Допустимые значения: видимые (видно, размер слоя, чтобы отобразить его содержимое), скрытый (оккультизм, пропускает содержимое слоя), выберите (полоса прокрутки показывает слой) и самостоятельно (отображает полосы прокрутки слой, если это необходимо).

ДИСПЛЕЙ

Определяет, когда и если элемент должен быть показан:

* Блокировка: как блок, с разрывами строк до и после элемента. Создание нового окна в зависимости от окружающих элементов (по умолчанию);
* Встроенная: нет строки до и после элемента;
* Список пунктов: так же, как блок, за исключением элементов списка добавляется маркер;
* Внимание: это невидимый и не занимает места на странице. Отключение отображения элемента в любой ситуации, в том числе вторичных элементов.

позже я сделаю сообщение на инновации и CSS 3.

Похожие сообщения

1. Центр дел по горизонтали и вертикали с поплавком и ясно

Теги: CSS