Перечень продукции подлежащей обязательной сертификации в области пожарной безопасности Перечень продукции подлежащей обязательной сертификации в области пожарной безопасности https://czrc.ru/services/sertifikat-sootvetstviya-pozharnoy-bezopasnosti/
Что такое CSS и как с ним работать?
Автор: Борисов С. А. 
CSS (Cascading Style Sheets) в переводе на русский язык каскадные таблицы стилей. Это технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML.
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа. Использование CSS позволяет значительно уменьшить сложность и повторяемость в структурном содержимом документа. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода.
Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений.
Выглядеть это может примерно так:
селектор1, селектор2 {
свойство1: значение;
свойство2: значение;
свойство3: значение;
}
Чтобы подключить файл со стилями просто в теге <head> документа напишите:
<link rel="stylesheet" type="text/css" href="путь_к_файлу/имя_файла.css">
Стиль можно назначить любому тегу в документе, будь это <p>, <h1>, <a> или знакомый всем <div>.
У тега <h1> уже есть какой-то стиль, который можно переопределить на его основе. То есть если, например, размер шрифта по умолчанию у него 18px, то его можно изменить, просто прописав в стиле его размер. Выглядеть это будет так:
h1{
font-size: 10px;
}font-size как раз и указывает то, что мы изменяем размер шрифта.
На заметку: Я рекомендую найти специальную программу для редактирования CSS, так как помнить все свойства наизусть невозможно, либо придется постоянно обращаться к справочникам, что не очень удобно. Программа, которой пользуюсь я называется TopStyle Lite v.3.10. Она поставляется с продуктом HomeSite. Поставляется ли по отдельности не знаю.
Скриншот программы TopStyle Lite
С помощью CSS определяются id и class. Это вы, наверняка, видели в самом коде HTML документа:
<div id="idName">
или
<p class="clName">
idName и clName это и есть имена селекторов из CSS. А теперь как задать id тегу div в CSS:
#idName{
}А так задается class:
.clName{
}Выглядит все примерно одинаково, но какие же отличия между id и Class, ведь результат одинаковый?
1. В CSS, селектор класса обозначается через точку, а селектор id через решетку.
2. id это уникальное собственное имя элемента на странице, и оно не может повторяться, т.е. двум тегам нельзя дать одинаковый id. С классом все наоборот.
3. Еще одно отличие это то, что у id и class разные веса. У id он больше. То есть если в HTML документе написано следующее:
<h2 id="header1" class="header2">...</h2>
то первым применется стиль header1.
Это далеко не все, что возможно сделать при помощи CSS. Например, имеется стиль:
#news p {
color: blue;
}И имеется код:
<div id="news">
<p>Параграф</p>
</div>
В этом случае стиль применится к тексту "Параграф" и он станет синего цвета. Но применяться будет не ко всем тегам <P>, а только к тем, которые находятся внутри элемента с атрибутом id, равным «news». Т.е. если написать без тега <div>, то стиль не будет применен. Точно также и с классами.
Возможно для новичка это будет сложно. В сети можно найти массу сайтов компаний, занимающихся разработкой веб дизайнов . Но тут уже придется потратиться. Но выполнено все будет качественно, и профессионально.
Тут уже решать вам, заказать профессиональный и качественный дизайн, или разобраться во всех тонкостях веб-дизайна и создать дизайн самому. Но чтобы получилось что-то достойное нужен огромный опыт.
Рассмотрим еще несколько примеров. Есть код:
<div class="level1">
<div class="level2">
<p>Мама мыла раму</p>
</div>
<p>Молодая мама мыла раму</p>
</div>
<div class="level2">
<p>Мама все еще моет раму</p>
</div>
И стиль:
.level1{
font-size: 50px;
}
.level2{
font-size: 20px;
}
Первая и последняя строчки будут одинакового стиля, а средняя другого, т.к. к ней применился стиль level1.
Теперь изменим стиль на такой:
.level1 .level2{
font-size: 50px;
}Теперь стиль будет применен только к первой строчке, так как она находится в элементе с классом level2, а тот, в свою очередь, находится в элементе с классом равным level1.
Ну и вот еще пример:
p{
color: Green;
}
#sea p{
font-size: 50px;
}
Код:
<div id="sea">
<p>Первая строчка</p>
</div>
<p>Вторая строчка</p>
Так как первая и вторая строчки заключены в тег <p>, то применится стиль "p" и они будут зелеными. Только первая строчка находится в элементе с id = sea и к ней еще применится стиль #sea p. Размер шрифта будет 50px.
Помимо всех этих прелестей есть еще одна. Рассмотрим ее:
a {
font-size:12px;
color : #000000;
}
a:hover {
font-size:14px;
color: #FF0000;
}
Таким образом, мы установили стиль для всех ссылок (если они не будут переопределены далее) в документе. Прелесть вся заключается в том, что мы добавили после селектора ":hover", что означает "применить этот стиль к тегу <a> если над ним указатель мыши". Это очень удобная вещь. С ее помощью, я сделал меню на этом сайте. Как это делать я расскажу в другой статье.
Нужно обязательно знать, что в CSS документе можно делать ремарки (комментарии). Просто заключите текст в /* с одной стороны и в */ с другой, например:
/* шапка сайта */
#Header {
width: 500px;
height: 100px;
background-color: #FAFAFA;
}
Просмотров: 11814
|
1. DarafeUnloalo
Присоединяюсь. Очень хороший пост. Добавил в закладочник. Ну и порекомендую для этих целей бобрдобр
 |
Встречайтесь с элитными проститутками на https://prostitutkikaliningradagood.info/ и погрузитесь в мир страсти и наслаждения. | Вам нужна проверенная проститутка? Загляните на https://prostitutkinaberezhnyechelnynew.net/proverennye/ и выберите подходящую для себя. | На сайте https://prostitutkitaganrogavip.info/ вы найдете самых сексуальных проституток города. | Элитные проститутки Тольятти - это гарантия отличного сервиса и полной конфиденциальности. | Забудьте о недовольстве! Попробуйте анальные услуги от наших профессиональных проституток на https://prostitutkikrasnodaracase.com/!!
Copyright © 2008 - 2018 Программирование на Delphi для начинающих и не только.
Полнота авторских прав на все материалы, опубликованные на сервере DelphiDevelop.ru принадлежит их авторам.
Перепечатка материалов разрешается с указанием авторства и гиперссылки на первоисточник информации.