Подключение CSS
Для того, чтобы
подключить к нашему готовому документы HTML таблице
стилей мы идем в Notepad++
и нажимаем «Файл», «Новый»(Ctrl+N) и «Сохранить как». После этого
нам будет предложено сохранить новый файл в папке. Для этого, я обычно заранее
создаю папку в директории - www.
и называю ее style.css .
В эту папку сохраняем наш файл выбрав для него любое название, но расширение css. Теперь идем в наш HTML документ и внутри тега <head> прописываем следующий код:
<link href= “css/style.css” type=”text/css” rel=”stylesheet”>
Вместо css/style.css
– у вас могут быть любые другие значения и названия, но расширение css-
обязательно.
Все остальное тоже без изменения. К одному документу можно подключить несколько
файлов и наоборот.
Теперь мы можем
прописать первое правило для того, чтобы проверить подключение нашего
документа.
Селекторы на основе
тегов.
Они имеют такое же название, как и теги. Например:
#header {
color: #010101;
}
#header
– селектор по id.
Для того, чтобы он сработал нам нужно в HTML документе прописать идентификатор –
id=
“header”
Его можно задать для любой части документа. Дать ему любое название из латинских
букв, но нельзя начинать название с цифр. Название идентификатора вы можете придумать
сами, произвольно.
.new- селектор по
классу. Его задают в теле HTML документа, присваивая класс.
<p class=
"new4"> -это тег тоже одинарный и его закрывать
не требуется, как и (id)
идентификатор.
Бывают случаи, когда нам нужно задать одинаковые параметры
различным участкам текста. В этом случае мы воспользуемся групповым селектором,
где они прописываются через запятую. Например:
p, #header, .new{
color: #121212;
}
Селекторы предок – потомок.
Для того. чтобы в этом
легко было разобраться, нужно представить устройство самого HTML документа. Как можно видеть из
схемы, но имеет древовидную структуру. Где все элементы, так или иначе, связаны
между собой. Например :
<body>
является потомком <html> , а тот соответственно его
родителем. <img>
– потомок <а>, а тот в свою очередь <body> и тд. Если вы представите себе
это, то вам будет легко добраться для нужного вам тега и изменить только
определенную часть документа.
Записываются такие селекторы таким образом:
Родитель и через пробел потомок. Например:
ul li {
color: #434343;
}
Псевдоселекторы.
Они имеют большее отношение к ссылкам в документе. Они отвечают за цвет ссылок
в различных ее состояниях Четыре состояния ссылок:( новая, наведение курсора,
щелчок, посещенная). Они должны записываться в документе в приведенной ниже
последовательности.
1)новая
a:link{
color: #010101;
}
2) Посещенная
a:visited{
color: #234353
}
3)Наведение курсором
a:hover{
color: #444543
}
4)Активная – во время щелчка
a:active{
color: #787878;
}
А если просто записать
То это будет цвет ссылки для ВСЕХ состояний.
Изменить шрифт текста
Для этого существует значение селектора:
font-family: Tahoma, Verdona;
Значение шрифтов можно задавать разные, но стоит помнить, что не все браузеры
могут корректно отображать все шрифты. Для надежности стоит воспользоваться
сайтом:
Здесь вы можете выбрать один или даже несколько
шрифтов, прописав их через запятую.
Стоит отметить, что все шрифты можно условно разделить на группы :
1) sans-serif – без засечек (Tahoma, Verdona)
2) serif- с засечками (Times New
Roman)
3) monospace
–
(Lucida Console).С одинаковой длиной всех букв. Этот шрифт в основном
используется, для специальных текстов отображающих написание программ и тегов.
Следует запомнить, что в ранних версиях HTML, названия шрифтов, состоящих из двух
и более слов, следует писать в двойных
кавычках!
Размер шрифта.
Его указывают с помощью font-size
1) В процентах -100% (по умолчанию). Метод хорош для
изменения маштабирования страницы пользователем. Сохраняет все пропорции и
часто используется.
2)em
– условные единицы (1 em
– по умолчанию) Так же как и проценты. 1,1=110%
3) px
– в пикселях (по номиналу – 16 px)
4) pt
– пункты. Это пришло из типографии. Один пункт = 1/72 дюйма. 10 pt = примерно 3,5 мм.
5) ключевые слова:
а) small
- маленький- 80%
б) medium - средний – 100%
в) large - большой – 120%
Бывают и такие обозначения - xlarge, xxlarge, xsmall, xxsmal и
так далее, но они редко используются.
Курсив в CSS
font-style: italic;
Задать его можно практически любому элементу через
простые действия. В нужном месте HTML
<span class= “new1”>bbbbb</span>
Для абзацев:
<p class= “new1”>bbbb</p>
.new{
font-style: italic;
}
Жирность тексту задается еще проще
Стоит только прописать font-weight:normal ;
или (bold
или значение100-900). Стоит помнить, что более 700(это уже полужирный)
современные браузеры не поддерживают, а потому, лучше задавать просто bold.
Декорирование текста.
Атрибут: text-decoration:
Можно задать подчеркивание сверху: overline
Снизу: underline
Зачеркивание текста: line-throught
Пример перечеркивания курсива.
.new{
font-style: italic;
text-decoration: line-throught;
}
Часто бывает необходимо убрать подчеркивание с
ссылок, которые подчеркнуты по умолчанию. Сделать это очень просто : text-decoration: none;
Это
нужно прописать отдельно для ссылок:
a {
text-decoration: none;
}
Выравнивание
текста.
О выравнивании заголовка по центру блога, вы можете прочитать в моем посте здесь.Вы уже знаете, что для этого есть text-align:left ; (right; center; justify)
Стоит
остановиться на значении
в примере:
.new4 {
text-align: justify;
}
В этом примере выравнивание абзаца по всей ширине.
То есть за счет незаметного увеличения интервала между словами.
Красная строка
text-indent: 35px;
Значение задаем в пикселях , в данном случае.
Межстрочный интервал
Line-height:normal; или 20-30-40px или
2 – коэффициент от текущего, можно задать и дробью – 1,5 (например)
Интервал между словами
word-spacing:
Для коротких слов может потребоваться интервал между
буквами
letter-spacing:
Изменения
регистра
text-transform:
Значения:
uppercase –
все буквы большие;
lowercase –
все буквы маленькие;
capitalize – все слова с заглавной
буквы;
