Базовые параметры CSS каскадной таблицы стилей
Приветствую гостей и читателей этого блога. В этом посте я публикую базовые CSS стили для изменения внешнего вида блога: размер, цвет и тип шрифта, рамки, фоны и цвет разных блоков, графических изображений и др. Зная базовые свойства CSS стилей и задав набор нужных параметров (стилей CSS) для каждого элемента блога, Вы без труда оформите внешний вид своего ресурса по своему усмотрению.
Вы можете прописать CSS стили для отдельной страницы в редакторе сообщений blogger. Для этого необходимо использовать HTML тэг <style>...</style>, а дальше в фигурных скобках {} задаете описание свойств стилей CSS
Приветствую гостей и читателей этого блога. В этом посте я публикую базовые CSS стили для изменения внешнего вида блога: размер, цвет и тип шрифта, рамки, фоны и цвет разных блоков, графических изображений и др. Зная базовые свойства CSS стилей и задав набор нужных параметров (стилей CSS) для каждого элемента блога, Вы без труда оформите внешний вид своего ресурса по своему усмотрению.
Вы можете прописать CSS стили для отдельной страницы в редакторе сообщений blogger. Для этого необходимо использовать HTML тэг <style>...</style>, а дальше в фигурных скобках {} задаете описание свойств стилей CSS
Простой пример: .название стиля {свойство: значение;} Перед названием ставится точка или решетка #
#content {
widht:100%;
margin:0;
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 браузером будет использован любой доступный шрифт этой группы;
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 (весь текст заглавными буквами);
capitalize (в каждом слове первая буква заглавная);
uppercase (весь текст заглавными буквами);
letter-spacing:3px; расстояние между буквами в тексте;
letter-spacing:-3px; сжать расстояние между буквами;
line-height: 70% расстояние между строками в тексте (чем больше %, тем больше расстояние);
word-spacing:30px; увеличить пробел мужду словами;
.text-shadow {text-shadow:2px 2px 4px #666;} добавление тени к тексту;
.text-shadow {text-shadow:2px 2px 4px #666;} добавление тени к тексту;
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);
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 (положение верхнего края элемента);
Не размещайте элементы за пределами видимости страницы. Насколько мне известно, этот метод относится к черным методам оптимизации и может вызвать жесткие санкции поисковых систем.
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 размер
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 по ссылке: htmlbook.ru/css
Найдете очень много полезной информации о свойствах CSS стилей. Собственно я на примерах с этих сайтов и учусь.
И сегодня я говорю Вам до свидания. Пишите отзывы, может у кого то есть что добавить в статью. Буду благодарна, если поделитесь со своими друзьями в социальных сетях. Пока, пока...
Можно еще почитать: Как выделить часть текста в рамку;
