Как создать css файл

Как создать css файл

Css-Resim CSS. Как создать стили для веб-страницы

Сегодня хочу рассказать о том, что такое стили, как создать файл стилей и как его использовать.

CSS – каскадные таблицы стилей. Специальный файл (или несколько файлов), который отвечает за оформление страницы. Имеет расширение *.css . В этот файл заносятся параметры, которые будут применяться к тем или иным элементам на странице.

Давайте по шагам создадим файл стилей и добавим в него несколько параметров, для веб-страницы.

1. Создадим страницу HTML.

Я поместил в нее такой код:

01-209x300 CSS. Как создать стили для веб-страницы

Вот как выглядит страница:

02-198x300 CSS. Как создать стили для веб-страницы

2. Вторым шагом создадим файл style.css

(делается это через блокнот: создаете файл, жмете «сохранить как», в параметре тип файла ставите все файлы, в имени ставите style.css). Пока что ничего в файл писать не будем. Просто сохраним.
3. Теперь, чтобы файл стилей работал, нам нужно присоединить его к странице HTML.

Делается это так:

В теге HEAD нужно прописать одну строчку:

У меня файл стилей лежит в одной папке с файлом HTML страницы, поэтому я указываю только имя. Если у вас стили лежат, например, в папке css, то вам нужно было бы прописать href=”css/style.css” .

В нашей страничке пока еще ничего не изменилось:

03-198x300 CSS. Как создать стили для веб-страницы

4. Теперь можно начинать писать стили.

Откроем файл style.css с помощью блокнота и пропишем в нем правило для заголовка:

Обновляем страницу и видим, что ничего не изменилось.

04-198x300 CSS. Как создать стили для веб-страницы

Чтобы изменения вступили в силу, нужно в файле HTML придать нужному тегу атрибут стиля”.

Пропишем тегу h1 атрибут Теперь результат должен измениться:

05 CSS. Как создать стили для веб-страницы

06 CSS. Как создать стили для веб-страницы

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

5. Теперь назначим стиль для простого параграфа. Сделаем это другим способом.

Пропишем в таблицу стилей следующее:

Обновим страницу. Как вы заметили, мы здесь не добавляли атрибут class, а параграфы изменились, причем оба. Дело в том, что мы ввели в стили «p» без точки. Это значит, что для всей страницы, к которой привязана данная таблица стилей, мы переназначили параметры тега абзаца. Вне зависимости от того, есть у него дополнительные параметры или нет.

07 CSS. Как создать стили для веб-страницы

6. Сейчас рассмотрим еще один способ назначения стилей.

Давайте добавим в таблицу стилей следующую строку:

08 CSS. Как создать стили для веб-страницы

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

7. Давайте приступим к списку.

Пропишем в таблицу стилей такие правила:

09 CSS. Как создать стили для веб-страницы

Как видите, вокруг нашего списка появилась рамка, фон стал серым, а пункты списка – красными и подчеркнутыми.

Вне зависимости от того, оформляете ли вы текст через CSS или форменные элементы, делается это одинаково. Главное – понять структуру правил CSS, а остальное – мелочи.

Как создать css файл

video-placeholder

Московский физико-технический институт

Количество зарегистрированных учащихся: 27 тыс.

HTML и CSS — языки, с помощью которых верстают страницы в интернете. Овладеть основами этих языков совсем нетрудно — это первый шаг к профессии веб-разработчика. Вначале вы узнаете, как работать со шрифтами и текстом, а в конце концов научитесь верстать несложные страницы с анимацией и без. Авторы курса — разработчики из Яндекса. У курса есть продолжение.

Рецензии

Владел вопросами курса и ранее, но проходил в рамках специализации и узнал много нового и полезного для себя. Очень хороший курс.

Это крутой курс! Всё по полочкам разложено и разжевано! Спасибо огромное!

Поговорим о том, почему появился CSS, и разберёмся в его структуре. Вы научитесь грамотно применять и комбинировать различные типы селекторов (селекторы тегов, классов, идентификаторов и атрибутов). Также мы расскажем, что такое псевдоэлементы и псведоклассы, какие они бывают и как с ними работать. Вы разберётесь в том, что такое специфичность, как она высчитывается и как это влияет на порядок применения свойств в CSS.

Создание файла стилей CSS

Открываем новый документ в текстовом редакторе PSPad, но на этот раз выбираем другой тип документа: Файл – Новый – Cascading Style Sheet. Там уже будет прописана одна строка:

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

Чтобы добавить комментарий, достаточно поместить его между двумя слэшами со звездочками /* */.

Ну а теперь приступим непосредственно к записи кода в листе (файле) стилей.

В листе стилей CSS части кода называют правилами . Каждое правило состоит из селектора (читай — атрибута) и объявления . Объявление, в свою очередь, состоит из

свойства и значения .

Чтобы стало понятнее, рассмотрим пример:

Данная запись означает, что все абзацы будут набраны чёрным шрифтом. Здесь p — это атрибут, а то, что находится в фигурных скобках и есть объявление правила для этого атрибута. Слово color является свойством объявления , а решётка с тремя нулями —

В данном случае значение объявления записано в виде шестнадцатиричного числа, обозначающего цвет. Всем, кто пользуется Фотошопом это должно быть известно. Возникает вопрос: почему всего три нуля, ведь в данном обозначении должно быть шесть знаков? Все просто. Когда пары знаков одинаковы 00 00 00, FF FF FF, то допускается писать сокращённо — 000, FFF и т.п. Все браузеры это понимают правильно.

Правило можно писать как угодно — хоть в строку, как у нас, хоть в столбик — это роли не играет:

Важно только не забывать две вещи :

1. После каждого свойства необходимо ставить двоеточие.

2. После каждого значения — точку с запятой.

Окей! С этим разобрались. Теперь давайте сразу запишем ряд правил, а после разберем, кто есть ху:

padding: 0; border: 0;

padding: 2% 0 0; background: #fff; color: #333;

font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;

border : 1px solid #999;

В первом правиле звёздочка означает не что иное, как всю страницу разом. Это так называемый общий сброс . Он нужен для того, чтобы некоторым из браузеров не пришло в голову добавлять рамки, отступы или поля где ни попадя. Особенно этим грешит 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;

Ну и, наконец, если со всех сторон одинаковые поля, то и значение в правиле дается всего лишь одно:

Надеюсь, идея понятна.

Следующее правило задает общий фон всему сайту:

Как видите, цвет записан в три знака. На самом деле шестнадцатиричный код белого цвета #ffffff. Но, как я уже и говорил, если пары знаков одинаковы, то можно сократить запись до трех значков. Цвет общего фона лучше прописывать всегда и не надеяться на цвет поумолчанию, который у всех браузеров и так белый. Вдруг какой умник в своем браузере изменит цвета по-умолчанию на что-то другое?

Следующее правило задает цвет шрифта для всего сайта:

В нашем случае это темно-серый #333. Это не значит, что теперь все буквы на сайте станут темно-серыми. Ссылки так и останутся синими по-умолчанию, а посещенные, соответственно, фиолетовыми. Данная запись лишь устанавливает общий цвет шрифта, который в конкретных ситуациях (например, для заголовков) можно будет в дальнейшем изменить. Но об этом чуть позже.

Следующее правило устанавливает семейство шрифтов, которые мы используем:

font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;

Зачем такая длинная запись, если нам нужен конкретно шрифт Comic Sans MS для основного шрифта? Дело в том, что иногда на компьютере пользователя нет такого шрифта. Но вполне вероятно, что у него есть следующие из перечисленных. Вот поэтому мы и предлагаем браузеру пользователя в порядке предпочтения выбрать какой-либо из них. Последнее слово sans-serif означает общее семейство шрифтов без засечек. Соответственно, serif — это с засечками.

Тут есть одно важное замечание: если имя шрифта состоит более чем из одного слова, то его нужно взять целиком в кавычки. Например: "Times New Roman".

Идем далее. Следующий набор правил очень любопытный. Во-первых, появилось незнакомое слово container с решёткой (#) впереди. Данная решётка и означает уникальность атрибута. То есть тэг div с данным атрибутом будет использован только один раз на странице. Помните, мы говорили про id? Вот это оно и есть.

border : #999 solid 1px; margin: 0 auto;

Что это за контейнер такой и для чего он нужен? Дело в том, что любой браузер поумолчанию будет лепить страницу сайта в верхний левый угол. И это правильно! Порядок нужен во всем. Но что если наш сайт довольно узкий по ширине, а монитор дюймов на 20? Весь сайт сиротливо будет прижиматься к левой стороне монитора, а справа останется куча пустого пространства. Не слишком красиво, верно?

Вот поэтому нам нужно наш неширокий сайт разместить по центру экрана. Но как это сделать? Одним из способов как раз и является дополнительный контейнер. По-сути, это

пустой блочный тэг div с заданной шириной и отступами. Это как коробка, о которой мы говорили ранее. Именно в нее мы и будем укладывать наш сайт.

Как видите, мы в наборе правил для контейнера указали ширину в 760 пикселей, рамку светло-серого цвета #999 толщиной в 1 пиксель и какой-то хитрый отступ 0 auto. Что это значит? А это как раз и означает, что сверху и снизу отступ будет равен нулю, а по бокам этот блок будет равноудален от правой и левой стороны окна браузера, причем автоматически. То есть, при любом размере экрана монитора (в разумных пределах) наш сайт всегда будет находиться строго по центру.

Возникает резонный вопрос: а почему бы у тэга body не указать такую же ширину страницы и автовыравнивание? А ничего не выйдет! Браузеры не дураки (не все) и тэг body для них равносилен всему экрану монитора. Вы же экран не станете двигать? То-то же!

Предвосхищая вопрос о так называемой «резиновой» верстке, когда страница сама подстраивается под любой размер экрана (во всяком случае, это подразумевается, но работает не всегда корректно), то скажу прямо и откровенно: я против такого подхода.

Во-первых, это блажь чистой воды. Угодить всем просто невозможно. Кто-то уже приобрел монитор в 24 дюйма, а кто-то до сих пор щурится в 15. И ежу понятно, что на большом мониторе все элементы страницы расползутся как тараканы, а на маленьком сгрудятся в непонятную и перемешанную кучку. Оно вам надо?

Во-вторых, в дизайне, как и в любом другом виде творчества, центральное положение занимает гармония, а не количество контента на 1 см². В случае «резиновой» верстки мы получаем нарушение пропорций при изменении размеров монитора, и говорить о какой-то там гармонии уже не приходится.

В-третьих, следует учитывать психологию восприятия контента. Комфртно читатется текст, когда в одной строке умещается максимум 10 – 12 слов. Если их будет больше (а при растянутом на большом экране сайте так и будет), то читать текст становится очень трудно, ибо глаз постоянно теряется на длинной строке.

Поэтому я против резиновой верстки.

Продолжаем разговор за CSS. Далее в листе стилей запишем несколько правил для шапки

background: url(header.jpg) no-repeat; width: 760px;

Снова видим уникальный элемент с решеткой. Иначе такая запись называется также селектор . Напомню еще раз, что для таких элементов можно писать любые имена. Например:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *