Что такое CSS, подключение CSS файла. Добавление CSS Стандартные стили css
CSS - Cascading Style Sheets (каскадные таблицы стилей) - это средство, позволяющее задавать различные визуальные свойства HTML-тегам.
Официальный сайт разработчиков: http://www.w3.org/TR/CSS21/cover.html.
CSS состоит из правил. Правила представляют из себя название и значение. Разделяются они двоеточием (название правила: значение правила). Никаких кавычек в значениях правил не ставим! Пример:
Color: red; background: #cccccc ;
Но как CSS связать с HTML? Как прописывать стили оформления документа в html-коде? Для этого есть 3 решения:
- Вложение(inline).
- Встраивание(embeding).
- Связывание(linking).
Основа документа - html, а к нему уже применяется css. Именно к документу, сам по себе css ничего не значит.
Метод вложения (inline) CSS
Используется атрибут style. Его можно поставить в любом визуально отображаемом элементе. В style записываются правила css (название правила: значение правила), несколько правил разделены точкой с запятой (; является окончанием правила в css):
Обычный текст
"color:red; background:#cccccc" > К это абзацу применен стиль методом встраивания.
Метод встраивания (embeding) CSS
Используется специальный элемент “style”, внутри которого записываются правила css. Внутри style пишем только язык css. Пример:
< style type= "text/ css"> p { color: red ; background: #cccccc } style> Здесь применен стиль методом вложения. Обычный текстВ этом примере мы прописали правило для элемента “p” абзац. Во 2-й строке мы прописали селектор (к каким тегам будет применяться правило css). Само правило записано в фигурных скобках “{ }”.
Элемент “style” ставят только в элементе “head”.
Метод связывания (linking) CSS
Чтобы каждый раз в документ не писать стилевое оформление (не загружать документ), надо в одном месте написать правила css и применять их к разным документам (к неограниченному из количеству).
Для этого все правила css выносим в отдельный текстовый файл. Обычно этому файлу дают расширение.css. И тогда сразу видно, что в нем прописаны стилевые правила. Ни с чем не перепутаешь.
Как же тогда связать этот отдельный css-файл с нашим html-документом? Для этого используем следующий код в разделе head:
Т.е. указываем файл со стилями через гиперссылку на него. Браузер подгружает стилевой файл и применяет правила из него ко всему документу. По сути это работает так же, как и элемент “style”, но только находится в отдельном файле. И мы можем в любом документе поставить ссылку на css-файл. Это очень удобно, т.к. я правлю стили в одном единственном файле; один раз загрузив таблицу стилей, при переходе на следующие страницы браузер больше за этим файлом css не полезет, он достанет его из кэша (типа временного хранилища загруженных файлов). Тем самым я экономлю трафик и ускоряю отображение страницы.
Внимание! Элемент “link” не сработает с одним атрибутом href. Т.к. эта гиперсылка используется для разных целей. Это служебная гиперссылка, которая может указывать на различные типы файлов, которые могут использоваться для разных целей для ваших страниц. Чтобы дать понять браузеру, что это таблица стилей, используется атрибут rel (rel=”stylesheet”). В нем указывается тип отношения загружаемого документа и нашего основного документа. Теперь браузер понимает, что загружаемый документ - это таблица стилей.
От автора: здравствуйте, уважаемые читатели портала webformyself. В сайтостроении огромное значение имеет оформление веб-ресурса. Именно за это отвечает язык css (каскадные таблицы стилей), о котором мы сегодня и поговорим. А точнее, о его подключении и использовании. Рассмотрим некоторые css стили для сайта, которые используются при оформлении веб-страниц.
Подключение css
Сегодня едва ли вы где-то найдете веб-страницу, которая была бы создана чисто за счет возможностей html. В самом деле, внешний вид подобных сайтов был бы просто ужасным, поэтому, когда готова разметка нужных элементов, их тут же нужно оформлять, а это делается с помощью css в отдельном файле.
Нужно сказать, что вообще существуют также возможности включения стилей в html-файл. Например, их можно определить с помощью атрибута style или такого же тега. Это называют встроенными стилями. Такой подход сегодня не приветствуется и нарушает современные стандарты разработки.
А как же сделать правильно, спросите вы? Для этого нужно создать новый файл с расширением css, а затем подключить его к html. Это делается очень просто с помощью тега link, который и отвечает за подключение внешних файлов. Делается это так:
< 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, присущая только ему. Зачем они нужны? Ну вот представьте такой код:
Текст в заголовке
Текст в абзаце
И вот как нам в css, например, оформить абзац и заголовок? Для этого и созданы селекторы, чтобы обращаться только к тем элементам, к которым нужно. Например:
p{ font-size: 12px; } .title{ font-size: 36px; }
font - size : 12px ; Title { font - size : 36px ; |
Мы задали для всех абзацев размер шрифта, равный 12 пикселям, а элементы с классом title (в нашем случае это h1) получили гораздо больший размер – 36 пикселей. Заметьте, в случае с абзацами стили применяться к ним всем, сколько бы их ни было на странице.
Второй же селектор обратился только к одному элементу – с классом title. Конечно, можно создать другие элементы с точно таким классом, это не запрещено, и они получат такое же правило, но если мы просто напишем в html тег h1 (без класса title), то для него никаких правил добавлено не будет.
Вот так вот удобно позволяет css выбирать нужные элементы и оставлять в покое те, что не нужны. Какое это имеет отношение к готовым стилям, которые вы можете найти в интернете? Там все привязано к определенным классам и идентификаторам, поэтому вы не сможете вот так просто подключить эти таблицы к любым файлам, они не заработают, если в html у нужных элементов не проставлены соответствующие классы.
Например, в таблице стилей видим такой код:
Nav{ width: 300px; background: aqua; ... } .nav a{ display: block; color: #ccc; ... }
Nav { width : 300px ; |
Уже из этого мы можем сделать вывод, что где-то на нашей html-странице должен находиться элемент с классом nav, а в нем должны лежать ссылки. Если это действительно так, то оформление применится к ним и внешний вид их соответствующим образом изменится. Если же таких элементов обнаружено не будет, то код просто проигнорируется.
Опять же, в сети вы можете найти массу готовых шаблонов, в которых можно увидеть эту связь классов, так что если вы меняете что-то в html, соответствующие операции нужно произвести и в таблице стилей.
Как самому сделать css стили для сайта?
Сss не является чем-то страшным и чрезвычайно сложным. Это обычная технология, созданная людьми для оформления веб-страниц, имеющая свои правила. Достаточно понять их, и вы тоже сможете создавать внешний вид веб-ресурсов с помощью этого языка.
Самое главное условие быстрого освоения – постоянная практика, вкупе с новыми знаниями, которые вы для себя усвоите. Подобную практику вам может дать наш .
Кроме этого, азы css вы можете узнать и усвоить в нашем премиум-разделе. Там есть один из курсов, который полностью посвящен базовым свойствам этого языка. .
Самое главное, решительно настроиться на изучение и отбросить предубеждения о том, что это очень трудно. Также вам могут помочь бесплатные материалы на нашем сайте, статьи и видеоуроки. При желании вы и по ним сможете приобрести основные знания, которые нужны при работе с css.
На этом я с вами прощаюсь. Читайте наш блог webformyself, чтобы улучшать свои знания в области сайтостроения.
Нам уже известно, что для того, чтобы веб-сайт выглядел красиво и стильно нам необходимо поработать с CSS-файлом. И чтобы наши стили применялись необходимо соединить HTML файл и файл CSS.
Существует несколько вариантов осуществления данной операции: использование таблиц вложенных стилей , таблиц внешних стилей и встроенный стиль.
Сегодня мы поговорим именно о последнем способе.
Внедрения стиля в тег HTML
Суть данного способа заключается в том, что необходимое оформление мы внедряем внутрь тега. Для этого создан отдельный атрибут - style . Данный атрибут может быть применен к любому тегу, однако только в рамках тела сайта, то есть в границах body . Значением этого атрибута выступают операторы тех стилей, которые необходимо применить к заданному элементу.
Для примера зададим разные размеры шрифта для двух разных абзацев текста:
< p style= "font-size:25px;" > Задаем этому отрезку текста высоту букв в 25 пикселей. p> < p style= "font-size:15px; color:#2400ff;" > А этот текст будет с буквами, высотой 15 пикселей, причем еще и подкрасим его синим, чтобы продемонстрировать применение нескольких стилей одновременно. p>
Недостатки
Пример отлично демонстрирует, как такое навешивание стилей засоряет код страницы.
Также можно отметить еще парочку недостатков применения данной методики стилизации. Первым из них можно назвать разброс стиля по всему документу, что в перспективе редактирования усложнит процесс в разы.
Также возникнет трудность в оформлении больших объемов текста. Думаю, никого не радует перспектива прописывать для каждого абзаца размер шрифта, особенно если таких абзацев штук 40.
Еще при использовании встроенных стилей становится невозможным применение псевдоклассов, что в значительной степени связывает руки веб-дизайнера.
Стоит также отметить и путаницу, которая обязательно всплывет в использовании атрибута style. Эта путаница возникнет из-за использования разных кавычек при вписывании стилей.
Для наглядности посмотрим на пример ниже:
< div style= "font-family: "Roboto Condensed", sans-serif" > Запись корректна. div> < div style= "font-family: " Roboto Condensed ", sans-serif" > Так тоже правильно. div> < div style= "font-family: " Roboto Condensed ", sans-serif" > Это не корректная запись. div> < div style= "font-family: " Roboto Condensed ", sans-serif" > И это тоже не верно div>
Глядя на выкладки, предоставленные выше, напрашивается логический вывод, что применение встроенных стилей связаны с рядом существенных осложнений и неудобств.
Когда стоит использовать встроенный стиль
Несмотря на все недостатки, встроенный стиль был выдуман не зря. Веб-мастера часто обращаются к ним в случае программного присвоения стиля. Для примера посмотрим на этот код
< div id= "productRate" > < div style= "width: 40%" > div> div>
Запись нужной ширины для этого блока будет простейшей операцией.
Аналогичная ситуация может возникнуть при необходимости замены фонового изображения(к примеру) пользователя под ролью администратора. В таком случае тег img может не подойти. Поэтому стоит обратится к атрибуту style:
< div style= "background:url(fon.jpg)" > div>
Также программисты частенько обращаются к встроенным стилям в процессе верстки всплывающих окон. Зачастую этот процесс проходит следующим образом: блоку, над оформлением которого идет работа, прописывается display:block, а остальные окна скрываются посредством display:none, чтобы они визуально не мешали работе программиста. Вот пример:
< div class = "element" style= "display:block" > Всплывающее окно, которое оформляется в данный момент div>
Итог
Использование встроенных стилей связано с рядом трудностей и неудобств, однако в процессе оформления некоторых элементов веб-мастера часто обращаются к этому методу для оптимизации своей работы.
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее. Стили располагаются в отдельном файле с расширением css, для связывания HTML-документа с CSS-файлом применяется элемент . Он располагается внутри Внешняя таблица стилей
Пример 1. Подключение внешних стилей
Заголовок
Значение атрибута rel у всегда будет stylesheet и остаётся неизменным. В качестве значения href указывается путь к CSS-файлу; путь может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте. В примере выше мы подключаем кириллический шрифт Lobster с сайта Google Fonts.
Содержимое файла style.css показано в примере 2.
Пример 2. Содержимое файла style.css
H1 { font-family: "Lobster", cursive; color: green; }
Как видно из данного примера, файл со стилем является обычным текстовым файлом и содержит только синтаксис CSS. В свою очередь и HTML-документ содержит только указатель на файл со стилем, таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование внешней таблицы стилей - наиболее универсальный и удобный метод добавления стиля на сайт. Это позволяет независимо редактировать файлы HTML и CSS.
Внутренняя таблица стилей
Стили пишутся в самом HTML-документе внутри элемента