Параметры CSS каскадной таблицы стилей



Базовые параметры CSS каскадной таблицы стилей

Приветствую гостей и читателей этого блога. В этом посте я публикую базовые CSS стили для изменения внешнего вида блога: размер, цвет и тип шрифта, рамки, фоны и цвет разных блоков, графических изображений и др. Зная базовые свойства CSS стилей и задав набор нужных параметров (стилей CSS) для каждого элемента блога, Вы без труда оформите внешний вид своего ресурса по своему усмотрению.

Вы можете прописать CSS стили для отдельной страницы в редакторе сообщений blogger. Для этого необходимо использовать HTML тэг <style>...</style>, а дальше в фигурных скобках {} задаете описание свойств стилей CSS

Простой пример:   .название стиля {свойство: значение;} Перед названием ставится точка или решетка #
#content {
widht:100%;
margin:0;
background: #f8f8ff;
font-size: 14px;
color:#333;
}
Заданы стили области контента блога: ширина 100%; фон белый, размер шрифта 14px; цвет шрифта темно-коричневый;

В шаблоне блога все заданные стили CSS находятся в разделе <b:skin>...</b:srin>. Об этом подробно читайте информацию в статье Как быстро и красиво оформить текст в блоге

CSS шрифты

font-size:14px;   этот текст написан шрифтом высотой 14 пикселей;
font-size:100%;   установить размер шрифта в процентах;
font-style: normal;   нормальный шрифт;
font-style: italic;   курсив;
font-style: oblique;   наклонный шрифт;
font-family: Verdana,Sans-Serif;   этот текст написан шрифтом Sans-Serif;
font-family: "Times New Poman", Serif;  этот текст написан шрифтом Serif; Если задан параметр Serif браузером будет использован любой доступный шрифт этой группы;

CSS Текст

font-weight:bold;    текст выделен полужирным шрифтом;
text-decoration: underline;  текст выделен подчеркиванием;
Можно использовать другие параметры оформления текста: overline (черта сверху) и line-through (зачеркивание);
text-align:right;   текст выровнен по правому краю; center (по центру); left (по левому краю); justify (выравнивание текста по ширине);
margin:10px;  для текста со всех сторон установлены поля размером 10px;
padding:10px;  для текста со всех сторон установлены отступы размером 10px;
Можно настроить для каждой стороны отдельно: margin-left: (поле слева);  padding-top: (отступ сверху); или для всех сторон margin: 2px 1px 2px 3px; (читается так: сверху, справа, снизу, слева); если устанавливаете 0, то px писать не нужно;
text-indent:60px;  отступ в первой строке текста (типа абзаца);
capitalize (в каждом слове первая буква заглавная);
uppercase (весь текст заглавными буквами);
letter-spacing:3px;   расстояние между буквами в тексте;
letter-spacing:-3px; сжать расстояние между буквами;
line-height: 70%  расстояние между строками в тексте (чем больше %, тем больше расстояние);
word-spacing:30px;  увеличить пробел мужду словами;
.text-shadow {text-shadow:2px 2px 4px #666;}  добавление тени к тексту;

CSS цвета

color: цвет;
background: фон;
background-transparent: задает прозрачный фон;
color: green;  текст написан зеленым цветом;
background: yellow;  текст на желтом фоне;
background-image: позволяет использовать изображение для фона;
background-size: указывает размер изображения; 
Можно написать по анлийски названия цветов, или для более точного оттенка использовать шестнадцатизначные коды цветов (#0e5198;);
background-repeat:  задает тиражирование изображения; repeat в обоих направлениях; no-repeat (вводится один раз); repeat-x (по горизонтали); repeat-y (по вертикали);
background-position: задает начальное положение фонового изображения -  
top-left (верхний левый угол); top-center (верхний центральный); top-right (верхний правый); center-left (центральный левый); center-center (центр экрана); center-right (центральный правый); bottom-left (нижний левый); bottom-center (нижний центральный); bottom-right (нижний правый угол экрана; %(x y) задает положение в процентах (верхний левый %%); pixels (x y) задает положение в пикселях (верхний левый 0 0);

CSS позиционирование (мощный инструмент форматирования информации на страницах).

Position-позволяет определить позиционирование элемента - static (позиционирование не применяется); relacive (позиционирование производится относительно нормального положения элемента на странице); absolute (позиционирование производится в абсолютных величинах); fixed (задает жесткую позицию элемента. При прокрутке страницы элемент прокручивается, сохраняя позицию относительно окна браузера);

Bottom-задает положение нижнего края элемента; auto (браузер автоматически выставляет нижнюю позицию элемента); % (задана позиция в процентах от нижнего края окна);  length (задана позиция в пикселях, допускаются отрицательные значения);

Точно также для Left (положение левого края элемента); Right (положение правого края элемента); Top (положение верхнего края элемента);

Не размещайте элементы за пределами видимости страницы. Насколько мне известно, этот метод относится к черным методам оптимизации и может вызвать жесткие санкции поисковых систем.

CSS границ рамки

border: solid 2px red; текст в красной рамке; Стиль границ рамки можно задать разный: пунктирный (dashed), точечный (dotted), сплошная (solid), двойная (double), выпуклая (outset), вдавленная (inset), кромкой (ridge); Чтобы отображалась только одна сторона рамки используйте коды: border-top: (верхняя); border-left: (слева); border-right: (справа); border-bottom: (снизу); border-radius: (закругление углов границы рамки); Можно задать разные форму, толщину и цвет каждой границы рамки: border-top-widht: 5px dotted #f00; (точечная форма верхней границы рамки красного цвета и толщина 5px);

CSS размер

height:50px;   задана высота 50px;
widht:100px;  задана ширина 100px;
height:auto;   высота определяется автоматически;
max-height:50px;  задана максимальная высота;
min-height:100px; задана минимальная высота;
Точно также можно задать минимальную и максимальную ширину (widht);

CSS списки

List-style-image:  установить изображение в качестве маркера для списков CSS; none - используется маркер по умолчанию; url - использовать вместо маркера изображение;
List-style-position:  определяет место размещения маркеров в списке; inside (маркер располагается внутри текста); outside (маркер располагается слева от текста);
List-style-type: задает разнообразные маркеры для текста; list-style-type: none; (не используется или убрать существующие); disc (закрашенный круг); squate (закрашенный квадрат); upper-roman (римские цифры); lower-roman (маленькие римские цифры);

На сегодня у меня пока все. Есть еще много других параметров для CSS стилей. Но это чуть позже. Пока не готова публиковать, так как до конца сама не разобралась.

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

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

Можно еще почитать:  Как выделить часть текста в рамку;


Автор статьи ✎ Olga Protasova Выпуск ✹ 1/20/2015 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *