Как создать файл стилей CSS?
Первый практический шаг, который необходимо сделать при работе со стилям CSS, это научиться создавать файл, в котором эти стили будут храниться. Давайте посмотрим, что для этого нужно сделать.
Первым делом нужно разобраться, что вообще собой представляет этот файл. Нужно понимать, что файл стилей CSS – это обычный текстовый файл, точно такой же, какой вы можете создать в любом текстовом редакторе «Блокнот», «Microsoft Word» и.т.д.
Единственное, что отличает файл стилей от других текстовых документов – это его расширение, которое имеет вид *.css.
Таким образом, можно сделать вывод, что создать файл стилей CSS мы можем просто изменив расширение текстового файла.
Для тех, кто любит видео:
Все мои уроки по CSS (каскадным таблицам стилей) здесь.Способ 1. Создание файла CSS меняя расширение текстового файла.
Откройте любой текстовый редактор, например, редактор «Блокнот», который входит в состав операционной системы Windows. Найти эту программу можно через главное меню Пуск -> Все программы ->Стандартные -> Блокнот.
В главном меню программы выбираем «Файл-Сохранить как».
И сохраняем текстовый файл с расширением *.txt.
Теперь нужно поменять расширение этого файла с *.txt на *.css.
Если у Вас не отображается расширение файлов, вот заметка:
Как включить отображение расширений файлов в Windows.
После того, как вы выполните инструкции из этой заметки, рядом с названием файла будет отображаться его расширение.
Теперь для создания файла CSS нужно просто переименовать файл, изменив его расширение на css.
После данной операции вы получите файл стилей css.
Способ 2. Создание файла стилей с помощью редакторов кода (на примере Dreamweaver).
Многие специализированные программы для редактирвания кода, например Dreamweaver, имеют специальные функции для создания файлов стилей CSS.
Давайте посмотрим, как это можно сделать в редакторе Dreamweaver.
После открытия программы появляется главное меню, в котором можно выбрать создание файла CSS.
После того, как файл будет создан, его можно будет сохранить через главное меню «Файл-сохранить как…».
Аналогичный процесс создания файлов CSS есть и в других редакторов кода.
На сегодня все. Подготовьте все необходимые программы, о которых сегодня говорилось и создайте файл стилей style.css. Завтра мы начнем наполнять его содержимым.
Что такое CSS, подключение CSS файла
CSS расшифровывается, как «каскадные таблицы стилей» (от англ. Cascading Style Sheets). CSS представляет собой совокупность параметров, с помощью которых отображается тот или иной элемент на веб-странице. Эти параметры могут указываться, как в отдельном файле, так и быть прописаны непосредственно в HTML-коде страницы. Например, на нашей веб странице могут быть такие элементы: заголовок статьи, абзацы, цитаты, сноски, картинки, видео ролики, ссылки. Можно задать конкретный стиль отображения — размер, цвет, толщину рамок и др.
При работе с сайтом рекомендуется использовать именно отдельный файл со стилями, а не внедрять код со стилевыми настройками в отдельные страницы. Это заметно сократит время — когда знаешь место нахождения таблицы стилей, всегда можно оперативно найти конкретный стиль и отредактировать. Файл стилей имеет расширение .css, название у него, как правило, style.css.
Подключение CSS файла
Для подключения CSS файла существует несколько способов. Мы расскажем о двух способах, которые наиболее часто используются при создании сайтов:
1. Связывание. Этот способ используется когда необходимо задать стили для всех страниц сайта в одном файле. Данный способ часто используется при создании сайта. Чтобы подключить таблицу стилей используется команда <link>, которую необходимо разместить в теле тега <head>.
<LINK REL=STYLESHEET TYPE="text/css" HREF="/css/style.css">
Первые два свойства указывают браузеру, что на сайте используется CSS, затем указывается адрес файла со стилями.
2. Встраивание в теги документа. При этом способе стиль для конкретного элемента страницы задается непосредственно в HTML коде. Например:
<div></div>
Или:
<span style="color: blue; background-color: yellow; font-variant:small-caps"></span>
Здесь мы прописали стили соответственно для контейнеров <div> и <span>. Данные стили будут применяться исключительно для них.
Приведем пример таблицы стилей — создадим файл style.css и пропишем стили:
body {
font-family: Arial, Verdana, Sans-serif; /* Семейство шрифтов */
font-size: 12pt; /* Размер основного шрифта в пунктах */
background-color: #f0f0f0; /* Цвет фона веб-страницы */
color: #000000; /* Цвет основного текста */
}
h2 {
color: #a52a2a; /* Цвет заголовка */
font-size: 24pt; /* Размер шрифта в пунктах */
font-family: Georgia, Times, serif; /* Семейство шрифтов */
font-weight: normal; /* Нормальное начертание текста */
} Здесь мы задали стили для тела страницы <body> и для заголовка <h2>. Также можно задать конкретные стили для любых других элементов страницы веб-сайта.
Теперь подключим нашу таблицу стилей к сайту:
<html> <head> <title>Подключение CSS к сайту</title> <link rel=STYLESHEET TYPE="text/css" HREF="/style.css"> </head> <body> <h2>Привет, Мир!</h2> <p>Это моя первая страница со стилями CSS</p> </body> </html>
Таким образом, мы разобрались, что такое CSS, зачем данная технология используется, научились подключать стили к сайту. Данный урок является, своего рода, введением в каскадные таблицы стилей. В других уроках мы будем говорить о технологии CSS более детально.
Понравилось? Поделитесь с друзьями!
Чем создать CSS файл? Программы для создания CSS файлов
CSS
Рассмотрим основные варианты, с помощью которых можно создать файл формата CSS (Cascading Style Sheet). Зачастую выполнение данной задачи не потребудет каких-либо особых хитростей, просто скачайте Adobe Dreamweaver (для операционной системы Windows) — интерфейс программы не сложный, да и скачать ее вы можете бесплатно.
Вооружившись программой с правильным функционалом, вы наверняка не испытаете проблем с созданием файла CSS. Мы собрали в общий список все программы походящие под данную задачу для ОС Windows, Mac, iOS, Linux и сделали удобную таблицу:
Программы для создания CSS файлов
Чем создать CSS в Windows? 
Mac 
iOS 
LinuxОбщее описание расширения CSS
Файл CSS представляет из себя каскадную таблицу стилей и зачастую применяется в сфере оформления веб-страниц. Основное назначение CSS файла, это задать цвет, шрифт и прочие положения отдельных блоков, расположенных на интернет-странице.
Узнать подробнее что такое формат CSS
Знаете другие программы, которые могут создать CSS? Не смогли разобраться как создать файл? Пишите в комментариях — мы дополним статью и ответим на ваши вопросы.
CSS. Как создать стили для веб-страницы – Бизнес Идеи : от 0 к прибыли
CSS. Как создать стили для веб-страницы.
Сегодня хочу рассказать о том, что такое стили, как создать файл стилей и как его использовать.
CSS – каскадные таблицы стилей. Специальный файл (или несколько файлов), который отвечает за оформление страницы. Имеет расширение *.css . В этот файл заносятся параметры, которые будут применяться к тем или иным элементам на странице.
Давайте по шагам создадим файл стилей и добавим в него несколько параметров, для веб-страницы.
1. Создадим страницу HTML.
Я поместил в нее такой код:
Вот как выглядит страница:
2. Вторым шагом создадим файл style.css
(делается это через блокнот: создаете файл, жмете «сохранить как», в параметре тип файла ставите все файлы, в имени ставите style.css). Пока что ничего в файл писать не будем. Просто сохраним.
3. Теперь, чтобы файл стилей работал, нам нужно присоединить его к странице HTML.
Делается это так:
В теге HEAD нужно прописать одну строчку:
У меня файл стилей лежит в одной папке с файлом HTML страницы, поэтому я указываю только имя. Если у вас стили лежат, например, в папке css, то вам нужно было бы прописать href=”css/style.css” .
В нашей страничке пока еще ничего не изменилось:
4. Теперь можно начинать писать стили.
Откроем файл style.css с помощью блокнота и пропишем в нем правило для заголовка:
.h2 {font-size:18px; font-family:Arial;}
Обновляем страницу и видим, что ничего не изменилось.
Чтобы изменения вступили в силу, нужно в файле HTML придать нужному тегу атрибут class=”имя стиля”.
Пропишем тегу h2 атрибут class=”h2”. Теперь результат должен измениться:
На самом деле стиль, который мы задаем через точку, как .h2, является универсальным. Мы этот стиль можем применить не только к h2, но и к параграфу, и к списку, и к элементу списка и так далее. Можете попробовать.
5. Теперь назначим стиль для простого параграфа. Сделаем это другим способом.
Пропишем в таблицу стилей следующее:
P {font-family:Verdana; color:#cc0000;}
Обновим страницу. Как вы заметили, мы здесь не добавляли атрибут class, а параграфы изменились, причем оба. Дело в том, что мы ввели в стили «p» без точки. Это значит, что для всей страницы, к которой привязана данная таблица стилей, мы переназначили параметры тега абзаца. Вне зависимости от того, есть у него дополнительные параметры или нет.
6. Сейчас рассмотрим еще один способ назначения стилей.
Давайте добавим в таблицу стилей следующую строку:
p#abc {font-family:Arial; font-size:14px; color:#c0c0c0;}
Как видите, второй параграф изменился. Если помните, мы назначили этому параграфу идентификатор id=”abc”. Наша строчка в таблице стилей как раз и означает, что данное правило будет действовать только для тех параграфов, которые имеют id=”abc”.
7. Давайте приступим к списку.
Пропишем в таблицу стилей такие правила:
ul {border:1px solid #000000; background-color:#CCCCCC;}
li {font-size:16px; color:#FF0000; text-decoration:underline;}
Как видите, вокруг нашего списка появилась рамка, фон стал серым, а пункты списка – красными и подчеркнутыми.
Вне зависимости от того, оформляете ли вы текст через CSS или форменные элементы, делается это одинаково. Главное – понять структуру правил CSS, а остальное – мелочи.
Вот и итоговый результат нашей работы.
Задачи сделать это шедевром не было, поэтому прошу не ругать. Главное, чтобы вы поняли, как работает CSS.
__
При поддержке everalp.ru – выполнение кровельных работ.
CSS HTML уроки для начинающих академия
Манипулировать текстом
Цвета, Коробки
Стилизация HTML с CSS
CSS означает каскадные таблицы стилей.
CSS описывает, как HTML-элементы должны отображаться на экране, бумаге или на других носителях.
CSS экономит много работы. Он может контролировать расположение нескольких веб-страниц все сразу.
CSS можно добавлять к элементам HTML тремя способами:
- Встроенный — с помощью атрибута Style в элементах HTML
- Internal -с помощью
<style>элемента в<head>разделе - Внешний — с помощью внешнего CSS-файла
Наиболее распространенным способом добавления CSS является сохранение стилей в отдельных CSS-файлах. Однако, здесь мы будем использовать встроенный и внутренний стиль, потому что это легче продемонстрировать, и проще для вас, чтобы попробовать его самостоятельно.
Совет: Вы можете узнать больше о CSS в нашем учебнике по CSS.
Встроенный CSS
Встроенный CSS используется для применения уникального стиля к одному элементу HTML.
Встроенный CSS использует атрибут style элемента HTML.
В этом примере устанавливается цвет текста элемента <h2> синим цветом:
Пример
<h2>This is a Blue Heading</h2>
Внутренняя CSS
Внутренний CSS используется для определения стиля для одной HTML-страницы.
Внутренняя таблица CSS определена в разделе <head> HTML-страницы в элементе <style> :
Пример
body {background-color: powderblue;}
h2 {color: blue;}
p {color: red;}
<h2>This is a
heading</h2>
<p>This is a paragraph.</p>
</body>
</html>
Создание файла стилей CSS
количества страниц на сайте. Представьте себе: захотелось вам поменять цвет шрифта на всем сайте. Это ж сколько страниц пришлось бы перелопатить, если бы стиль был прописан в каждой из них. А так вы исправили значение лишь в одном файле стилей, и это правило автоматически будет применено ко всем страницам сайта.
Тут стоит сразу же упомянуть о двух других вариантах: местном стиле и встроенном стиле.
Местный стиль — это когда непосредственно у какого-либо элемента страницы прописывается стиль. Выглядит это таким образом:
<p>Лорем ипсум колбаса. Умца умца умца ца!</p>
Весь этот абзац будет набран красным цветом. Местный стиль удобно применять, когда нужно изменить вид всего одной-двух мелких деталей, чтобы из-за них не добавлять лишних правил в отдельный файл стилей. И это тоже правильно: зачем загромождать файл стилей, если мы этот дополнительный стиль больше никогда не будем использовать в дальнейшем.
Встроенный стиль — это практически тот же файл стилей, но записанный не отдельным файлом css, а внедренный непосредственно в код страницы сайта в пределах тэгов <head></head>. Выглядит это таким образом:
<style type=»text/css»> …тут всякие правила…
</style>
Зачем делать такую штуку, если можно вынести стили в отдельный файл? Иногда как раз этого не стоит делать. Например, если у вас мини-сайт или сайт-заставка, который состоит из пары-тройки страниц, а то и вовсе из одной главной. Согласитесь, что нет смысла выносить стили в отдельный файл в таком случае. Тем более, если и самих-то стилей всего ничего.
Открываем новый документ в текстовом редакторе PSPad, но на этот раз выбираем другой тип документа: Файл – Новый – Cascading Style Sheet. Там уже будет прописана одна строка:
/* CSS Document */
Это так называемый комментарий. Нужен он больше для самого верстальщика, нежели для сайта. Комментариями часто помечают в файле стилей разделы документа. Например, часть правил для шапки сайта, часть для контента и т.д. То есть, для удобства чтения кода, чтобы не заблудиться. Комментарием может быть любой текст. Браузеры не читают и нигде не отображают комментарии.
Чтобы добавить комментарий, достаточно поместить его между двумя слэшами со звездочками /* */.
Ну а теперь приступим непосредственно к записи кода в листе (файле) стилей.
В листе стилей CSS части кода называют правилами. Каждое правило состоит из селектора (читай — атрибута) и объявления. Объявление, в свою очередь, состоит из
свойства и значения.
Чтобы стало понятнее, рассмотрим пример:
p {color: #000;}
Данная запись означает, что все абзацы будут набраны чёрным шрифтом. Здесь p — это атрибут, а то, что находится в фигурных скобках и есть объявление правила для этого атрибута. Слово color является свойством объявления, а решётка с тремя нулями —
значением объявления.
В данном случае значение объявления записано в виде шестнадцатиричного числа, обозначающего цвет. Всем, кто пользуется Фотошопом это должно быть известно. Возникает вопрос: почему всего три нуля, ведь в данном обозначении должно быть шесть знаков? Все просто. Когда пары знаков одинаковы 00 00 00, FF FF FF, то допускается писать сокращённо — 000, FFF и т.п. Все браузеры это понимают правильно.
Правило можно писать как угодно — хоть в строку, как у нас, хоть в столбик — это роли не играет:
p {
color: #000;
}
Важно только не забывать две вещи:
1.После каждого свойства необходимо ставить двоеточие.
2.После каждого значения — точку с запятой.
Окей! С этим разобрались. Теперь давайте сразу запишем ряд правил, а после разберем, кто есть ху:
* { margin: 0;
padding: 0; border: 0;
}
body {
padding: 2% 0 0; background: #fff; color: #333;
font-family: «Comic Sans MS», Verdana, Arial, Helvetica, sans-serif;
}
#container { width: 760px; margin: 0 auto;
border : 1px solid #999;
}
16
В первом правиле звёздочка означает не что иное, как всю страницу разом. Это так называемый общий сброс. Он нужен для того, чтобы некоторым из браузеров не пришло в голову добавлять рамки, отступы или поля где ни попадя. Особенно этим грешит IE (Internet Explorer). Это не обязательный набор правил. Но правильные верстальщики пишут его везде и не парятся.
Сама звёздочка — это не тэг и нигде потом в коде страницы не указывается. Браузеры прекрасно понимают её значение и применяют данные с ней правила ко всей странице. Значения указываются либо в процентах, либо в пикселах. Кстати, если стоит ноль, то единицу измерения не нужно указывать. Ноль — он и в Африке ноль.
Следующий набор правил — для тела страницы body. Первое из них задает поля: сверху 2%, с боков по нулям, снизу тоже ноль. Это значит, что наша страничка не будет лепиться к верхушке окна браузера, а отступит от него на 2% размера окна. Тут значения идут подряд без запятых и только после последнего ставится точка с запятой.
Вы можете спросить: почему всего три значения, когда у прямоугольника, коим по-сути и является страница сайта, ровно 4 стороны? Не больше и не меньше. Все просто. Сейчас расскажу о принципе, по которому в верстке задаются любые значения для сторон прямоугольника.
Напомню: у любого прямоугольника есть 4 стороны. Кто не верит — бегом читать учебник геометрии. И значения для них задаются по часовой стрелке, начиная сверху, затем правое, низ и, наконец, левое. Таким образом, если бы нам нужно было задать поля так, чтобы сверху и снизу было по 10 пикселей, а по бокам по 20, то мы бы написали так:
padding: 10px 20px 10px 20px;
Уловили? По часовой стрелке, начиная сверху: 10, 20, 10 и снова 20. Это просто. Идем далее.
Фишка в том, что существует так называемая сокращенная запись правил. Сокращения могут быть различными. Одно из них — это сокращенная запись значений, если они одинаковы для нескольких сторон. В нашем случае у верха и низа поля по 10 пикселей, а по бокам по 20. Поэтому запись правила можно сократить до:
padding: 10px 20px;
И это будет ровно тоже самое!
Другой вариант: сверху поле в 10 пикселей, по бокам по 20, а снизу всего 5. Как быть? А вот так:
padding: 10px 20px 5px;
Ну и, наконец, если со всех сторон одинаковые поля, то и значение в правиле дается всего лишь одно:
padding: 10px;
Надеюсь, идея понятна.
17
Следующее правило задает общий фон всему сайту:
background: #fff;
Как видите, цвет записан в три знака. На самом деле шестнадцатиричный код белого цвета #ffffff. Но, как я уже и говорил, если пары знаков одинаковы, то можно сократить запись до трех значков. Цвет общего фона лучше прописывать всегда и не надеяться на цвет поумолчанию, который у всех браузеров и так белый. Вдруг какой умник в своем браузере изменит цвета по-умолчанию на что-то другое?
Следующее правило задает цвет шрифта для всего сайта:
color: #333;
В нашем случае это темно-серый #333. Это не значит, что теперь все буквы на сайте станут темно-серыми. Ссылки так и останутся синими по-умолчанию, а посещенные, соответственно, фиолетовыми. Данная запись лишь устанавливает общий цвет шрифта, который в конкретных ситуациях (например, для заголовков) можно будет в дальнейшем изменить. Но об этом чуть позже.
Следующее правило устанавливает семейство шрифтов, которые мы используем:
font-family: «Comic Sans MS», Verdana, Arial, Helvetica, sans-serif;
Зачем такая длинная запись, если нам нужен конкретно шрифт Comic Sans MS для основного шрифта? Дело в том, что иногда на компьютере пользователя нет такого шрифта. Но вполне вероятно, что у него есть следующие из перечисленных. Вот поэтому мы и предлагаем браузеру пользователя в порядке предпочтения выбрать какой-либо из них. Последнее слово sans-serif означает общее семейство шрифтов без засечек. Соответственно, serif — это с засечками.
Тут есть одно важное замечание: если имя шрифта состоит более чем из одного слова, то его нужно взять целиком в кавычки. Например: «Times New Roman».
Идем далее. Следующий набор правил очень любопытный. Во-первых, появилось незнакомое слово container с решёткой (#) впереди. Данная решётка и означает уникальность атрибута. То есть тэг div с данным атрибутом будет использован только один раз на странице. Помните, мы говорили про id? Вот это оно и есть.
#container { width: 760px;
border : #999 solid 1px; margin: 0 auto;
}
Что это за контейнер такой и для чего он нужен? Дело в том, что любой браузер поумолчанию будет лепить страницу сайта в верхний левый угол. И это правильно! Порядок нужен во всем. Но что если наш сайт довольно узкий по ширине, а монитор дюймов на 20? Весь сайт сиротливо будет прижиматься к левой стороне монитора, а справа останется куча пустого пространства. Не слишком красиво, верно?
Вот поэтому нам нужно наш неширокий сайт разместить по центру экрана. Но как это сделать? Одним из способов как раз и является дополнительный контейнер. По-сути, это
пустой блочный тэг div с заданной шириной и отступами. Это как коробка, о которой мы говорили ранее. Именно в нее мы и будем укладывать наш сайт.
Как видите, мы в наборе правил для контейнера указали ширину в 760 пикселей, рамку светло-серого цвета #999 толщиной в 1 пиксель и какой-то хитрый отступ 0 auto. Что это значит? А это как раз и означает, что сверху и снизу отступ будет равен нулю, а по бокам этот блок будет равноудален от правой и левой стороны окна браузера, причем автоматически. То есть, при любом размере экрана монитора (в разумных пределах) наш сайт всегда будет находиться строго по центру.
Возникает резонный вопрос: а почему бы у тэга body не указать такую же ширину страницы и автовыравнивание? А ничего не выйдет! Браузеры не дураки (не все) и тэг body для них равносилен всему экрану монитора. Вы же экран не станете двигать? То-то же!
Предвосхищая вопрос о так называемой «резиновой» верстке, когда страница сама подстраивается под любой размер экрана (во всяком случае, это подразумевается, но работает не всегда корректно), то скажу прямо и откровенно: я против такого подхода.
Во-первых, это блажь чистой воды. Угодить всем просто невозможно. Кто-то уже приобрел монитор в 24 дюйма, а кто-то до сих пор щурится в 15. И ежу понятно, что на большом мониторе все элементы страницы расползутся как тараканы, а на маленьком сгрудятся в непонятную и перемешанную кучку. Оно вам надо?
Во-вторых, в дизайне, как и в любом другом виде творчества, центральное положение занимает гармония, а не количество контента на 1 см². В случае «резиновой» верстки мы получаем нарушение пропорций при изменении размеров монитора, и говорить о какой-то там гармонии уже не приходится.
В-третьих, следует учитывать психологию восприятия контента. Комфртно читатется текст, когда в одной строке умещается максимум 10 – 12 слов. Если их будет больше (а при растянутом на большом экране сайте так и будет), то читать текст становится очень трудно, ибо глаз постоянно теряется на длинной строке.
Поэтому я против резиновой верстки.
Продолжаем разговор за CSS. Далее в листе стилей запишем несколько правил для шапки
(header) сайта:
#header {
background: url(header.jpg) no-repeat; width: 760px;
height: 158px;
}
Снова видим уникальный элемент с решеткой. Иначе такая запись называется также селектор. Напомню еще раз, что для таких элементов можно писать любые имена. Например:
#shapka
Суть от этого не изменится.
как сделать их самому и как взять готовые
От автора: здравствуйте, уважаемые читатели портала webformyself. В сайтостроении огромное значение имеет оформление веб-ресурса. Именно за это отвечает язык css (каскадные таблицы стилей), о котором мы сегодня и поговорим. А точнее, о его подключении и использовании. Рассмотрим некоторые css стили для сайта, которые используются при оформлении веб-страниц.
Подключение css
Сегодня едва ли вы где-то найдете веб-страницу, которая была бы создана чисто за счет возможностей html. В самом деле, внешний вид подобных сайтов был бы просто ужасным, поэтому, когда готова разметка нужных элементов, их тут же нужно оформлять, а это делается с помощью css в отдельном файле.
Нужно сказать, что вообще существуют также возможности включения стилей в html-файл. Например, их можно определить с помощью атрибута style или такого же тега. Это называют встроенными стилями. Такой подход сегодня не приветствуется и нарушает современные стандарты разработки.
А как же сделать правильно, спросите вы? Для этого нужно создать новый файл с расширением css, а затем подключить его к html. Это делается очень просто с помощью тега link, который и отвечает за подключение внешних файлов. Делается это так:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее<link rel = «stylesheet» type = «text/css» href = «style.css»>
<link rel = «stylesheet» type = «text/css» href = «style.css»> |
Тег является одинарным, как вы уже поняли. Немного подробнее расскажу о его атрибутах:
rel = «stylesheet» – вообще атрибут rel записывается для того, чтобы определить роль файла на странице. В нашем случае роль – это таблица стилей, что и указывается.
type = «text/css» – так называемый MIME-тип, который обычно указывается всем подключаемым файлам, чтобы браузер правильно их интерпретировал. В современных веб-обозревателях можно не писать этот атрибут.
href = «style.css» – стандартный атрибут, указывающий адрес нашего внешнего файла. В данном случае он записан исходя из того, что файл имеет название style, расширение css и находится в той же папке, что и html-документ.
Как видите, в подключении css-файлов у вас будет меняться только атрибут href, все остальное менять не нужно. К странице можно подключать сколько угодно таблиц стилей, но оптимальным считается не более 2-4, потому что слишком много запросов к серверу это тоже не очень хорошо.
Где взять готовые css стили для сайта?
Ну ладно, с подключением, я надеюсь, все более менее понятно. Но ведь вы создаете пустой файл, и чтобы от его добавления был виден эффект, нужно либо самому написать правила, либо взять их откуда-то.
В сети, например, очень много бесплатных html-шаблонов. Есть скачать любой из них, то внутри обязательно будет и готовая таблица стилей с нужными правилами для оформления сайта. Но корректно работать она будет только для своего же html-документа. Дело в том, что эти два языка связываются с помощью так называемых селекторов.
Селектор – это особенность языка css, присущая только ему. Зачем они нужны? Ну вот представьте такой код:
<h2 class = «title»>Текст в заголовке</h2> <p>Текст в абзаце</p>
<h2 class = «title»>Текст в заголовке</h2> <p>Текст в абзаце</p> |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееИ вот как нам в css, например, оформить абзац и заголовок? Для этого и созданы селекторы, чтобы обращаться только к тем элементам, к которым нужно. Например:
p{ font-size: 12px; } .title{ font-size: 36px; }
p{ font-size: 12px; } .title{ font-size: 36px; } |
Мы задали для всех абзацев размер шрифта, равный 12 пикселям, а элементы с классом title (в нашем случае это h2) получили гораздо больший размер – 36 пикселей. Заметьте, в случае с абзацами стили применяться к ним всем, сколько бы их ни было на странице.
Второй же селектор обратился только к одному элементу – с классом title. Конечно, можно создать другие элементы с точно таким классом, это не запрещено, и они получат такое же правило, но если мы просто напишем в html тег h2 (без класса title), то для него никаких правил добавлено не будет.
Вот так вот удобно позволяет css выбирать нужные элементы и оставлять в покое те, что не нужны. Какое это имеет отношение к готовым стилям, которые вы можете найти в интернете? Там все привязано к определенным классам и идентификаторам, поэтому вы не сможете вот так просто подключить эти таблицы к любым файлам, они не заработают, если в html у нужных элементов не проставлены соответствующие классы.
Например, в таблице стилей видим такой код:
.nav{ width: 300px; background: aqua; … } .nav a{ display: block; color: #ccc; … }
.nav{ width: 300px; background: aqua; … } .nav a{ display: block; color: #ccc; … } |
Уже из этого мы можем сделать вывод, что где-то на нашей html-странице должен находиться элемент с классом nav, а в нем должны лежать ссылки. Если это действительно так, то оформление применится к ним и внешний вид их соответствующим образом изменится. Если же таких элементов обнаружено не будет, то код просто проигнорируется.
Опять же, в сети вы можете найти массу готовых шаблонов, в которых можно увидеть эту связь классов , так что если вы меняете что-то в html, соответствующие операции нужно произвести и в таблице стилей.
Как самому сделать css стили для сайта?
Сss не является чем-то страшным и чрезвычайно сложным. Это обычная технология, созданная людьми для оформления веб-страниц, имеющая свои правила. Достаточно понять их, и вы тоже сможете создавать внешний вид веб-ресурсов с помощью этого языка.
Самое главное условие быстрого освоения – постоянная практика, вкупе с новыми знаниями, которые вы для себя усвоите. Подобную практику вам может дать наш курс по различным техникам верстки.
Кроме этого, азы css вы можете узнать и усвоить в нашем премиум-разделе. Там есть один из курсов, который полностью посвящен базовым свойствам этого языка. Вот он.
Самое главное, решительно настроиться на изучение и отбросить предубеждения о том, что это очень трудно. Также вам могут помочь бесплатные материалы на нашем сайте, статьи и видеоуроки. При желании вы и по ним сможете приобрести основные знания, которые нужны при работе с css.
На этом я с вами прощаюсь. Читайте наш блог webformyself, чтобы улучшать свои знания в области сайтостроения.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотреть