Home > Developer > Web Develop
A few months ago read the book-"CSS authoritative guide", before using CSS are in the W3school, or press F12 to see other people's code, this is my complete reading of the first book about CSS, feeling or harvest is very big, recently to summarize their knowledge, so I looked again, Also the spirit of restudying, while reading and writing the idea of writing this article, I hope to be able to help themselves or others.
Chapter One HTML markup and document structure
Mainly introduces the HTML and its markup
1. Labels are divided into closed labels and self-closing labels
Closed label format:< tag name > text content </tag name >
e.g.
< H1 > Words by Dogsworth</H1>
Self-closing label format:< Label Name Property _1= Property Value Property _n= property value/>
e.g.
<src= "images/cisco.jpg" alt= "My dog Cisco">
The difference between a closed label and a self-closing label is that the closing tag contains the actual content that will be displayed, whereas a self-closing tag simply gives the browser a reference to the content to be displayed. When the HTML page loads, the browser will send additional requests to the server to obtain the contents referenced by the self-closing tag.
2. Title and paragraph
In general, each of our pages will have a title (<title>), as well as a lot of paragraph tags (
3.HTML templates
The template for the simplest HTML page written in HTML5 syntax can be written like this:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8" /><title>An HTML Template</title></Head><Body><!--here is the page content -</Body></HTML>
4. Block-level elements and inline elements
Document Flow: HTML elements follow the order in which they appear in the tag, sequentially from the top of the page, under flow direction.
Block-level elements stack up and down each other along the page, with each element occupying one row. The inline elements will be tied to each other and will be folded to the next line only if the space is not sufficient to tie together.
Chapter Two how CSS Works
1.CSS rules
Selector {property: value;}
e.g.
p {color:red;}Three ways to add CSS:
A. Inline style: Written in the style attribute of the HTML tag
e.g.
<style= "color:red;" > by adding-inline CSS styling to this paragraph, you override the default styles. </ P >
B. Embed style: Inside the <style> tag in the head element of the HTML document
e.g.
<Head><!--other head elements (such as meta, title) are placed here -<styletype= "Text/css">H1{font-size: 16px;}P{Color: Blue;}</style></Head>
C. Link style: Set the style in a separate file
This file is called a style sheet. A style sheet is actually a text file with a. css extension. You can link the same style sheet file in any number of HTML pages, and each page simply adds a line of code like this
<href= "Styles.css" rel= "stylesheet"/>
2. About selectors
A. Context selector: Label 1 label 2 {declaration}
e.g.
Article p { font-weight:bold;}The above example shows that only p elements that are descendants of article will apply the following style.
B. Sub-selectors: Label 1 > Label 2 {declaration}
e.g.
Section > H2 { font-style:italic;}The above example shows that only the child element P (not all descendant elements) of the section will apply the following style.
C. Immediate sibling selector: Label 1 + label 2 {declaration}
e.g.
H2 + P { font-variant:small-caps;}The above example shows that only the sibling element p immediately following the H2 element will apply the following style.
D. General sibling selector: Label 1 ~ label 2 {declaration}
e.g.
H2 ~ a { color:red;}The above example shows that the sibling element p after the H2 element applies the following style.
E. Universal selector: [Tag] * {declaration}
e.g.
P * { color:red;}The above example shows that all elements contained in element P will apply the following style.
3.ID and Class selectors
Class selector:. The class name {declaration} indicates that the element in the HTML that class= "class name" applies the declaration.
Multi-class selectors:. Class name 1. The class name 2 {declaration} indicates that the element in the HTML class= "class name 1 class Name 2" applies the declaration.
Comparison:. Class name 1 . Class name 2 {declaration} and above, class name 1, class name 2 more than a space between, when the meaning is very different, that is, in HTML class= "class name 1" descendant elements class= "class name 2" of the child element will apply the declaration therein.
4. Attribute selectors
Label name [property name]
e.g.
Img[title] { border:2px solid blue;}The above example shows that the IMG element with the title attribute applies the following style.
5. Property value Selector
Label name [Property name = "Property value"]
e.g.
img[title= "Red Flower"] { border:4px solid green;}The above example shows that an IMG element with the Title property value of red flower will apply the following style.
6. Pseudo-Class
Pseudo-classes are called because they are similar to classes, but no classes are actually attached to tags in tags. There are two types of pseudo-classes:
UI (user Interface, UI) pseudo-class: Applies a CSS style to an HTML element when it is in a certain state, such as when the mouse pointer is over a link.
Structured pseudo-class: Applies a CSS style to the corresponding element when there is a structure relationship in the tag, such as when an element is the first or last of a set of elements.
A.ui pseudo-Class
such as link pseudo-Class (: Link,: visited,: hover,: Active),: Focus,:target
B. Structured pseudo-class
such as: First-child and: Last-child,:nth-child
7. Pseudo-Elements
A pseudo-element is an element in your document that has no real elements.
such as: First-letter,:first-line,:before and: After
8. Source of the style
A. Browser Default style sheet
B. User style sheet
C. Author link style sheets (in the order in which they are linked to the page)
D. Author embedding style
E. Author in-line style
9. Cascading rules
A. Find all the declarations applied to each element and attribute;
B. Sorting by order and weight
C. Sort by specified degree
Calculation of the degree of specificity: I (ID)-C (Class)-E (Element)
E. Order-Determining weights
If two rules affect the same attribute of an element, and their specificity is the same, then the rule with the most lower (or later declared) position wins
Chapter III Positioning elements
1. Box model
A box model is a rectangular box created by the browser for each HTML element in the page, and the HTML page is actually made up of a bunch of boxes.
The box model is mainly used for block-level elements,
For the width of a box:
A. The width property of an element is not explicitly set (that is, auto)
The element should be filled with the parent element space at this time, the parent element width is: (margin * 2) + (Border * 2) + (padding * 2) + content
B. Setting the Width property of an element explicitly
At this point the width of the content of the element is what you set, and the total width of the element occupies: (Margin * 2) + (Border * 2) + (padding * 2) + width
Well, what we're talking about is a standard box model, but there's a box model called IE box model.
The difference between the IE box model: this element (content + padding + border) is the width of the set, so that the total width of the element occupied becomes: (margin * 2) + width
For these two different box models, the CSS3 added a property to control which model to choose
Box-sizing:content-box | Border-box | Inherit
Content-box: Default attribute, which indicates that the standard box model is applied
Border-box: Indicates the application of IE box model
Inherit: Represents the inheritance of this property from the parent element
2. Floating and Clearing
please refer to another article I wrote, " clear floating Brief introduction "
3. Positioning
The core of the CSS layout is the Position property
position:static | Relative | Absolute | Fixed
static: Default property, typically not set, is laid out according to normal document flow
Relative: relative positioning, relative to its location in the document flow, can use the top, right, bottom, and left properties to change its position
Absolute: absolute positioning, and more importantly, it is out of the normal flow of the document, it will be relative to its definition context (if its ancestor element of the position attribute is relative, then this ancestor element is its positioning context, if not, The positioning context is the body), you can also use the top, right, bottom, and left properties to change its position
Fixed: Stationary positioning, which is also out of normal document flow, is similar to absolute positioning, but the difference is that the positioning context of a fixed positioning element is a viewport, and using the top, right, bottom, and left properties can change its position
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
