основные стили ксс

Дизайн, основы CSS и основные стили оформления сайта

основные css  стили
Основные css стили для создания сайта
Как правило стили отображения контейнеров, и их содержимого прописываются в таблице стилей, которая обычно называется stile.css, хотя можно назвать как угодно. Главное чтобы на странице в теге <head> был правильный путь до таблицы стилей <link href="style.css" rel="stylesheet" media="all">

Чтобы задать стиль для контейнера на странице ему можно задать класс. Например контейнеру <header> можно присвоить стиль с названием chapka_saita, тогда на странице контейнеру прописывается класс <header class="chapka_saita">содержимое</header>. В таблице стилей указываются стили для chapka_saita. Название в таблице stile.css начинается с точки.

.chapka_saita { в фигурных скобках указываем стили }

Так же стиль для контейнера можно указать напрямую если ему не присвоен класс. Например стиль для контейнера <header>содержимое</header> начинается с названия контейнера

header { в фигурных скобках указываем стили }

Так же еще можно указать стили для контейнеров с помощью идентификатора, тогда это выглядит так <div id="blok1">содержимое </div>, в таблице стилей идентификатор начинается с символа решетки

#blok1 { в фигурных скобках указываем стили }

Если нужно указать стили заголовков в контейнерах, ссылок, изображений, то это выглядит так.

.chapka_saita { в фигурных скобках основной стиль контейнера }
.chapka_saita h1, h2 { стиль для заголовков в тегах <h1> и <h2> для этого контейнера }
.chapka_saita a { стиль для ссылок в этого в этом контейнере }
.chapka_saita a:hover { стили для ссылок при наведении курсора мыши }
.chapka_saita img { стили для изображений в этом контейнере }
Сами стили прописываются в этих фигурных скобках и разделяются точкой с запятой ;

font-family: Arial; задает шрифт контейнера, обычно его применяют в теге <body>, в котором все содержимое страницы

line-height: 1.2; задает высоту строк для шрифта

Отступы

padding: 10px; задает внутренний отступ содержимого от границы контейнера, в данном случае отступ 10 пикселей, можно указывать значение в процентах, или в em
margin: 5px; задает внешние отступы контейнера,
margin: 10px 5px 0px 15px; отступы можно указывать и по отдельности для каждой стороны
margin-bottom: 10px; можно указывать отступ только с одной стороны, в данном случае отступ от низа 10пикселей. Тоже самое можно применять и внутренним отступам padding.

Ниже пример стилей для тега <body>

body { margin-left: auto; margin-right: auto; width: 930px; font-size: 12px; font-family: Arial; line-height: 1.2; background-image: url(images/fon.jpg); }

Стили для текста

font-size: 12px; указывает размер шрифта, можно указывать в пикселях, процентах, или em
color: #0000ff; указывает цвет шрифта, в даном случае #0000ff синий , можно указать словом, например color: green; тоесть цвет зеленый.
text-decoration: none; убирает подчеркивание, применяется для ссылок чтобы убрать нижнее подчеркивание
text-transform:uppercase; делает все буквы текста заглавными, вместо uppercase можно писать другие значения и наоборот сделать верхнее или нижнее подчеркивание, зачеркивание.
font-weight:bold; выделает шрифт полужирным, вместо bold можно применять и другие значения
text-align:left; задает выравнивание текста, в данном случае left, к левой части контейнера, можно задавать значение conter, hight.
text-shadow: 1px 2px 1px 0px #000000; color: #f9f5ed;тень для текста

Стили контейнеров

background-color: #DCDCDC; назначает цвет фона контейнера, в данном случае #DCDCDC серый
background-image: url(images/fon.jpg); задает фоновое изображение

border: 1px solid #E8E8E8; назначет бордюр, фраза solid означает сплошной бордюр, #E8E8E8 цвет бордюра. Можно указывать отдельно бордюр для каждой стороны, например border-top: 2px solid #E8E8E8;
border-radius: 10px; скругление углов контейнера, можно задавать разное скругление на каждом угле border-radius: 2px 6px 10px 0px;
box-shadow: #2C2C29 10px 10px 10px; тень для контейнеров

width:926px; указывает ширину контейнера
height: 240px; высота контейнера

float:left; прижимает контейнер к левой части, по умолчанию контейнеры идут по порялку, а если хочется выстроить несколько блоков в линию, то им нужно задать свойство float:left; и ширину height: px; чтобы они поместились по ширине в родительском контейнере.
float:right; тоже самое, но контейнеры прижимаются к правой части.
Если хотите сделать контейнер посередине, то указывайте ширину, а отступы avto , пример: margin-left: auto; margin-right: auto; width: 150px;

Этот домен продается здесь: telderi.ru, и еще много других