| Дата: Вторник, 05.05.2015, 15:29 | Сообщение # 1 |
Sunshine
SOLНЫШКО
Группа: Администраторы
Сообщений: 2467
|
CSS, или каскадные таблицы стилей, – это то, как HTML представлен. Точно также как HTML описывает контент, таблицы стилей определяют, как документ выглядит.
Стили не напоминают структуру HTML. Они используют формат «свойство: значение» и большая часть свойств может использоваться для большинства HTML-тегов. В этой теме будут представлены всевозможные варианты решения стилистики ( по возможности, с подробным описанием). Тема будет пополнятся регулярно.
|
|
| |
| Дата: Вторник, 05.05.2015, 15:58 | Сообщение # 2 |
Sunshine
SOLНЫШКО
Группа: Администраторы
Сообщений: 2467
| Свойства границ Возможные значения стилей(style), которые можно применять:
none /*граница отсутствует*/ hidden /*То же, что и "none"*/ solid /*тонкая граница*/ dotted /*граница состоит из точек, пунктир*/ dashed /*граница состоит из коротких отрезков*/ double /*двойная*/ groove /*эффект углубления, Рифленная 3D граница. Эффект зависит от значения border-color*/ ridge /*эффект кромки, Очередной тип 3D границы. Эффект зависит от значения border-color*/ inset /*эффект врезки, Очередной тип 3D границы. Эффект зависит от значения border-color*/ outset /*эффект возвышения, Очередной тип 3D границы. Эффект зависит от значения border-color*/.
Вы можете использовать границы (рамки), применяя их к большинству элементов HTML в пределах страницы. Все, что вам требуется, чтобы сделать границу вокруг элемента — это border-style.
border-top-style /*задает стиль верхней границы элемента*/.
border-width используется для указания ширины границы, которая измеряется в пикселях.
border-top-width /*задает ширину верхней границы элемента.*/ (Примечание: Всегда прописывайте свойство border-style перед свойством border-top-width. У элемента должна быть граница, прежде, чем менять ее ширину.) Могут быть использованы такие значения: thin /*Тонкая верхняя граница*/ medium /*Средняя верхняя граница. Значение по умолчанию*/ thick /*Толстая верхняя граница*/ (Ваше значение)px /*Позволяет определить толщину внешней границы*/ inherit/*Значение должно быть унаследовано от элемента родителя, т.е. по умолчанию шаблона*/
Код Примеры:
* border-width:thin medium thick 10px; - верхняя граница тонкая - правая граница средняя - нижняя граница толстая - левая граница 10 пикселей
* border-width:thin medium thick; - верхняя граница тонкая - правая и левая границы средние - нижняя граница толстая
* border-width:thin medium; - верхняя и нижняя границы тонкие - правая и левая границы средние
* border-width:thin; - все четыре границы тонкие
border-right-width /* ширина правой границы таблицы*/
border-bottom-width /*объединяет в себе все свойства, которые используются для определения нижней границы (рамки) элемента.*/
border-left-width /*ширина левой границы таблицы*/
border-color используют для указания цвета границы. Обычно ставится #(Ваш номер цвета), либо же цветовое решение rgb(три цифры через запятую) Это свойство может иметь от одного до четырех значений.
Код Примеры:
* border-color:red green blue pink; - верхняя граница красная - правая граница зеленая - нижняя граница синяя - левая граница фиолетовая
* border-color:red green blue; - верхняя граница красная - правая и левая границы зеленые - нижняя граница синяя
* border-color:dotted red green; - верхняя и нижняя границы красные - правая и левая границы зеленые
* border-color:red; - все четыре границы красные Примечание: Всегда прописывайте свойство border-style перед свойством border-color. У элемента должна быть граница, прежде чем менять ее цвет.
red( красный), green ( зеленый), blue( синий), pink ( розовый) /*цвета, которые можно прописать буквами*/ #(номер цвета) /*задается номер расцветки*/ rgb(цвет)/*Определяет цвет границы с помощью RGB кода, Например, rgb(255,0,0)*/ transparent /*Цвет границы прозрачный. Значение по умолчанию.*/ inherit /*Значение должно быть унаследовано от элемента родителя*/
border-radius: /*значение_радиуса, округление углов таблицы, прописывается в пикселях. Чем больше значение радиуса, тем более круглая будет округление таблицы*/ Код Четыре значения Пример:border-radius:15px 5px 10px 5 px; указываются для каждого из радиусов в след. порядке: верхний левый, верхний правый, нижний правый, нижний левый. Три значения: Пример:border-radius:15px 10px 5 px; первое задает радиус для верхнего левого угла, второе для верхнего правого и нижнего левого, а третье для нижнего правого угла.
Два значения Пример:border-radius:15px 5 px; первое для верхнего левого и нижнего правого угла, второе для верхнего правого и нижнего левого угла.
Одно значение Пример:border-radius:15px ; одно общее значение для всех углов.
Единицы измерения радиусов - все поддерживаемые в CSS (px, % и т.д.)
Так же могут встречаться и отдельно прописанные элементы скругления рамки:
border-top-right-radius: /*позволяет установить радиус скругления правого верхнего угла рамки.*/(Два значения указываются в случае, если требуется создать эллиптический угол - в этом случае 1 значение - радиус по горизонтали, второе значение - радиус по вертикали.)
border-top-left-radius: /*позволяет установить радиус скругления левого верхнего угла рамки.*/(Два значения указываются в случае, если требуется создать эллиптический угол - в этом случае 1 значение - радиус по горизонтали, второе значение - радиус по вертикали.)
border-bottom-right-radius: /*позволяет установить радиус скругления нижнего правого угла рамки.*/ (Два значения указываются в случае, если требуется создать эллиптический угол - в этом случае 1 значение - радиус по горизонтали, второе значение - радиус по вертикали.)
border-bottom-left-radius:/*позволяет установить радиус скругления нижнего левого угла рамки.*/ (Два значения указываются в случае, если требуется создать эллиптический угол - в этом случае 1 значение - радиус по горизонтали, второе значение - радиус по вертикали.)
border-bottom-style/* задает стиль нижней границы элемента.*/ Варианты стилей можно посмотреть в самом начале поста.
outline задает внешнюю границу вокруг элементов (т.е. за пределами обычной границы). Основная цель данного свойства выделить какой-либо элемент.
Свойство outline объединяет в себе все свойства, которые используются для определения внешней границы (рамки) элемента.
Свойства, которые можно задать (по порядку): outline-color, outline-style, outline-width.
outline-width: /*задает ширину внешней границы элемента.*/ Могут быть использованы такие значения: thin /*Тонкая верхняя граница*/ medium /*Средняя верхняя граница. Значение по умолчанию*/ thick /*Толстая верхняя граница*/ (Ваше значение)px /*Позволяет определить толщину внешней границы*/ inherit/*Значение должно быть унаследовано от элемента родителя, т.е. по умолчанию шаблона*/
outline-style /*задает стиль внешней границы элемента.*/Варианты стилей можно посмотреть в самом начале поста.
outline-color /*задает цвет внешней границы элемента.*/ Примечание: Всегда прописывайте свойство outline-style перед свойством outline-color. У элемента должна быть внешняя граница, прежде чем менять ее цвет. red( красный), green ( зеленый), blue( синий), pink ( розовый) /*цвета, которые можно прописать буквами*/ #(номер цвета) /*задается номер расцветки*/ rgb(цвет)/*Определяет цвет границы с помощью RGB кода, Например, rgb(255,0,0)*/ transparent /*Цвет границы прозрачный. Значение по умолчанию.*/ inherit /*Значение должно быть унаследовано от элемента родителя*/
border-spacing /*задает расстояние между границами ячеек в таблице.*/
Код Например: border-spacing:0px 0px;
(Ваше значение)px ( Ваше значение) px: /*Задает расстояние между ячейками в пикселях или других единицах измерения. Негативные значение не разрешены. Если указаны два значения - первое отвечает за горизонтальное расстояние, второе - вертикальное. Если указано только одно значение - оно используется и по вертикали, и по горизонтали.*/
inherit /* Значение должно быть унаследовано от элемента родителя, т.е. по умолчанию шаблона*/ border-collapse /*способно удалять двойные линии (границы) на месте стыка ячеек таблицы. При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. collapse /*Границы на стыке ячеек превращаются в одну общую*/ separate/*Границы остаются прежними. Значение по умолчанию*/ inherit /*Значение должно быть унаследовано от элемента родителя*/
|
|
| |