От автора: я снова приветствую вас на нашем блоге. В этой статье я хотел бы подробнее обсудить такой вопрос, как сделать блок по центру в css, а также несколько других манипуляций с блочными элементами.

Центрирование

Есть много элементов на веб-странице, которые могут по дизайну стоять по центру. Например, заголовки, логотип в шапке или информация в футере. Но как выровнять ее идеально по центру? Конечно, нужно понимать, что высчитывать вручную отступы или применять позиционирование не стоит, когда есть замечательное значение свойства margin – auto:

Block{ margin: 0 auto; }

Block { margin : 0 auto ;

Первое значение этого свойства задает отступ сверху и снизу. Соответственно, вместо нуля вы можете записать свое значение, если необходимо дать такие отступы. Второе значение auto определяет отступы слева и справа. Они определяются так, что элемент станет по центру. Но здесь очень важно соблюсти еще одно правило:

Элементу нужно задать ширину. Обязательно. Я объясню почему. Например, он находится в общем контейнере шириной 980 пикселей. И если вы не зададите явную ширину блоку, то как он выровняется по центру, если он и без этого занимает всю ширину? В общем, достаточно записать width или max-width и центровка будет работать.

Таким же способом можно отцентрировать и те блоки, которые будут вложены уже в этот. Вообще уровень вложенности никак не помешает центровке.

Как создать блок в css и его внешний вид

Я уже говорил в одной из предыдущих статей, что блочные элементы создаются тегом div. Он парный. Это просто пустой контейнер для содержимого. Ему нужно также задать стилевой класс или идентификатор, чтобы получить возможность обращаться к нему через css. Допустим, так:

< div class = "post-anonce" > < / div >

Давайте классам понятные имена, чтобы сразу было понятно, какую роль они выполняют. Например, в этой строчке кода сразу понятно, что наш блок является анонсом статьи. Далее его нужно соответствующим образом оформить.

Post-anonce{ margin: 10px; padding: 15px; background: #ccc; border-radius: 15px; width: 250px; height: 220px; }

Post - anonce { margin : 10px ; padding : 15px ; background : #ccc; border - radius : 15px ; width : 250px ; height : 220px ;

Мы дали нашему фрагменту много разных правил. Например, внешние и внутренние отступы, фон, закругление углов, а также основные размеры – ширину и высоту.

Добавим содержимое

Как видите, мы добавили все, что нужно. Картинку, заголовок, небольшой текст в абзаце и ссылку на то, чтобы прочитать полностью. Конечно, она никуда не ведет, так как у нас не реальный сайт – мы просто рассматриваем, как можно сделать блок.

Картинку мы задали, как будто она лежит в той же папке, что и css-файл, в котором задаются эти стили. Теперь остается оформить ее:

Post-anonce img{ width: 64px; height: 64px; padding: 10px; float: left }

Post - anonce img { width : 64px ; height : 64px ; padding : 10px ; float : left

Зададим ей четкие размеры, прижмем к левому краю, чтобы текст обтекал справа, также дадим небольшие отступы. И вот что в итоге получилось:

Это похоже на анонс? Конечно похоже, мне кажется, даже очень неплохо получилось. Конечно, на реальном сайте он бы еще дорабатывался. Текст и заголовок получили бы те цвета и шрифты, которые определены им по дизайну, а слева добавились бы другие блоки-анонсы.

Тем не менее вот вам простой пример создания блока, в котором есть все необходимое для удобства пользователя.

Как сделать блок невидимым в css

В начале я обещал вам еще несколько манипуляций с блоками. Рассмотрим их коротко, они касаются видимости элемента на странице. Например, добавим только что созданному блоку такое свойство: display: none;

Обновите страницу и вы увидите, что на ней ничего нет – блок исчез. Другой способ убрать его – сделать прозрачным. За это отвечает свойство opacity. По умолчанию все элементы на странице непрозрачные, то есть имеют opacity: 1. Если задать opacity: 0, то блок станет полностью прозрачным. Также можно задавать значения между этими цифрами.

Применение на практике

Сделаем наш блок прозрачным и добавим перед ним слова, на которые нужно будет навести для того, чтобы он появился.

< div class = "show-anonce" > Наведисюда, чтобыувидетьанонс< / div >

Так мы создали нужный блок.

Блочная верстка частенько используется при создании сайта или блога. Как следствие этого — часто требуется делать отступы у блоков. По этой причине о том, как сделать отступы в CSS подробно описано в данном уроке. Для браузера каждый тег является контейнером, у которого есть содержимое, внутренний отступ, внешние поля, а также рамка. В данном уроке мы научимся делать внутренние и внешние отступы, рассмотрим основные их параметры.

На рисунке ниже наглядно представлены параметры отступов блоков:

Как видно, отступы можно делать в четырех направлениях: верхний отступ (top), нижний отступ (bottom), левый отступ (left) и правый отступ (right). В качестве единиц измерения могут быть пиксели, проценты и другие единицы CSS — подробнее о них . В уроке используются пиксели.

Внутренние отступы блоков

За внутренние отступы в CSS отвечает свойство padding . Итак, давайте рассмотрим пример задания внутренних отступов у блока:

padding-top: 5px; /*верхний внутренний отступ*/ padding-left: 8px; /*левый внутренний отступ*/ padding-right: 8px; /*правый внутренний отступ*/ padding-bottom: 5px; /*нижний внутренний отступ*/

В данном примере внутренние отступы задаются отдельно для каждой стороны блока. Кроме этого, существует несколько способов задания отступов в CSS:

margin: 5px 8px 5px 8px; /*верхний, правый, нижний, левый внешние отступы*/ margin: 5px 8px 5px; /*описывает верхний, левый и правый, нижний отступы*/ margin: 5px 8px; /*описывает верхний и нижний, правый и левый отступы*/ margin: 7px; /*описывает все внутренние отступы по 7px*/

Запомнить проще первый и последний способы. В первом случае отступы ставятся по часовой стрелке (верхний, правый, нижний, левый) - величину отступа мы можем указать любую, в последнем случае отступы со всех сторон будут одинаковые.

Внешние отступы блоков

За внешние отступы в CSS отвечает свойство margin . Примеры внешних отступов в CSS:

margin-top: 5px; /*верхний внешний отступ*/ margin-left: 10px; /*левый внешний отступ*/ margin-right: 10px; /*правый внешний отступ*/ margin-bottom: 5px; /*нижний внешний отступ*/

padding: 5px 10px 5px 10px; /*верхний, правый, нижний, левый внешние отступы*/ padding: 5px 10px 5px; /*описывает верхний, левый и правый, нижний отступы*/ padding: 5px 10px; /*описывает верхний и нижний, правый и левый отступы*/ padding: 7px; /*описывает все внешние отступы по 7px*/

Таким образом, как сделать отступы в CSS — вопрос не сложный, но весьма актуальный. Чтобы лучше усвоить описанную выше информацию следует запомнить, что существует два свойства: padding — внутренние отступы и margin — внешние отступы. Также, как вы уже знаете, способов задания отступов существует несколько, можно их использовать.

В этой главе речь пойдет о том, как внедрить CSS в документ HTML, то есть связать стилевое описание элемента непосредственно с самим элементом, каким либо HTML тегом.

Осуществить данную задачу можно тремя способами:

• Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.
• Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).
• Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.

Давайте более подробно рассмотрим каждый вариант, а заодно познакомимся с правилами синтаксиса написания CSS.

Атрибут style.

Практически каждый HTML тег имеет атрибут style , который говорит о том, что к этому тегу применяется некое стилевое описание.

Пишется так:

style="" >

Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента

Ну например:

style="color: #ff0000; font-size:12px" > это параграф с индивидуальным стилем

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

По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента.

style="background-color: #c5ffa0" >

style="color: #0000ff; font-size:18px" >Всё о слонах

Купить слона

style="color: #ff0000; font-size:14px" >

style="color: #0000ff; font-size:16px" >Взять слона на прокат

style="color: #ff0000; font-size:14px" >

Но еще раз повторюсь такой способ внедрения CSS хорош лишь в том случае если требуется задать определенный стиль малому числу HTML элементов.

Тег (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.

Взгляните на пример, ниже к нему будут комментарии.

Всё о слонах

На этом сайте Вы найдёте любую информацию о слонах.

Купить слона

У нас Вы можете по выгодным ценам приобрести лучших слонов!!

Взять слона на прокат

Только у нас Вы можете взять любых слонов на прокат!!

Как видно из примера мы добились точно такого же результата что и в первом случае только теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в "голову" документа тем самым указав что все заголовки

,

- будут синими а параграфы

- красными. Представьте как мы облегчили бы себе работу будь на странице сотня таких параграфов и штук пятнадцать заголовков, да и сам документ стал меньше весить за счет "удаления" всех повторяющихся стилевых описаний для каждого отдельно взятого элемента.

Теперь обещанные комментарии:

Тег идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:

Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.

CSS в отдельном внешнем файле.

Долго ли коротко ли, подошли мы к главному, на мой взгляд, достоинству CSS, а именно возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.

Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:

Body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h1 {color: #0000ff; font-size:18px}
h2 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}

О том, что это такое странное мы написали, постараюсь подробно рассказать в последующих главах этого учебника.

Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.

Делается это с помощью тега (связь). Тег многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами и не выводится браузерами на экран.

Тег имеет атрибуты:

href - Путь к файлу.
rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.

• shortcut icon - Определяет, что подключаемый файл является .
• stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
• application/rss+xml - Файл в формате XML для описания ленты новостей.

type - MIME тип данных подключаемого файла.

Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:

Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"

Теперь вставляем эту строчку в заголовки страниц нашего сайта и наслаждаемся результатом..

Файл mystyle.css
body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h1 {color: #0000ff; font-size:18px}
h2 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}
Файл index.html

Меню:

Всё о слонах.
Купить слона.
Взять слона на прокат.

---

Всё о слонах

На этом сайте Вы найдёте любую информацию о слонах.

Файл elephant.html

Меню:

Всё о слонах.
Купить слона.
Взять слона на прокат.

---

Купить слона

У нас Вы можете по выгодным ценам приобрести лучших слонов!!

Файл elephant1.html

Меню:

Всё о слонах.
Купить слона.
Взять слона на прокат.

---

Взять слона на прокат

Только у нас Вы можете взять любых слонов на прокат!!

В примере выше, "сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом - mystyle.css. Таким образом, мы значительно его "разгрузили" и сделали дизайн всего сайта "мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?

В этой главе мы рассмотрели три способа внедрения CSS в HTML документ. Какой же лучше использовать?

• Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
• Используйте тег
  Блок в css -1.

  Блок в css - 2.

  Блок в css - 3.

  Если вы не поняли, где и куда я вписал CSS, то обратите внимание на строки от 4 до 17. И если у вас появился все же такой вопрос, что это я сделал, тогда повторите урок №3 – « ».

  Результат:

  

  Теперь можно видеть границы блока, а когда видны границы, тогда легче с блоками работать.

  Отступы от блока в CSS
  

  Свойство « MARGIN »
  Чтобы задать расстояние (отступ) от блока используют правило «margin ».
  Обратите внимание на схему. Параметры задаются от блока:

  

  Свойства:

  • top – верхняя сторона
  • right – правая сторона
  • bottom – нижняя сторона
  • left – левая сторона

  Margin-top:30px; /* верхняя сторона */ margin-right:70px; /* правая сторона */ margin-bottom:90px; /* нижняя сторона */ margin-left:120px; /* левая сторона */

  Сокращенная форма записи

  Можно все, что я прописал для отступа при каждом блоке записать отдельно сокращенной формой:

  Синтаксис:

  Margin: верхняя_сторона правая_сторона нижняя_сторона левая_сторона;

  Margin:30px 70px 90px 120px; /* сокращенная форма записи */

  Блок в css -1.

  Блок в css - 2.

  Блок в css - 3.

  Результат:

  

  Если задать один параметр к правилу «margin » (Строка №22):

  Margin:100pх; /* сокращенная форма записи */

  то расстояние от блока со всех сторон будет 100 px.

  Отступы внутри блока в CSS
  

  Свойство « PADDING »
  Чтобы задать расстояние (отступ) внутри блока, используют правило «padding ».
  Обратите внимание на схему:

  

  Свойства:

  • top – верхняя сторона
  • right – правая сторона
  • bottom – нижняя сторона
  • left – левая сторона

  Padding-top:30px; /* верхняя сторона */ padding-right:70px; /* правая сторона */ padding-bottom:90px; /* нижняя сторона */ padding-left:120px; /* левая сторона */

  Сокращенная форма записи

  Можно все, что я прописал выше записать сокращенной формой.

  Синтаксис:

  Padding: верхняя_сторона правая_сторона нижняя_сторона левая_сторона;

  Padding:30px 70px 90px 120px; /* сокращенная форма записи */

  Пропишите в HTML файле вот так:

  Блок в css -1.

  Блок в css - 2.

  Блок в css - 3.

  Результат:

  

  Если задать один параметр к правилу «padding» (строка № 21):

  Padding:50px; /* сокращенная форма записи */

  то расстояние внутри блока со всех сторон будет 50 px.

  Ширина и высота блока в CSS
  

  Свойство « WIDTH » и « HEIGHT »
  Вы можете создать ширину и высоту блока. Для этого используйте правила «width » - ширина и «height » - высота.

  Синтаксис:

  • height - высота блока;
  • width- ширина блока;

  Значение:
  Значение задается в px или %.

  Width: 600px; /* ширина блока */ height: 250px; /* высота блока */

  Я думаю, как вставлять правило в CSS объяснять не нужно, заодно проверю, как вы освоили урок №3 о том, как подключить CSS.

  Результат:

  У блока будет фиксированная ширина и высота.

  Если вам нужен нефиксированный, а резиновый блок (блок который растягивается по длине монитора), тогда вместо px, нужно указать %. Только помните: весь монитор – это 100%.

  Width: 90%; /* ширина резинового блока */

  Фон блока в CSS
  

  Свойство « BACKGROUND »
  Правило «background » вы уже знаете, потому не вижу смысла повторяться.
  А кто не знает, милости просим на страницу с .

  Блок 1.

  Строка № 7 – правилом «background » мы заменили фон зеленным цветом

  Результат:

  

  Можно залить фон не только цветом, но и картинкой:

  Background-image: url(bg.gif); /* Фоновая картинка */

  Блок 1.

  Строка № 7 – правилом «background-image» мы заменили фон фоновой картинкой.
  bg.gif – это картинка фона.

  Результат:

  

  ДОПОЛНЕНИЕ

  Прозрачность блока в CSS
  

  Свойство «OPACITY»
  Блок можно сделать прозрачным, используя CSS правило «opacity ».

  Синтаксис:

  Opacity: значение;

  Значение:
  в значениях задается число в диапазоне от 0 до 1.

  • Значение 0 – полная прозрачность блока.
  • Значение 1 – непрозрачность блока (блок останется такой как есть).
  • Значение в дробях (0.5) – полупрозрачность блока.

  Блок 1.

  Результат:

  

  Скрыть блок в CSS

  Свойство « DISPLAY »
  Правило «display » поможет скрыть блок веб странице. Зачастую это правило используется в выпадающем меню или когда нужно скрыть некоторые блоки в мобильной версии сайта.

  Blok1{display:none;}

  Свойство « OPACITY »
  Правило «opacity » поможет тоже скрыть блок веб-странице.

  Blok1{opacity: 0;}

  Свойство « VISIBILITY »
  «visibility » – это еще одно правило, которое тоже поможет скрыть блок веб- страници. К правилу «visibility » пропишите значение «hidden »:

  Blok1{visibility: hidden;}

  Свойство overflow
  

  Свойство «OVERFLOW»
  С правилом «overflow » можно определить, что будет предприниматься, если содержимое элемента превзойдет его размер. Например, картинка или текст больше, чем сам блок.

  Синтаксис:

  Overflow: значение;

  Значение:

  • Visible - указывает, что при переполнении элемента содержимым, оно не будет обрезаться, а просто выйдет за рамки (значение по умолчанию).
  • Hidden - указывает, что контент, который не помещается в элемент, будет обрезан (обрезанная часть будет невидимая).
  • Scroll - указывает, что контент, который не помещается в элемент, будет обрезан, но для просмотра обрезанной части, можно будет воспользоваться полосой прокрутки.
  • Auto - при переполнении элемента содержимым, полосы прокрутки добавляются автоматически.

  Пример с «Visible» (значение по умолчанию):

  Блок 1.

  

  Результат:

  

  Пример с «Hidden »:

  Blok1 { height: 200px; /* высота */ width: 250px; /* ширина */ border:2px dotted #cc0000; /*рамка */ overflow: Hidden; }

  Результат:

  

  Пример с «Scroll »:

  Blok1 { height: 200px; /* высота */ width: 250px; /* ширина */ border:2px dotted #cc0000; /*рамка */ overflow: Scroll; }

  Результат:

  

  Пример с «Auto»:

  Blok1 { height: 200px; /* высота */ width: 250px; /* ширина */ border:2px dotted #cc0000; /*рамка */ overflow: auto; }

  Результат:

  

  Тень блока в CSS
  

  Свойство «BOX-SHADOW»
  Можно от блока сделать тень. Правило «box-shadow ».

  Синтаксис:

  

  Blok1 { height: 200px; /* высота */ width: 250px; /* ширина */ border:1px solid #ccc; /*рамка */ box-shadow: -19px 0 22px -19px #000,19px 0 22px -19px #000; /*тень блока*/ }

  Результат:

  

  Выравнивание блока по центру
  

  Свойство «MARGIN»
  Чтобы выровнять блок по центру, пропишите для правила «margin » значение «0 auto »:

  Margin: 0 auto;

  Blok1 { height: 100px; /* высота */ width: 100px; /* ширина */ border:1px solid #ccc; /*рамка */ margin: 0 auto; }

  Вот и все! Пора заканчивать этот урок, а то великоват он получился! Да и храпы за пределами монитора уже слышу .
  Еще чуть-чуть и мы закончим изучать основы CSS.

  Подписывайтесь на обновление!

  Предыдущая запись
  Следующая запись
  

  Что нужно для создания CS:S Сервера

  1 - Как создать сервер в css?
  

  Originally posted by author :

  Для начала нужно разобраться с вашим интернетом. Так вот, 1 Mb (мегаБИТА) вполне достаточно, проблема в исходящем канале! (Сразу поясню: входящей называется скорость соединения, с которой ваш компьютер может получать данные из сети Интернет, а исходящей называется скорость соединения, с которой ваш компьютер может передавать данные в сеть). Итак, для каждого игрока на созданном вами сервере css нужно иметь минимум 50 Kb. Заходите на сайт 2ip.ru . Сразу запишите ваш ip адрес (он написан сверху большими цифрами), выберите тест скорости соединения, введите код подтверждения и нажмите на кнопку "тестировать". Если входящая ниже 1000Кб/с (КилоБИТ в секунду), а исходящая ниже 500Кб/с, даже не беритесь за создание cs-сервера.

  2 - Во вторых нужен внешний IP адрес. Что это такое?
  

  Originally posted by author :

  Итак, представим себе как вы подключены к Интернету когда у вас внешний сетевой адрес:
  Ваш компьютер - провайдер - Интернет
  А вот такой расклад не подойдет:
  Ваш компьютер - локальная сеть - провайдер - Интернет
  Просто позвоните провайдеру, и спросите у вас внешний IP или нет. Хочу сделать замечание: динамичность адреса не имеет отношения к работоспособности. Другими словами, даже если каждый раз при подключении к Интернету у вас новый адрес, ваш сервер все равно будет виден для counter strike под этим IP, но при условии что он внешний.

  3 - Для создания сервера css вам потребуется еще кое что - это хорошее железо
  

  Originally posted by author :

  Конфигурация компьютера должна быть приемлемой. То есть для windows XP или Linux - 512Mb (мегаБАЙТ) оперативной памяти на 20 человек или Windows Vista/7/8/ - 1Gb соответственно. Желательно также запастись 2х или более ядерным процессором, для того чтобы можно было комфортно играть подключившимся, пока вы делаете за компьютером другие дела. Не рекомендуется играть в counter strike на том же компьютере, где запущен сервер (2х ядерный процессор частично решает эту проблему). Что бы проверить систему на производительность, запустите counter strike и поставьте все графические настройки на максимум - если компьютер не тормозит, то он полностью подойдет для ваших нужд.
  Предположим все что нужно у вас есть. Перейдем к созданию.

  Как создать свой CS:S Server

  Сначала необходимо скачать hldsupdatetool
  Скачать его можно тут ----> Скачать
  Разархивируем
  Когда вы запустите файл из архива, то вам предложат выбрать куда установить hldsupdatetool, это можно сделать куда угодно, важно, что эта папка в дальнейшем и станет папкой Сервера, я приведу пример с диском С:
  
  Выбираем Europe и жмём Next. Далее откроется еще одно окошко и в нем нажимаем Next и Finish
  
  Идем в папку куда был установлен hldsupdatetool (в данном примере C:\Server). Запускаем файл HldsUpdateTool.exe, в следствии чего откроются два окошка и HldsUpdateTool.exe начнет
  обновлять себя, так как у вас не последня версия, скрин можно увидеть ниже:
  Обновление займет не более чем 1 минуту! После чего окно само закроется.
  
  После обновления HldsUpdateTool идем в папку с сервером (в данном примере C:\Server). Теперь нам необходимо скачать сервер, для этого мы создаем файл Update.bat
  На рабочем столе жмем правую кнопку мыши Создать\Текстовый документ
  В него вставляем вот этот код:
  

  Originally posted by author :

  Start /wait hldsupdatetool.exe
  start /wait hldsupdatetool.exe -command update -game "Counter-Strike Source" -dir .
  exit

  Жмем Файл\Сохранить как
  В Имя файла пишем Update.bat. Жмем Сохранить. Готово.
  Update.bat кидаем в папку с сервером (в данном примере C:\Server)! Теперь можно его запустить, после чего откроются два окошкa и начнется скачивание сервера, скрин можно посмотреть ниже:
  
  Сервер весит 1 - 1.2 GB (ОСТОРОЖНО ТРАФФИК), соответственно скорость скачки зависит от скорости твоего интернета и как следствие чем выше скорость Интеренета, тем быстрее все скачается. После окончания окошко закроется само.
  После того как скачка закочится, нам необходимо будет создать файл Start.bat, он нужен для запуска сервера. Нам вновь надо создать Текстовый документ, в котором необходимо прописать:
  

  Originally posted by author :

  @echo off
  cls
  echo Protecting srcds from crashes...
  echo If you want to close srcds and this script, close the srcds window and type Y depending on your language followed by Enter.
  title
  :srcds
  :loop
  echo (%date% %time%) srcds started.
  start /wait srcds.exe -console -game cstrike -tickrate 66 -port 27015 +fps_max 600 +maxplayers 12 +map de_dust2
  goto srcds
  echo (%date% %time%) WARNING: srcds closed or crashed, restarting.
  goto loop

  Файл настроен вот так: при запуски сразу же карта de_dust2 , TickeRate 66(если ставить выше, то могут быть проблемы на сервере, например жутко подниматься пинг), порт сервера 27015 , FPS сервера 600 и 12 слотов на сервер. (12 игроков)
  
  Набор основных команд, которые можно написать в строчке, которая подчеркнута красным цветом.
  1. -autoupdate Сервер проверяет обновления при запуске.
  2. -insecure Запускает сервер без использования технологии защиты от читеров (Valve Anti-Cheat).
  3. -nobots Отключить ботов.
  4. -verify_all Производит проверку на то, что каждый файл сервера последней версии.
  5. +ip <пример 192.168.0.1> Задает IP сервера, когда в системе несколько сетевых карт.
  6. +sv_lan <число 0/1> Если установлено в 1, то сервер может принять только пользователей локальной сети (LAN).
  7. +maxplayers <число от 1 до 32> Задает максимальное количество игровых слотов.
  8. +map <карта> Задает карту для запуска.
  9. +hostname "Имя Сервера" Задает имя сервера.
  10. -tickrate <число 33\66\100> Задает tickrate сервера (подробнее в Source Multiplayer Networking).
  11. -port <число 27015\27016\27017\27018> Порт для подключения клиента к серверу.
  12. +fps_max <число 300\600\1000> FPS сервера
  13. +tv_port <число 27020\27021\27022\27023\27024> Порт для подключения SourceTV.
  После чего жмем Файл\Сохранить как\Start.bat И кидаем этот фаил в папку с сервером (в данном примере C:\Server)
  Вот собственно и всё! Ваш личный CSS сервер готов! Ну безусловно вам придётся покопаться с настройками, и с добавлением музыки\карт, но это уже детали!)