Instructions for creating names for CSS. Inheritance and cascade
Home - Settings - User Settings and configure the display of banners:
You can do it differently if you want other banners to be displayed.
Usernames
Now let's move on: " Users» => « Group of users» => « List of groups» choose the desired group and let's start styling.
To do this you need to set a style CSS in point " CSS style for username" We will use styles for the text:
color
- nickname color. You can use color values: RGB format- rgb(r, g, b); hexadecimal notation - #RRGGBB; RGBa format - rgba(r, g, b, a); Basic color names: aqua, black, blue, fuchsia, gray......
font-family
- font family for nickname (Arial, Georgia, Verdana....) The list of fonts can include one or more names, separated by a comma. If the font name contains spaces, for example Trebuchet MS, it must be enclosed in single or double quotes. When the browser encounters the first font in the list, it checks for its presence on the user's computer. If there is no such font, the next name from the list is taken and also analyzed for presence. Therefore, multiple fonts increases the likelihood that at least one of them will be detected on the client computer.
font-size
- nickname font size. You are allowed to use any valid CSS units: em (element font height), ex (x character height), points (pt), pixels (px), percentages (%), etc. The font size is taken as 100% (or not specified) parent element.
font-style
- determines the font style of the nickname - normal, italic or oblique (normal, italic, oblique).
font-weight
- sets the saturation (boldness) of the font (bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900).
You can also use a text shadow for your nickname:
text-shadow
- four parameters are specified: x-shift, y-shift, blur radius and color (1px 1px 2px black). It is allowed to specify several shadow parameters, separating them with a comma (1px 1px 2px black, 0 0 1em red)
Example:
We indicate CSS nickname style:
Color: red; font-weight: bold; font-size: 12px;
Aligns nickname to the centerStyle Settings>>Message Elements>>Username
In the "Other" block add
Text-align: center;
What we got
Animated background for username(s)
IN "CSS style for username" add background
Background: url(folder with the image/glitter_001.gif) no-repeat
There are 14 different backgrounds in the archive below.
User titles
"User banner text"we write any, it will not be visible, "" - the name of the class, for example admin, V EXTRA.css set the style:
Admin ( background: url(image folder/admin.gif) no-repeat; display: block; width: 120px; height: 30px; color: rgba(0, 0, 0, 0); margin-left: -5px; )
Let's see what happened
"User banner text"we write the name of the group" Another, using your own CSS class name" - class name, for example admin-ribbon, V EXTRA.css set the style:
/* User ranks */ .admin-ribbon, .moder-ribbon, .member-ribbon ( color: #FCE2E3; display: block; font-size: 12px; font-weight: bold; height: 38px; line-height: 38px; margin-left: -12px; text-align: center; 0 0 0 transparent; width: 134px; "styles/default/xenforo/icons/admin_ribbon.png") no-repeat scroll 0 0 transparent; ) .moder-ribbon ( background: url("styles/default/xenforo/icons/moder_ribbon.png") no-repeat scroll 0 0 transparent; ) .member-ribbon ( background: url("styles/default/xenforo/icons/member_ribbon.png") no-repeat scroll 0 0 transparent; ) /* END User ranks */
In the archive below you will find 3 ribbons for the banner.
Custom color for banners:
Go to the group list page: /admin.php?user-groups/ - select the group you need - In the "User banner text:" field, enter the name you need - In the "User banner design:" setting, select the "Other, using your CSS name" option -class:" and in this field we indicate: userBanner my-style- We save this whole thing into a template EXTRA.css add this code:
UserBanner.my-style ( color: white; background-color: green; )
or like this
UserBanner.my-style ( color: white; background-color: green; border-color: green; )
Example of banners using CSS styles.
Let's make banners using only CSS. As already mentioned, for this we use "Another, using your own CSS class name", we set for each group its own class, and in EXTRA.css, specify the styles for these classes:
Admin_style, .lamer_style, .moder_style, .user_style ( background-image: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); border-radius: 3px ; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; font-size: 11px; margin: 4px 0 5px; padding: 2px 6px; position: text-align: center; text-shadow: 0 0 0 transparent, 1px 1px black; .admin_style ( background-color: rgba , 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.7); .moder_style ( background-color: rgba(0, 155, 4, 0.5); border: 1px solid rgba(0, 155, 4, 0.7); ) .user_style ( background-color: rgba(0, 51, 155, 0.5); border: 1px solid rgba(0, 51, 155, 0.7); ) .lamer_style ( background-color: rgba(0 , 158, 217, 0.5); border: 1px solid rgba(0, 158, 217, 0.7);
CSS (Cascading Style Sheets), or cascading style sheets, are used to describe appearance document written in markup language. Typically, CSS styles are used to create and change the style of web page elements and user interfaces written in HTML languages and XHTML, but can also be applied to any kind of XML document, including XML, SVG and XUL.
Cascading style sheets describe rules for formatting elements using properties and the allowed values for those properties. For each element you can use limited set properties, other properties will not have any effect on it.
A style declaration consists of two parts: the web page element − selector, and formatting commands - ad block. The selector tells the browser which element to format, and the declaration block (code in curly braces) lists the formatting commands - properties and their values.
Rice. 1. CSS style declaration structure Types of cascading style sheets and their specifics
1. Types of style sheets
1.1. External style sheet
External style sheet represents text file with the .css extension, which contains a set of CSS styles for elements. The file is created in the code editor, just like an HTML page. The file can only contain styles, without HTML markup. An external style sheet is connected to a web page using a tag , located inside the section
. These styles work for all pages of the site.You can attach multiple style sheets to each web page by adding multiple tags in sequence , indicating the purpose of this style sheet in the media tag attribute. rel="stylesheet" specifies the type of link (link to a style sheet).
The type="text/css" attribute is not required by the HTML5 standard, so it can be omitted. If the attribute is missing, the default value is type="text/css" .
1.2. Internal styles
Internal styles embedded in a section
HTML document and are defined inside the tag. Internal styles take precedence over external ones, but are inferior to inline styles (specified via the style attribute)....
1.3. Built-in styles
When we write inline styles, we write the CSS code into the HTML file, directly inside the element tag using style attribute:
Pay attention to this text.
Such styles only affect the element for which they are set.
1.4. @import rule
@import rule Allows you to load external style sheets. For the @import directive to work, it must appear in the style sheet (external or internal) before all other rules:
The @import rule is also used to include web fonts:
@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);
2. Types of selectors
Selectors represent the structure of a web page. They help create rules for formatting web page elements. Selectors can be elements, their classes and identifiers, as well as pseudo-classes and pseudo-elements.
2.1. Universal selector
Matches any HTML element. For example, * (margin: 0;) will reset to zero margins for all site elements. The selector can also be used in combination with a pseudo-class or pseudo-element: *:after (CSS styles) , *:checked (CSS styles) .
2.2. Element selector
Element selectors allow you to format all elements of this type on all pages of the site. For example, h1 (font-family: Lobster, cursive;) would set general style formatting all h1 headings.
2.3. Class selector
Class selectors allow you to specify styles for one or more elements with same name class located in different places pages or on different pages site. For example, to create a title with the headline class, you need to add the class attribute with the value headline to the opening tag
and set the style for the specified class. Styles created using a class can be applied to other elements, not necessarily of that type.
Instructions for use personal computer
.headline ( text-transform: uppercase; color: lightblue; )2.4. ID selector
The ID selector allows you to format one specific element. The id must be unique and can appear only once on one page.
#sidebar ( width: 300px; float: left; )
2.5. Descendant selector
Descendant selectors apply styles to elements within a container element. For example, ul li (text-transform: uppercase;) - will select all li elements that are children of all ul elements.
If you need to format descendants specific element, this element needs to be given a style class:
p.first a (color: green;) — this style will apply to all links descendant of a paragraph with class first ;
p .first a (color: green;) - if you add a space, links located inside any .first class tag that is a child of the element will be styled
First a (color: green;) - this style will be applied to any link located inside another element, designated by the class.first .
2.6. Child selector
A child element is a direct child of its containing element. One element can have several child elements, and each element can only have one parent. The child selector allows you to apply styles only if the child element comes immediately after the parent element and there are no other elements between them, that is, the child element is not nested within anything else.
For example, p > strong will select all strong elements that are children of the p element.
2.7. Sister selector
Sisterhood occurs between elements that share a common parent. Sibling selectors allow you to select elements from a group of elements of the same level.
h1 + p - will select all first paragraphs immediately following any tag
, without affecting the remaining paragraphs;
h1 ~ p - will select all paragraphs that are sister to any h1 heading and immediately after it.
2.8. Attribute selector
Attribute selectors select elements based on the attribute name or attribute value:
[attribute] - all elements containing the specified attribute - all elements for which the alt attribute is specified;
selector[attribute] - elements of this type containing the specified attribute, img - only images for which the alt attribute is specified;
selector[attribute="value"] - elements of this type containing the specified attribute with a specific value, img - all pictures whose title contains the word flower;
selector[attribute~="value"] - elements partially containing given value, for example, if several classes are specified for an element separated by a space, p - paragraphs whose class name contains feature ;
selector[attribute|="value"] - elements whose list of attribute values begins with the specified word, p - paragraphs whose class name is feature or begins with feature ;
selector[attribute^="value"] - elements whose attribute value begins with the specified value, a - all links starting with http://;
selector[attribute$="value"] - elements whose attribute value ends with the specified value, img - all images in png format;
selector[attribute*="value"] - elements whose attribute value contains the specified word anywhere, a - all links whose name contains book .
2.9. Pseudo-class selector
Pseudo-classes are classes that are not actually attached to HTML tags. They allow you to apply CSS rules to elements when an event occurs or obeys a specific rule. Pseudo-classes characterize elements with the following properties:
:hover - any element over which the mouse cursor is hovered;
:focus — interactive element, which was accessed using the keyboard or activated using the mouse;
:active - element that was activated by the user;
:valid - form fields whose contents have been checked in the browser for compliance with the specified data type;
:invalid — form fields whose contents do not match the specified data type;
:enabled - all active form fields;
:disabled — blocked form fields, i.e., in an inactive state;
:in-range - form fields whose values are in the specified range;
:out-of-range - form fields whose values are not within the specified range;
:lang() - elements with text in the specified language;
:not(selector) - elements that do not contain the specified selector - class, identifier, name or form field type - :not() ;
:target is an element with the # symbol that is referenced in the document;
:checked — selected (user-selected) form elements.
2.10. Structural pseudo-class selector
Structural pseudo-classes select child elements according to the parameter specified in parentheses:
:nth-child(odd) - odd child elements;
:nth-child(even) - even child elements;
:nth-child(3n) - every third element among children;
:nth-child(3n+2) - selects every third element, starting with the second child (+2) ;
:nth-child(n+2) - selects all elements starting from the second;
:nth-child(3) - selects the third child element;
:nth-last-child() - in the list of child elements, selects the element with specified location, similar to:nth-child() , but starting from the last one, in the opposite direction;
:first-child - allows you to style only the very first child element of the tag;
:last-child - allows you to format the last child element of the tag;
:only-child - selects an element that is the only child element;
:empty - selects elements that have no children;
:root - selects the element that is the root in the document - html element.
2.11. Structural type pseudo-class selector
Point to specific type child tag:
:nth-of-type() - selects elements similar to :nth-child() , but only takes into account the type of the element;
:first-of-type - selects the first child of a given type;
:last-of-type - selects the last element of this type;
:nth-last-of-type() - selects an element of the given type in a list of elements according to the specified location, starting from the end;
:only-of-type - selects the only element of the specified type among the child elements of the parent element.
2.12. Pseudo element selector
Pseudo elements are used to add content, which is generated using the content property:
:first-letter - selects the first letter of each paragraph, applies only to block elements;
:first-line - selects the first line of element text, applies only to block elements;
:before - inserts generated content before the element;
:after - adds generated content after the element.
3. Selector combination
To more accurately select elements for formatting, you can use combinations of selectors:
img:nth-of-type(even) - will select all even-numbered images whose alternative text contains the word css .
4. Grouping selectors
The same style can be applied to multiple elements at the same time. To do this, you need to list the required selectors on the left side of the declaration, separated by commas:
H1, h2, p, span ( color: tomato; background: white; )
5. Inheritance and cascade
Inheritance and cascade are two fundamental concepts in CSS that are closely related. Inheritance is where elements inherit properties from their parent (the element containing them). The cascade manifests itself in how different types style sheets are applied to a document, and how conflicting rules override each other.
5.1. Inheritance
Inheritance is the mechanism by which certain properties are transmitted from an ancestor to its descendants. The CSS specification allows for inheritance of properties related to the text content of the page, such as color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space and word- spacing. In many cases, this is convenient because you don't have to set the font size and font family for every element on the web page.
Properties related to block formatting are not inherited. These are background , border , display , float and clear , height and width , margin , min-max-height and -width , outline , overflow , padding , position , text-decoration , vertical-align and z-index .
Forced inheritance
By using keyword inherit can force an element to inherit any property value of its parent element. This works even for properties that are not inherited by default.
How CSS styles are set and work
1) Styles can be inherited from the parent element (inherited properties or using the inherit value);
2) Styles located in the style sheet below override styles located in the table above;
3) Styles from one element can be applied different sources. You can check which styles are applied in the browser developer mode. To do this, click on the element right click mouse and select “View code” (or something similar). The right column will list all the properties that are set on this element or inherited from a parent element, along with the style files in which they are specified, and the ordinal number of the line of code.
Rice. 2. Developer mode in Google browser Chrome 4) When defining a style, you can use any combination of selectors - an element selector, an element pseudo-class, a class or an element identifier.
div (border: 1px solid #eee;) #wrap (width: 500px;).box (float: left;).clear (clear: both;)
5.2. Cascade
Cascading is the mechanism that controls end result in a situation where different CSS rules are applied to one element. There are three criteria that determine the order in which properties are applied—the!important rule, specificity, and the order in which style sheets are included.
Rule!important
The weight of a rule can be specified using the!important keyword, which is added immediately after the property value, for example, span (font-weight: bold!important;) . The rule must be placed at the end of the declaration before the closing bracket, without a space. Such announcement will take precedence over all other rules. This rule allows you to cancel a property value and set a new one for an element from a group of elements in the case where there is no direct access to the style file.
Specificity
For each rule, the browser calculates selector specificity, and if an element has conflicting property declarations, the rule that has the most specificity is taken into account. The specificity value has four parts: 0, 0, 0, 0. The selector specificity is defined as follows:
for id, 0, 1, 0, 0 is added;
for class 0, 0, 1, 0 is added;
for each element and pseudo-element, 0, 0, 0, 1 is added;
for an inline style added directly to an element - 1, 0, 0, 0 ;
A universal selector has no specificity.
H1 (color: lightblue;) /*specificity 0, 0, 0, 1*/ em (color: silver;) /*specificity 0, 0, 0, 1*/ h1 em (color: gold;) /*specificity: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (color: blue;) /*specificity: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (color: grey;) /*specificity 0, 0, 1, 0 */ #sidebar (color: orange;) /*specificity 0, 1, 0, 0*/ li#sidebar (color: aqua;) /*specificity: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/
As a result, those rules that are more specific will be applied to the element. For example, if an element has two specificities with values 0, 0, 0, 2 and 0, 1, 0, 1, then the second rule will win.
Order of connected tables
You can create multiple external style sheets and connect them to one web page. If in different tables will meet different meanings properties of one element, then as a result the rule in the style sheet listed below will be applied to the element.
In this article, we present a set of rules for creating CSS names. They have already been tested in several major projects. This helped us achieve certain successes. The purpose of the instructions is to eliminate the possibility of naming conflicts, simplify debugging, maintenance, and the naming process.
The naming rules given below can hardly be considered optimal for browsers. However, the rules provide a huge benefit and their impact on performance is negligible.
CSS class and file name
Use lower case in the names of all CSS classes and files. To separate words in a name, use the “-” symbol. For example, we could name the classes something like widget-latest-comments and the files post.css.Organizing CSS Files
Distribute CSS styles into separate files to make it easier for the development team and further system maintenance. CSS files can be named according to the following rules:- global.css - This file contains global CSS styles that can be reused in different places.
- layout.css - this file contains CSS styles used in layouts.
- ControllerID.css - this file is accessed by the application controller. This means that each controller can have its own style file, which is named by its ID. For example, a PostController might have a CSS file named post.css.
- widget-WidgetClass.css - here, the name WidgetClass means the class of the widget for which it is written separate file CSS styles. For example, the LatestComments widget will access the file widget-latest-comments.css.
- FeatureName.css - great features may have their own own files CSS named after the function itself. For example, the Markdown function is likely to use markdown.css.
- Other required CSS files, such as CSS frameworks.
Naming CSS classes
In general, in CSS, we should use classes instead of identifiers to style HTML elements. This is done because the same identifier cannot be used twice on the same XHTML page.To assign names to classes, we rely on the following rules:
- CSS classes that are designed for sharing, must begin with the prefix g-. For example, we may have classes g-submit-button, g-link-button, the style description of which should be placed in the above-mentioned global.css file. You will get the syntax the following type: .g-link-button ( ... )
- Every file that outputs any record must have a root container that contains the content. It declares a class whose name exactly repeats the path to the file. For example, for a file available at post/index.php, this construction looks like this: ...view content here...
- The description of CSS styles must be placed in the CSS file corresponding to the controller. Each style declaration must begin with the name of the root container class. For example, to declare CSS styles for the item class of the root post-index container, we would insert the following entry into the post.css file: /* in post.css file */ .post-index .item ( ... )
- Creating CSS class names and styles for widgets follows exactly the instructions described above. For example, the LatestComments widget should use the root CSS name of the widget-latest-comments class and refer to the widget-latest-comments.css file for comment styles: /* in widget-latest-comment.css file */ .widget-latest-comments . comment(...)
Including CSS Files
In developer mode (when YII_DEBUG mode is enabled), each CSS file must be connected to the main layout file.In production mode, all CSS files must be combined and compressed into one file. The file name must contain the date (for example, styles-201010221550.css).
By doing this, we allow the browser to cache the combined CSS file and thus eliminate the need to download the CSS file every time.
Merge and compress CSS files
Here we introduce strategies to achieve the said goal.First, we declare all the CSS file names as an array in the application settings.
Secondly, we write console command to combine and compress CSS files. The YUI compressor can be used for these purposes. This command will read the names of the CSS files from the application settings, combine all the contents of the files into one file, and call the YUI compressor to compress the CSS styles. The created file must be named with a timestamp.
Third, modify main file layout by inserting the following code into the head section:
...... params["css.files.compressed"]): ?> params["css.files.compressed"]; ?>" /> params["css.files"] as $css): ?> " />We assume that the CSS files are listed in the css.files application setting. And if files are merged and compressed, then the file name must ultimately be included in the css.files.compressed application setting. The console command must make changes to the application's configuration file to update the css.files.compressed setting after the combined and compressed CSS file is created.
Instructions for naming jQuery selectors
We can use the rules for creating CSS names for JQuery selectors in the application's JavaScript code. In particular, when selecting one or more elements using JQuery selectors, we must follow similar rules for declaring CSS styles. For example, if we want to attach "click" handlers to all hyperlinks within news blocks, then we would use the following JQuery selectors: $(".news-index .item a").click(function())( ... )) ;That is, the selector must begin with the name of the root container of the CSS class (in this case, news-index).
1. What are CSS Cascading Style Sheets?
So, what are cascading style sheets css?
css(English) Cascading Style Sheets - cascading style sheets) is a language for describing the appearance of a document written using a markup language. To make it easier for a beginner to understand, cascading style sheets css are designed to create beautiful, easy-to-edit designs for html website pages.
Cascading style sheets were first used in the 90s of the last century. But at first they were not as popular as they are now, because different browsers perceived and displayed html pages that used css differently.
After some time, to simplify the work of site builders, browsers began to be “adapted” to the same standards. Today, almost all programs used to view Internet pages equally reproduce sites that use CSS cascading style sheets.
My observations!!! According to my personal observations, such latest versions Browsers like Opera, Mazilla ForeFox, Maxthon, Google Chrome and Internet Explorer show pages that use cascading style sheets almost identically, but if the browsers are not the latest generations, then the site pages themselves will look different. And in order for your site to look the same in almost all browsers, there are special technologies for specifying cascading style sheets.
So let's start creating a new style sheet and attach it to our document.
2. How to create a cascading css style sheet?
In this part of the article we will create and connect a cascading style sheet to the simplest html page.
So, let's do this:
1. We create a folder that will contain our html page and cascading style sheet. Let my folder be called "css"
2. We create a simple html page (index.html). You can read how this is done here.
3. Now we create a simple text document (similar to creating an html page), just call it style.css.
As a result, you should get this:
That's it, the file that will contain the css styles is ready.
Now let's connect the created style sheet to the index.html file.
3. How to connect a cascading style sheet css?
So, in order to connect a style sheet to an html page, you need to in the index.html file in the tag
add tag:
Here in the attribute href="style.css" the path to the file with css styles is specified. In this case, the css and index.html file are in the same folder.
For example, if our index.html file had the following code:
Important!!! By the way, do not forget to set the encoding to 1251 (ANSI-Cyrillic) when saving the index.html file in Notepad. Because if you don’t do this and save the file in a different encoding, the browser will show you “doodles” instead of texts.
If everything is done and saved correctly, then in the browser you will see the following:
That's all, the index.html file has been created, and css style sheets have also been connected to it.
Now let's check the working of css style sheets.
So, let's start with the simplest thing and set the tag
a new style that defines the background image of the html page, the background color of the page (if images are disabled in the browser of the page visitor), top and bottom padding, default font, its size and color.In order to set a background image, you need to mark it in the folder with our files.
Download the bg.zip archive, unzip it and place the bg.jpg file in the folder css. You should have it like this:
Now to set the style for the tag
html document, in the style sheet you need to write the following:|
body ( background-image:url(bg.jpg); background-color:#f6f6f6; margin-top:0px; margin-bottom:0px; font-family:Verdana; font-size:12px; color:#000066; ) |
body (...) - setting css styles for the tag
background-image:url(bg.jpg); - background image, where the url(...jpg) parameter specifies the full path to the image that will be the background
background-color:#f6f6f6; - document body background (tag ). This attribute is enabled if the visitor's browser has images disabled
margin-top:0px; - the distance from the body of the document to the top of the browser. In this case, Cascading Style Sheets css set the spacing to 0 px.
margin-bottom:0px; - the distance from the body of the document to the bottom of the browser. In this case cascading css style sheets set the spacing to 0px
font-family:Verdana; - setting the default font for a document
font-size:12px; - document font size 12 pixels
color:#000000; - text color. In this case, the css style sheets set the font color to dark blue.
After you save the style.css file, you will see the following in your browser:
|
About CSS technology. CSS Styles |
|
Introduction to CSS. Styles Ways to apply styles: Internal styles Global styles Related/external styles You've started learning about Cascading Style Sheets CSS. So you are already familiar with hypertext markup language HTML , since there is no point in starting CSS without knowing HTML. CSS ( Cascading Style Sheets- cascading style sheets ) is a technology used to design web pages using styles. The main idea of CSS is to separate the structure and content of web pages from their design: Styles Using HTML, a page is created - its frame, and its content is also entered. - a design is created using CSS - the design is set for page elements. is a set of formatting rules applied to page elements to change their properties and presentation parameters on the page: this mainly concerns their appearance and position. Styles are represented by CSS properties. Each property has its own influence on the design of a particular page element. Some properties do not apply to some elements. Page elements are HTML tags or their content. There are three ways to apply styles to page elements: Method I - Internal styles The styling is set using the parameter style 20px #3366CC Using the style parameter, the style for the text of this paragraph is specified, its size and color are set. This method of designing page elements is rarely used. After all, you will agree that setting the same design, say, for each paragraph of the page, firstly, is labor-intensive, and, secondly, not practical, since as the volume of source code increases, the page loading time will also increase. Method II - Global styles Styling is set using a tag The head of the document has a single style design for all paragraphs of the current page! And for this paragraph the design is set individually! Uniform design. #3366CC The head of the document has a single style design for all paragraphs of the current page! And for this paragraph the design is set individually! Uniform design. This method of designing pages is used in cases where there are not many of them, or when there is a need to give an original design to any one page of the site from the rest of its many pages of the same type. Method III - Linked or external styles Styles are described in a separate file with the extension .css, which can be associated with either one or several html files, affecting their design. If you are not yet familiar with the visual HTML editor Dreamweaver, then to create a css file you can use a simple text editor, which is part of the Windows OS - Notepad. For example, we have an html document - file index.html, to the design of which you must apply the styles described in the file style.css. For this purpose files index.html And style.css needs to be tied. Communication is carried out using a tag , which is located at the head of the document index.html(between tags And ), and in which you must write the following: "stylesheet"type="text/css"href="style.css">. This line indicates that the design rules for the file index.html taken from the style file style.css. Using attribute href tag a link is made to a file with styles ( specify an absolute or relative path to the file (more details here...) ) . Thus, you can apply styles from a file located even on another site to any HTML document. Code snippet:
For paragraphs and second level headings The style has been set.
.Code snippet from the style file: p(border: #FF0000 solid 2px; color: #33CC99; padding: 5px} h2 (border: #33CC99 solid 2px; background-color: #FF0066; color: #FFFFFF; padding: 5px} #3366CC For paragraphs and second level headings The style has been set. Styles are described in the style.css file, which is associated with this file using a tag . Using this method allows you to link a file with styles style.css with any number of html files and work on their design, editing only the css code of one file. Which is very convenient! |
Cascading Style Sheets, or CSS for Beginners (a workshop on "correct" HTML)
The Russian part of the Internet is growing day by day. Over the past year or two, the total volume of Russian-language pages has more than doubled. Today in Russia you won’t surprise anyone with the phrase<домашняя страничка>or an English word
We'll talk here about<правильном>HTML for beginners, namely, about some additional features officially approved by the Internet Consortium (http://www.w3.org/). In particular, about some of the capabilities provided by dynamic HTML (DHTML). And even more precisely - about how to use CSS (cascade style sheets, or cascading style sheets) to make a page that will look better than pages created using<классического>HTML, while taking up less space and, accordingly, loading faster.
Few people who decide to create their own web presence for the first time arm themselves with Notepad or another text editor like HomeSite. Usually a beginner thinks like this:<Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - I create texts in MS Word, presentations in MS PowerPoint, so I’ll take a similar program to create a web page - MS FrontPage...> Having made such a decision, the newly minted web sculptor robs himself twice.
The first time - in the sense of rational use of web space. The fact is that all visual editors of web pages, which include the mentioned MS FrontPage, insert into the created pages<отсебятину>- a lot of extra unnecessary tags. The exception, perhaps, is Macromedia Dreamweaver (for which it has gained well-deserved popularity among both beginners and professionals). But even he is not ideal in this regard - he likes to litter the source text with quotes (in most cases completely unnecessary), and also inserts non-breaking space characters in the most inappropriate places. In fairness, it is worth noting that all visual editors provide the user with the opportunity to work with the source code of the page being created, but FrontPage, so beloved by many, will again redo everything in its own way, as soon as you switch back to visual mode.
It follows from this that for the second time a beginner robs himself precisely in terms of flexibility and complete control over the created page content - visual editors do not provide the same freedom of creativity that working directly with the source code of the page being created will give you.
Well, now let's get straight to the point - creating beautiful and small web pages using cascading style sheets (in further text I will use their abbreviated name - CSS). It is assumed that you, dear readers, having read the introduction, agreed with me, abandoned visual editors, got a book on HTML, studied at least a small number of basic tags and attributes and are eager to know what CSS is and what it is used with.
Logical and physical formatting
Classic HTML version 3.2, the most widespread at the moment on the Web, provides us with means of physically formatting documents, for which there are special tags (for example, tags , , ) and many different attributes (size, color, height, width, etc.). Features of web formatting force us to write these tags and attributes again and again for each new paragraph, which, of course, greatly increases the size of the page code. In addition, with this formatting method, in the case of analyzing the structure of the document, it remains unclear why this word is highlighted in bold - just for beauty or to attract the special attention of the end user? If a living person is still able to at least understand the logical construction of pages in classic HTML, then this cannot be said about search engines or, for example, voice browsers. Take them out and put pure logic in the structure of the page. It is precisely because of this<неподвластности>To logical analysis, this formatting method was called physical formatting. In contrast, when creating the new HTML 4.0 specification, logical formatting was put at the forefront, that is, formatting in which the structure and design of the document would be clearly separated. This formatting method is recommended for use by the Internet consortium, as it provides expanded capabilities for searching information on the Internet, allows you to more accurately structure and analyze information using search engines, and also significantly reduces the size of pages and the time they take to fully load. The separation of document structure and design is realized using CSS.
It is worth noting the fact that the beginnings of logical formatting were also present in classic HTML tags
, ,
, of course, contributed to the division of documents into some logical blocks. But many page authors used, and to this day continue to use, these tags for other purposes: due to the scarcity of resources for page design, heading tags, for example, were used to highlight elements on the page that were not actually headings. CSS, on the other hand, provides enough styling tools to allow you to more closely follow logical formatting rules and truly separate the structure of a page from its visual presentation.Assigning styles to individual page elements
CSS allows you to assign your own visual style to any HTML tag, including the
. If the style is set for the tag , it is inherited by all elements (paragraphs, headings, etc.) placed inside this container tag, in case there are no custom styles for these elements. Thus, we no longer need to write tags and attributes color, size, etc. for each paragraph on the page - just set a certain style for the tag , and all paragraphs on the page will be displayed according to this style. How to do this?Let's say we want all paragraphs to be displayed in 12-point Times New Roman font in dark green. To do this, you need to specify the style attribute of the tag
, assigning it the appropriate value. The syntax is:12pt; color: darkgreen;">
Thus, all paragraphs on the page are displayed the way we wanted, and the code is not clogged with tags and their attributes. Imagine the file size savings if your page consists of a lot of text!
Please note that when we specified the font style, after the name Times New Roman we indicated the serif style, which means any font with serifs. If the end user's machine does not have the Times New Roman font installed, the browser will substitute any of the available serif fonts, and the page display will be as close as possible to what you intended. Moreover, the given example will be understandable for both IE (4.0 and higher) and NN (4.0 and higher). Although we must immediately make a reservation that Netscape Navigator does not support all the features provided by CSS and DHTML, and this, of course, does not increase the number of its fans.
The example above uses embedding the style directly into the document tag - the so-called inline style. This method of linking CSS to an HTML file is recommended in isolated cases - if this style is planned to be applied to only one element on only one page of the site. If the style must be applied to several elements on the same page or to several pages at once, other methods of linking CSS and HTML are recommended, which we will discuss next.
Assigning styles to multiple elements on the same page - creating an embedded style sheet
So far we have been talking about setting only one style for one element. Now we will learn how to create style sheets.
Let's say we want all the paragraphs on the page to look like the previous example, with all first-level headings in green 16-point bold Arial, and all second-level headings in 14-point Helvetica bold italic yellow-green. . To do this we need to create in<голове>pages (anywhere between tags
And) an embedded style sheet in which we will write several rules at once. To do this, create a style sheet container tag starting with an opening tag. Inside this container tag, we are free to define any number of CSS rules, consisting of a selector (the name of the HTML tag to which the rule will be applied) and its definition (directly a set of formatters), enclosed in curly braces. The syntax for the above example is:font-size: 12pt;
color: darkgreen;
font-size: 16pt;
font-weight: bold;
font-family: Arial, sans-serif;
font-size: 14pt;
color: greenyellow;
font-weight: bold;
font-style: italic;
This way of linking CSS and HTML is called embedding. It is recommended to use it in cases where you decide to set a certain set of formatting rules for only one page of the site, and according to your plan, all other pages should look different.
Assigning styles simultaneously to several site pages
In addition to inlining and embedding, style sheet importing and linking are used to link CSS and HTML. These are, of course, the best ways to give a consistent look and feel to multiple (or even all) pages of the same site. In this case, the entire style sheet is stored in one file (the file extension must be standard - .css).
Here is an example of the contents of such a file (for example, my.css):
font-family: "Times New Roman", serif;
font-size: 12pt;
color: darkgreen;
font-family: Arial, sans-serif;
font-size: 16pt;
font-weight: bold;
font-family: Arial, sans-serif;
font-size: 14pt;
color: greenyellow;
font-weight: bold;
font-style: italic;
Please note: tags no style sheets are used inside the file - the .css extension clearly indicates to the browser that the file is a style sheet. One such file can be linked to several pages at once (or imported into several pages at once). In the html file for linking you need to write anywhere between the tags
And the following line:This line indicates that the file being linked is a style sheet (rel="stylesheet"), the format of this file is .css (type="text/css") and it is located in the same directory as the html file, or has a different URL (href="my.css"). Obviously, we can write this line in any (or all) of our html files. Thus, a single style design will be prescribed for several pages at once.
Please note that inline styles (styles specified for individual page elements using the style attribute) and embedded styles (styles specified in<голове>pages inside a container tag
, of course, contributed to the division of documents into some logical blocks. But many page authors used, and to this day continue to use, these tags for other purposes: due to the scarcity of resources for page design, heading tags, for example, were used to highlight elements on the page that were not actually headings. CSS, on the other hand, provides enough styling tools to allow you to more closely follow logical formatting rules and truly separate the structure of a page from its visual presentation.Assigning styles to individual page elements
CSS allows you to assign your own visual style to any HTML tag, including the
. If the style is set for the tag , it is inherited by all elements (paragraphs, headings, etc.) placed inside this container tag, in case there are no custom styles for these elements. Thus, we no longer need to write tags and attributes color, size, etc. for each paragraph on the page - just set a certain style for the tag , and all paragraphs on the page will be displayed according to this style. How to do this?Let's say we want all paragraphs to be displayed in 12-point Times New Roman font in dark green. To do this, you need to specify the style attribute of the tag
, assigning it the appropriate value. The syntax is:12pt; color: darkgreen;">
Thus, all paragraphs on the page are displayed the way we wanted, and the code is not clogged with tags and their attributes. Imagine the file size savings if your page consists of a lot of text!
Please note that when we specified the font style, after the name Times New Roman we indicated the serif style, which means any font with serifs. If the end user's machine does not have the Times New Roman font installed, the browser will substitute any of the available serif fonts, and the page display will be as close as possible to what you intended. Moreover, the given example will be understandable for both IE (4.0 and higher) and NN (4.0 and higher). Although we must immediately make a reservation that Netscape Navigator does not support all the features provided by CSS and DHTML, and this, of course, does not increase the number of its fans.
The example above uses embedding the style directly into the document tag - the so-called inline style. This method of linking CSS to an HTML file is recommended in isolated cases - if this style is planned to be applied to only one element on only one page of the site. If the style must be applied to several elements on the same page or to several pages at once, other methods of linking CSS and HTML are recommended, which we will discuss next.
Assigning styles to multiple elements on the same page - creating an embedded style sheet
So far we have been talking about setting only one style for one element. Now we will learn how to create style sheets.
Let's say we want all the paragraphs on the page to look like the previous example, with all first-level headings in green 16-point bold Arial, and all second-level headings in 14-point Helvetica bold italic yellow-green. . To do this we need to create in<голове>pages (anywhere between tags
And) an embedded style sheet in which we will write several rules at once. To do this, create a style sheet container tag starting with an opening tag. Inside this container tag, we are free to define any number of CSS rules, consisting of a selector (the name of the HTML tag to which the rule will be applied) and its definition (directly a set of formatters), enclosed in curly braces. The syntax for the above example is:font-size: 12pt;
color: darkgreen;
font-size: 16pt;
font-weight: bold;
font-family: Arial, sans-serif;
font-size: 14pt;
color: greenyellow;
font-weight: bold;
font-style: italic;
This way of linking CSS and HTML is called embedding. It is recommended to use it in cases where you decide to set a certain set of formatting rules for only one page of the site, and according to your plan, all other pages should look different.
Assigning styles simultaneously to several site pages
In addition to inlining and embedding, style sheet importing and linking are used to link CSS and HTML. These are, of course, the best ways to give a consistent look and feel to multiple (or even all) pages of the same site. In this case, the entire style sheet is stored in one file (the file extension must be standard - .css).
Here is an example of the contents of such a file (for example, my.css):
font-family: "Times New Roman", serif;
font-size: 12pt;
color: darkgreen;
font-family: Arial, sans-serif;
font-size: 16pt;
font-weight: bold;
font-family: Arial, sans-serif;
font-size: 14pt;
color: greenyellow;
font-weight: bold;
font-style: italic;
Please note: tags no style sheets are used inside the file - the .css extension clearly indicates to the browser that the file is a style sheet. One such file can be linked to several pages at once (or imported into several pages at once). In the html file for linking you need to write anywhere between the tags
And the following line:This line indicates that the file being linked is a style sheet (rel="stylesheet"), the format of this file is .css (type="text/css") and it is located in the same directory as the html file, or has a different URL (href="my.css"). Obviously, we can write this line in any (or all) of our html files. Thus, a single style design will be prescribed for several pages at once.
Please note that inline styles (styles specified for individual page elements using the style attribute) and embedded styles (styles specified in<голове>pages inside a container tag