A: Know CSS
1: What is CSS?
CSS (cascading style Sheets) cascading style Sheets
CSS3 is an upgraded version of CSS2, 3 is the version number, it adds a lot of powerful new features on the basis of CSS2.1. The mainstream browser Chrome, Safari, Firefox, Opera, and even 360 have already supported most of the CSS3 features,
IE10 also began to fully support the CSS3.
Different browsers may require a different prefix. It indicates that the CSS property or rule has not yet become part of the World Wide Web Standard and is a private property of the browser, although the newer versions of the browser do not require a prefix.
However, for a better forward compatibility prefix is not necessary.
What can 2:css do?
CSS has a lot of effects, even animations, that need to be done before using images and scripts, and it takes just a few lines of code. such as rounded corners, picture borders, Text shadows and Box shadows, transitions, animations and so on.
CSS simplifies the design process for front-end development workers, more flexible page layouts, and faster page loading times.
You can use a CSS file to control all the Web page styles on the site, as long as you modify the corresponding code in the CSS file, then all pages of the entire site will be changed.
CSS can support a variety of devices, such as mobile phones, PDAs, printers, televisions, game consoles and so on.
Objective: To separate the performance from the structure.
3:CSS syntax structure
CSS syntax consists of three parts: selectors, attributes, and values
The property is the style property (style attribute) that you want to set.
Each property has a value. Attributes and values are separated by colons.
Selector {property:value;}
Selector Property value
Cases:
<style type= "Text/css" >
Body {background-color: #ccc;}
</style>
4: How to introduce CSS
Three methods of introduction:
A): In-line reference
Inline referencing refers to the style attribute that writes CSS style encodings directly to the HTML tag.
Note that the introduction of CSS in this way is not required to write selectors.
Cases:
<body style= "background-color:red;" >
b): In-page reference
The in-page reference is a separate part of the page and is positioned in
Cases:
<style type= "Text/css" >
Body {
Background-color: #cccccc;
}
</style>
c): External style sheet
An external style sheet is the best form of CSS app that puts CSS style code in an external file and is called by a Web page.
Cases:
STYLE.CSS:
Body {
Background-color: #cccccc;
}
Index.html:
<link rel= "stylesheet" type= "Text/css" href= "Style.css"/>
5: Priority comparison of three introduction methods
Priority is: Nearest principle
Inline references > in-page references > off-page references
6:css code Comments
CSS code comment, start with/*/end
Such as:
/* Public style */
body {margin:0px; padding:0px;}
/* Navigation style start */
#nav {
......
}
/* Navigation style End */
The 7:css selector can be divided into:
A): Wildcard selector *
* Number indicates all objects
The so-called wildcard selector means that you can select an object by using a fuzzy specified method to specify the style.
Cases:
* {
Color:blue;
margin:0;
padding:0;
}
b): element selector
The so-called element selector, which refers to the name of an existing label in a Web page as a selector.
Cases:
body{}
h1{}
p{}
c): Group selector
In addition to styling a single label, you can make the same style definition for a group of labels.
Cases:
H1,H2, H3, p {
font-size:12px;
font-family:arial;
}
Separates the selectors with commas. You only need to write the style once for the page where you want to use the same style.
d): Relationship Selector
The relationship selector can be divided into:
Selector Name Version Description
E F contains the selector CSS1 selects all f elements that are contained by the E element.
E>f Sub-selector CSS2 Select all the child elements f as the E element.
E+f adjacent selector CSS2 Select the f element that clings to the E element.
e~f Brother Selector CSS3 Select e element all sibling element F.
August 8, 2016 class knowledge notes
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
