Первый практический шаг, который необходимо сделать при работе со стилям 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 не подключить к HTML странице, никакого эффекта от их использования не будет. Существует несколько способов, как это можно сделать.
Для тех, кто любит смотреть в формате видео.
Для тех, кто любит читать, инструкция ниже.
Для того, чтобы продемонстрировать, как работает каждый из этих способов, возьмем, для примера, html-файл со следующим содержимым.
Задача стилей CSS, которые будут подключаться, сделать элемент абзаца <p> красным цветом.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Документ без названия</title> </head> <body> <p>Абзац</p> </body> </html>
Во всех примерах, результат на веб-странице будет один и тот же. Вы увидите вот такой красный абзац текста.
1 вариант. Внутри открывающего тега с помощью атрибута style.
Элементам на странице, которые располагаются внутри элемента body, можно добавить атрибут style. Значением этого атрибута могут быть свойства и значения CSS, которые должны будут применены к этому элементу.
Давайте посмотрим, как это работает на конкретном примере. Атрибут style добавлен для элемента <p>.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Документ без названия</title> </head> <body> <p>Абзац</p> </body> </html>
Обратите внимание, что в этом случае не нужно использовать селектор, т.к. элемент, к которому добавлены стили уже определен.
2 вариант. Внутри элемента style.
Еще один способ подключения стилей CSS, это воспользоваться элементом <style> с атрибутом type="text/css". Указание этого атрибута обязательно.
Давайте посмотрим, как это выглядит на конкретном примере.
<!DOCTYPE HTML> <html> <head> <style type="text/css"> p {color:red;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Документ без названия</title> </head> <body> <p>Абзац</p> </body> </html>
3 вариант. Подключение внешнего файла стилей.
И последний вариант подключения стилей CSS является использование элемента link, который позволяет подключать к HTML странице внешние файлы.
Обратите внимание на атрибуты, которые указываются у этого элемента.
<link rel="stylesheet" href="style.css" type="text/css"/>
Они тоже являются обязательными. В атрибуте href указывается путь к css файлу, который нужно подключить.
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="style.css" type="text/css"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Документ без названия</title> </head> <body> <p>Абзац</p> </body> </html>
Файл style.css содержит следующих код:
p {color:red;}
Эти 3 способа подключения стилей CSS очень часто используются на практике. Советую вам поэкспериментировать с этими примерами на своем компьютере. В будущем, это вам очень сильно пригодиться.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Поддержипроект!!!
Как можно сделать файл css!? В какое программе можно сделать файл css!? Создать файл css на компьютере. Примеры создания файл css. Есть множество программ, в которых можно сделать файл css и это совсем просто! Плюс к тому, у нас есть готовый вариант сделать файл css, вообще без программы.
Навигация по странице :Способ сделать файл css вообще без программы, будем делать фал css на компьютере!
Открываем папку, где должен находиться файл css
Нажимаем ПКМ, по пустому месту в папке. Создать – текстовый документ.Можно сразу выделить и удалить сразу все, и написать ваше название нового файла стилей css
Primer-CSS.css
Если у вас нет точки, ищем - параметры папок - скрывать расширение для зарегистрированных файлов(для XP, vista, 7,8,10 - все одинаково). Вроде делал страницу на данную тему- не помню где... Зачем здесь, сейчас говорю об отсутствии разрешения файла!? Просто - когда столкнетесь, поймете зачем здесь показывать расширение!Выходит предупреждение – игнорируем – нажимаем да.
Всё! Наш файл css – готов!
Для того, чтобы понять, что это файл css нам нужно что-то туда добавить, к примеру такую запись:
/* CSS Document */
Загрузим на сервер Смотрим, что у нас получилось!Следующим шагом у нас идёт прикрепление файла css к странице.
Можно сделать файл css в простом блокноте! Открываем блокнот, заносим какие-то стили в текст вашего нового файла css - далее идем в файл - сохранить как - печатаем название создаваемого файла css - тип файла - здесь нужно выбрать все файлы - далее кодировка файла css - выбираем utf-8, вы конечно можете оставить ANSI - потом расскажите!
Открываем программу Sublime, в новом документе создаем какие-то нужные стили. Нажимаем файл - сохранить как, или сохранить все - выбираем название вашего будущего файла css - можно оставить тип фала - все файлы. либо выбрать расширение css в выпадающем окне:
Создание файла css в программе Notepad абсолютно аналогично созданию файла css в предыдущей программе!
Создаем документ css - идем файл - сохранить как - выбираем местоположение вашего нового файла css - выбираем название файла css - выбираем тип, либо можно оставить все файлы, нажимаем сохранить файл css.
На сервере можно создать файл через, любую программу filezilla, которая может связываться с с сервером с помощью ftp
Во вкладке сервер нажимаем ПКМ - в новом окне - выбираем новый файл - далее печатаем название создаваемого файла css - нажимаем ок - видим, что наш новый файл создался на сервере - естественно, что он сейчас пустой. Если вы хотите го редактировать, добавлять содержимое на компьютере его надо скачать.Последняя дата редактирования : 2020-01-21 11:21
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+ BBcode Теги:Глава 1
В этой главе речь пойдет о том, как внедрить CSS в документ HTML, то есть связать стилевое описание элемента непосредственно с самим элементом, каким либо HTML тегом.
Осуществить данную задачу можно тремя способами:
Давайте более подробно рассмотрим каждый вариант, а заодно познакомимся с правилами синтаксиса написания CSS.
Практически каждый HTML тег имеет атрибут style, который говорит о том, что к этому тегу применяется некое стилевое описание.
Пишется так:
<p style=""> это параграф с индивидуальным стилем </p>Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента <p>
Ну например:
<p style="color: #ff0000; font-size:12px"> это параграф с индивидуальным стилем</p>В данном случае мы указали, что этот параграф должен отображаться красным цветом и иметь размер шрифта в 12 пикселей. В последующих главах я подробно расскажу о том что написано в кавычках , сейчас же речь идет о том как применить CSS к какому либо HTML тегу.
По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Но еще раз повторюсь такой способ внедрения CSS хорош лишь в том случае если требуется задать определенный стиль малому числу HTML элементов.
Для того, что бы описать необходимые элементы одновременно на всей странице в заголовок HTML документа внедряют тег <style> </style> (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.
Взгляните на пример, ниже к нему будут комментарии.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Как видно из примера мы добились точно такого же результата что и в первом случае только теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в "голову" документа тем самым указав что все заголовки <h2>,<h3> - будут синими а параграфы <p> - красными. Представьте как мы облегчили бы себе работу будь на странице сотня таких параграфов и штук пятнадцать заголовков, да и сам документ стал меньше весить за счет "удаления" всех повторяющихся стилевых описаний для каждого отдельно взятого элемента.
Теперь обещанные комментарии:
Тег <style> принято внедрять в заголовок HTML документа между тегами <head></head>.
Атрибут тега <style> type - сообщает браузеру, какой синтаксис использовать для правильной интерпретации стилей. Для правильной интерпретации браузерами CSS значение type (MIME тип данных) должно равняться text/css.
Внутри тега <style> </style> идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:
Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.
Долго ли коротко ли, подошли мы к главному, на мой взгляд, достоинству CSS, а именно возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.
Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:
body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h2 {color: #0000ff; font-size:18px}
h3 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}
О том, что это такое странное мы написали, постараюсь подробно рассказать в последующих главах этого учебника.
Далее сохраняем этот небольшой файлик с расширением *.css (обычно файл со стилями называют style.css).
Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.
Делается это с помощью тега <link> (связь). Тег <link> многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег <link> является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как <link> несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами <head></head> и не выводится браузерами на экран.
Тег <link> имеет атрибуты:
href - Путь к файлу.Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:
<link rel="stylesheet" href="mystyle.css" type="text/css">Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"
Теперь вставляем эту строчку в заголовки страниц нашего сайта и наслаждаемся результатом..
Пример:
Файл mystyle.cssВ примере выше, "сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом - mystyle.css. Таким образом, мы значительно его "разгрузили" и сделали дизайн всего сайта "мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?
О том как присвоить какой либо группе идентичных элементов стиль отличающийся от основного стиля данного элемента, сделать отдельный класс элементов, читайте в главе Классы и идентификаторы.
В этой главе мы рассмотрели три способа внедрения CSS в HTML документ. Какой же лучше использовать?
Внешние таблицы стилей
Создаем обычную html-страницу, с таким кодом:
<html>
<head>
<title>Подключение CSS к HTML</title>
</head>
<body>
<h2>Заголовок первого уровня</h2>
Здесь просто текст
<h3>Заголовок второго уровня</h3>
Здесь просто текст
</body>
</html>
Теперь в блокноте создаем пустой документ style.css и сохраняем его в ту же папку, где лежит html-страница:
Это наша страница стилей. Давайте подключим стили (style.css) к html-странице. В html существует тег <link>, который отвечает за подключение внешних файлов. Добавляем <link> в html-страницу:
<html>
<head>
<title>Подключение CSS к HTML</title>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<h2>Заголовок первого уровня</h2>
Здесь просто текст
<h3>Заголовок второго уровня</h3>
Здесь просто текст
</body>
</html>
Далее мы будем подключения css именно этим способом так, как он самый удобный. Есть и другие способы, сейчас давайте их рассмотрим.
Эту таблицу стилей задают внутри элемента HTML, с помощью атрибута style. Вот пример:
<h2>Это заголовок красного цвета</h2>
Минус этого способа очевиден: параметр style приходится задавать каждому заголовку и поэтому теряется преимущество CSS.
В этом случае таблица стилей встраивается в заголовок html-страницы. В HTML есть теги <style></style>, с параметром type, он указывает, что подключается таблица стилей CSS. Вот пример:
<html>
<head>
<title>Подключение CSS к HTML</title>
<style type="text/css">
h2{
color:red
}
</style>
</head>
<body>
<h2>Этот заголовок будет красного цвета</h2>
<h2>Этот заголовок будет красного цвета</h2>
<h2>Этот заголовок будет красного цвета</h2>
</body>
</html>
Все заголовки h2 у нас на странице красного цвета. При желании можно один из них перекрасить в синий цвет, для этого нужно воспользоваться внутренней таблицей стилей:
<html>
<head>
<title>Подключение CSS к HTML</title>
<style type="text/css">
h2{
color:red
}
</style>
</head>
<body>
<h2>Этот заголовок будет красного цвета</h2>
<h2>Этот заголовок будет синего цвета</h2>
<h2>Этот заголовок будет красного цвета</h2>
</body>
</html>
В данной ситуации применяется принцип каскадирования, он разрешит конфликт. В нашем примере внутренняя таблица имеет выше приоритет и поэтому заголовок станет синим.
Минусы этого способа очевидны... Таблицу стилей нужно создавать для каждой HTML страницы, поэтому мы будем пользоваться внешней таблицей стилей.
Сейчас мы рассмотрели способы подключения CSS к HTML, далее рассмотрим синтаксис CSS.
Скрин
Поздравляю! Ваш файл готов. Он пока пустой, но позже его можно будет наполнить соответствующим содержимым. Ниже мы рассмотрим азы - способы подключения css.
<html>
<head>
<title>Внешнее подключение CSS</title><!-- Ниже расположена ссылка на нашу таблицу стилей. -->
<link rel="stylesheet" type="text/css" href="style.css"></head>
<body>
<h2>Внимание</h2>
В строке с тегом link предполагается, что style.css находится в той же директории (папке), что и данный файл.</body>
</html>
<link rel="stylesheet" type="text/css" href="css/style.css">
<p style="color:blue; font-size:14px;">Текст синего цвета, размер 14 пикселей</p>
Плюс в том, что можно сразу в этом же файле задать стили. Существенный минус - задаваемые свойства будут присвоены только конкретному элементу, в данном случае параграфу. Таким образом, все преимущества удалённого подключения свойств утрачиваются.
<html>
<head>
<title>Внешнее подключение CSS</title><!-- Ниже расположены стили -->
<style>
h3{ color:blue }
</style>
<!-- Только заголовки второго уровня будут синего цвета --></head>
<body>
<h2>Заголовок первого уровня</h2>
<h3>Заголовок второго уровня, синий</h3>
<h4>Заголовок третьего уровня</h4></body>
</html>
Из примера видно, что стили мы прописали прямо перед закрывающим тегом head внутри открывающего и закрывающего тегов style. На самом деле тег style можно прописывать и в body, но если Вы хотите, чтобы Ваши записи выглядели структурировано, и чтобы человек, который после Вас увидит этот код не схватился за голову, то лучше писать стили в одном месте.
Недостаток встроенной таблицы стилей тоже очевиден - такие записи надо будет делать для каждой страницы отдельно.
Когда браузер читает таблицу стилей, он форматирует HTML-документ в соответствии с информация в таблице стилей.
Есть три способа вставить таблицу стилей:
С внешняя таблица стилей, вы можете изменить внешний вид всего веб-сайта, изменив всего один файл!
Каждая HTML-страница должна содержать ссылку на файл внешней таблицы стилей внутри элемент внутри раздела заголовка.
Внешние стили определяются в элементе в разделе
страницы HTML:
Это абзац.