Home > Developer > Web Develop
In the first section, we introduced the CSS workflow, I believe the reader will have a general understanding, then we will be in-depth study of CSS details, these issues will make our work more perfect.
Comment ************
1.CSS also need to comment, the contents of the note will not be interpreted to execute, it is the same as the C language, with/* beginning, with */end, where the content will be used as comments, we want to write how to write.
2. Here's an example:
p{ Color:green; /* We write notes here * Sinsing CSS, with the blog garden to grow together * * font-size:14px; Text-align:center;}Selector **************
1. We introduced the basic syntax of CSS in the first section, in which we talked about selectors, there are two types of selectors in CSS that are slightly more specific, which we call ID selectors and class selectors.
2. First say the ID selector, we in the HTML element, each element can be set a property, which is the ID, and then we use the # # in the CSS and the ID of the numeric type as the selector, the following declaration is the same as the normal wording.
3. Light is a bit abstract, we give an example below:
First create a new my.html file and write the following:
<HTML><Head> <title>2014 Sinsing CSS Tutorial Summer edition</title> <Linkrel= "stylesheet"type= "Text/css"href= "My.css"></Head><Body> <PID= "Para">Sinsing CSS, share knowledge, convey warmth</P></Body></HTML>
Then we can write it in My.css:
#para { color:green; font-size:14px; Text-align:center;}Above, we specify the ID of the P tag in the HTML file, and then set its properties in the CSS file based on the ID.
4. The so-called ID, that is unique, in the same HTML file, can not have two IDs are para, this will lead to confusion, we can use the following class to solve.
5. If the ID is used to describe a single style, then class is used to describe the style of a set of labels, and class can be used in multiple elements.
6.id uses the # number to add attribute values, while class uses the. Number plus the attribute value, because the use of the two and similar, I will not repeat, presumably smart readers can be copied out.
Pseudo-Class ***************
1.CSS selectors are more flexible, more commonly used and pseudo-class, I would like to explain, the use of pseudo-class official given syntax format is this:
{property:value;}2. What do you mean, selector is the selector, and Pseudo-class is the corresponding pseudo-class, followed by its properties and values.
3. In fact, one of the most classic examples of Pseudo-class is a hyperlink, for example, we can write the following code:
The first is to create a my.html file with the following code:
Then there is the My.css file with the following code:
A:link {color:red;} a:visited {color: green;} a:hover {color:blue;} a:active {color:black;}4. In the above CSS file we set the time when we did not click on the hyperlink is red, when our mouse passed by the time is blue, when our mouse clicked it and did not release the time, it is black, when we visited the connection, it will appear green.
5. And a:hover must be placed after A:link and a:visited to be effective.
6. The a:active must be a:hover before it is effective.
7. We can also make pseudo-classes with the class selector mentioned above, I don't feel very common, I don't introduce.
8. There is also a child pseudo-class, but the compatibility of the browser is not good, so it is not introduced.
9. In addition, there are pseudo-elements of the argument, if you do things English website, is still more important, but for Chinese websites, the meaning is not big, so also do not say.
Other selector *********
The 1.CSS also supports several other selector types, the first of which is the descendant selector, for example, if we insert a into a div, we can use a selector like div A to represent the style of a.
2. The second is the child element selector, which selects all child elements in the parent element, such as Div>a, that is, the difference between it and the first one is to replace the space with the greater than sign.
3. In addition, the adjacent sibling selector and the ordinary sibling selector, the overall sense of meaning is not significant, will only increase the memory and learning difficulties, practicality is not high.
The 4.CSS also supports the property selector, but it is not as good for browser compatibility as it is.
5. There is also the so-called Group selector, which refers to a number of selectors using the same style, it uses commas to distinguish between the various selectors, and connected, just like our C language function in the parameter list of parameters in the same way, example:
P,td,li {color: red;}6. There is also a general selector, that is, with a *, the following code:
p* {color: red;}The color of all the paragraphs will be set to red.
Summary ************
1. In this section we describe CSS selectors and annotations.
The
2.CSS commonly used selectors are tag selectors, ID selectors, class selectors, and pseudo-class selectors, and other selectors can be done in several ways.
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
