Lecture
There are several ways to add styles to a web page, which differ in their capabilities and purpose. Next, we consider them in more detail.
When using linked styles, the description of selectors and their values is located in a separate file, usually with the css extension, and a <link> tag is used to associate a document with this file. This tag is placed in the <head> container, as shown in Example 3.1.
Example 3.1. Connecting related styles
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Стили</title> <link rel="stylesheet" href="http://htmlbook.ru/mysite.css"> <link rel="stylesheet" href="http://www.htmlbook.ru/main.css"> </head> <body> <h1>Заголовок</h1> <p>Текст</p> </body> </html> The value of the <link> tag attribute - rel remains unchanged regardless of the code, as shown in this example. The href value sets the path to the CSS file, it can be set both relatively and absolutely. Note that this way you can connect a style sheet that is located on another site.
The contents of the mysite.css file connected via the <link> tag are given in Example 3.2.
Example 3.2. Style file
H1 { color: #000080; font-size: 200%; font-family: Arial, Verdana, sans-serif; text-align: center; } P { padding-left: 20px; } As you can see from this example, the file with the style does not store any data, except for CSS syntax. In turn, the HTML document contains only a link to a file with a style, i.e., the principle of code separation and site design is fully implemented in this way. Therefore, the use of linked styles is the most versatile and convenient method of adding style to a site. After all, styles are stored in one file, and in HTML documents only the link to it is indicated.
When using global styles, CSS properties are described in the document itself and are located in the header of the web page. By its flexibility and capabilities, this method of adding a style is inferior to the previous one, but also allows you to store styles in one place, in this case right on the same page using the <style> container, as shown in Example 3.3.
Example 3.3. Using global style
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Глобальные стили</title> <style> H1 { font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366; } </style> </head> <body> <h1>Hello, world!</h1> </body> </html> In this example, the style of the <h1> tag is given, which can then be universally used on this web page (Fig. 3.1).
Fig. 3.1. View header styled
The internal or inline style is essentially an extension to the single tag used on the current web page. To define a style, the style attribute is used, and its value is a set of style rules (Example 3.4).
Example 3.4. Use of internal style
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Внутренние стили</title> </head> <body> <p style="font-size: 120%; font-family: monospace; color: #cd66cc">Пример текста</p> </body> </html> In this example, the style of the <p> tag is set using the style attribute, in which style properties are listed separated by a semicolon (Fig. 3.2).
Fig. 3.2. Using internal styles to change the appearance of text
Internal styles are recommended to be used on the website with limited or no use at all. The fact is that the addition of such styles increases the total size of files, which leads to an increase in the time of their loading in the browser, and complicates the editing of documents for developers.
All described methods of using CSS can be applied both independently and in combination with each other. In this case, it is necessary to remember about their hierarchy. The first is the internal style that takes precedence, then the global style and the last associated style. In Example 3.5, two methods are immediately used to add a style to the document.
Example 3.5. Combination of different methods
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Подключение стиля</title> <style> H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; } </style> </head> <body> <h1 style="font-size: 36px; font-family: Times, serif; color: red">Заголовок 1</h1> <h1>Заголовок 2</h1> </body> </html> In this example, the first heading is set in red with a size of 36 pixels using the internal style, and the next one is set in green through the global stylesheet (Fig. 3.3).
Fig. 3.3. Result of applying styles
You can import the contents of a CSS file into the current style sheet using the @import command. This method can be used in conjunction with related or global styles, but not with internal styles. The general syntax is as follows.
@import url("имя файла") типы носителей; @import "имя файла" типы носителей; After the @import keyword, the path to the style file is specified in one of two ways, with or without a url. Example 3.6 shows how you can import a style from an external file into the global style sheet.
Example 3.6. CSS import
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Импорт</title> <style> @import url("style/header.css"); H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; } </style> </head> <body> <h1>Заголовок 1</h1> <h2>Заголовок 2</h2> </body> </html> This example shows the connection of the file header.css, which is located in the style folder.
Similarly, import occurs in the file with the style, which is then connected to the document (Example 3.7).
Example 3.7. Import in a table of related styles
@import "/style/print.css"; @import "/style/palm.css"; BODY { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 90%; background: white; color: black; } This example shows the contents of the mysite.css file, which is added to the desired documents in the manner shown in Example 3.1, namely using the <link> tag.
1. The site has more than one hundred HTML documents that have the same style. What is the best way to connect CSS?
2. In this example, what color will the text have on the web page?
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Цвет текста</title> <style> HTML { color: black; } BODY { color: red; } P { color: green; } </style> </head> <body> <p style="color: blue;"><span style="color: olive;">Текст</span></p> </body> </html> 3. What HTML code is used to connect an external CSS file?
4. What attribute is used to define the internal style?
1. Related styles.
2. Olive.
3. <link rel = "stylesheet" href = "http://htmlbook.ru/mystyle.css">
4. style
Comments
To leave a comment
Cascading CSS / CSS3 Style Sheets
Terms: Cascading CSS / CSS3 Style Sheets