Home > Developer > Web Develop
In 2014, Xin Xing interpreted css section 2, and in 2014 Xin Xing css
In the first section, we introduced the CSS workflow. I believe that readers will have a general understanding of the CSS workflow. Next, we will thoroughly study the details of CSS, these questions will improve our work.
************
1. CSS also needs to be annotated. The content in the annotation will not be interpreted and executed. It is the same as the C language. It starts with/* and ends with */. The content in the annotation will be used as a comment, we can write what we want.
2. The following is an example:
P {color: green;/* Here we will write a comment * Xin Xing CSS, grow together with the blog garden */font-size: 14px; text-align: center ;}
* ************** Selector **************
1. In the first section, we introduced the basic CSS syntax. Here we talked about the selector. In CSS, there are two class selectors with slightly special points, which we call id selector and class selector.
2. let's talk about the id selector first. In the HTML element, each element can set an attribute, Which is id, then, we use the # value with this id in CSS as the selector, and the subsequent declaration is the same as that in common writing.
3. It is a little abstract. Here is an example:
First, create a new my.html file with the following content:
<Html>Then we can write this in my.css:
#para{ color: green; font-size: 14px; text-align: center;}In the preceding example, the id of the p tag is specified in the HTML file, and its attributes are set based on the id in the css file.
4. The so-called id is unique. In the same HTML file, there cannot be two IDs which are all para, which will lead to confusion. We can use the following class to solve the problem.
5. If id is used to describe a single style, class is used to describe the style of a group of labels. class can be used in multiple elements.
6. id: # is used to add the attribute value, while class is used. I will not repeat the usage of the two because they are similar to each other. I think smart readers can already copy them.
***************
1. the selector in CSS is more flexible. There are also commonly used pseudo-classes. Below I will explain that the official syntax format of pseudo-classes is as follows:
selector:pseudo-class {property:value;}2. What does it mean, that is, selector is the selector, and pseudo-class is the corresponding pseudo class, followed by its attributes and values.
3. In fact, one of the most typical examples of pseudo classes is hyperlink. For example, we can write the following code:
The first step is to create a my.html file. The Code is as follows:
<Html>The code for listing the my.css file is as follows:
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 red color when we didn't click the hyperlink, and the blue color when our mouse passes, when our mouse clicks it and it is not released, it is black. When we access the connection, it will be green.
5. Moreover, a: hover must be placed after a: link and a: visited.
6. And a: active must be effective after a: hover.
7. We can also use the pseudo class with the class selector mentioned above. I don't think it is very common, so I will not introduce it.
8. There is also a child pseudo class, but it is not compatible with the browser, so we will not introduce it.
9. In addition, there are pseudo elements. If you are doing something important for an English website, it is of little significance for a Chinese website, so we will not talk about it.
* ************ Other selectors *********
1. CSS also supports several other selector types. The first type 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.
2. The second type is the child element selector. It selects all the 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 a greater sign.
3. In addition, the adjacent sibling selector and the ordinary adjacent sibling selector have little overall significance. They only increase the memory and learning difficulty, and are not very practical.
4. CSS also supports attribute selectors, but it is not introduced because it is not compatible with browsers.
5. also, the so-called Group selector means that several selectors use the same style. It uses commas to differentiate and connect each selector, just like multiple parameters in the parameter list of the function in C language, example:
p,td,li{color: red;}
6. There is also a general selector Statement, which is represented by a *, the following code:
p*{color: red;}The color of all paragraphs is set to red.
************
1. This section describes CSS selectors and comments.
2. Common CSS selectors include the tag selector, id selector, class selector, and pseudo-class selector. Other selector methods can be implemented in the preceding methods.
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
