Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

font: font-style font-variant font-weight font-size font-family




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

Совсем не обязательно, чтобы в записи присутствовали все эти свойства. Обязательными являются только свойства font-size и font-family, т. е. обязательно должен быть указан размер и гарнитура шрифта. Обратите внимание на то, что при использовании свойства font указывать только размер или только гарнитуру шрифта нельзя, должны быть указаны два этих параметра.

Это было последнее свойство шрифта

Фон в CSS

 

  Очень часто при верстке html-страниц требуется задавать фон тому или иному элементу. Рассмотрим, каким образом можно задавать фон при помощи CSS. Для создания фона в CSS имеется больше возможностей, чем у HTML, да и способы, с помощью которых можно задавать фон вHTML, устарели. Для работы с фоном в CSS имеется несколько свойств. Разберем их по порядку. background-color – задает цвет фона. При помощи этого свойства, возможно, задавать цвет фона практически для любых элементов, будь то фон страницы, блока или текста. Цвет фона задается следующим образом: background-color:#CCFFCC; где #CCFFCC – это значение цвета. Создайте html-страничку, содержащую следующий код: <html> <head> <title>Фон в CSS</title> <STYLE> body {background-color:#CCFFCC;} p {background-color:#FFFF99;} </STYLE> </head> <body> <p>Пример текста расположенного на желтом фоне</p> </body> </html> В данном случае при помощи свойства background-color был задан светло зеленый цвет (#CCFFCC) фону страницы и желтый цвет (#FFFF99) фону текста. background-image – задает фоновый рисунок. При помощи данного свойства задавать фоновый рисунок можно практически для любого объекта. Задается следующим образом background-image:url('fon.gif'); где url('fon.gif') - это путь к изображению, если ваше изображение лежит в той же папке, что и сама html-страничка.Если же изображение, например, лежит в папке images то путь к изображению будет выглядеть так: url('images/fon.gif'). Можете попробовать сохранить это маленькое изображение в скобках (), в ту папку, где лежит ваша страничка (для этого кликните по нему правой кнопкой мыши и выберите пункт “Сохранить изображение”), а в саму страничку вставить следующий код: <html> <head> <title>Фон в CSS</title> <STYLE> body { background-color:#CCFFCC; background-image:url('fon.gif');} p {background-color:#FFFF99;} </STYLE> </head> <body> <p>Пример текста расположенного на желтом фоне</p> </body> </html> В результате у вас должен получиться следующий фон: background-repeat – определяет, будет ли повторяться фоновое изображение, и, если будет, то каким образом. У этого свойства существуют следующие значения: repeat – изображение будет повторяться как по вертикали, так и по горизонтали; repeat-x – изображение будет повторяться только по горизонтали; repeat-y – изображение будет повторяться только по вертикали; no-repeat – изображение не будет повторяться. Например, создадим фон, который будет повторяться только по вертикали, для этого в наш код необходимо добавить следующее background-repeat: repeat-y, полностью он будет выглядеть так: <html> <head> <title>Фон в CSS</title> <STYLE> body { background-color:#CCFFCC; background-image:url('fon.gif'); background-repeat: repeat-y;} p {background-color:#FFFF99;} </STYLE> </head> <body> <p>Пример текста расположенного на желтом фоне</p> </body> </html> В результате наш фон будет отображаться так: background-attachment – определяет будет ли фон перемещаться вместе с содержимым страницы при скроллинге или нет. Имеет следующие значения: fixed – фон будет оставаться на месте, а содержимое страницы будет перемещаться; scroll – фон будет перемещаться вместе с другим содержимым страницы; Задается это свойство так background-attachment: fixed; весь код: <html> <head> <title>Фон в CSS</title> <STYLE> body { background-color:#CCFFCC; background-image:url('fon.gif'); background-repeat: repeat-y; background-attachment: fixed;} p {background-color:#FFFF99;} </STYLE> </head> <body> <p>Пример текста расположенного на желтом фоне</p> </body> </html> background-position – дает возможность позиционировать фоновое изображение. При помощи данного свойства можно смещать изображение относительно левого верхнего угла элемента. Оно имеет два значения: первое - на сколько ваше фоновое изображение будет смещаться от левого края и второе - на сколько оно будет смещаться от верха. Для того чтобы посмотреть как это работает сохраните изображение, которое Вы видите слева, в ту папку, где находится ваша html-страница, а в саму страницу вставьте следующий код: <html> <head> <title>Фон в CSS</title> <STYLE> body { background-color:#CCFFCC; background-image:url('fon.gif'); background-repeat: repeat-y;} p {background-color:#FFFF99; background-image:url('t.jpg'); background-repeat: no-repeat; background-position: 30px 20px;} </STYLE> </head> <body> <p> Пример позиционирования изображения<br><br><br><br><br><br></p> </body> </html> В данном случае мы добавили тегу <p> изображение, которое не повторяется, и сместили его на 30px вправо и на 20px от верха. Вместо пикселей можно указать проценты. Получилось следующее: Мы рассмотрели все свойства, используемые в CSS, для работы с фоном.  
 
     

 

Селекторы CSS

 

Грамотное использование CSS селекторов позволяет не перегружать код, а также сделать его более логичным. Существует несколько видов селекторов, это: · селектор по элементу, · селектор по классу, · селектор по ID, · контекстный селектор, · а также псевдоэлементы и псевдоклассы. Разберем каждый из них по порядку. Присвоение свойств тому или иному элементу задается при помощи правил. Структура правила имеет следующую конструкцию: Селектором называется левая часть правила до фигурной скобки. Дальше идет блок объявления стилей, который состоит из свойства и значения. Рассмотрим все особенности и виды селекторов по порядку. Селектор по элементу. Селекторами могут быть любые элементы html т. е. обычные теги. Например, зададим цвет и размер текста обрамленного в тег <p></p> т. е. цвет и размер абзаца текста. p {color:#666; font-size:12px;} Т. е. в этом случае тег <p> является селектором. Таким же образом в качестве селектора можно использовать любые теги. В данном случае, цвет и размер текста задается тегу <p>, и все теги <p>, которые будут встречаться в коде страницы, будут иметь заданный размер и цвет текста. Это является одновременно и достоинством, и недостатком этого типа селекторов. Достоинством является то, что не нужно каждый раз задавать стиль абзацу, а недостатком то, что очень часто необходимо сделать другое отличающееся от заданного, оформление абзаца, например, задать красный цвет текста. Тут нам на помощь приходит следующий вид селекторов. Селекторы классов. Данные селекторы позволяют каждому тегу присвоить класс, который будет иметь свое определенно стилевое оформление. Присвоение класса тегу происходит следующим образом: <p class="redmal"> Где вместо "redmal" можно задавать любое другое слово или буквы. Код стилей будет иметь следующий вид: p {color:#666; font-size:12px;} p.redmal { color:#b50404; font-size:11px;} Код этих абзацев в html-файле будет следующий: <p>Текст оформленный при помощи селектора p</p> <p class="redmal">Текст оформленный при помощи селектора p.redmal</p> Первый абзац, как и раньше, будет иметь серый текст размером 12 пикселей. Второй абзац будет иметь красный текст размером 11 пикселей. Кроме этого данный класс можно применить не только к тегу <p>, но и к любому другому элементу. Чтобы это стало возможным, в стилях необходимо указать, что данный класс можно применять ко всем тегам. Для этого перед точкой элемент ставить не нужно. Например: 1..redmal {color:#b50404; font-size:11px;} Теперь этот класс можно применить как к тегу <p>, так и к любому другому. Например, применим его и к абзацу и к ячейке таблицы: 1.<p>Текст оформленный при помощи селектора p</p> 2.<p class="redmal">Текст абзаца оформленный при помощи селектора.redmal</p> <table border="1"> 3.<tr> 4.<td class="redmal">Текст помещенный в ячейку таблицы и оформленный при помощи селектора.redmal </td> 5.</tr> 6.</table> Можно так же придать разное оформление тегам с одним и тем же классом. В этом случае в стилях необходимо прописать следующее: 1.p.redmal { color:#b50404; font-size:12px;} 2.td.redmal { color:#666666; font-size:14px;} При этом текст в теге <p> будет красный размером 12 пикселей, а в теге <td> серый размером 14 пикселей. Следующий вид селекторов это селекторы по идентификатору или сокращенно по ID. Селекторы по ID задаются аналогично классам, однако каждый ID может быть применен только к одному элементу. Т. е. в коде страницы может быть только один тег с данным ID. Это правило очень часто игнорируется потому, как все браузеры позволяют применять один и тот же ID к нескольким элементам. Главное отличие ID от класса в том, что в ID для адресации используется знак #, а не точка. Например: 1.p#sin { color:#548DD4; } В HTML-коде необходимо написать следующее: 1.<p id="sin">Текст оформленный при помощи ID p#sin</p> Текст в абзаце будет синего цвета: Контекстный селектор. Предположим, что нам необходимо в абзаце выделить текст тегом <strong></strong> т. е. текст, заключенный между этими тегами, будет жирный. Но, кроме того, что он будет жирным, нам необходимо, чтобы он был, например, красного цвета. Какие действия можно предпринять исходя из того, что мы уже знаем о селекторах. Можно задать элементу <strong> красный цвет при помощи следующего стиля: 1.strong {color:#C00000;} В html-коде прописать следующее: 1.<p>Текст<strong>выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p> Недостаток данного способа заключается в том, что в данном случае все элементы на странице, выделенные элементом <strong>, будут иметь красный цвет. Следующий способ - это задать элементу <strong> свой класс. Например: 1.redstr {color:#C00000;} В этом случае html-код будет следующий: 1.<p>Текст<strong class=" redstr ">выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p> Недостаток этого способа в том, что нам каждый раз придется прописывать класс. Здесь нам на помощь приходят контекстные селекторы. Стиль можно написать следующим образом: 1.p strong {color:#C00000;} Это обозначает, что тег <strong> находящийся внутри элемента <p> будет иметь красный цвет. HTML-код в этом случае будет таким: 1.<p>Текст<strong>выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p> Таким способом можно применять стили, к любому уровню вложенности тегов. Например, можно сделать так: 1.td p strong {color:#C00000;} Код будет следующий: 1.<table border="1"> <tr> <td><p>Текст<strong>выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p> </td> </tr> </table> В этом случае текст, заключенный в тег <strong>, будет выделен красным цветом, если он находится внутри тега <p>, который, в свою очередь, находится внутри тега <td> Псевдоэлементы. Псевдоэлементы применяются для выделения первой буквы параграфа, т. е. для создания так называемой буквицы, а также для выделения первой строки параграфа. Данные элементы не присутствуют в самом html-коде, а только в стилях. Не прибегая к помощи псевдоэлементов, первую букву параграфа мы можем выделить, создав для этого отдельный класс: 1..bukv { color:#cc0000; font-size:36px;} 2.p {color:#666; font-size:14px;} В этом случае код будет таким: 1.<p><span class="bukv">П</span>ервая буква будет большая, а дальше пойдет нормальный текст</p> В данном случае каждый раз нам придется прописывать к первой букве данный класс. Для того, чтобы заглавная буква в каждом параграфе выделялась автоматически, существует псевдоэлемент first-letter стили в этом случае будут такими: 1.p { color:#666; font-size:14px;} 2.p:first-letter { color:#cc0000; font-size:36px;} Код будет таким: 1.<p>Первая буква будет большая, а дальше пойдет нормальный текст</p> Сама буквица будет такой: Селектор p:first-letter будет задавать стили всем первым буквам текста, заключенного в теги <p></p> Для того чтобы текст обтекал букву слева данному селектору можно добавить свойство float:left В этом случае буквица окажется внутри текста. Для выделения первых строк абзацев используется селектор first-line Применяется он аналогично селектору, который мы рассмотрели выше: 1.p { color:#666; font-size:14px;} 2.p: first-line { color:#cc0000; font-size:25px;} Код будет таким: 1.<p>Первая строка будет выделена шрифтом размером 25 пикселей красного цвета <br> вторая строка <br> третья строка </p> Теги <br> добавлены специально, чтобы перескочили строки, потому что в данном примере текста немного и, если он раскинется на всю ширину экрана, то другие строчки вы не увидите. В результате у вас должно получиться следующее: Псевдоклассы. Псевдоклассы подобны псевдоэлементам, они так же не отображаются в теле html-документа, а указываются только в стилях. Существую 4 псевдокласса, которые предназначены для оформления ссылок - это псевдоклассы, обозначающие непосещенную ссылку, посещенную ссылку, ссылку при наведении курсоры мыши, а также активную ссылку, которая отобразится в момент нажатия на нее: 1.a:link {color:#548DD4} 2.a:visited {color:#666666} 3.a:hover {color:#B1030D} 4.a:active {color:#92D050} В html-коде записывается просто: 1.<a href="http://webmastermix.ru">Ссылка на сайт</a> В результате не посещенная ссылка будет синей, посещенная серой, при наведении курсора мыши красной и активная, т. е. в момент нажатия зеленая. В этом случае все ссылки, находящиеся на странице, будут иметь такое же оформление. Если вам нужно изменить оформление каких-либо ссылок и оформить их по другому, то можно применить классы. 1.a.sul:link {color:#548DD4} 2.a.sul:visited {color:#666666} 3.a.sul:hover {color:#B1030D} 4.a.sul:active {color:#92D050} В теле документа к ссылке естественно необходимо добавить данный класс: 1.<a href=http://webmastermix.ru class="sul">Ссылка на сайт</a> И последнее - это понятие группировка селекторов. Очень часто необходимо задать одно и то же оформление для разных элементов. В таком случае для того, чтобы постоянно не переписывать одни и те же стили, можно их назначить сразу нескольким элементам. Например: 1.p, td, h1 {color:#cc0000; font-size:16px;} Т. е. селекторы перечисляются через запятую. Таким образом, можно указать какое угодно количество селекторов и задать им всем одинаковое оформление. В данном случае весь текст, заключенный в теги <p> <td>и<h1> будет отображен красным цветом размером 16 пикселей. Как вы видите селекторы дают огромное количество возможностей и вариантов оформления содержимого ваших страниц. Поэтому селекторы являются одним из самых важных элементов CSS.

 

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...