Файл css или история одного маленького, но очень интересного файла

Привет всем посетителям и читателям моего блога. Сегодня я расскажу про файл css. Расскажу немного истории и научу вас ориентироваться в css файлах. На самом деле это легко, даже очень. Просто нужно немного ума, и знать последовательность.

файл css

Ну давайте немного истории этого файла, и о том, как я с ним познакомился. Откуда взялся css? Это надо быть такими мозгами, чтобы это все придумать!!!

Как обычно для новичков. Css — это каскадные таблицы стилей. Эти стили были сделаны специально для языка html. Этот язык делает наш блог/сайт красивее. Ведь без css все сайты были бы одинаковые, один сплошной текст. Не было бы таких красивых дизайнов.

Разумеется с html я познакомился намного раньше. И уже знал определенные теги, такие как img, scr... Знал что страница состоит из html, body,header. Да я и сейчас большего не знаю, знаю только то, что нужно для работы с блогом.

Раньше везде встречал этот файлик, и он мне казался таким сложным, непонятным. А теперь я довольно хорошо понимаю этот язык, но именно в вордпресс.

История файла css началась в далеком 1994 году, когда предложили для файла html каскадные таблицы стилей. Тогда же была создана первая версия файла, хотя она во многом отличается от настоящей, но начало было задано тогда.

Затем в Чикаго был представлен черновик, где шли споры. И после всего в 1996 году был официально рекомендован. Кстати предлагалось 9 языков стилей.

Первым браузером в котором поддерживался это язык был Internet Exploer. Далее файл css редактировался в 1998 году, и последние изменения были внесены в 2009 году. Ну вот немного предыстории и переходим к изучению.

Файл css. Как разобраться?

У всех блогов на вордпресс есть такой файл. Вы его можете найти в папке вашей темы(wp-content; thems, ваша тема, style.css). Скачайте это файл и давайте учится в нем разбираться.

Обычно файл начинается с записи, и в ней ничего лучше не менять. Я буду рассматривать на примере своего файла, но принципы остаются те же.

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

  1. Header
  2. background url
  3. footer
  4. sidebar
  5. comments
  6. postwrap
  7. a: hover }
  8. border
  9. #ofofof

Вот эти понятия вы должны знать. Например:

  • Первое это шапка
  • Второе это фон чего-либо
  • Третье это низ блога(подвал)
  • Четвертое — сайдбар. У меня он находится справа. В него входят рубрики блога, топ-комментаторов, подписка по почте.
  • Пятое это комментарии. Цвет текста в комментариях, цвет фона, рамка и так далее.
  • Шестое — это место для поста. Цвет фона, шрифта, размер его. Все это изменяется.
  • Седьмое — это цвет ссылки. Исходящей либо внутренней. То есть при наводе мышки на какую-либо ссылку, она будет светится иным цветом(и не только). Все это вы дальше поймете.
  • Восьмое — это рамка. Цвет рамки, размер и так далее.
  • Девятое — это набор символов, определяющий определенный цвет.

Вот на эти основные понятия вы можете ориентироваться. Конечно, я не все указал, а только главные, которые вам помогут на начальном этапе. Итак, начнем.

язык css

Первые строчки моего css файла начинаются с вот такой записи: background: #4b4a50; Это значит, что фон моего блога = определенному цвету, серому. Такой фон я выбрал в фотошоп. То есть нашел определенный цвет, скопировал его код(например, 4b4a50) и вставил в файл.

Запомнили, если есть такие символы(4b4a50) то это определенный цвет. Им может быть и цвет ссылки, и цвет сайдбара. Так, с фоном мы разобрались. Ой, я кое-что забыл. Во многих файлах фон блога может быть представлен изображением, которое находится в папке вашей темы под определенным названием. Например:

body {
background: url («images/body.jpg») repeat scroll 0 0 transparent;

Смотрим, background: url. То есть эта ссылка указывает на то, что фон блога находится в папке"images" под названием «body». Нам нужно только зайти в эту папку, найти изображение с соответствующим названием и изменить его через фотошоп. Идем дальше.

Посмотрите на этот код

a:link, a:visited { 
text-decoration:none; 
color:#06399f; 
border:0; -moz-outline-style:none;

За что отвечает этот код? Смотрим на цвет #06399f — это темно синий оттенок. Если я поставлю #000000, то на главной странице запись «читать запись полностью» будет черным цветом, а сейчас она темно-синего цвета.

img {
	border:none;
	margin:0;
	padding:0;
}
img.alignleft {
	margin-right:10px;
	margin-bottom:5px;
}
img.alignright {
	margin-bottom:5px;
	margin-left:10px;

Разбираемся. Первый тег img, border: none. На всех изображениях на блоге нет рамки. Дальше идут теги img.alignleft и img.alignridht

Где alignleft это означает, что когда изображение в посте будет находится слева, то будет отступ от правого края будет 10 пикселей, а от нижнего края элемента 5 пикселей.

Где alignright будет наоборот. Отступ от левого края будет 10 пикселей, ну а от нижнего края элемента 5 пикселей.  Идем дальше.

hr {
	height:1px;
	border-top-width: 1px;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	border-top-style: dotted;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CFCFCF;
	border-right-color: #CFCFCF;
	border-bottom-color: #CFCFCF;
	border-left-color: #CFCFCF;

Смотрим на строчку «border-top-color: #CFCFCF;», если я измени на цвет #ffoooo, то при нажатии на главной странице на ссылку «читать запись полностью» она будет красным цветом. Именно при нажатии на нее, а не при наводе. Так же будет красным цветом запись изменить, перейти на вторую страницу в блоге(вперед) и при нажатие на исходящую ссылку.

blockquote {
	margin:0 20px 10px 10px; padding:10px 15px; border-left: 5px solid #F0F0EC;

Этот тег отвечает за определенный цвет в статье вашего блога. То есть у вас есть область, которую вы хотели бы выделить отличным цветом. Например, такой прием используется при взятии интервью, чтобы отличить текст автора от ответа человека, у которого брал интервью.

Надо ввести blockqoute текст blockqoute. Идем  дальше.

#wrap {width:1006px;
 position:relative;
 margin:0 auto; 
 padding:0; 
 background: url(images/body-bg.gif) repeat-y left;

Что мы видим? Тег wrap. Это фон блога и ширина(width) которого равна 1006 пикселей. Фон находится в папке images под названием body-bg.gif Эту картинку можно изменить в фотошопе, как вам угодно. Следующий код. 

 

#header {
	clear:left;
	height:414px;
	width:1006px;
	margin-right:auto;
	margin-left:auto;
	position:relative;
	background: url(images/header-bg.png) no-repeat left top;

Это код шапки блога, так как header это голова.  Видим, что длинна шапки равна 1006 пикселей, а высота 414. Когда я менял шапку, у меня были определенные проблемы. В коде прописано было 213 пикселей, а новая шапка 414. Я изменил эти показатели и вставил новую шапку. И меню блога подпрыгнуло вверх. Я не знал как это опустить и пошел на фриланс.

Эту проблему мне решили через 10 минут. Кстати, как вам новая шапка блога? Жду ваших комментариев.

css

Смотрим на следующий код:

#header .Menu a {
 display:inline;
 margin:0px;
 padding:4px 8px;
 font-size: 14px;
 font-weight: bold;
 border: 1px solid #ffffff;
 background: #000555;

Что эта запись означает? Посмотрите на ссылки в верху страницы, которые ведут на главную, все статьи блога, обо мне и обратная связь. Какой их цвет? Правильно темно-синий =#000555. А border это рамка, которая белая, то есть ffffff. Но меню на этом не закончено, оно продолжается следующим кодом.

#header .Menu a:hover {
 text-decoration:none;
 color: #ff9601;
 background: #ff9601
 border: 1px solid #ff9601;

Тут везде один цвет = #ff9601. Это оранжевый. То есть при наводе мышки на страницу(напиример, главную), она будет светится оранжевым цветом. Можете сами проверить. Вот с этим вопросом разобрались.

Смотрите, на цвета в коде. Затем смотрите, где они находятся у вас на блоге и изменяйте их. Как изменить цвет поста в css файле? Очень просто. Вот допустим перед нами код

.postwrap {
 float:left;
 width:605px;
 padding:10px;
 position: relative;
 left: 25px;
 background: #ffffff;
 border: 1px solid #D2D2C6;
 margin-bottom: 12px;

Этот код отвечает за цвет поста в блоге. Оно и видно из заголовка «post». В данный момент у меня фон поста белый и это видно из кода(ffffff). Если вы хотите этот цвет у себя на блоге изменить, вам нужно только найти этот тег( postwrap ) и изменить цвет. Смотрим дальше.

.posthead {
	position:relative;
	clear:left;
	padding-top: 8px;
	color: #000000;
	font-family: Georgia, "Times New Roman", Times, serif;

Это текст. Шесть нулей означают черный цвет заголовка поста. Это понятно. Смотрим на следующий код.

#content .posthead h1 a:hover {
	color: #0054ff;
	text-decoration: none;

Видим в начале кода есть ( a: hover) это цвет ссылки. Запоминайте, когда увидите такие символы — это что-то связано  с ссылкой. Видим тег <color> и цвет #0054ff — это голубой цвет. Это значит при наводе мышки на заголовок поста в блоге, он будет светится синим.

Дальше идет форма комментариев и такие теги:

#commentform label {
.commenttext {
#commentform #submit {

Это все связано с комментариями. Форма комментариев, текст в комментариях, ввод за все отвечают эти теги. Там же и смотрите цвета, сравнивайте со своим блогом.

Файл css, еще раз повторюсь, идет последовательно. И идет  sidebar. Туда входит все и левый, и правый саqдбар, в зависимости от вашей темы. Ну давайте я вам покажу, на примере моего поиска.

#sidebar-top #searchform {
	background: #000000;
	padding: 4px;
	border: 1px solid #BBBBB1;
	margin-top: 15px;
	margin-bottom: 10px;

Видим, что фон  поиска по блогу черный(000000). Цвет рамки (border) почти белый, немного серый. Ну и в заключении футер, подвал блога.

#footer {
	clear: both;
	width: 990px;
	font: 11px Arial, Helvetica, sans-serif;
	background: url(images/footer.png) no-repeat left top;
	height: 80px;
	text-align: center;
	padding-top: 30px;
	color: #CCCCCC;

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

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

Взять изменить цвет, потом пойти посмотреть, что изменилось. Я в основном все изменял методом тыка и вот научился. Запомнить, что все идет последовательно. Используйте шпаргалку в начале статьи.

В помощь вам я создал страницу на блоге — «ВИДЕОКУРСЫ». В этом разделе вы найдете всю самую полезную информацию, которую вообще можно найти. И добавил 2 супер курса по html и css.

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

подписка на обновление
Успехов вам и продвижения

С уважением, Фокеев Тимофей

 

27 комментариев на “Файл css или история одного маленького, но очень интересного файла”

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

Качайте и зарабатывайте
Подписка на обновление

Введите ваш e-mail:

Получать статьи о:

- заработке в интернете

- личном росте

- seo и раскрутке блогов

Подписывайтесь на канал
Лучшие видео на блоге

Главная|Все статьи | Обо мне | Обратная связь | Мои курсы