This article is an overview of the application of CSS and provides examples to demonstrate how CSS works so that you can learn CSS more effectively.
This article is not a reference or a compatibility guide (although there are some very good links to reference and compatibility notes). If you are accustomed to using CSS and want to learn more about stylesheets, we guarantee that you will find some very useful information in this article:.
what can css do?
Cascading style sheets are often understood as a means of separating "content" and "style". This is not entirely true, because the cascading style sheet works differently depending on your definition of "style" and "content".
HTML defines the structure of the document, while the body and images and other materials are organized together by tags (tags). CSS does not affect the structure of the document.
Cascading Style Sheets (CSS) are all about defining the layout, what colors, and spacing of these elements ... displayed in the page, it can also affect the layout of the content of the page, but it is not possible to change the structure of the page. CSS can only be applied to elements (not omnipotent) within limited limits, and the structure of document elements is defined by markup language HTML.
What are the benefits of using CSS?
All HTML tags (tags) have their own default style (style). That is, the browser interprets and displays the contents of each tag according to certain basic rules, but we use inline style (inline style) You can override the browser's default style to control the display style of the content. The default style sheet for the browser is the lowest priority. Examples of inline styles are as follows:
| <p style= "float:right;margin-left:1em;width:50%" >some text.</p> |
Inline styles affect only certain tags, such as the <P>...</P> in the example above. Cascading style sheets provide a way to apply to all given tag styles or to specific child collection styles.
CSS allows you to set up a "batch" style sheet document that is separate from the content document, and a different approach to the style inline (inline style) to the HTML code, which is how the style sheet separates the "content" and "style" statements. At the same time, cascading style sheet documents can be used to share more content documents.
include style sheet
Each style sheet is a collection of a series of style rules. You can use the style tag to define between <HEAD>...</HEAD> in the content document, as shown in the following example:
<style type= "Text/css" > ... style rules ... </style> |
or link to an external style sheet file through a URL as you would call a JavaScript script file, the external style sheet is set using the LINK tag, located in the <HEAD>...</HEAD> of the content file, as shown in the following example:
<link href= "url" rel= "stylesheet" type= "Text/css" >
Note: It is useful to share a common style sheet within a Web site, as long as you modify a public style sheet to affect all content documents that invoke that style sheet.
You can set multiple inline styles (inline style) and inline styles (link) within the same document, but when a specific document is displayed, the browser determines what style to use based on the order of those styles. (Order is very important)
Defining style rules
The CSS rule settings consist of the statements shown below:
selector {Property:value} selector { |
"Selector" defines what elements will be affected by style rules. Tight next is the declaration area, surrounded by braces "{", "}" . The interior consists of several declarations (the number of declarations is greater than or equal to zero >=0). Each declaration is separated by a semicolon ";".
Each declaration consists of a " property" and a specific value (value)that is connected by a colon. " Property " is an identifier, such as font size "font-size", Background color "Background-color" ... Wait a minute. How much of the value is to be controlled within the range of the identifier property value.
The space and the form of the branch are mainly for the convenience of reading, the blank can be added to the "note" text, examples are as follows:
Selector {/* A comment for this rule * * |
Annotations are included in/* and */, as in JavaScript, C programming language annotations.
Selectors selector
The simplest form consists of a tag name, which can be combined with a comma "," connection, and a different tag style rule, as an example:
H1 {background-color: #ffff00}
H2 {background-color: #ffff00}
h3 {background-color: #ffff00}
The style notes above are merged together and are written as follows:
H1, H2, H3 {background-color: #ffff00}
This definition is called a "group" definition. Note that the same tag can be set again, the number of times is not limited, example:
H1, H2, H3 {background-color: #ffff00}
h1 {color:red}
HTML identity names are case-insensitive, so "H1" is equivalent to "H1", but in more restrictive XHTML, the identity name must be lowercase, so it is best to have a good writing habit, suggesting that you use lowercase letters when writing your style sheet.
PatternMatching mode matching
selectors is not limited to the identity name, in fact, there are a variety of matching patterns can define the style of the element, even using the attributes of the element to define.
Internet Explorer is not currently able to support all selector matching patterns. It is recommended that you use Netscape or Opera to test the following demo.
The examples in the list illustrate the different matching patterns and explanations of selectors and the example links for online demonstrations.
| mode | description | demo |
| e | standard selector, identity name E phase With element E | |
| e F | descendant selector, if the E tag contains F, match F | |
| child selector, if F is a child of E, Matches F | ||
| e+f | adjacent selector, if E and F have the same parent identity and F is close to E, match F |
Note: The nouns "parent", "Child", "descendant", and "adjacent" refer to the hierarchical relationship structure within the document. For example, Ming:
| <div> <p>css gives your <i>very precise control</i> over how your Web ages Look. Use it to your advantage! </p> </div> |
The generic match "*" can also be used in Selector :
H2 + * {color:red}
To display any element immediately following H2 as red
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
