| Дата: Вторник, 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; - все четыре границы красные
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 /*Значение должно быть унаследовано от элемента родителя*/
|
| |
| |
