Home > Developer > Web Develop
The first chapter of CSS requires HTML
First, using HTML to organize content, with CSS to make the content look more beautiful
Think about the layout structure:
(1) HTML According to the logical Division and the role of the text in the Web page, such as the
(2) Use the label that the name means closest to the content's role in the page, rather than defining the label based on the appearance of the content
(3) Simple, clear HTML can improve the ranking of web pages on the search engine site
Note: Login to the html5doctor.com website to help understand the good HTML5 tag
Second, IE conditions note
<!--[If Lt IE 9]>
<script src= "Js/html5shiv.js" ></script>
<! [endif]-->
JS code only visible prior to IE9 version
Iii. HTML tags and attributes that can be forgotten
(1) <font> to control display text
(2) Do not use <b> and <i>
<strong> is used to emphasize a word or phrase, and for lesser text, you can use the <em> tag to emphasize
(3) Do not use <table> tags for layout
(4) Do not use clumsy <body> tag attributes that can only modify the appearance of the content
(5) Do not misuse <br> tags
Note: On http://validator.w3.org, you can quickly determine if HTML is valid
Iv. Importance of DOCTYPE documentation
Explains which tags, attributes, or values are valid for a particular type of HTML. Tell the Web browser which version of HTML or XHTML you are using.
Chapter II Creating styles and style sheets
I. Interpretation of Style sheets
In most cases, it is preferable to choose an external style sheet. It makes it easier to create Web pages and update your site more quickly. For the receiving end, the external style sheet helps make the page load faster. In addition, when a Web browser downloads an external style sheet, it also saves the file on the visitor's computer for next quick access, and when a visitor jumps to another Web page that uses the same stylesheet, the browser does not have to download the stylesheet, as long as the external stylesheet is called from the cache
Note: forcing the new load ctrl+f5 to resolve the cache issue
Two, several different types of style sheets
(1) Internal style sheet
<style>
H1 {
Color: #ffffff;
font-family:arial;
}
</style>
Note: 1, <style> tags are html, not CSS
2, Javacript code is generally placed after the style sheet, many JS code is dependent on the CSS
3,HTML for the internal style only requires a start <style> tag
Previous versions: must be added type= "Text/css" as <style type= "Text/css" > if not, an error may occur.
4, http://jigsaw.w3.org/css-validator/can verify the CSS code is wrong
(2) External style sheet
1) HTML <link> tags
HTML5: <link rel= "stylesheet" href= "Css/style.css" >
HTML4.01: <link rel= "stylesheet" type= "Text/css" href= "Css/style.css" >
XHTML: <link rel= "stylesheet" type= "Text/css" href= "css/style.css"/
2) @improt Instructions for CSS
<style>
@import URL (css/syltes.css)
</style>
Special attention:
<style>
@import URL (css/form.css)
@import URL (css/syltes.css)
p {color:red;}
</style>
To write @improt before the CSS style rules, if now after, as
<style>
p {color:red;}
</style>
The browser ignores the @import URL (css/form.css), @import url (css/syltes.css)
Summary: <link> labels are more commonly used, and in some cases @import method slows down the style sheet download speed
(3) inline (not recommended)
<H1 style= "color: #666666"; Font-size:3 em; ">
Chapter III Selectors: What styles are explicitly set
One, selector type
1. Tag Selector: Overall control
H1 {
font-size:12px;
}
2. Class selector: precise control
Precise control over a specific element on a webpage, regardless of its label
Attention:
(1): There is a dot at the beginning of each selector name . Copyright Special
(2): Naming conventions for class names
1) only letters, numbers, connectors (-) and underscores (_ ) are allowed
2) must always start with a letter
3) class names are case-sensitive
. SIDEBAR and. SIDEBAR are two different classes
3. ID selector: Control special page elements
The ID selector has some special uses for JavaScript-based or very lengthy web pages.
1) naming rules, homogeneous selectors
2) Usage rules
#banner {
Background: #CC0000;
}
4. Derived selectors: All tags appearing inside a tag are added with the same style
UL Li a{
font-size:14px;
}
All link a that appears inside Li uses the size 14th font
Note: The difference between the P.intro and the P.intro: the P-Tag containing the intro class
5. Attribute Selector
6, sub-selector
(1) Angle brackets >
Body > H2
(2)
1)
: Fist-child
For example, the first child element of Li:fist-child Li
: Fist-of-type
For example, P:fist-of-type the first of all P elements
2)
: Last-child
: Last-of-type
3)
: Nth-child ()
: Nth-of-type ()
For example:
Img:nth-of-type (odd) {float:left;}
Img:nth-of-type (even} {float:right;}
The cardinality of the picture left floats, even the picture right floats
The difference between the two:
such as the first child element of Li:fist-child Li
Li:fist-of-type
The former: the 1th element under the parent element and the element is Li, if not, the selection fails
The latter: an element of the first Li type under the parent element
7. Sibling Selector
1) Neighboring sibling selector (+)
H2+p each
2) Universal Sibling Combo Selector (~)
H2~p all <p> belonging to fellow H2 (same level)
8,: not () selector exclusion
Negation pseudo-Class
For example
<p class= "Classy" >
. classy {color:red;}
P:not (. Classy) {Color:blue;} Content in () indicates what you don't want to select
Note: the NOT () selector is only used with a universal selector, element selector, class selector, ID selector, or pseudo class
9, Pseudo-class and pseudo-elements: no label, but still easy to identify the site
Pseudo-Class:
1) links commonly used in the four pseudo-class:
A:link when there is a link property
a:visited link address has been visited
A:active Activated by user
A:hover Mouse Hover
2) other Pseudo-class
: Focus when you get focused
For example, by changing the color of the text box to indicate the location to be entered (when the line text box, password box, or multiline <textarea> box)
Input:focus {}
:: Selection to be selected must be two:
For example:
p::selection {
color:red;
}
Pseudo elements:
: First-letter
: Fist-line
: Before add content before the specified element
<p class= "Tip" >
P.tip {content: "Hot Tip"}
: After to add content after the specified element
Two
1. Define a style for the label group
1) Build Group selector: Create a list of selectors with comma separators
H1, p,. Copyright, #banner {
Color: #F1d33;
}
2) Universal group selector: To define styles for all tags of a web page
* {
Font-weight:bold;
}
2. Define a style for labels within tags
1) ancestor tag: When an HTML tag covers another tag, the HTML becomes the ancestor of the tag.
2) Derived tags: labels that are inside a label or multiple labels are derived labels
3) Parent tag: The ancestor closest to a tag
4) Sub-label: A label that is directly surrounded by another tag is a sub-label
5) Sibling Tags: tags adjacent to each other and linked to the same parent tag
CSS3 Book notes 2015/12/5
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
