От автора: здравствуйте, уважаемые читатели портала webformyself. В сайтостроении огромное значение имеет оформление веб-ресурса. Именно за это отвечает язык css (каскадные таблицы стилей), о котором мы сегодня и поговорим. А точнее, о его подключении и использовании. Рассмотрим некоторые css стили для сайта, которые используются при оформлении веб-страниц.
Подключение css
Сегодня едва ли вы где-то найдете веб-страницу, которая была бы создана чисто за счет возможностей html. В самом деле, внешний вид подобных сайтов был бы просто ужасным, поэтому, когда готова разметка нужных элементов, их тут же нужно оформлять, а это делается с помощью css в отдельном файле.
Нужно сказать, что вообще существуют также возможности включения стилей в html-файл. Например, их можно определить с помощью атрибута style или такого же тега. Это называют встроенными стилями. Такой подход сегодня не приветствуется и нарушает современные стандарты разработки.
А как же сделать правильно, спросите вы? Для этого нужно создать новый файл с расширением css, а затем подключить его к html. Это делается очень просто с помощью тега link, который и отвечает за подключение внешних файлов. Делается это так:
1 |
<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, присущая только ему. Зачем они нужны? Ну вот представьте такой код:
1 2 |
<h1 class = "title">Текст в заголовке</h1> <p>Текст в абзаце</p> |
И вот как нам в css, например, оформить абзац и заголовок? Для этого и созданы селекторы, чтобы обращаться только к тем элементам, к которым нужно. Например:
1 2 3 4 5 6 |
p{ font-size: 12px; } .title{ font-size: 36px; } |
Мы задали для всех абзацев размер шрифта, равный 12 пикселям, а элементы с классом title (в нашем случае это h1) получили гораздо больший размер – 36 пикселей. Заметьте, в случае с абзацами стили применяться к ним всем, сколько бы их ни было на странице.
Второй же селектор обратился только к одному элементу – с классом title. Конечно, можно создать другие элементы с точно таким классом, это не запрещено, и они получат такое же правило, но если мы просто напишем в html тег h1 (без класса title), то для него никаких правил добавлено не будет.
Вот так вот удобно позволяет css выбирать нужные элементы и оставлять в покое те, что не нужны. Какое это имеет отношение к готовым стилям, которые вы можете найти в интернете? Там все привязано к определенным классам и идентификаторам, поэтому вы не сможете вот так просто подключить эти таблицы к любым файлам, они не заработают, если в html у нужных элементов не проставлены соответствующие классы.
Например, в таблице стилей видим такой код:
1 2 3 4 5 6 7 8 9 10 |
.nav{ width: 300px; background: aqua; ... } .nav a{ display: block; color: #ccc; ... } |
Уже из этого мы можем сделать вывод, что где-то на нашей html-странице должен находиться элемент с классом nav, а в нем должны лежать ссылки. Если это действительно так, то оформление применится к ним и внешний вид их соответствующим образом изменится. Если же таких элементов обнаружено не будет, то код просто проигнорируется.
Опять же, в сети вы можете найти массу готовых шаблонов, в которых можно увидеть эту связь классов , так что если вы меняете что-то в html, соответствующие операции нужно произвести и в таблице стилей.
Как самому сделать css стили для сайта?
Сss не является чем-то страшным и чрезвычайно сложным. Это обычная технология, созданная людьми для оформления веб-страниц, имеющая свои правила. Достаточно понять их, и вы тоже сможете создавать внешний вид веб-ресурсов с помощью этого языка.
Самое главное условие быстрого освоения – постоянная практика, вкупе с новыми знаниями, которые вы для себя усвоите. Подобную практику вам может дать наш курс по различным техникам верстки.
Кроме этого, азы css вы можете узнать и усвоить в нашем премиум-разделе. Там есть один из курсов, который полностью посвящен базовым свойствам этого языка. Вот он.
Самое главное, решительно настроиться на изучение и отбросить предубеждения о том, что это очень трудно. Также вам могут помочь бесплатные материалы на нашем сайте, статьи и видеоуроки. При желании вы и по ним сможете приобрести основные знания, которые нужны при работе с css.
На этом я с вами прощаюсь. Читайте наш блог webformyself, чтобы улучшать свои знания в области сайтостроения.