In the previous article, we mentioned that HTML5 should have the CSS knowledge. HTML5 should have the layout and structure of the page during page design. CSS should be used to implement a very beautiful interface. Next, let's review the basic usage of css2, and then look at the relationship and difference with css3.
1. What is css?
Cascading stylesheet (cascade style sheet) to provide a form of presentation for webpages. According to w3c specifications, to design a webpage, you should write the webpage data and structure in the html file, write the webpage appearance in the css file, and write the webpage behavior in the. js file. The purpose is to separate webpage data, appearance, and behavior to facilitate code maintenance.
2. css selector:
(1) Mark selector (simple selector)
(2) class selector
. S1 {property name: property}There is also a class selector with a name, as shown below:
div.s1{font-size;120px;}(3) id Selector
#d1{font-size:italic;font-weight:900;}(4) selector Group
H1, h2, h3 {// separated by commas (,) color: bllue ;}(5) selector Derivation
#d2 p{color:red;font-size:300; }Comments in CSS
/* */Style priority:
External sample: Write the sample in the. CSS file.
Write the sample in the. html file.
Inline style: Write the style in style = ""
When a conflict occurs: external style <internal style <inline style.
Two key attributes in CSS:
(1) display attributes
There are three values:None Not Displayed
<Html> <! -- Display Properties -->
(2) position attribute
There are three values:
Static: default value. The browser places the tag in the default way (left-right, top-bottom ).
Absolute: the offset relative to the parent tag.
Relative: first place the data in the default mode, and then offset it.
Common attributes are as follows:
(1) Text-related attributes font-size: 30px; // font-style: normal (normal)/italic (italic) font-weight: 800; // 100-900 (width) font-family: ""; // font text-align: left/center/right; // line-height: 30px; // The line height is usually the same as the high value of the container in the middle of the cursor: pointer/wait; // the shape of the cursor (2) background-related attributes background-color: red; // background color background-color: #88 eeff; // Set background-color: RGB (100,100,100) in rgb format ); // you can enter the color value of the decimal number in this format: background-image: url (images/t1.jpg); // background image backgr Ound-repeat: no-repeat/repeat-x/repeat-y; // tiled background-position: 30px 20px; // (horizontal and vertical) background position background-attachment: scroll (default)/fixed; // The attach mode can also set multiple features of the background: the background color. The background image is tiled. the horizontal position of the attach mode is vertical. (3) border-left: 1px solid red; border-right: 2px dotted black; border-bottom: border-top: border: 1px solid red; (4) Location width: 100px; height: 200px; margin // margin-left: 20px; margin-right: 30px; margin-top: 40px; marg In-buttom: 50px; can be simplified to: margin: top right bottom left; margin: 40 30 50 20; padding // padding-left: padding-right: padding-top: padding-buttom: can be simplified to: padding: top right bottom left; the padding will open the parent tag (5) floating unmark the feature float of exclusive row: left/right; // float left to right: clear: both; // clear the floating effect (6) other list-style-type: none; remove the small dots of the list option. Text-decoreation: underline; // pseudo style a: link {color: red} connected by an underscore (7) to text when a: visited {color: red} is not accessed: blue} when the mouse is placed, a: action {color: green} when the mouse is clicked, a: hover {color: yellow} when the mouse leaves
The above is the basic summary of css we have learned before. Let's take a look at the characteristics of css3. First open the css3 Reference Manual (:)
First look at border-color settings border
Related attributes: border-top-color, border-right-color, border-bottom-color, border-left-color
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This setting border is only supported on Firefox.
We can see from the reference book of css3.0 that css3 has added many style attributes. We can refer to this manual for more elegant interface effects than css2. if Javascript is used together, page animation can be implemented.
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
