Basic knowledge of CSS

Understanding CSS Styles

CSS is all called Cascading style sheets (cascading style Sheets), which is primarily used to define the display style of HTML content within the browser, such as text size, color, font bold, and so on.

such as the following code:

One advantage of using CSS styles is that by defining a style, you can have a uniform font, font size, or color for text in different page locations.

Advantages of CSS styles

Why use CSS styles to set the appearance style of a Web page?

We want to set the 超酷的互联网 服务及时贴心 text color of the 有趣易学 three phrases "," "," "," "," "", "" "," "", "" "," "", "" "," "", "" "", "" ""

Step one: Surround these three phrases with <span></span>. ( 13 line)

Step Two: Write the following code: ( 7-8 line)

CSS Code Syntax

CSS styles consist of selectors and declarations , and declarations are made up of attributes and values , as shown in:

selectors , also called selectors, indicate the elements in the Web page to which you want to apply a style rule, as in this case, the text in all segments (p) in the page will turn blue, while other elements, such as OL, will not be affected.

declaration: in English curly braces "{}" is the declaration, the attribute and the value are separated by the English colon ":". When there are more than one statement, the middle can be a semicolon ";" Delimited, as follows:

p{font-size:12px;color:red;}

Attention:

1, the last statement may not have a semicolon, but for later modification convenient, usually plus a semicolon.

2, in order to use the style easier to read, you can write each code in a new line, as follows:

p{   font-size:12px;   color:red;}

CSS Comment Code

Just like in HTML annotations, there are comment statements in CSS: used /*注释语句*/ to mark (use in HTML <!--注释语句--> ). Just like the following code:

inline CSS style, written directly in existing HTML tags

Where can CSS styles be written?

From the form of CSS-style code insertion, the basic can be divided into the following 3 kinds: inline, embedded and external three kinds. This section first explains the inline type.

内联式 CSS style is to write CSS code directly in the existing HTML tags, such as the following code:

<p style= "Color:red" > here the text is red. </p>

Note that it is wrong to write in the start tag of the element:

<p> here the text is red. </p style= "color:red" >

and CSS style code to write in style= "" double quotes, if there are multiple CSS style code settings can be written together, separated by semicolons. The following code:

<p style= "color:red ; font-size:12px" > here the text is red. </p>

embedded CSS style, written in the current file

Now there is a task, the right editor in the "Cool Internet", "service timely intimate", "fun and easy to learn" The three short word text size modified to 18px. It would be a headache to set up the inline CSS style that we learned in the last lesson (adding sytle= "font-size:18px" to each <span> tag), this section explains a new way of embedding CSS styles to accomplish this task.

The embedded CSS style is the ability to write CSS style code between <style type= "text/css" ></style> tags. The following code is implemented to set the text in three <span> tags to red:

<style type= "Text/css" >span{color:red;} </style>

Embedded CSS styles must be written between <style></style> , and in general the embedded CSS style is written between .

external CSS style, written in a separate file

external CSS Styles (also known as outreach), is to write the CSS code in a separate external file, the CSS style file with " .css " as the extension , in

<link href="base.css" rel="stylesheet" type="text/css" />

Attention:

1. CSS style file names are named with meaningful English letters, such as MAIN.CSS.

2, rel= "stylesheet" type= "text/css" is fixed notation cannot be modified.

3, <link> label location is generally written in the

three ways to prioritize

Some of the small partners asked, if there is a situation: for the same element we have three ways to set CSS style, then which method really effective? That's what happens in the editor on the right.

1. Use 内联式 CSS to set "super cool Internet" text for 粉色 .

2. Then use 嵌入式 CSS to set the text to 红色 .

3, and finally use 外部式 the settings text 蓝色 (style.css file Settings).

But eventually you can observe that the text of the short word "super cool Internet" is set in order 粉色 .

Because these three styles are prioritized, remember their priorities:内联式 > 嵌入式 > 外部式

But embedded > external has a premise: the placement of the embedded CSS style must be behind the exterior.

As is the case with the right code editor, <link href= "Style.css" ...> code in front of <style type= "Text/css" >...</style> Code (also written in the actual development). Interested partners can try, change them in order, and see if their priority changes.

In fact, in summary, that is --就近原则（离被设置元素越近优先级别越高） .

But note that the precedence summarized above is a precondition: inline, inline, external style sheet CSS style is the same weight in the case , what is the weight of the value? It's going to be explained later.

Selector Selector

Each CSS style declaration (definition) consists of two parts, in the following form:

selector {    style;}

The part before {} is the selector, and the selector indicates the object of the style in {}, that is, which elements in the Web page the style acts on. The "Body" in the 7th line of code in the right-hand code editor, for example, is the selector.

Tag Selector

The tag selector is actually a tag in the HTML code. such as

P{font-size:12px;line-height:1.6em;}

The effect of the above CSS style code: Set the 12px font size for the P tag, and the line spacing to set the 1.6em style.

class Selector

Class selectors are most commonly used in CSS style coding.

Grammar:

. Class selector name {CSS style code;}

Attention:

1, English dot start

2, where the class selector name can be arbitrarily named (but not Chinese OH)

How to use:

The first step: Use the appropriate tags to mark the content to be modified, as follows:

<span> Timid </span>

Step Two: Use class= class selector name to set a class for the label as follows:

class= "stress"> Timid </span>

Step three: Set the class selector CSS style as follows:

. stress{color:red;} /* Add an English  dot in front of the class */

eg.

ID Selector

In many ways, the ID selector is similar to a class selector, but there are some important differences:

1. Set id= "ID name" for the label, instead of class= "class name".

2. The ID selector is preceded by the pound sign (#) , not the English dot (.).

eg.

differences between class and ID selectors

Learning the class selector and ID selector , we will find that there are a lot of similarities between them, is not the two can be common? Let's not be anxious to summarize their similarities and differences in the first few years:

same point: can be applied to any element
Different points:

1.The ID selector can only be used once in a document . Unlike class selectors, an ID selector can only be used once, and only once, in an HTML document. The class selector can be used more than once.

The following code is correct:

class= "Stress" class= "Stress"> Courage </span> to answer the questions asked by the teacher. </p>

And the following code is wrong:

id= "Stress" id= "Stress"> Courage </span> to answer the questions asked by the teacher. </p>

2 . You can use the class selector word list method to set multiple styles for an element at the same time. we can set multiple styles for one element at the same time, but only with the method of the class selector, the ID selector is not possible (the list of ID words cannot be used).

The following code is correct (see the Code Editor on the right for the full code)

. stress{color:red;}
class= "Stress bigsize"> Third grade </span> next semester, our class has a public class ...</p>

The function of the above code is to set the text color to red for the "third grade" three text and the font size to 25px.

The following code is incorrect (see the Code Editor on the right for the full code)

id= "Stressid Bigsizeid"> Third grade </span> next semester, our class has a public class ...</p>

The above code can not be implemented for the "third grade" three text set the text color is red and the font size for the effect of 25px.

Child selector

There is also a more useful selector sub-selector , the greater than symbol (>), for selecting the first generation of child elements of the specified label element. code in the right-hand code Editor:

. food>li{border:1px solid Red;}

This line of code causes the child element Li (fruit, vegetable) under the class name to add ared solid line border.

include (descendant) selectors

contains a selector , which is a space to select the Descendants element under the specified LABEL element . code in the right-hand code Editor:

. First  span{color:red;}

This line of code makes the "timid" font color red in the first paragraph of text content.

Notice the difference between this selector and the sub-selector, where the child selector (children selector) refers only to its immediate descendants, or you can understand the first generation of descendants acting on child elements. The descendant selector is an element that acts on all child descendants. The descendant selector is selected by a space, and the child selector is selected by >.

Summary:> acts on the first generation of descendants of the element, and the space acts on all descendants of the element.

Universal Selector

The universal selector is the most powerful selector, which uses a (*) number designation, which is used to match all tag elements in the HTML, using the following code to use any LABEL element in the HTML font color is all set to red:

* {color:red;}

pseudo-Class selectors

What's even more interesting is the pseudo-class selector, which is called a pseudo-class selector, which allows you to set a style for a tag that does not exist in the HTML (a state of the label), such as when we set the font color for the mouse-over state of a tag element in HTML:

a:hover{color:red;}

The previous line of code is to set the font color to red for the A-label mouse-over state. This causes the text to be added to the mouse over the font color to the red effect.

About pseudo-selectors:

About pseudo-class selectors, so far, the "pseudo-class selector" that can be compatible with all of the hover is used on the A-label: (There are many pseudo-class selectors, especially in CSS3, but because they are not compatible with all browsers, this tutorial is just about one of the most common). In fact: hover can be placed on any label, such as P:hover, but their compatibility is also very bad, so now more commonly used or a:hover combination.

Group Selector

When you want to set the same style for multiple tag elements in the HTML, you can use the grouping selector (,), which is H1, and the span label sets the font color to red:

h1,span{color:red;}

It is equivalent to the following two lines of code:

h1{color:red;} span{color:red;}

Inheritance

some styles of CSS are inherited, so what is inheritance? Inheritance is a rule that allows a style to be applied not only to a particular HTML tag element, but also to its descendants. For example, the following code: If a color is applied to the P tag, the color setting applies not only to the P tag, but also to all child element text in the P tag, where the child element is the span label.

p{color:red;} <p> She's a <span> cute </span> little girl </p>

The text in the visible p and the text in span are set to red.

Note, however, that there are some CSS styles that are not inherited. such as p{border:1px solid red;}

In the example above, the function of the code is simply to set the P tag with a border of 1 pixels, a red, a solid border line, and for the child element span is useless.

particularity

Sometimes we set a different CSS style code for the same element, so which CSS style does the element enable? Let's take a look at the following code:

p{color:red;}. First{color:green;} <p class= "First" > Third grade, I was a little girl with a <span> timid </span>. </p>

P and. First are matched to P on this tab, so what color does it show? Green is the right color, then why? Because the browser is based on weights to determine which CSS style to use, which kind of weights to use which CSS style .

Here are the rules for weights :

The weight of the label is 1, and the weight of the class selector is 10,id the maximum value of the selector is 100. For example, the following code:

/ * Weighted value is 1*/ / * Weighted value is 1+1=2*/ / * Weighted value is 10*/ / * Weighted value is 1+1+10=12*/ / * Weighted value is 100+10+1=111*/

Note: There is also a special weighted value-inheritance also has the right value but very low, some literature proposed it only 0.1, so it can be understood as the lowest weight of inheritance.

Cascade

Let's consider a question: what if there are multiple CSS styles in the HTML file that can exist for the same element and that have the same weight values for the multiple CSS styles?

cascading is in the HTML file for the same element can have more than one CSS style exists, when the same weight of the style exists, according to the order of the CSS style to decide, in the back of the CSS style will be applied .

As in the following code:

p{color:red;} P{color:green;} <p class= "First" > Third grade, I was a little girl with a <span> timid </span>. </p>

The text in the last P is set to green, which is well understood and is understood as a style that overrides the previous style.

So the previous CSS style precedence is easy to understand:

inline style sheet (inside label) > Embedded style sheet (in current file) > external style sheet (in external file).

Importance

When we do the code of the Web page, some special situations need to set the maximum weight for some styles , what should I do?

At this time we can use !important to solve.

The following code:

p{color:red!important;} P{color:green;} <p class= "First" > Third grade, I was a little girl with a <span> timid </span>. </p>

The text in the p paragraph is then displayed in red.

Note:!important to be written in front of the semicolon

Note that when a page creator does not set a CSS style, the browser displays the page in its own set of styles. And users can also set their own custom style in the browser, such as some users are accustomed to the font size to larger, so that they see the text of the page more clearly.

Notice that the style priority is: browser default Style < page maker Style < user-set style , but remember that the!important priority style is an exception and the weight is higher than the user's own style.

Basic knowledge of CSS