Home > Developer > Web Develop
Hello everybody, I am Xiao Qiang teacher, now online css+div video, either speak too deep, or too shallow, a lot of beginners students always encounter difficulties, today, Xiao Qiang teacher dedicated to everyone to prepare a video of the CSS course. Take you from the Zero Basic learning css+div until you can independently complete the front page production.
Xiao Qiang teacher is such classification, the previous classes, we will css+div the foundation, after a few days of the course we talk about case production.
We're going to talk about the basic CSS section.
The HD video address is as follows:
CSS Syntax specification: http://www.tudou.com/programs/view/8s5hRjO__YA/
CSS style sheet: http://www.tudou.com/programs/view/E6Ju8U6hP6s/
CSS display mode: http://www.tudou.com/programs/view/Ovpu0dAED78/
CSS class selector: http://www.tudou.com/programs/view/KByJxZuNdn4/
CSS ID selector and tag selector: http://www.tudou.com/programs/view/AEJrWX7_sVM/
CSS Yi Jiangnan small case: http://www.tudou.com/programs/view/cqZXij3n1mk/
CSS inheritance and layering: http://www.tudou.com/programs/view/5OOAsIsSWFo/
CSS Baidu Case: http://www.tudou.com/programs/view/B6VaJupOE2s/
Here is the notes section:
Here's our catalog for today:
1.2 CSS Preliminary Understanding (what is CSS, why to learn)
1.3 CSS Syntax specification (how to use CSS)
1.4 CSS Location Classification (CSS exactly where to write)
1.4.1 in-line style sheet
1.4.2 Inline style Sheet
1.4.3 External style sheet
1.5 Web page display mode
1.5.1 Block level display mode
1.5.2 in-line display mode
1.5.3 in-line block display mode
1.5.4 display modes for mutual conversion
1.6 Css Selector (selector) category
1.6.1 class Selector
1.6.2 ID Selector
1.6.3 Tag Selector
1.7 CSS cascading Inheritance Precedence
1.7.1 Stacking Sex
1.7.2 of inheritance
1.7.3 Priority level
Web standards
W3c
Structure XHTML table P HR BR TD img A
Performance CSS
The biggest benefit of CSS is that the structure and performance of the separation
CSS is a cascading style sheet
So why do we have to learn CSS
Note: The property values for future code tags are all placed inside the CSS.
<table width=500>
<table>
Format: Selector {property: value;}
For example: p{color:red;}
Analytical:
Selector: The final goal is to select a label. (To whom to change the style)
Several requirements:
1. First, the format of the key-value pair is taken, but the attributes and values are separated by colons.
2. The end of each key-value pair is represented by a semicolon.
3. Key-value pairs are contained within a pair of curly braces.
4. Key-value pairs can have multiple groups. (separated by semicolons)
5.font-size:12px; Font size with font-size generally all numbers with units (px)
0 except 0 do not follow the unit after.
How to use CSS
The inline style sheet is written inside the label.
The format is as follows:
<p style= "color:red;" ></p>
Mr. Xiao Qiang: this situation is as little as possible. Generally suitable for very few cases. Or to increase the weight, because the inline style sheet has the highest weight.
The inline style sheet is written in an HTML file, placed between The format is as follows:
<style type= "Text/css" >
p{color:red;}
</style>
For example:
The external style sheet is written inside the site. Create a new CSS file (the suffix name of the CSS file is. CSS)
You can access the HTML page by linking or importing it.
Mr. Xiao Qiang: vigorously advocated by
That is, my HTML file needs to use the external CSS file, how to get it to come:
First Link method:
<title> Untitled Document </title>
<link rel= "stylesheet" href= "Link.css" type= "Text/css"/>
Link This statement is also put on top of Benefits:
1. Page loading speed is fast
2. Can control multiple pages
3. Easy to unify and modify.
Second Import style sheet (relatively small, not advocated)
is to import a CSS file into another CSS file
Mr. Xiao Qiang:
1. Inline style sheet
Highest weight but only one label style can be controlled
2. Inline style sheet
Weight next but can control the entire page style
3. External style sheet (linked-import)
A file style that has the lowest weight but can control the entire site (web site)
Different elements are displayed in different ways
1.4.1 Block level display modeRep: Div P li ul ol dl ...
Characteristics:
1. Take a separate line (more overbearing) top-down display
2. Height and width can be set
PS: After assigning a wide background to the box, the entity can be displayed, which we call manifested.
Rep: span Font b i em a ....
Characteristics:
1. Display in one line. Display from left to right.
2. The width and height cannot be set.
No label is this display mode.
Empty first.
For label use: Display:inline-block; Convert inline block display mode.
Features: Both the line inside the display and the block-level width and height.
Block-level display mode to convert in-row display mode: Display
Display:inline;
After conversion:
The in-line display mode is converted to block-level display elements: Dispaly:block;
CSS Base Selector
CSS Composite Selector
First look at the base selector:
To "point". To define
Use class to refer to
Attention:
1. Must start with a point cannot be omitted.
2. The name of the following class do not use the label name does not start with a number more than the pure number.
3. Above definition, use below, class= "class name" class= "LAN"
Font-weight:bold CSS Font bolded bold = 700 equivalent
With # to define
Use ID to refer to
Focus: The difference between class selector and ID selector
1. Class selector = Mr. Xiao Qiang (name)
Multiple use No Limit
2.id selector = Xiao Qiang teacher (ID card)
Used only once and only once.
ID is much faster than class execution
Note: CSS notation
Text-align:center Text Center Alignment
Text-indent:2em; Indent 2 words in the first line
EM is a relative unit 1em is the distance of a word
line-height:25px; Row height
letter-spacing:1px Word Spacing
CSS Cascading Style Sheets
Cascading: The label style that follows will overwrite the original label style. Come from behind
Distant relatives prefer to perform the nearest tag style as a neighbor
Pupil surpasses
Dragonjet Dragon and Phoenix Wind Mouse children will make holes
Child labels will most likely inherit the style of the parent label. (The style of the general text element will inherit)
External style sheet < inline style sheet < in-line style sheet
Tag Selector < class selector < ID selector < inline style sheet
2
1 10 100 1000
You can put more than one class name in class:
The format is: Class= "class Name 1 class Name 2"
Symbols such as copyrights: must be used font-family:arial; special declaration
Tilt em change to normal font: font-style:normal
Bold strong changed to normal font font-weight:normal;
The most easy-to-understand css+div introductory learning video of Mr. Xiao Qiang, the complete study
Have a harvest. This course is aimed primarily at web effects. If you like it, please divide it.
Enjoy to other people, let more people join the web design world Oh. Video material please go to:
Http://www.xiaoqiang001.com Small strong 00 download
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
