Home > Developer > Web Develop
Off Topic:
HTML is a structured language, and CSS is its complement; This is a style language. CSS is one of the front-end kick, so it's important to learn CSS. And I am still a rookie, so need to strengthen learning CSS. This is my note to learn the guidelines of the CSS authority, if not, please understand and point out. Thank you.
Body:
First chapter CSS and documentation
----------
1.CSS, called cascading style sheets. The reasons for using CSS are: A. Easy to use, style sheets can greatly reduce the workload of web creators; b. Using styles on multiple pages, you can create a style sheet, and then apply the stylesheet to multiple pages; c. Cascading, CSS also provides for conflict rules, which are collectively referred to as cascading; d. reducing file size, which helps to minimize Document size for faster downloads; e. Prepare for the future.
2. Elements
Elements are the basis of a document's structure, and each element in the document plays a role in the performance of the document. In CSS, at least in CSS2.1, this means that each element generates a box, also called box. In layman's words, is the box), which contains the contents of the element.
3. Replacement and non-replacement elements
In CSS, elements typically have two forms: replace and non-replacement.
* * Replacement elements (replaced Element) * *: The part of the content used to replace an element is not directly represented by the contents of the document, (x) , <input>, <textarea>, < in HTML Select>, <object> are replacement elements. These elements often have no actual content, that is, an empty element, for example: <input type= "Submit" name= "submit" value= "Submit"/> The browser displays these elements based on the label type and attributes of the element. The replaceable element also generates a box in its display.
* * Non-replacement elements (noreplaced Element) * *: Most HTML and XHTML elements are replacement elements, which means that their content is displayed by the browser in the box generated by the element itself. For example, <span>hi this was noreplaced element</span> is a non-replacement element, and the text "hi this is noreplaced element" will be displayed by the browser. The paragraph p, title 4. Element Display role
CSS2.1 also uses two other basic element types: The Block-level (Block-level) element and the inline (inline-level) element.
* * block-level elements * *
Block-level elements generate an element box (by default) that fills the content area of its parent element and cannot have other elements next to it. In other words, it generates a "delimiter" before and after the element box. The most familiar should be p and div. The replacement element can be a block-level element, but it is usually not. The list item is a special case of block-level elements. In addition to behaving in a way that is consistent with other block elements, the list item also generates a marker-the unordered table, which is usually a dot, and a number in the sequence table. This marker is "associated" to the element box. In addition, list items are the same as other block-level elements.
* * in-line elements * *
The inline element generates an element box within a line of text without interrupting the line of text. The inline element does not generate a "delimiter" before or after itself, so it can appear in the contents of another element without breaking its display. For example a element, strong element, and EM element. In HTML and XHTML, block-level elements cannot inherit inline elements (that is, they cannot be nested within inline elements), but in CSS there are no restrictions on how to display the nesting of roles. To understand how this works, consider a CSS property display below. Display has many values and is currently focused on block and inline. Consider the following markup:
```
<body>
<p>this is a paragraph with <em>an inline Element</em>within it.</p>
</body>
```
This has 2 block-level elements (body and p) and one inline element (EM). According to the XHTML specification, EM can inherit p, but not in the opposite way. In general, the XHTML hierarchy requires that inline elements inherit block-level elements, and vice versa. Unlike this, CSS does not have this limitation. As follows:
```
P{display:inline;}
Em{display:block;}
```
This causes the element to generate a block box in a inline box, which is perfectly legal. Does not violate any specification. The only problem is if you try to reverse the nested relationship of an element as follows: ' <em><p>boom</p></em> ' no matter what changes are made to the display role through CSS, it is not legal in XHTML.
5.link Marking
The basic purpose of the link tag is to allow the HTML author to associate the document that contains the link tag with other documents. CSS uses this tag to link style sheets and documents. If there is a sheet1.css style sheet to link to the HTML file, * * code ' <link rel= ' stylesheet ' type= ' text/css ' href= ' sheet1.css ' > '. This style sheet is not part of an HTML document, but is still used by an HTML document, called an external style sheet (external style sheet), in order to successfully load an external style sheet, link must be placed in the head element, But cannot be placed inside other elements (such as title). * * For the remainder of the link tag, the properties and values are straightforward, and rel stands for "Relationship (relation)", where the relationship is stylesheet. The type is always set to TEX/CSS. This value describes the type of data that is loaded with the link tag. The value of the href attribute represents the URL of the style sheet. Can be an absolute URL and a relative URL. The media property, where the value is all, indicates that the style sheet is to be applied to all of the displayed mediums. CSS2 defines a number of desirable values for this property. All: Used for all performance media. Aural: Other sound performance for speech synthesizers, screen readers, and documents. Braille: Used for Braille device performance documents. There are other values that are not described. The 3 main comparisons are all, screen and print. Note A document may have more than one linked style sheet associated with it. If so, the document initially displays only the link tag with the Rel stylesheet. Therefore, if you want to link two style sheets named Basic.css and Splach.css, you can set ' <link rel= ' stylesheet ' type= ' text/css href= ' basic.css/> < Link rel= "stylesheet" type= "Text/css href=" splash.css/> "'
Candidate style sheet-set rel to alternate stylesheet, you can define a candidate style sheet, which is used only if the user chooses this style for document performance.
[Email protected]
Similar to the link tag, the @import is used to instruct the browser to load an external style sheet and use its style when performing an HTML document. The only difference is the specific syntax and location of the command. The @import command must be placed in the style container. It will not work at all until you put it in another CSS rule.
```
<style type= "Text/css" >
@import URL (styles.css);
H1{color:gray;}
</style>
```
7.CSS comments
CSS supports annotations. Like C and C + + annotations, CSS annotations are surrounded by/* and */: '/*this is a css1 comment*/', and can span multiple lines
/* This is boom
Can be SW
Any
*/
Note You cannot nest.
8. Inline style: You can use the HTML style property to set an inline style only if you want to specify some styles for a single element without nesting and external style sheets.
```
<p style= "Color:gray" >the most wonderful</p>
```
In addition to the markup that appears outside the body (for example, head or title), the style property can be associated with any other HTML tag.
For more details, see the CSS authoritative guide
CSS Authoritative Guide Learning Note series (1) CSS and documentation
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
