CSS Introduction
Finishing finished HTML notes, the next step is the CSS. We can use HTML to build a stable structure basis, and styles CSS to control page is done. Style pages of various elements including color, size, line spacing, and so on, which for the design or maintenance of a large data site, the workload is huge. Fortunately, you can use CSS to control these styles, which will greatly enhance the efficiency of web design and maintenance, and the overall feel of a page is easy to be unified.
CSS Overview
CSS is the abbreviation of Cascading Style Sheet, cascading style sheets translated into Chinese, it was also translated as cascading style sheets, referred to the style sheet. It is a width, height, position, font, background appearance visual style is used to define web technology, the introduction page CSS rules can be performed quickly and efficiently to the page layout, HTML tags can be precisely controlled object .
CSS is a language identification, not only can effectively control the style pages, the more important is to achieve the separation of web content and style, and allows CSS rules stored in a separate file, the CSS file name extension "css . "
CSS3
CSS3 standard as early as 1995 began to develop, put on the research agenda W3C in 2001, however, 10 years CSS3 can be said that basically no big change, until June 2011 was released a new version of the CSS3, currently many browsers are widely supported CSS3.
CSS3 is an upgraded version of the CSS technology, CSS3 CSS language will be divided into smaller modules, modular development towards the direction. The previous version is a relatively large and relatively complex modules, therefore, it is broken down into a small simple module, but also added more new modules. There are fonts, colors, layout, background, location, borders in CSS3, a multi-column, animation, user interface, and so multiple modules.
Basic usage of CSS
CSS usage rule consists of two parts: selectors and one or more statements. The basic basic syntax is as follows:
选择器{
属性1: 值;
属性2: 值;
…
属性n: 值;
}
CSS properties
CSS-related functions in accordance with an attribute of the packet, the packet comprising a plurality of font, text, background, lists, animation, and use of specific examples of these attributes will be mentioned in the subsequent.
Use CSS in an HTML document method
Depending on the scope and use of CSS in an HTML document, the use of CSS stylesheet divided into three categories: inline styles, internal style sheet and an external style sheet, and an external style sheet can be divided into links Waibuyangshibiao and import an external style sheet. In this section we come to know from the four classification methods use CSS in HTML.
- Inline style
- Internal style sheet
- External style sheet
- Links an external style sheet
- Import external style sheet
Inline style
Inline style (inline style), also known as inline styles, it is four kinds of CSS use is the most direct one, to realize its global attributes borrowed style HTML elements, the CSS code which can be written directly.
Up in the strict sense of style is a loose use, it does not require a selector, this way CSS code and HTML code mixed together, it is not recommended to use inline styles. The basic syntax in the style of the line as follows:
<标记 style="属性:值; 属性:值; …">
Internal style sheet
When a single document requires a special style, internal style sheet should be used. Internal style sheet is a pattern in the head section of the page, the pattern on the application of this definition to this page, the internal style sheet declaration using the style markers, is a more common method of using. The basic syntax is as follows:
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
选择器1｛属性:值;…｝
选择器2｛属性:值;…｝
……
选择器n｛属性:值;…｝
</style>
</head>
style tag defines style information HTML document specified how HTML elements are rendered in the browser which content type is used to specify the type of element.
Links an external style sheet
When in order to ensure a unified style site, or when more defined style content, and requires multiple pages to share styles, you can use an external style sheet. Chain is saved into an external style sheet is a style sheet external style sheet file, and then link is marked with a link to this page style sheet file, link marker in the head area of the page. The basic syntax is:
<head>
<meta charset="utf-8" />
<title></title>
<link href="样式表路径" rel="stylesheet" type="text/css" />
</head>
Where:
href: point out the path stylesheets stored.
rel: link is used to define the relationship between files and HTML, rel = "stylesheet" refers to the use of this external style sheet in the page.
type attribute is used to specify the file type, "text / css" refers to the type of file is a style sheet text.
Import external style sheet
Waibuyangshibiao introducing means introducing a style element in an external style sheet file HTML's header, introducing import mode using an external style sheet. And the method of introducing external style links stylesheet very similar, but substantially equivalent to import external style style presence of an internal website. The basic syntax is:
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
@import url("样式表路径");
</style>
</head>
The basic CSS selectors
CSS selector is a very important concept, it can greatly improve the efficiency of writing or modifying the style sheet developers. CSS3 offers a number of selectors, can be divided intoThe basic selector selects a combination, properties selectors, selectors and pseudo pseudo object class selectorWait. Since browser support, the many choices is rarely used in actual development, in this chapter show the most basic and most commonly recorded several selector.
The basic selector includesSelection marker, a class selector, id selector and universal selector。
Tag Selector
HTML documents are composed of basic HTML tags, if you want to mark all similar documents use the same CSS styles, you should use the tag selector. The basic syntax is:
标记名{ 属性1:值1; 属性2:值2;…}
For example, P-tag text all centered, the following syntax:
p{
text-align: center;
}
Class selector
Class selector basic syntax is:
标记名.类名{属性1:值1;属性2:值2;…}
Class selector for global attribute class labeled as reference:
<标记名 class="类名">
It is worth noting that, where the class name can be any valid character, defined by the designer. If the tag can be used for all, * is used. The class name, where * means all, of course, may be omitted.
Here are a few examples:
<style type="text/css">
p.text1{color:brown;font-size:14px;}
/* 该形式下只允许<p>标记中类名为"text1"的标签引用该样式 */
*.text1{ color:brown;font-size:14px; }
或
.text1{ color:brown;font-size:14px; }
/* 表示所有类名为"text1"的标签都可引用该样式 */
</style>
id selector
substantially the same as the class id selector and selector, except that the definition does not use. "" used, "#", acting on the global attributes of HTML tags are "id" instead of "class."
The basic syntax for the id selector:
标记名#id名{ 属性1: 值1;属性2: 值2;…}
id selectors for the global property id tags, reference is:
<标记名 id="id名">
Of course, as with class selectors, if all are used for the flag, the name of the form * # id, where * denotes all, may be omitted.
Universal selector
Universal selector is a special selector, indicated by *, match all page elements, unless specified in the same properties for an element corresponding to the more specific use of other values should be selected. Universal selector setting and style of the body elements is slightly different, since the choice is applied to each common element without depending inherited from the body element in the rule applied to attributes. The basics are as follows:
<style type="text/css">
*{
属性1: 值1;
属性2: 值2;
…
}
</style>
Other CSS selectors
In addition to the basic CSS selectors outside, CSS there are many other selectors.
Combination selector
CSS selectors in combination, can be regarded as the basis for an upgraded version of selectors, that is, to use a combination of base selector means. There are a combination of selectors five categories:Multi-element selector, descendant selectors, sub-selectors, selectors and adjacent sibling selectors。
Multi-element selectors
Multi-element selectors basic syntax is:
E, F {属性1:值1;属性2:值2;… }
This is well understood, is to select multiple elements, in the middle "," separated.
Descendant element selector
Descendant element selector basic syntax is:
E F {属性1:值1;属性2:值2;… }
This is also well understood, is to match all of the elements belonging to F E element descendants, E and F element elements separated by a space,E.g:
table b{color:red; }
It means that all elements of the text in the table b is set to red.
Child element selector
Sub-element selectors basic syntax is:
E>F{属性1:值1;属性2:值2;…}
Child element selector can select child elements of an element, wherein the parent element E, F is a direct child elements, E> F is represented by F all child elements selected in E element therebetween with> connection.This and future generations element selector is not the same, the descendant elements selector F all descendant elements E, and F in the sub-element selector must be a child element E.
Adjacent Sibling Selector
The basic syntax is adjacent sibling selector:
E+F{属性1:值1;属性2:值2;…}
Adjacent sibling selector may select another element immediately after the element, and they have the same parent element, with a + sign link therebetween, in other words,E and F have the same parent element, and an element F in the back and the immediately adjacent elements E。
General sibling selectors
General sibling selectors basic syntax is:
E~F{属性1:值1;属性2: 值2;…}
Usually sibling will select all siblings behind an element, with ~ No. link between it and the adjacent sibling selector Similarly, a need within the same parent element, E and F element after element.Except that E ~ F F Match selector element behind all the elements E, E + F F match only elements immediately behind element E。
Pseudo class selector
Pseudo class can be seen as a special class selectors, the CSS can be supported is the browser automatically identified particular selector. The basic syntax is as follows:
E:伪类 {属性1:值1; 属性2:值2;…}
Pseudo-class and classes, the CSS is already defined, not as free as class selector with another name, common pseudo class selector as shown below:
Pseudo object selector
Pseudo object selector, not a selector for the use of real objects, but has been defined for the CSS selector good pseudo-objects. The basic syntax is as follows:
E:伪对象{属性1:属性值1;属性2:属性2;…}
As a pseudo class selectors, selectors pseudo object can not use random names, common pseudo object selector as shown below:
It is noted that, prior to addition to the above figure are E :: selection outer CSS3 selectors, the foregoing single colon CSS3 pseudo object selectors (:) modified double colon (: :) to distinguish pseudo-class selectors, though still valid before writing, but is recommended to use the new wording.
Attribute selectors
Attribute selector is added to a bracket, the various properties are listed in parentheses after the tag or expression. In the form of attribute selectors are many, here we introduce a few simple by example.
Presence attributes match
Style elements controlled by matching attributes present, should generally match the attributes contained in square brackets.
For example, any mark with a href attribute is set to comprehensive color:
a[href]{color:brown;}
Exact match attribute
Only when the attribute value exactly matches the specified property values will apply a style, select the id and class selectors is essentially exactly match the attributes of selectors.
For example, point to the URL "http://www.taobao.com" link set a flag as a brown:
a[href="http://www.taobao.com"]{color:brown;}
Prefix match
As long as property values began to string matching the specified string, you can apply a style to the elements. Prefix match using [^ =] implemented in the form, such as:
[id^="user"]{color:brown;}
Then the following labels can be changed to brown:
<p id="userName">小明</p>
<p id="userWeight">体重</p>
<p id="userAge">年龄</p>
Suffix match
In contrast with the prefix match, as long as the end character string with an attribute value matching the specified string, to apply a style element. Suffix matching using [$ =] implemented in the form, such as:
[id$="Name"]{color:brown;}
Then the following labels can be changed to brown:
<p id="JackName">杰克</p>
<p id="RoseName">萝丝</p>
Substring match
I.e., as long as there specified application string style attributes, the use of [* =] implemented in the form, such as:
[id*="test"]{color:brown;}
Then the following labels can be changed to brown:
<p id="Rosetest">段落1</p>
<p id="testY">段落2</p>
<p id="xtesty">段落3</p>
Epilogue
Record rush, omissions future supplement any errors or deficiencies, but also look correction
